性能优化 （节流 / 防抖/...）

节流、防抖、SEO优化、懒加载、浏览器缓存、压缩图片、前端路由跳转。使用gulp来合并压缩js，css代码。通过内容分发到网络，提高站点的访问速度，稳定性。减少重拍和重绘

 

节流：让事件函数隔一段时间触发一次。（应用场景：比如onscroll等高频率触发的事件中）

// 函数节流
var canRun = true;
document.onscroll = function(){
    if(!canRun){
        // 判断是否已空闲，如果在执行中，则直接return
        return;
    }
    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);
};

防抖：只执行最一次触发的函数。在一定时间内重复触发，之前的函数不被执行，只执行最后一次触发的函数。（应用场景：比如在输入账号密码的时候，不需要每输入一个字符就验证一下是否正确，当全部输入完成之后，再去匹配验证）

// 函数防抖
var timer = false;
document.onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态

    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
};  

//防抖函数的封装使用   
function debounce(fn,delay) {
    let timer = null;
    return function () {
        let self = this,
            args = arguments;
        timer && clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(self,args);
        },delay);
    }
}

window.onscroll = debounce(function () {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置：' + scrollTop);
},200)

SEO优化：搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

懒加载：

1.图片设置自定义属性比如：_url = “图片地址”

2.当图片顶部的高度 >= 可视区的高度 + 滚动条的高度时，让图片的 src = url，开始加载图片

 

可视区的高度：window.innerHeight （标准浏览器及IE9+） || document.documentElement.clientHeight （标准浏览器及低版本IE标准模式） ||document.body.clientHeight （低版本混杂模式）

滚动条的高度：

window.pageXOffset / window.pageYOffset 只能读不能写

document.documentElement.scrollTop 能读也能写

document.body.scrollTop ( IE）

window.scrollTo(x,y) 专门用来写滚动条的距离的

 

重拍和重绘：

思路：

首先说出什么是重排和重绘

突出他们耗性能

突出自己写项目的时候重点注意了这些事情，以及自己的解决方案（说一下解决原理）

浏览器渲染一个页面的时候是按照“先创建DOM树->在加载CSS->生成渲染树 RENDER TREE->把渲染树交给浏览器（GPU）进行绘制”，如果后期我们修改了元素的样式（但是没有改变大小和位置），浏览器会把当前元素重新生成渲染树，然后重新渲染，这个机制是重绘，但是一旦元素的位置或者大小等发生改变，浏览器就要从DOM树重新计算渲染，这个机制是回流(重排)，不论是重排还是重绘都非常的消耗性能

在我的以前项目中，我特意的重视了这个问题，尽量减少操作DOM引发的回流和重绘问题，常用的解决方案：

需要动态向页面追加元素的时候，基于文档碎片（document.createlementby(' '))或者先把需要增加的所有元素拼接成字符串，最后统一进行增加

读写分离：把统一修改样式都放到一起执行，新版浏览器都有一个自己检测的机制，如果发现下面紧挨着的操作也是修改元素的样式，会把所有修改的事先存起来，直到遇到非修改样式的操作，会把之前存储的统一执行，引发一次回流和重绘

 

当然还有一些其它的办法，这些是最常注意的，我认为减少DOM的回流重绘是非常重要的性能优化手段之一

 

转载于:https://www.cnblogs.com/MrZhujl/p/11612675.html