前端性能优化总结（二）

CSS选择符
在大多数人的观念中，都觉得浏览器对 CSS选择符的解析式从左往右进行的，例如#toc A { color: #444; }这样一个选择符，如果是从左往右解析则效率会很高，因为第一个 ID选择基本上就把查找的范围限定了，但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符，浏览器必须遍历查找每一个 A标签的祖先节点，效率并不像之前想象的那样高，所以在写选择符的时候需要注意很多事项。

• 避免使用css表达式，避免使用高级选择器，通配选择器。
• 不要限定ID选择符或类选择符： 在页面中一个指定的ID只能对应一个元素，所以没有必要添加额外的限定符。例如：div#id是没必要的，应该简化为#id。
• 依靠继承：了解哪些属性可以通过继承而来，然后避免对这些属性重复指定规则。
• 减少css动画的使用。

其它方面

1.避免页面跳转，也就是使用单页面应用的开发。

每次页面跳转，就是一次html文件的下载过程。而这个过程，我们首先从服务端下载网页，再进行渲染，网页性能体验会很差。而单页面应用，它从一开始，就把完整的网页给加载到本地。

2.延迟加载、懒加载技术
原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

3.将css放在HEAD中
页面通常先解析完css文件再进行渲染，如果放到后面，页面渲染在前，则用户体验很差。有些浏览器会等css文件加载完再进行渲染，把css放后面会造成堵塞。

4.节流Throttle和防抖Debounce

节流：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。

防抖：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行，它的计时有一个更新。

5.HTML Collection

document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。