Web性能優(yōu)化的15條實(shí)用技巧

作者：徐小夕 2023-01-26 01:33:09

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

javascript在瀏覽器中運(yùn)行的性能，可以認(rèn)為是開發(fā)者所面臨的最嚴(yán)重的可用性問(wèn)題。這個(gè)問(wèn)題因?yàn)閖avascript的阻塞性而變得復(fù)雜，事實(shí)上，多數(shù)瀏覽器使用單一進(jìn)程來(lái)處理用戶界面和js腳本執(zhí)行，所以同一時(shí)刻只能做一件事。js執(zhí)行過(guò)程耗時(shí)越久，瀏覽器等待響應(yīng)的時(shí)間越長(zhǎng)。

加載和執(zhí)行

一.提高加載性能

1.IE8,FF,3.5,Safari 4和Chrome都允許并行下載js文件，當(dāng)script下載資源時(shí)不會(huì)阻塞其他script的下載。但是js下載仍然會(huì)阻塞其他資源的下載，如圖片。盡管腳本下載不會(huì)互相影響，但頁(yè)面仍然必須等待所有js代碼下載并執(zhí)行完才能繼續(xù)。因此仍然存在腳本阻塞問(wèn)題.推薦將所有js文件放在body標(biāo)簽底部以減少對(duì)整個(gè)頁(yè)面的影響。

2.減少頁(yè)面外鏈腳本文件的數(shù)量將會(huì)提高頁(yè)面性能：

http請(qǐng)求會(huì)帶來(lái)額外的開銷，因此下載單個(gè)300k的文件將比下載10個(gè)30k的文件效率更高。

3.動(dòng)態(tài)腳本加載技術(shù)：

無(wú)論何時(shí)啟動(dòng)下載，文件的下載和執(zhí)行都不會(huì)阻塞頁(yè)面其他進(jìn)程。


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. 無(wú)阻塞加載類庫(kù)——LABjs,使用方法如下：

<script src="lab.js"></script>
// 鏈?zhǔn)秸{(diào)用時(shí)文件逐個(gè)下載，.wait()用來(lái)指定文件下載并執(zhí)行完畢后所調(diào)用的函數(shù)
$LAB.script('./a.js')
    .script('./b.js')
    .wait(function(){
        App.init();
})

// 為了保證執(zhí)行順序，可以這么做,此時(shí)a必定在b前執(zhí)行
$LAB.script('./a.js').wait()
    .script('./b.js')
    .wait(function(){
        App.init();
})

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

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

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

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

4.嵌套的對(duì)象成員會(huì)明顯影響性能，應(yīng)盡量避免

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

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

三. DOM編程

1.訪問(wèn)DOM會(huì)影響瀏覽器性能，修改DOM則更耗費(fèi)性能，因?yàn)樗麜?huì)導(dǎo)致瀏覽器重新計(jì)算頁(yè)面的幾何變化。<通常的做法是減少訪問(wèn)DOM的次數(shù)，把運(yùn)算盡量留在JS這一端。

注：如過(guò)在一個(gè)對(duì)性能要求比較高的操作中更新一段HTML，推薦使用innerHTML，因?yàn)樗诮^大多數(shù)瀏覽器中運(yùn)行的都很快。但對(duì)于大多數(shù)日常操作而言，并沒(méi)有太大區(qū)別，所以你更應(yīng)該根據(jù)可讀性，穩(wěn)定性，團(tuán)隊(duì)習(xí)慣，代碼風(fēng)格來(lái)綜合決定使用innerHTML還是createElement()

2. HTML集合優(yōu)化

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

① 優(yōu)化一——集合轉(zhuǎn)數(shù)組collToArr

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

② 緩存集合length

③ 訪問(wèn)集合元素時(shí)使用局部變量（即將重復(fù)的集合訪問(wèn)緩存到局部變量中，用局部變量來(lái)操作）

3. 遍歷DOM

① 使用只返回元素節(jié)點(diǎn)的API遍歷DOM,因?yàn)檫@些API的執(zhí)行效率比自己實(shí)現(xiàn)的效率更高：

屬性名	被替代屬性
children	childNodes
childElementCount	childNodes.length
firstElementChild	firstChild
lastElementChild	lastChild
nextElementSibling	nextSibling
previousElementSibling	previousSibling

② 選擇器API——querySelectorAll()

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

4.重繪和重排

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

① 重排發(fā)生的條件：

添加或刪除可見的DOM 元素位置變化元素尺寸改變內(nèi)容改變頁(yè)面渲染器初始化瀏覽器窗口尺寸變化出現(xiàn)滾動(dòng)條時(shí)會(huì)觸發(fā)整個(gè)頁(yè)面的重排

重排必定重繪

5.渲染樹變化的排列和刷新

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

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

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

