通过编码规范优化JavaScript性能

@[TOC]通过编码规范优化JavaScript性能

通过编码规范优化JavaScript性能

避免全局查找

如果在一个函数中多次访问一个全局变量，应将其保存为函数内部的局部变量，以减少全局查找。

避免使用with

with语句会创建自己的作用域，增加执行代码的作用域长度，造成额外的作用域查找。

优化循环

• 简化循环体
• 简化终止条件，提前跳出循环
• 优先计算循环次数（当我们需要对数组进行循环时，应在循环开始前优先计算出数组长度，而不是在循环体了计算数组长度）即采用

for (let i = 0;len = arr.length; i<len; i++)

而避免使用

for(let i = 0 ; i < arr.length ;i++ )

switch比if-else语句更快

switch语句比if-else语句执行速度快，还可以通过将case语句按照发生可能性从高到低的顺序排列，实现进一步优化。但是不要忘了break。

最小化语句数

• 合并变量声明
  将let a = 1;let b = 2; let c = 3;等语句合并成let a =1,b = 2, c = 3;

• 使用字面量创建数组和对象,不要使用构造函数

let arr = [1,2,3];
let obj = {name:"gmy"}

优化DOM操作

尽可能少的操作DOM 能最大的提示js的性能

• 通过创建文档片段来收集dom更新然后使用appendChild等方法一次性更新DOM

• innerHTML操作DOM的效率比appendCHild()、createElemnt()等方法效率高
  因为innerHTML是内部方法是编译好的不需要解释执行。

• 使用事件代理减少事件监听程序的注册
  利用事件冒泡的原理实现事件代理，即通过在父级元素上绑定事件处理程序监听所有子元素的事件。
  比如在UL上监听每个li的点击事件。

• 最小化访问HTMLCollection
  多次使用应保存为局部变量

部署压缩

• 将读个js文件打包成一个js或更少数量的js文件。
  js文件是数量会阻塞http请求

• 代码压缩
  删除额外的空白、删除所有的 注释、缩短变量名（借助第三方工具实现压缩）

• http压缩
  借助浏览器和服务器的压缩功能

结语

以上内容是对js优化的一个便于记忆的总结，更多更详细的内容需要读者再进一步扩展