JS性能优化技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/boborookie/article/details/104502883

优化/JS
<from JavaScript高级程序设计ver3>
1. 注意作用域
   1. 避免全局查找
       将在一个函数中会用到多次的全局对象存储为局部变量总是没错的   doc=document
2.选择正确方式
   1.避免不必要的属性查找
       注意获取单个值的多重属性查找（尽可能多地使用局部变量将属性查找替换为值查找）   url=window.location.href
   2.优化循环
       减值迭代简化终止条件简化循环体使用后测试循环
   3.展开循环
   4.避免双重解释
       避免双重解释惩罚：eval()/Function/setTimeout 传字符串参数   setInterval
   5.其它
       1.原生方法更快多用Math对象的方法
       2.switch比复杂的if/else更快； case语句按最可能到最不可能组织
       3.位运算更快
3.最小化语句数
   1.多个变量声明
       只用一个var语句，之间由逗号分开
   2.插入迭代值
       var name=values[i++]
   3.尽量使用数组和对象字面量
       而不是 new Array() 或 new Object()

4.优化DOM操作
   1.最小化现场更新
       一旦需要更新DOM，考虑使用文档片段来构建DOM结构，然后再将其添加到现存的文档中
       fragment=document.createDocumentFragmeng();
       fragment.appendChild();
       list.appendChild(fragment)
   2.使用inner HTML
       "1.对于大的DOM更改，inner HTML比标准DOM方法快得多
       2.最小化调用inner HTML的次数：构建好一个字符串然后一次性给inner HTML"
   3.使用事件代理/事件委托
       如果可能在document级别附加事件处理程序，这样可以处理整个页面的事件
   4.注意HTMLCollection 尽量少访问DOM
       "任何时候要访问HTMLCollection不管它是一个属性还是一个方法，都是在文档上进行一个查询，这个查询开销很昂贵；最小化访问HTMLCollection的次数可以极大的改进脚本性能：
       以下情况会返回HTMLCollection对象：
       1.调用getElementsByTagName()
       2.获取元素的 childNodes
       3. 获取元素的attributes属性
       4. 访问特殊集合：document.forms/document.images等"   "1. demo：

       1. 优化HTMLCollection访问最重要的地方就是循环：
       1)将长度计算移入循环的初始化部分
       2)当在循环中使用HTMLCollection时下一步应该获取要使用的项目的引用，避免在循环体内多次调用HTMLCollection; 右边代码用image变量保存了当前图像，这之后在循环内就没理由再访问images的HTMLCollection了；

           var images=document.getElementsByTagName('img'),image,i,len;
           for(i=0,len=images.length; i<len;i++){
           image = images[i]
           }

       2. 对scrollTop等属性的访问（元素focus/滚动时）

<from JavaScript DOM编程艺术第二版>
1.尽量减少文档中的标记数量
   过多不必要的元素会增加DOM树的规模，进而增加遍历DOM树查找元素的时间
2.合并和放置脚本
   1.合并脚本文件
       减少加载页面时发送的请求数量，减少请求数量通常都是在性能优化时首先要考虑的
   2.所有<script>标签放在文档末尾</body>标记前，就可以让页面变得更快
3.压缩脚本文件
   精简副本文件名建议： <script src='scripts/scriptName.min..js></script>