读高性能Javascript笔记

1. 把一段内嵌脚本放在引用外链样式表的 标签之后,会导致页面阻塞去等待样式表的下载.
   这样做是为了内嵌脚本在执行时能够获得最精准的样式信息.

2. 下载同一个 CDN 下的多个 JS 文件,可以这么写:

<script src="http://apps.bdimg.com?/libs/jquery/2.1.4/jquery.min.js&libs/angular.js/1.5.0-beta.0/angular-animate.min.js"></script>

等同于

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http:http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-animate.min.js"></script>

这样就可以使用一个 script 标签下载多个 javascript 文件.减少了 HTTP 请求

1. defer, async 添加到标签中,下载时并行下载不进行阻塞.区别是 async 下载完成后立即执行与顺序无关. defer 按标签顺序执行,且执行在 window.onload 之前

2. Javascript 加载优化方案:

   1. 闭合之前,将所有

try {
    // code may throw error
} catch (e) {
    handleError(e)
}

这样由于只执行了一条语句且没有局部变量的访问,作用域的临时改变不影响性能.

1. 使用闭包的时候应该注意: 在频繁的访问跨作用域的标识符时,每次访问都会带来性能损失,解决方案是将常用的外部变量存储在局部变量中,然后访问局部变量.

2. 因为在各个浏览器中的 JS 引擎 与 DOM 渲染引擎都是两个相互独立的部分,仅通过对外暴露的接口调用,因为调用需要额外的开销,所以要尽量减少 DOM 操作.

3. 如果在对性能有苛刻要求的地方更新一大段 html ,推荐使用 innerHTML ,因为它在大部分的浏览器中都支行的更快,但在日常操作中它与原生方法没有任何区别.

4. HTML 集合是包含 DOM 节点引用的类数组对象:

   1. document.getElementsByName()
   2. document.getElementsByClassName()
   3. document.getElementsByTagName()
   4. document.forms
   5. document.images
   6. document.links
   7. document.forms[0].elements
      HTML 集合一直与文档保持着连接,具有实时性,所以很影响效率.建议拷贝到普通数组中,然后进行操作.

5. 在现代浏览器中可以使用浏览器商提供的 API 来替代 DOM 属性以获取更高的效率.

浏览器商提供属性	DOM 属性
children	childNodes
childrenElementCount	childNodes.length
firstElementChild	firstChild
lastElementChild	lastChild
nextElementSibling	nextSibling
previousElementSibling	previousSibling

12. 获取以下属性或调用方法,会强制刷新重排队列并立即执行

• offsetTop offsetLeft offsetWidth offsetHeight
• scrollTop scrollLeft scrollWidth scrollHeight
• clientTop clientLeft clientWidth clientHeight
• getComputedStyle()

因为重绘和重排代价非常高,所以要减少修改次数.比较高效的操作是合并所有改变然后一次处理,如使用 cssText 属性

el.style.cssText = 'width:200px;height:200px;'

1. 要批量修改的时候,为了避免多次的重绘与重排,我们可以这么操作

   1. 使元素脱离文档流
   2. 编辑修改
   3. 将元素放回文档流

   这样做,有三种方案:
   1. 隐藏元素,应用修改,重新显示
   
display:'none' => // happychange// => display:'block'

   2. 使用文档片段, fragment 在当前文档外构建,再拷贝回文档
   3. 将元始元素拷贝到一个脱离文档的节点中,修改副本,完成之后再替换原始元素.

2. 动画操作时涉及到了大量样式操作,会涉及很多重绘与重排,极大的浪费了计算资源,可以用以下步骤避免

   1. 使用绝对定位,使元素脱离文档流
   2. 动画重绘,变更.因为这已经脱离了文档流了,只是小面积的重绘,不影响大部.
   3. 动画结束之后恢复定位.

3. 使用事件委托来减少事件处理器的数量.

4. 循环速度的优化:

   1. 减少属性查找:

      for(let i=0,j=arr.length;i<j;i++){
          // code
      }

   2. 倒序操作:

      for(let i = arr.length;i--;){
          // code
      }

5. 书上提到了达夫设备,我试验了一下,没啥卵用.可以是我不会使用吧,总之别在那上面浪费时间了.