web前端面试题及答案

时间:2018-03-19 面试试题 我要投稿

  一些面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题,如下是中国人才给大家整理的,希望对大家有所作用。

  web前端面试题及答案

  HTML/CSS部分

  1、什么是盒子模型?

  在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

  2、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

  行内元素:a、b、span、img、input、strong、select、label、em、button、textarea

  块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

  空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

  3、CSS实现垂直水平居中

  一道经典的问题,实现方法有很多种,以下是其中一种实现:

  HTML结构:

  CSS:

  .wrapper{position:relative;}

  .content{

  background-color:#6699FF;

  width:200px;

  height:200px;

  position: absolute; //父元素需要相对定位

  top: 50%;

  left: 50%;

  margin-top:-100px ; //二分之一的height,width

  margin-left: -100px;

  }

  4、简述一下src与href的区别

  href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

  src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

  5、什么是CSS Hack?

  一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。

  IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack(详细参考CSS文档:css文档)。例如:

  // 1、条件Hack

  // 2、属性Hack

  .test{

  color:#090\9; /* For IE8+ */

  *color:#f00; /* For IE7 and earlier */

  _color:#ff0; /* For IE6 and earlier */

  }

  // 3、选择符Hack

  * html .test{color:#090;} /* For IE6 and earlier */

  * + html .test{color:#ff0;} /* For IE7 */

  6、简述同步和异步的区别

  同步是阻塞模式,异步是非阻塞模式。

  同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;

  异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

  7、px和em的区别

  px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。

  浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

  8、什么叫优雅降级和渐进增强?

  渐进增强 progressive enhancement:

  针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

  优雅降级 graceful degradation:

  一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

  区别:

  a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给

  b. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要

  c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

  9、浏览器的内核分别是什么?

  IE: trident内核

  Firefox:gecko内核

  Safari:webkit内核

  Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核

  Chrome:Blink(基于webkit,Google与Opera Software共同开发)

  JavaScript部分

  1、怎样添加、移除、移动、复制、创建和查找节点?

  1)创建新节点

  createDocumentFragment() //创建一个DOM片段

  createElement() //创建一个具体的元素

  createTextNode() //创建一个文本节点

  2)添加、移除、替换、插入

  appendChild() //添加

  removeChild() //移除

  replaceChild() //替换

  insertBefore() //插入

  3)查找

  getElementsByTagName() //通过标签名称

  getElementsByName() //通过元素的Name属性的值

  getElementById() //通过元素Id,唯一性

  2、实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。

  /**

  * 对象克隆

  * 支持基本数据类型及对象

  * 递归方法

  */

  function clone(obj) {

  var o;

  switch (typeof obj) {

  case "undefined":

  break;

  case "string":

  o = obj + "";

  break;

  case "number":

  o = obj - 0;

  break;

  case "boolean":

  o = obj;

  break;

  case "object": // object 分为两种情况 对象(Object)或数组(Array)

  if (obj === null) {

  o = null;

  } else {

  if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {

  o = [];

  for (var i = 0; i < obj.length; i++) {

  o.push(clone(obj[i]));

  }

  } else {

  o = {};

  for (var k in obj) {

  o[k] = clone(obj[k]);

  }

  }

  }

  break;

  default:

  o = obj;

  break;

  }

  return o;

  }

  3、如何消除一个数组里面重复的元素?

  // 方法一:

  var arr1 =[1,2,2,2,3,3,3,4,5,6],

  arr2 = [];

  for(var i = 0,len = arr1.length; i< len; i++){

  if(arr2.indexOf(arr1[i]) < 0){

  arr2.push(arr1[i]);

  }

  }

  document.write(arr2); // 1,2,3,4,5,6

  4、想实现一个对页面某个节点的拖曳?如何做?(使用原生JS)。

  5、在Javascript中什么是伪数组?如何将伪数组转化为标准数组?

  伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

  function log(){

  var args = Array.prototype.slice.call(arguments);

  //为了使用unshift数组方法,将argument转化为真正的数组

  args.unshift('(app)');

  console.log.apply(console, args);

  };

  6、Javascript中callee和caller的作用?

  caller是返回一个对函数的引用,该函数调用了当前函数;

  callee是返回正在被执行的function函数,也就是所指定的function对象的正文。

  7、请描述一下cookies,sessionStorage和localStorage的区别

  sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

  web storage和cookie的区别

  Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

  除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。

  8、手写数组快速排序

  关于快排算法的详细说明,可以参考阮一峰老师的文章快速排序

  “快速排序”的思想很简单,整个排序过程只需要三步:

  (1)在数据集之中,选择一个元素作为”基准”(pivot)。

  (2)所有小于”基准”的元素,都移到”基准”的左边;所有大于”基准”的元素,都移到”基准”的右边。

  (3)对”基准”左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止。

  9、统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。

  var str = "aaaabbbccccddfgh";

  var obj = {};

  for(var i=0;i

  var v = str.charAt(i);

  if(obj[v] && obj[v].value == v){

  obj[v].count = ++ obj[v].count;

  }else{

  obj[v] = {};

  obj[v].count = 1;

  obj[v].value = v;

  }

  }

  for(key in obj){

  document.write(obj[key].value +'='+obj[key].count+' '); // a=4 b=3 c=4 d=2 f=1 g=1 h=1

  }

  10、写一个function,清除字符串前后的空格。(兼容所有浏览器)

  function trim(str) {

  if (str && typeof str === "string") {

  return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符

  }

  }

  面试官爱问的问题

  01、原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的?

  02、你遇到过比较难的技术问题是?你是如何解决的?

  03、设计模式 知道什么是singleton, factory, strategy, decrator么?

  04、常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?

  05、页面重构怎么操作?

  06、列举IE与其他浏览器不一样的特性?

  07、99%的网站都需要被重构是那本书上写的?

  08、什么叫优雅降级和渐进增强?

  09、是否了解公钥加密和私钥加密。

  10、WEB应用从服务器主动推送Data到客户端有那些方式?

  11、对Node的优点和缺点提出了自己的看法?

  12、你有用过哪些前端性能优化的方法?

  13、http状态码有那些?分别代表是什么意思?

  14、一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好)

  15、部分地区用户反应网站很卡,请问有哪些可能性的原因,以及解决方法?

  16、从打开app到刷新出内容,整个过程中都发生了什么,如果感觉慢,怎么定位问题,怎么解决?

  17、除了前端以外还了解什么其它技术么?你最最厉害的技能是什么?

  18、你用的得心应手用的熟练地编辑器&开发环境是什么样子?

  19、对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?

  20、你怎么看待Web App 、hybrid App、Native App?

  21、你移动端前端开发的理解?(和 Web 前端开发的主要区别是什么?)

  22、你对加班的看法?

  23、平时如何管理你的项目?

  24、说说最近最流行的一些东西吧?常去哪些网站?

  25、如何设计突发大规模并发架构?

  26、是否了解开源的工具 bower、npm、yeoman、grunt、gulp,一个 npm 的包里的

  package.json 具备的必要的字段都有哪些?(名称、版本号,依赖)

  每个模块的代码结构都应该比较简单,且每个模块之间的关系也应该非常清晰,随着功能和迭代

  次数越来越多,你会如何去保持这个状态的?

  27、Git知道branch, diff, merge么?如何设计突发大规模并发架构?

  28、当团队人手不足,把功能代码写完已经需要加班的情况下,你会做前端代码的测试吗?

  29、知道什么是SEO并且怎么优化么? 知道各种meta data的含义么?

  30、移动端(Android IOS)怎么做好用户体验?

  31、简单描述一下你做过的移动APP项目研发流程?

  32、你在现在的团队处于什么样的角色,起到了什么明显的作用?

  33、你认为怎样才是全端工程师(Full Stack developer)?

  34、介绍一个你最得意的作品吧?

  35、你有自己的技术博客吗,用了哪些技术?

  36、对前端安全有什么看法?

  37、是否了解Web注入攻击,说下原理,最常见的两种攻击(XSS 和 CSRF)了解到什么程度?

  38、项目中遇到国哪些印象深刻的技术难题,具体是什么问题,怎么解决?。

  39、最近在学什么东西?

  40、你的优点是什么?缺点是什么?

  41、如何管理前端团队?

  42、最近在学什么?能谈谈你未来3,5年给自己的规划吗?

相关文章