a_Keri
a_Keri

web前端面试题总结

web前端常见面试题总结

1.为何选择前端这个方向？

  • 对前端很感兴趣，之前也接触过其他语言，但是直到接触前端才发现真的有兴趣做下去，兴趣是一个人最好的老师。
  • 前端很有前途，像现在node.js,rn,微信小程序这类工具和框架可以让前端进行后端和移动开发，所以我觉得前端的前途会更多一点。
2.谈谈你对前端的理解？
  • 目前前端工程师最核心的技能还是：Html,CSS，JS。前端负责的是用户可以看到的部分，所以也是最接近用户的工程师，同时在产品研发流程中前端要同时与产品，设计，后端等很多人合作。
3.Vue双向数据绑定的实现？
  • vue.js则是采用数据劫持结合开发者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者(文本节点则是作为订阅者)，在收到消息后执行相应的更新操作。
4.react和vue有哪些不同，说说你对这两个框架的看法？
  • 都用了virtual dom 的方式，性能都很好
  • ui上都是组件化写法，开发效率很高
  • vue是双向数据绑定，react是单项数据绑定，当工程规模比较大时双向数据绑定会很难维护
  • vue适合不会持续的小型web应用，使用vue.js能带来短期内较高的开发效率，否则采用react

5.let和const的区别？

  • let声明的变量可以改变，值和类型都可以改变，没有限制。
  • const声明的变量不得改变值

6.平时用了es6的那些特性？

  • let,const,箭头函数，字符串模板，class类，模板化promise

7.浏览器原生支持module吗？如果支持会带来那些遍历？

  • 不支持
8.介绍一下你对webpack的理解，和gulp有什么不同？
  • Webpack是模块打包工具，他会分析模块间的依赖关系，然后使用loaders处理它们，最后生成一个优秀化并且合并后的静态资源。
  • gulp是前端自动化工具，能够优化前端工作流程，比如合并压缩。

9.Webpack打包速度慢，你觉得可能的原因是什么？该如何解决模块太多？

  • Webpack可以配置externals来将依赖库指向全局变量，从而不再打包这个库

10.http响应中content-type包含哪些内容？

    请求中的消息主体是用何种方式编码
    application/x-www-form-urlencoded
    这是最常见的 POST 提交数据的方式 按照 key1=val1&key2=val2 的方式进行编码
    application/json
    告诉服务端消息主体是序列化后的 JSON 字符串

11. position:absolute和float属性的异同？

  • 共同点 ：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
  • 不同点 ：float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。absolute会覆盖文档流中的其他元素。

12：平时是怎么学新技术的

  • 伯乐在线 infoq 掘金 简书 慕课网

13：Node，Koa用的怎么样

  • koa是一个相对于express来说,更小,更健壮,更富表现力的Web框架，不用写回调
  • koa是从第一个中间件开始执行，遇到next 进入下一个中间件，一直执行到最后一个中间件，在逆序async  await 语法的支持

14：使用模块化加载时，模块加载的顺序是怎样的，如果不知道，根据已有的知识，你觉得顺序应该是怎么样的

  • commonjs 同步 顺序执行
  • AMD 提前加载，不管是否调用模块，先解析所有模块 requirejs 速度快 有可能浪费资源
  • CMD 提前加载，在真正需要使用(依赖)模块时才解析该模块 seajs 按需解析 性能比AMD差

15: 介绍一下闭包和闭包常用场景

  • 闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.
  • 应用场景 设置私有变量和方法
  • 不适合场景：返回闭包的函数是个非常大的函数
  • 闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

16: 为什么会出现闭包这种东西，解决了什么问题

  • 受JavaScript链式作用域结构的影响，父级变量中无法访问到子级的变量值，为了解决这个问题，才使用闭包这个概念

