web常见面试题总结

1、SPA首屏加载慢如何解决

动态懒加载、按需加载、使用CDN缓存

2、Vue里面router-link在电脑有用，在android机上没反应

Vue路由在android机上有问题（babel问题），安装babel polypill 插件解决。

3、Vue2中注册router-link上事件无效解决方法

使用@click.native （原因：router-link 会阻止click事件，.native指直接监听一个原生事件）

4、Vue中的router-link在IE和Firefox中不起作用（路由不跳转）

方法一：使用a标签，不用button标签。
方法二：使用button标签 和 Router.navigate方法。

5、axios的特点

1、从浏览器中创建XMLHttpRequests
2、node.js创建http请求。
3、支持Promise API
4、拦截请求和响应。
5、转换请求和响应数据。
6、取消请求。
7、自动缓存json。

6、params 和 query的区别

1、params用name引入；query用path引入。
2、params在浏览器地址栏中显示参数；query不显示。
3、params刷新会丢失params里面的数据；query刷新不会丢失。

7、vue初始化页面闪动问题

使用vue开发时，在vue初始化之前，由于div是不归vue管理的，所以我们写的代码在还没有解析的情况下容易出现花屏情况。首先在css里加上

[v-cloak] {
display: none:
}

如果还是没有彻底解决，则在根元素加上：

style="display: none" :style="{display: 'block'}"

8、vue更新数组时触发视图更新的方法

push() pop() shift() unshift() sort() splice() reverse()

9、vue 修改打包后静态资源路径的修改

cli2版本：将config/index.js里的assetsPubilcPath的值改为“./”
cli3版本：在根目录下新建vue.config.js文件，然后再加上以下内容：

module.exports= {
	publicPath: '',//相当于HTML页面（目录相同）
}

10、对前端模块化的认识

• AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
• CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

• AMD 是提前执行，
• CMD 是延迟执行

• AMD推荐的风格通过返回一个对象做为模块对象；
• CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

11、浅谈性能优化

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。
缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等。
请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
请求宽带：压缩文件，开启GZIP。

代码层面的优化：

• 用hash-table来优化查找；
• 少用全局变量；
• 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能；
• 用setTimeout来避免页面失去响应；
• 缓存DOM节点查找的结果；
• 避免使用CSS Expression；
• 避免全局查询；
• 避免使用with(with会创建自己的作用域，会增加作用域链长度)；
• 多个变量声明合并；
• 避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率；
• 尽量避免写在HTML标签中写Style属性；

移动端性能优化：

• 尽量使用css3动画，开启硬件加速。
• 适当使用touch事件代替click事件。
• 避免使用css3渐变阴影效果。
• 可以用transform: translateZ(0)来开启硬件加速。
• 不滥用Float。Float在渲染时计算量比较大，尽量减少使用
• 不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
• 合理使用requestAnimationFrame动画代替setTimeout
• CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
• PC端的在移动端同样适用

12、什么是Etag

当发送一个服务器请求时，浏览器首先会进行缓存过期判断。浏览器根据缓存过期时间判断缓存文件是否过期。

情景一：若没有过期，则不向服务器发送请求，直接使用缓存中的结果，此时我们在浏览器控制台中可以看到 200 OK(from cache)，此时的情况就是完全使用缓存，浏览器和服务器没有任何交互的。

情景二：若已过期，则向服务器发送请求，此时请求中会带上①中设置的文件修改时间，和Etag

然后，进行资源更新判断。服务器根据浏览器传过来的文件修改时间，判断自浏览器上一次请求之后，文件是不是没有被修改过；根据Etag，判断文件内容自上一次请求之后，有没有发生变化

情形一：若两种判断的结论都是文件没有被修改过，则服务器就不给浏览器发index.html的内容了，直接告诉它，文件没有被修改过，你用你那边的缓存吧—— 304 NotModified，此时浏览器就会从本地缓存中获取index.html的内容。此时的情况叫协议缓存，浏览器和服务器之间有一次请求交互。

情形二：若修改时间和文件内容判断有任意一个没有通过，则服务器会受理此次请求，之后的操作同①
① 只有get请求会被缓存，post请求不会

13、Etag的应用

Etag由服务器端生成，客户端通过If-Match或者说If-None-Match这个条件判断请求来验证资源是否修改。常见的是使用If-None-Match。请求一个文件的流程可能如下：

第一次请求

1.客户端发起 HTTP GET 请求一个文件；

2.服务器处理请求，返回文件内容和一堆Header，当然包括Etag(例如"2e681a-6-5d044840")(假设服务器支持Etag生成和已经开启了Etag).状态码200

第二次请求

客户端发起 HTTP GET 请求一个文件，注意这个时候客户端同时发送一个If-None-Match头，这个头的内容就是第一次请求时服务器返回的Etag：2e681a-6-5d0448402.服务器判断发送过来的Etag和计算出来的Etag匹配，因此If-None-Match为False，不返回200，返回304，客户端继续使用本地缓存；

流程很简单，问题是，如果服务器又设置了Cache-Control:max-age和Expires呢，怎么办？

答案是：同时使用，也就是说在完全匹配 If-Modified-Since 和 If-None-Match 即检查完修改时间和Etag之后，服务器才能返回304.(不要陷入到底使用谁的问题怪圈)

为什么使用Etag请求头?

Etag 主要为了解决 Last-Modified 无法解决的一些问题。

14、Expires和Cache-Control

Expires要求客户端和服务端的时钟严格同步。
HTTP1.1引入Cache-Control来克服Expires头的限制。

如果max-age和Expires同时出现，则max-age有更高的优先级。

Cache-Control:no-cache, private, max-age=0
ETag: abcde
Expires: Thu, 15 Apr 201420:00:00 GMT
Pragma: private
Last-Modified:$now //RFC1123 format

15、ES6的了解

• 新增模板字符串（为JavaScript提供了简单的字符串插值功能）
• 箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）
• for-of（用来遍历数据—例如数组中的值。）arguments对象可被不定参数和默认参数完美代替。
• ES6将promise对象纳入规范，提供了原生的Promise对象。
• 增加了let和const命令，用来声明变量。
• 增加了块级作用域。let命令实际上就增加了块级作用域。
• ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。
• 还有就是引入module模块的概念

16、defer和async

defer并行加载js文件，会按照页面上script标签的顺序执行
async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行

17、box-sizing属性

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

18、CSS优先级

!important > id > class > tag

important 比 内联优先级高,但内联比 id 要高

19、常见的兼容性问题

• png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
• 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
• IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
• 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
• #box{ float:left; width:10px; margin:0 0 0 100px;}
  这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入
  _display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

20、new操作符内部做了什么

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

    var obj  = {};
	obj.__proto__ = Base.prototype;
	Base.call(obj);

21、延迟加载有哪些

• defer和async、
• 动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、
• 按需异步载入js
• setTimeOut

22、哪些操作会造成内存泄漏

• setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
• 闭包
• 控制台日志
• 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

23、父子组件渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

24、父子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

25、父子组件销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed