高性能JS总结

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

• 讲脚本放在页面底部
• 合并脚本，减少script标签数。压缩脚本
• 使用无阻塞下载。例如defer属性，xhr对象下载。SSR服务端渲染
• 使用CDN，设置HTTP响应头来缓存JS

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

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

• 字面量和局部变量访问速度快，访问数组元素和对象成员相对较慢。
• 嵌套对象，原型链属性，层次越深，访问速度越慢。

DOM渲染

• 减少回流、重排
  减少使用影响重排的属性，（居中查询），例如getComputedStyle(),offset属性，scroll属性client属性。使用缓存布局属性
• 集中查询 ，一次合并修改，或者让元素脱离文档流。例如Diff，虚拟节点
• 使用事件委托，减少性能损耗。
• 使用速度更快的API，比如querySelectorAll，firstElementChild

循环

• 减少循环次数，计算量
• switch比if。判断条件较多时，使用查找表法更快
• 减少使用for…in。for…in需要遍历原型链中所有属性
• 使用递归算法、改善过的Memoization算法，改善调用栈错误的递归模式。

JS引擎

• js任务不应当执行超过100毫秒。过长的运行时间导致的延时，会让用户感觉与页面失去联系
• 浏览器响应存在差异 ，错位的交互与响应，会导致用户体验混乱
• 将耗时脚本，拆分多个小任务，利用setTimeout安排延时执行。例如：分时函数。
• 使用web Worker，避免锁定UI线程。

ajax请求

• 使用json传输，减少解析时间
• 使用MXHR 减少请求，合并js和css文件
• 不泄露异常信息