17: 介绍一下你所了解的作用域链,作用域链的尽头是什么，为什么

  • 每一个函数都有一个作用域，比如我们创建了一个函数，函数里面又包含了一个函数，那么现在  就有三个作用域，这样就形成了一个作用域链。
  • 作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域链往上找。

18: 简述Ajax的过程？，主要用到哪些状态码

  • 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
  • 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
  • 设置响应HTTP请求状态变化的函数.
  • 发送HTTP请求.
  • 获取异步调用返回的数据.
  • 使用JavaScript和DOM实现局部刷新.

当前状态readystate
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
常用状态码status
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改）

18：对自己未来的规划是怎样的

  • 对于刚毕业的人来说，前两年是很重要的，先打好基础，多提升js能力。三至四年在提升JS能力的同时，开始要往多方面发展，前端工程师远远不仅是JS而已。制作一个性能高、交互好、视觉美的页面，需要从前端框架选型、架构设计、构建工具，到后端通信机制、设计与交互、网络和浏览器优化等各方面的知识。一专多长才是前端工程师的终极目标。

19: 说说你知道JavaScript的内存回收机制

  • 垃圾回收器会每隔一段时间找出那些不再使用的内存，然后为其释放内存。
  • 一般使用标记清除方法  当变量进入环境 标记为进入环境，离开环境标记为离开环境
  • 还有引用计数方法
  • 堆栈
  • stack 为自动分配的内存空间，它由系统自动释放；而 heap 则是动态分配的内存，大小不定也不会自动释放。
  • 基本数据类型存放在栈中
  • 引用类型 存放在堆内存中， 首先从栈中获得该对象的地址指针，然后再从堆内存中取得所需的数据

20：UMD规范和ES6模块化，Commonjs的对比

  • CommonJS是一个更偏向于服务器端的规范。用于NodeJS 是同步的
  • AMD是依赖前置的
  • CMD推崇依赖就近，延迟执行。可以把你的依赖写进代码的任意一行
  • AMD和CMD都是用difine和require，但是CMD标准倾向于在使用过程中提出依赖，就是不管代码写到哪突然发现需要依赖另一个模块，那就在当前代码用require引入就可以了，规范会帮你搞定预加载，你随便写就可以了。但是AMD标准让你必须提前在头部依赖参数部分写好（没有写好？ 倒回去写好咯）。这就是最明显的区别。
  • UMD写一个文件需要兼容不同的加载规范

ES6通过import 、export 实现模块的输入输出。其中import命令用于输入其他模块提供的功能，export命令用于规定模块的对外接口。

21：http请求头
  • get post delete put head options trace connect
  • OPTIONS：返回服务器针对特定资源所支持的HTTP请求方法
22.框架问题
什么是 MVVM , 和 MVC 是什么区别, 原理是什么?
  • mvc的界面和逻辑关联紧密，数据直接从数据库读取，必须通过Controller来承上启下，通信都是单向的。mvvm的View 和 ViewModel可以互相通信，界面数据从viewmodel中获取。
父子组件怎么通信的?
  • vue：父组件是通过props属性给子组件通信 ,子组件是通过$emit,$on通信
  • react：props传递  父给子传一个回调函数 将数据传给父亲处理
兄弟组件怎么通信的?
  • vuex 建立一个vue实例 emit触发事件 on监听事件
　　redux  子A -> 父 -> 子B
生命周期有哪些, 怎么用?
  • beforecreated ：el 和 data 并未初始化  
  • created :完成了 data 数据的初始化，el没有 
  • beforeMount ：完成了 el 和 data 初始化 
  • mounted  ：完成挂载　　updated；destroyed
  • react：初始化阶段、运行中阶段、销毁阶段
  • 初始化getDefaultProps() 和getInitialState()初始化
  •  componentWillMount() 在组件即将被渲染到页面render() 组件渲染
  •  componentDidMount() 组件被渲染到页面上，
  • 运行中shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() 
  • 销毁componentWillUnmount() 
23：清除浮动
  • 两种原理：