// 設(shè)置樣式
body.style.color = 'red';
body.style.fontSize = '24px'
// 讀取樣式
let color = body.style.color
let fontSize = body.style.fontSize

另外，獲取計(jì)算屬性的兼容寫法：

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';

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

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)建文檔片段來(lái)優(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)一插入目標(biāo)容器****
    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)化方法使用了文檔片段: 當(dāng)我們把文檔片段插入到節(jié)點(diǎn)中時(shí)，實(shí)際上被添加的只是該片段的子節(jié)點(diǎn)，而不是片段本身。可以使得dom操作更有效率。

③.緩存布局信息

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

④.慎用:hover

如果有大量元素使用:hover,那么會(huì)降低相應(yīng)速度，CPU升高

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

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裝置來(lái)優(yōu)化循環(huán)（該方法在后面的文章中會(huì)詳細(xì)介紹）

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


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

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

五.字符串和正則表達(dá)式

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

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

六.快速響應(yīng)的用戶界面

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

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

3.用延時(shí)數(shù)組分割耗時(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.記錄代碼運(yùn)行時(shí)間批處理任務(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：它引入了一個(gè)接口，能使代碼運(yùn)行且不占用瀏覽器UI線程的時(shí)間。一個(gè)Worker由如下部分組成：

① 一個(gè)navigator對(duì)象，包括appName,appVersion,user Agent和platform.

② 一個(gè)location對(duì)象，只讀。

③ 一個(gè)self對(duì)象，指向全局worker對(duì)象

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

⑤ 所有的ECMAScript對(duì)象。如object,Array,Date等

⑥ XMLHttpRequest構(gòu)造器

⑦ setTimeout()，setInterval()

⑧ 一個(gè)close()方法，它能立刻停止worker運(yùn)行

應(yīng)用場(chǎng)景

1. 編碼/解碼大字符串

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

3. 大數(shù)組排序?


// worker.js
var worker = new Worker('code.js');
// 接收信息
worker.onmessage = function(event){
    console.log(event.data);
}
// 發(fā)送數(shù)據(jù)
worker.postMessage('hello');

// code.js

// 導(dǎo)入其他計(jì)算代碼
importScripts('a.js','b.js');

self.onmessage = function(event){
    self.postMessage('hello' + event.data);
}

七. ajax優(yōu)化

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

① XMLHttpRequest

② Dynamic script tag insertion 動(dòng)態(tài)腳本注入

③ iframes

④ Comet（基于http長(zhǎng)連接的服務(wù)端推送技術(shù)）

⑤ Multipart XHR（允許客戶端只用一個(gè)http請(qǐng)求就可以從服務(wù)器向客戶端傳送多個(gè)資源）

2.單純向服務(wù)端發(fā)送數(shù)據(jù)（beacons方法）——信標(biāo)

// 唯一缺點(diǎn)是接收到的響應(yīng)類型是有限的
var url = '/req.php';
var params = ['step=2','time=123'];

(new Image()).src = url + '?' + params.join('&');

// 如果向監(jiān)聽服務(wù)端發(fā)送回的數(shù)據(jù)，可以在onload中實(shí)現(xiàn)
var beacon = new Image();
beacon.src = ...;
beacon.onload = function(){
    ...
}
beacon.onerror = function(){
    ...
}

3.ajax性能的一些建議

緩存數(shù)據(jù)

1).在服務(wù)端設(shè)置Expires頭信息確保瀏覽器緩存多久響應(yīng)（必須GET請(qǐng)求）

2）.客戶端把獲取到的信息緩存到本地，避免再次請(qǐng)求

八. 編程實(shí)踐

1.避免重復(fù)工作

// 1.延遲加載
var a = (x,y) =>{
    if(x > 4){
        a = 0;
    }else{
        a = 1;
    }
}
// 需要使用時(shí)調(diào)用
a();

// 2.條件預(yù)加載（適用于函數(shù)馬上執(zhí)行并頻繁操作的場(chǎng)景）
var b = a > 0 ? '4' : '0';

2.使用Object/Array字面量

3.多用原生方法

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

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

2.使用H5離線緩存

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

4.對(duì)頁(yè)面進(jìn)行性能分析

// 檢測(cè)代碼運(yùn)行時(shí)間
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詳解瀏覽器緩存機(jī)制

十一. 壓縮組件

1.web客戶端可以通過(guò)http請(qǐng)求中的Accept-Encoding頭來(lái)表示對(duì)壓縮的支持

// 瀏覽器請(qǐng)求時(shí)對(duì)http header設(shè)置
Accept-Encoding: gzip
// Web服務(wù)器響應(yīng)時(shí)對(duì)http header設(shè)置
Content-Encoding: gzip

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

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

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

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

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


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

十四. 減少DNS查找

DNS緩存和TTL

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