前端性能优化总结（二）

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

其它方面

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

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

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

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

4.节流Throttle和防抖Debounce

节流：指定时间间隔内只能执行一次任务。如运用于懒加载，监听滚动条滚动时，若操作函数耗费资源较多则会出现页面卡顿。

//节流实现代码
function throttle(fn, interval) {
    let can_do = true;
    return function () {
        if (!can_do) return;
        can_do = false;
        setTimeout(() => {
            fn();
            can_do = true
        }, interval)//使用定时器指定时间触发
    }
}

防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行，它的计时有一个更新。如运用于用户注册名检测问题。

//防抖代码实现
function debounce(fn, interval) {
    let time = null;
    return function () {
        clearTimeout(time)//清除前一次触发的时间
        time = setTimeout(() => {
            fn();
        }, interval)
    }
}

5.HTML Collection