(1)、利用clear属性进行清理
具体的实现原理是通过引入清除区域，这个相当于加了一块看不见的框把定义clear属性的元素向下挤 
父容器结尾插入空标签

利用CSS伪元素：
.clearfix:after {
  content: ".";
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}
通过将这个类添加到父容器当中，会在父容器的末尾增加了一个高度为0、具有清除属性的、不可见的块级元素。
(2)、将父容器形成BFC
BFC能清理浮动主要运用的是它的布局规则：
  • 内部的Box会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算
浮动清理利用的主要是第六条规则，只要将父容器触发为BFC，就可以实现包含的效果。
那么触发BFC有哪几种方法？
1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block, table-cell, table-caption, flex, inline-flex

5.overflow不为visible

24.前端性能优化
  • 减少http请求 使用sprite图、合并js和css文件
  • 使用cdn 将用户安排在近的服务器上
  • 使用缓存 缓存ajax 使用外部的css和js以便缓存 使用expire cach-control etag
  • 压缩资源 使用gzip压缩js和css文件
  • 代码层面 避免使用样式表达式、通配符选择器、样式放在顶部、脚本放在底部
25.事件模型和事件代理
  • 事件三个阶段：事件捕获，目标，事件冒泡（低版本ie不支持捕获阶段）
  • w3c绑定事件target.addEventListener(event,handler,false)
  • 解绑target.removeEventListener(eventType, handler, false )
  • ie绑定 target.attachEvent(on+event, handler)
  • 解绑target.detachEvent("on"+eventType, handler)
事件代理优点：
  • 可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒
  • 可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适
26.将url的查询参数解析成字典对象
function getQueryObject(url) {
    url = url == null ? window.location.href : url;
    var search = url.substring(url.lastIndexOf("?") + 1);
    var obj = {};
    var reg = /([^?&=]+)=([^?&=]*)/g;
    search.replace(reg, function (rs, $1, $2) {
        var name = decodeURIComponent($1);
        var val = decodeURIComponent($2);               
        val = String(val);
        obj[name] = val;
        return rs;
    });
    return obj;
}
 
getQueryObject("http://www.cnblogs.com/leee/p/4456840.html?name=1&dd=ddd**")
Object {name: "1", dd: "ddd**"}
　　
27.position的值， relative和absolute分别是相对于谁进行定位的？
  • relative :相对定位，相对于自己本身在正常文档流中的位置进行定位。
  • absolute :生成绝对定位，相对于最近一级定位不为static的父元素进行定位。
  • fixed : 生成绝对定位，相对于浏览器窗口或者frame进行定位。
  • static :默认值，没有定位，元素出现在正常的文档流中。
   28.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
选择符 ：
  • id选择器（#myId）;
  • 类选择器（.myClassName）;
  • 标签选择器（div,p,h1）;
  • 相邻选择器（h1 + p）;
  • 子选择器（ul > li）;
  • 后代选择器（li a）;
  • 通配符选择器（*）;
  • 属性选择器（button[disabled="true"]）;
  • 伪类选择器（a:hover,li:nth-child）;表示一种状态
  • 伪元素选择器（li:before、:after,:first-letter,:first-line,:selecton）;表示文档某个部分的表现
优先级 ：

!important > 行内样式（比重1000） > id（比重100） > class/属性（比重10） > tag / 伪类（比重1）;

伪类和伪元素区别 ：
  • 伪类：a:hover,li:nth-child；
  • 伪元素：li:before、:after,:first-letter,:first-line,:selector;
39.两个数组合并成一个数组排序返回
先依次比较两个数组，按照小的就传入新的数组。当这次比较完之后可能有一个数组的长度很长，留下一些数组，然后在新数组的末尾插入即可。
functiongetRes(arr1, arr2){
   var len1 = arr1.length,
       len2 = arr2.length,
       i = 0,
       j = 0,
       k = 0,
       res = new Array(len1+len2);
 
       while(i < len1 && j res[k++] = arr[(arr[i] > arr[j]) ? j++ : i++];
}
While(i < len1)   res[k++]= arr1[i++];
While(j < len2)   res[k++]= arr2[j++];
Return res;

}

40.zepto和jquery区别
  • zepto比jquery体积小很多，移动端的兼容性不需要要考虑很多，jquery中的很多功能都没有。
  • width()和height()不一样  解决用.css('width')
41.css3动画和jquery动画的差别
  • css3中的过渡和animation动画都是基于css实现机制的，属于css范畴之内，并没有涉及到任何语言操作。效率略高与jQuery中的animate()函数，但兼容性很差。
  • jQuery中的animate()函数可以简单的理解为css样式的“逐帧动画”，是css样式不同状态的快速切换的结果。效率略低于css3动画执行效率，但是兼容性好。‍

42.如何解决ajax无法后退的问题

HTML5里引入了新的API，即：history.pushState, history.replaceState
可以通过pushState和replaceState接口操作浏览器历史，并且改变当前页面的URL。

onpopstate监听后退

43.实现一个once函数

function test () {console.log('test')}
var once = function (fn) {
  var isFirst = true;
  return function () {
    if (isFirst) {
      isFirst = !isFirst;
      fn();
    }
  };
};

var b = once(test);
b(); // 'test'
b(); // nothing
 
44.分域名请求图片的原因和好处
  • 浏览器的并发请求数目限制是针对同一域名的，超过限制数目的请求会被阻塞
  • 浏览器并发请求有个数限制，分域名可以同时并发请求大量图片
45.页面的加载顺序
    html顺序加载，其中js会阻塞后续dom和资源的加载，css不会阻塞dom和资源的加载但是会阻塞js的加载。
浏览器会使用prefetch对引用的资源提前下载
  • 没有 defer 或 async，浏览器会立即加载并执行指定的脚本
  • 有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(下载异步，执行同步，加载完就执行)。
  • 有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
46.生成10个20-50之间的随机数，存在数组中，常见排序方法，数组乱序方法
var arr = [];
for(var i = 0;i<10;i++){
    var num = Math.random()*30 + 20;
    num = parseInt(num, 10);
    arr.push(num);
}
arr.sort(function(a,b){
    return 0.5 - Math.random();
})
47.计算机网络的分层概述
  • tcp/ip模型：从下往上分别是链路层，网络层，传输层，应用层
  • osi模型：从下往上分别是物理层，链路层，网络层，传输层，会话层，表示层，应用层。
48.jscss缓存问题
浏览器缓存的意义在于提高了执行效率，但是也随之而来带来了一些问题，导致修改了js、css，客户端不能更新
都加上了一个时间戳作为版本号

49.setTimeout,setInterval,requestAnimationFrame之间的区别
  • setInterval如果函数执行的时间很长的话，第二次的函数会放到队列中，等函数执行完再执行第二次，导致时间间隔发生错误。
  • 而settimeout一定是在这个时间定时结束之后,它才会执行
  • requestAnimationFrame是为了做动画专用的一个方法，这种方法对于dom节点的操作会比较频繁。
50.webpack常用到哪些功能

  • 设置入口  设置输出目 设置loader  extract-text-webpack-plugin 将css从js代码中抽出并合并 处理图片文字等功能 解析jsx解析bable
51.介绍sass

  • sass是一门编程语言，css是一门标记语言，sass是一种css开发工具，可以预编译css,sass提供了很多遍历的写法：例如自定义变量，if语句，循环，嵌套，继承，混合
52.websocket和ajax轮询
Websocket是HTML5中提出的新的协议 ，注意，这里是协议，可以实现客户端与服务器端的通信，实现服务器的推送 功能。
其优点就是，只要建立一次连接，就可以连续不断的得到服务器推送的消息，节省带宽和服务器端的压力。
ajax轮询模拟长连接就是每个一段时间（0.5s）就向服务器发起ajax请求，查询服务器端是否有数据更新

其缺点显而易见，每次都要建立HTTP连接，即使需要传输的数据非常少，所以这样很浪费带宽

53.tansition和margin的百分比根据什么计算

  • transition是相对于自身,margin相对于参照物
54.冒泡排序、快速排序、去重、查找字符串最多值
//冒泡排序
var bubbleSort = function(arr) {
   for (var i = 0; i < arr.length-1; i++) {
     for (var j = i+1; j < arr.length; j++) {
       if (arr[i]>arr[j]) {
         var temp = arr[i];
         arr[i] = arr[j];
         arr[j] = temp;
       }
     }
   }
   return arr;
};
　　
//快速排序
var quickSort = function(arr) {
  if (arr.length <= 1) {
    return arr;
  }
  var len = arr.length;
  var midIndex = Math.floor(len/2);
  var mid = arr.splice(midIndex,1);
  var left = [];
  var right = [];
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] < mid) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  return quickSort(left).concat(mid,quickSort(right))
}
　　
// 去重
 var distinct = function(arr) {
   var map = {};
   var result = [];
   for (var i = 0; i < arr.length; i++) {
      if (!map[arr[i]]) {
        map[arr[i]] = true;
        result.push(arr[i]);
      }
   }
   return result;
 }
　　
//查找字符串中最多的值
var search = function(str) {
  var json = {};
  var max = 0;
  var char;
  for (var i = 0; i < str.length; i++) {
    if (!json[str[i]]) {
      json[str[i]]=1;
    } else {
      json[str[i]]++;
    }
  }
  console.log(json);
  for(var i in json){
        if(json[i]>max){
                max = json[i];
                char = i;
        }
}
  console.log(max, char);

}

55.函数组合继承
原型继承、构造函数继承、call aplly继承
var Super = function(name){
  this.name = name;
}
Super.prototype.func1 = function() { console.log('func1'); }
var Sub = function(name,age) {
  Super.call(this, name);
  this.age = age;
}

Sub.prototype = new Super();

56.事件绑定
var addEvent = function(e, type, handler, capture ) {
  if (e.addEventListener) {
    e.addEventListener(type, handler, capture);
  } else if (e.attachEvent) {
    e.attachEvent('on'+type, handler);
  } else {
    e['on'+type] = handler;
  }
}
57.浅克隆和深度克隆
 
//浅克隆
function extendCopy(p) {
　　　　var c = {};
　　　　for (var i in p) { 
　　　　　　c[i] = p[i];
　　　　}
　　　　c.uber = p;
　　　　return c;
　}
//深度克隆
var clone = function(v) {
  var o = v.constructor === Array ? [] : {};
  for (var i in v) {
    o[i] = typeof v[i] === "Object" ? clone(v[i]) : v[i];
  }
  return o;
}
58.实现一个秒针绕一点转动的效果
          animation: move 60s infinite steps(60);  
         /*设置旋转的中心点为中间底部*/  
          transform-origin: center bottom;  
        /*旋转从0度到360度*/  
        @keyframes move {  
            from {  
                transform: rotate(0deg);  
            }  
            to {  
                transform: rotate(360deg);  
            }  

        }  

59.移动端兼容问题
  • IOS移动端click事件300ms的延迟响应一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发，css增加cursor:pointer就搞定了

60.对前端界面工程师这个职位是怎么理解的？

  • 前端是最贴近用户的程序员，前端的能力就是能让产品从90分进化到100分，甚至更好
  • 参与项目，快速高质量完成时限效果图，精确到1px
  • 与团队成员，UI设计，产品经理沟通
  • 做好页面结构，页面结构和用户体验
  • 支队服务器的优化，拥抱最新的前端技术










你可能感兴趣的:(web前端面试题总结)