前端不哭！web性能優(yōu)化技巧請收好

一.提高加載性能

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('加載完成')        })    })})

<script src="lab.js"></script>// 鏈式調(diào)用時文件逐個下載，.wait()用來指定文件下載并執(zhí)行完畢后所調(diào)用的函數(shù)$LAB.script('./a.js')    .script('./b.js')    .wait(function(){        App.init();})
// 為了保證執(zhí)行順序，可以這么做,此時a必定在b前執(zhí)行$LAB.script('./a.js').wait()    .script('./b.js')    .wait(function(){        App.init();})

二. 數(shù)據(jù)存取與JS性能

1.在js中，數(shù)據(jù)存儲的位置會對代碼整體性能產(chǎn)生重大影響。數(shù)據(jù)存儲共有4種方式：字面量，變量，數(shù)組項，對象成員。他們有著各自的性能特點。

2.訪問字面量和局部變量的速度最快，相反，訪問數(shù)組和對象相對較慢

3.由于局部變量存在于作用域鏈的起始位置，因此訪問局部變量的比訪問跨域作用變量更快

4.嵌套的對象成員會明顯影響性能，應盡量避免

5.屬性和方法在原型鏈位置越深，訪問他的速度越慢

6.通常我們可以把需要多次使用的對象成員，數(shù)組元素，跨域變量保存在局部變量中來改善js性能

注：如過在一個對性能要求比較高的操作中更新一段HTML，推薦使用innerHTML，因為它在絕大多數(shù)瀏覽器中運行的都很快。但對于大多數(shù)日常操作而言，并沒有太大區(qū)別，所以你更應該根據(jù)可讀性，穩(wěn)定性，團隊習慣，代碼風格來綜合決定使用innerHTML還是createElement()

HTML集合包含了DOM節(jié)點引用的類數(shù)組對象，一直與文檔保持連接，每次你需要最新的信息時，都會重復執(zhí)行查詢操作，哪怕只是獲取集合里元素的個數(shù)。

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

querySelectorAll()方法使用css選擇器作為參數(shù)并返回一個NodeList——包含著匹配節(jié)點的類數(shù)組對象，該方法不會返回HTML集合，因此返回的節(jié)點不會對應實時文檔結(jié)構(gòu)，著也避免了HTML集合引起的性能問題。

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

瀏覽器在下載完頁面的所有組件——html,js,css,圖片等之后，會解析并生成兩個內(nèi)部數(shù)據(jù)結(jié)構(gòu)—— DOM樹，渲染樹.一旦DOM樹和渲染樹構(gòu)建完成，瀏覽器就開始繪制頁面元素（paint）.

大多數(shù)瀏覽器通過隊列化修改并批量執(zhí)行來優(yōu)化重排過程，然而獲取布局信息的操作會導致隊列強制刷新。

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

一些優(yōu)化建議：將設(shè)置樣式的操作和獲取樣式的操作分開：

// 設(shè)置樣式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}

①.批量改變樣式

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

②.批量修改dom的優(yōu)化方案——使元素脫離文檔流-對其應用多重改變-把元素帶回文檔

function appendDataToEl(option){    var targetEl = option.target || document.body,        createEl,        data = option.data || [];    // 讓容器脫離文檔流，減少重繪重排    var targetEl_display = targetEl.style.display;    targetEl.style.display = 'none';
    // *****創(chuàng)建文檔片段來優(yōu)化Dom操作****    var fragment = document.createDocumentFragment();    // 給元素填充數(shù)據(jù)    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);    }    // ****將文檔片段統(tǒng)一插入目標容器****    targetEl.appendChild(fragment);    // 顯示容器，完成數(shù)據(jù)填充    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});

上面的優(yōu)化方法使用了文檔片段: 當我們把文檔片段插入到節(jié)點中時，實際上被添加的只是該片段的子節(jié)點，而不是片段本身。可以使得dom操作更有效率。

③.緩存布局信息

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

④.慎用:hover

⑤.使用事件委托（通過事件冒泡實現(xiàn)）來減少事件處理器的數(shù)量，減少內(nèi)存和處理時間

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()}

四.算法和流程控制

1.循環(huán)中減少屬性查找并反轉(zhuǎn)(可以提升50%-60%的性能)

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

2.使用Duff裝置來優(yōu)化循環(huán)（該方法在后面的文章中會詳細介紹）

3.基于函數(shù)的迭代（比基于循環(huán)的迭代慢）

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

4.通常情況下switch總比if-else快，但是不是最佳方案

五.字符串和正則表達式

1.除了IE外，其他瀏覽器會嘗試為表達式左側(cè)的字符串分配更多的內(nèi)存，然后簡單的將第二個字符串拷貝到他的末尾，如果在一個循環(huán)中，基礎(chǔ)字符串位于最左側(cè)，就可以避免重復拷貝一個逐漸變大的基礎(chǔ)字符串。2.使用[\s\S]來匹配任意字符串 3.去除尾部空白的常用做法：

if(!String.prototype.trim){    String.prototype.trim = function(){        return this.replace(/^\s+/,'').replace(/\s\s*$/, '')    }}

六.快速響應的用戶界面

1.瀏覽器的UI線程：用于執(zhí)行javascript和更新用戶界面的進程。

2.在windows系統(tǒng)中定時器分辨率為15毫秒，因此設(shè)置小于15毫秒將會使IE鎖定，延時的最小值建議為25ms.

3.用延時數(shù)組分割耗時任務(wù)：

function multistep(steps,args,callback){    var tasks = steps.concat();
    setTimeout(function(){        var task = tasks.shift();        task.apply(null, args || []);   //調(diào)用Apply參數(shù)必須是數(shù)組
        if(tasks.length > 0){            setTimeout(arguments.callee, 25);        }else{            callback();        }    },25);}

4.記錄代碼運行時間批處理任務(wù)：

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)}

5.使用Web Worker：它引入了一個接口，能使代碼運行且不占用瀏覽器UI線程的時間。一個Worker由如下部分組成：

① 一個navigator對象，包括appName,appVersion,user Agent和platform.

② 一個location對象，只讀。

③ 一個self對象，指向全局worker對象

④ 一個importScripts()方法，用來加載worker所用到的外部js文件

⑤ 所有的ECMAScript對象。如object,Array,Date等

⑥ XMLHttpRequest構(gòu)造器

⑦ setTimeout()，setInterval()

⑧ 一個close()方法，它能立刻停止worker運行

應用場景

1. 編碼/解碼大字符串

2.  復雜數(shù)學運算（包括圖像，視屏處理）

3. 大數(shù)組排序

// worker.jsvar worker = new Worker('code.js');// 接收信息worker.onmessage = function(event){    console.log(event.data);}// 發(fā)送數(shù)據(jù)worker.postMessage('hello');
// code.js
// 導入其他計算代碼importScripts('a.js','b.js');
self.onmessage = function(event){    self.postMessage('hello' + event.data);}

七. ajax優(yōu)化

1.向服務(wù)器請求數(shù)據(jù)的五種方式：

// 唯一缺點是接收到的響應類型是有限的var url = '/req.php';var params = ['step=2','time=123'];
(new Image()).src = url + '?' + params.join('&');
// 如果向監(jiān)聽服務(wù)端發(fā)送回的數(shù)據(jù)，可以在onload中實現(xiàn)var beacon = new Image();beacon.src = ...;beacon.onload = function(){    ...}beacon.onerror = function(){    ...}

3.ajax性能的一些建議

八. 編程實踐

1.避免重復工作

// 1.延遲加載var a = (x,y) =>{    if(x > 4){        a = 0;    }else{        a = 1;    }}// 需要使用時調(diào)用a();
// 2.條件預加載（適用于函數(shù)馬上執(zhí)行并頻繁操作的場景）var b = a > 0 ? '4' : '0';

2.使用Object/Array字面量

3.多用原生方法

九. 構(gòu)建與部署高性能的js應用

1.js的http壓縮 當web瀏覽器請求一個資源時，它通常會發(fā)送一個Accept-Encoding HTTP頭來告訴Web服務(wù)器它支持那種編碼轉(zhuǎn)換類型。這個信息主要用來壓縮文檔以獲取更快的下載，從而改善用戶體驗。Accept-Encoding可用的值包括：gzip,compress,deflate,identity. 如果Web服務(wù)器在請求中看到這些信息頭，他會選擇最合適的編碼方式，并通過Content-Encoding HTTP頭通知WEB瀏覽器它的決定。

2.使用H5離線緩存

3.使用內(nèi)容分發(fā)網(wǎng)絡(luò)CDN

4.對頁面進行性能分析

// 檢測代碼運行時間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]    }};

十. 瀏覽器緩存

1.添加Expires頭

2.使用cache-control cache-ontrol詳解 瀏覽器緩存機制

十一. 壓縮組件

1.web客戶端可以通過http請求中的Accept-Encoding頭來表示對壓縮的支持

// 瀏覽器請求時對http header設(shè)置Accept-Encoding: gzip// Web服務(wù)器響應時對http header設(shè)置Content-Encoding: gzip

2.壓縮能將響應的數(shù)據(jù)量減少將近70%，因此可考慮對html,腳本，樣式，圖片進行壓縮

十二. 白屏現(xiàn)象的原因

瀏覽器（如IE）在樣式表沒有完全下載完成之前不會呈現(xiàn)頁面，導致頁面白屏。如果樣式表放在頁面底部，那么瀏覽器會花費更長的時間下載樣式表，因此會出現(xiàn)白屏，所以最好把樣式表放在head內(nèi)。白屏是瀏覽器對“無樣式閃爍”的修繕。如果瀏覽器不采用“白屏”機制，將頁面內(nèi)容逐步顯示（如Firefox），則后加載的樣式表將導致頁面重繪重排，將會承擔頁面閃爍的風險。

十三. css表達式使用一次性表達式(但最好避免css表達式)

使用css表達式時執(zhí)行函數(shù)重寫自身

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

十四. 減少DNS查找

1.DNS查找可以被緩存起來以提高性能：DNS信息會留在操作系統(tǒng)的DNS緩存中（Microsoft Windows上的“DNS Client服務(wù)”,之后對該主機名的請求無需進行過多的查找
2.TTL(time to live): 該值告訴客戶端可以對記錄緩存多久。建議將TTL值設(shè)置為一天
// 客戶端收到DNS記錄的平均TTL只有最大TTL值的一半因為DNS解析器返回的時間是其記錄的TTL的剩余時間，對于給定的主機名，每次執(zhí)行DNS查找時接收的TTL值都會變化
3.通過使用Keep-Alive和較少的域名來減少DNS查找
4.一般建議將頁面組件分別放到至少2個，但不要超過4個主機名下
復制代碼

十五. 避免重定向

這塊需要前后端共同配合，對頁面路由進行統(tǒng)一規(guī)范。

以上就是本期分享了。