面试之性能

 

性能

1．代码执行过程会阻塞浏览器的其他进程，比如页面绘制、

a.讲脚本放在页面底部

b.合并脚本，减少script标签数。压缩脚本

c.使用无阻塞下载。例如defer属性，xhr对象下载。SSR服务端渲染

d．使用CDN，设置HTTP响应头来缓存JS

2.数据存储位置对性能的影响。

数据存储份字面量，变量，数组项，对象成员。

a.字面量和局部变量访问速度快，访问数组元素和对象成员相对较慢。

b.嵌套对象，原型链属性，层次越深，访问速度越慢。

3. 利用缓存：

 

 

DOM渲染

a.减少回流、重排

减少使用影响重排的属性，（居中查询），例如getComputedStyle(),offset属性，scroll属性client属性。使用缓存布局属性

集中查询 ，一次合并修改，或者让元素脱离文档流。例如Diff，虚拟节点

c.使用事件委托，减少性能损耗。

d.使用速度更快的API，比如querySelectorAll，firstElementChild

 

 

循环

a.减少循环次数，计算量

b.switch比if。判断条件较多时，使用查找表法更快

c.减少使用for..in。for..in需要遍历原型链中所有属性

d.使用递归算法、改善过的Memoization算法，改善调用栈错误的递归模式。

 

JS引擎

a.js任务不应当执行超过100毫秒。过长的运行时间导致的延时，会让用户感觉与页面失去联系

b.浏览器响应存在差异 ，错位的交互与响应，会导致用户体验混乱

c.将耗时脚本，拆分多个小任务，利用setTimeout安排延时执行。例如：分时函数。

d.使用web Worker，避免锁定UI线程。

 

 

Ajax请求

1.使用json传输，减少解析时间

2.使用MXHR 减少请求，合并js和css文件

3.不泄露异常信息

 

Vue性能

1. 模块按需加载， 懒加载，Vue路由懒加载。预加载，轮播预加载前后图片，长滚动先显示可视区域，滚动加载更多。
2. 树形数据加载太大，引用懒加载。表格采用分页。
3. for循环设置key值，让每一项都有唯一key值，这样vue核心代码能更快找到该条数据，快速定位到diff
4. 使用keep-alive 对组件进行缓存，从而节约性能
5. 对代码进行压缩，例如采用gzip压缩。生产环境sourcemap设置成false
6. 使用可复用组件
7. 提前公共css
8. 及时销毁定时器，解绑事件，销毁控件
9. 频繁切换控件使用v-show，不频繁切换采用 v-if