Web性能优化的15条实用技巧

JAVAscript在浏览器中运行的性能，可以认为是开发者所面临的最严重的可用性问题。这个问题因为JavaScript的阻塞性而变得复杂，事实上，多数浏览器使用单一进程来处理用户界面和js脚本执行，所以同一时刻只能做一件事。js执行过程耗时越久，浏览器等待响应的时间越长。

加载和执行

1.IE8,FF,3.5,Safari 4和Chrome都允许并行下载js文件，当script下载资源时不会阻塞其他script的下载。但是js下载仍然会阻塞其他资源的下载，如图片。尽管脚本下载不会互相影响，但页面仍然必须等待所有js代码下载并执行完才能继续。因此仍然存在脚本阻塞问题.推荐将所有js文件放在body标签底部以减少对整个页面的影响。

2.减少页面外链脚本文件的数量将会提高页面性能：

http请求会带来额外的开销，因此下载单个300k的文件将比下载10个30k的文件效率更高。

3.动态脚本加载技术：

无论何时启动下载，文件的下载和执行都不会阻塞页面其他进程。

function laodScript(url,callback){    var script = document.createElement('script');    script.type = 'text/javascript';
    if(script.readyState){  // ie        script.onreadystatechange = function(){            if(script.readyState == 'loaded' || script.readyState == 'complete'){                script.onreadystatechange = null;                callback()            }        }    }else{ //其他浏览器        script.onload = function(){            callback()        }    }    script.src = url;    document.getElementsByTagName('head')[0].AppendChild(script);}
// 使用loadScript('./a.js',function(){    loadScript('./b.js',function(){        loadScript('./c.js',function(){            console.log('加载完成')        })    })})

4. 无阻塞加载类库——LABjs,使用方法如下：

<script src="lab.js"></script>// 链式调用时文件逐个下载，.wAIt()用来指定文件下载并执行完毕后所调用的函数$LAB.script('./a.js')    .script('./b.js')    .wait(function(){        App.init();})
// 为了保证执行顺序，可以这么做,此时a必定在b前执行$LAB.script('./a.js').wait()    .script('./b.js')    .wait(function(){        App.init();})

三. DOM编程

1.访问DOM会影响浏览器性能，修改DOM则更耗费性能，因为他会导致浏览器重新计算页面的几何变化。<通常的做法是减少访问DOM的次数，把运算尽量留在JS这一端。

2. HTML集合优化

① 优化一——集合转数组collToArr

function collToArr(coll){    for(var i=0, a=[], len=coll.length; i<len; i++){        a.push(coll[i]);    }    return a}

② 缓存集合length

③ 访问集合元素时使用局部变量（即将重复的集合访问缓存到局部变量中，用局部变量来操作）

3. 遍历DOM

① 使用只返回元素节点的API遍历DOM,因为这些API的执行效率比自己实现的效率更高：

 ② 选择器API——querySelectorAll()

let arr = document.querySelectorAll('div.warning, div.notice > p')

4.重绘和重排

① 重排发生的条件：

5.渲染树变化的排列和刷新

offsetTop,offsetWidth...scrollTop,scrollHeight...clientTop,clientHeight...getComputedStyle()

// 设置样式body.style.color = 'red';body.style.fontSize = '24px'// 读取样式let color = body.style.colorlet fontSize = body.style.fontSize

另外，获取计算属性的兼容写法：

function getComputedStyle(el){    var computed = (document.body.currentStyle ? el.currentStyle : document.defaultView.getComputedStyle(el,'');    return computed}

6.最小化重绘和重排

/* 使用cssText */el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 20px';

function appendDataToEl(option){    var targetEl = option.target || document.body,        createEl,        data = option.data || [];    // 让容器脱离文档流，减少重绘重排    var targetEl_display = targetEl.style.display;    targetEl.style.display = 'none';
    // *****创建文档片段来优化Dom操作****    var fragment = document.createDocumentFragment();    // 给元素填充数据    for(var i=0, max = data.length; i< max; i++){        createEl = document.createElement(option.createEl);        for(var item in data[i]){            if(item.toString() === 'text'){                createEl.appendChild(document.createTextNode(data[i][item]));                continue;            }            if(item.toString() === 'html'){                createEl.innerHTML = item,data[i][item];                continue;            }            createEl.setAttribute(item,data[i][item]);        }        // ****将填充好的node插入文档片段****        fragment.appendChild(createEl);    }    // ****将文档片段统一插入目标容器****    targetEl.appendChild(fragment);    // 显示容器，完成数据填充    targetEl.style.display = targetEl_display;}
// 使用var wrap = document.querySelectorAll('.wrap')[0];var data = [    {name: 'xujaing',text: '选景', title: 'xuanfij'},    {name: 'xujaing',text: '选景', title: 'xuanfij'},    {name: 'xujaing',text: '选景', title: 'xuanfij'}];appendDataToEl({    target: wrap,    createEl: 'div',    data: data});

//缓存布局信息let current = el.offsetLeft;current++;el.style.left = current + 'px';if(current > 300){    stop();}

如果有大量元素使用:hover,那么会降低相应速度，CPU升高

function delegation(e,selector,callback){    e = e || window.event;    var target = e.target || e.srcElement;
    if(target.nodeName !== selector || target.className !== selector || target.id !== selector){        return;    }    if(typeof e.preventDefault === 'function'){        e.preventDefault();        e.stopPropagation();    }else{        e.returnValue = false;        e.cancelBubble = true;    }
    callback()}

// for 循环for(var i=item.length; i--){    process(item[i]);}// while循环var j = item.length;while(j--){    process(item[i]);}

items.forEach(function(value,index,array){    process(value);})

function multistep(steps,args,callback){    var tasks = steps.concat();
    setTimeout(function(){        var task = tasks.shift();        task.apply(null, args || []);   //调用Apply参数必须是数组
        if(tasks.length > 0){            setTimeout(arguments.callee, 25);        }else{            callback();        }    },25);}

function timeProcessArray(items,process,callback){    var todo = item.concat();
    setTimeout(function(){        var start = +new Date();
        do{            process(todo.shift());        }while(todo.length > 0 && (+new Date() - start < 50));
        if(todo.length > 0){            setTimeout(arguments.callee, 25);        }else{            callback(items);        }    },25)}

// worker.jsvar worker = new Worker('code.js');// 接收信息worker.onmessage = function(event){    console.log(event.data);}// 发送数据worker.postMessage('hello');
// code.js
// 导入其他计算代码importScripts('a.js','b.js');
self.onmessage = function(event){    self.postMessage('hello' + event.data);}

① XMLHttpRequest

② Dynamic script tag insertion 动态脚本注入

③ iframes

④ Comet（基于http长连接的服务端推送技术）

⑤ Multipart XHR（允许客户端只用一个http请求就可以从服务器向客户端传送多个资源）

2.单纯向服务端发送数据（beacons方法）——信标

// 唯一缺点是接收到的响应类型是有限的var url = '/req.php';var params = ['step=2','time=123'];
(new Image()).src = url + '?' + params.join('&');
// 如果向监听服务端发送回的数据，可以在onload中实现var beacon = new Image();beacon.src = ...;beacon.onload = function(){    ...}beacon.onerror = function(){    ...}

缓存数据

1.在服务端设置Expires头信息确保浏览器缓存多久响应（必须GET请求）

2.客户端把获取到的信息缓存到本地，避免再次请求

// 1.延迟加载var a = (x,y) =>{    if(x > 4){        a = 0;    }else{        a = 1;    }}// 需要使用时调用a();
// 2.条件预加载（适用于函数马上执行并频繁操作的场景）var b = a > 0 ? '4' : '0';

// 检测代码运行时间var Timer = {    _data: {},    start: function(key){        Timer._data[key] = new Date();    },    stop: function(key){        var time = Timer._data[key];        if(time){            Timer._data[key] = new Date() - time;        };        console.log(Timer._data[key]);        return Timer._data[key]    }};

// 浏览器请求时对http header设置Accept-Encoding: gzip// Web服务器响应时对http header设置Content-Encoding: gzip

// cssp{    background-color: expression(altBgcolor(this))}// jsfunction altBgcolor(el){    el.style.backgroundColor = (new Date()).getHours() % 2 ? "#fff" : "#06c";}

DNS缓存和TTL