web性能優化的15條實用技巧

時間  2019-11-05
標籤 web 性能 優化 實用 技巧 欄目 HTML 简体版
原文   原文鏈接

javascript在瀏覽器中運行的性能，能夠認爲是開發者所面臨的最嚴重的可用性問題。這個問題由於javascript的阻塞性而變得複雜，事實上，多數瀏覽器使用單一進程來處理用戶界面和js腳本執行，因此同一時刻只能作一件事。js執行過程耗時越久，瀏覽器等待響應的時間越長。javascript

加載和執行

1.提升加載性能

  • 1.IE8,FF,3.5,Safari 4和Chrome都容許並行下載js文件，當script下載資源時不會阻塞其餘script的下載。可是js下載仍然會阻塞其餘資源的下載，如圖片。儘管腳本下載不會互相影響，但頁面仍然必須等待全部js代碼下載並執行完才能繼續。所以仍然存在腳本阻塞問題.推薦將全部js文件放在body標籤底部以減小對整個頁面的影響。php

  • 2.減小頁面外鏈腳本文件的數量將會提升頁面性能：http請求會帶來額外的開銷，所以下載單個300k的文件將比下載10個30k的文件效率更高。css

  • 3.動態腳本加載技術：不管什麼時候啓動下載，文件的下載和執行都不會阻塞頁面其餘進程。html

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

複製代碼

2.數據存取與JS性能

1.在js中，數據存儲的位置會對代碼總體性能產生重大影響。數據存儲共有4種方式：字面量，變量，數組項，對象成員。他們有着各自的性能特色。前端

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

3.因爲局部變量存在於做用域鏈的起始位置，所以訪問局部變量的比訪問跨域做用變量更快java

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

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

6.一般咱們能夠把須要屢次使用的對象成員，數組元素，跨域變量保存在局部變量中來改善js性能css3

3.DOM編程

  • 1.訪問DOM會影響瀏覽器性能，修改DOM則更耗費性能，由於他會致使瀏覽器從新計算頁面的幾何變化。<一般的作法是減小訪問DOM的次數，把運算儘可能留在JS這一端。

注：如過在一個對性能要求比較高的操做中更新一段HTML，推薦使用innerHTML，由於它在絕大多數瀏覽器中運行的都很快。但對於大多很多天常操做而言，並無太大區別，因此你更應該根據可讀性，穩定性，團隊習慣，代碼風格來綜合決定使用innerHTML仍是createElement()

  • 2.HTML集合優化

HTML集合包含了DOM節點引用的類數組對象，一直與文檔保持鏈接，每次你須要最新的信息時，都會重複執行查詢操做，哪怕只是獲取集合裏元素的個數。

1.優化一——集合轉數組collToArr

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

2.緩存集合length

3.訪問集合元素時使用局部變量（即將重複的集合訪問緩存到局部變量中，用局部變量來操做）

  • 3.遍歷DOM

1.使用只返回元素節點的API遍歷DOM,由於這些API的執行效率比本身實現的效率更高：

屬性名 被替代屬性
children childNodes
childElementCount childNodes.length
firstElementChild firstChild
lastElementChild lastChild
nextElementSibling nextSibling
previousElementSibling previousSibling
2.選擇器API——querySelectorAll()

querySelectorAll()方法使用css選擇器做爲參數並返回一個NodeList——包含着匹配節點的類數組對象，該方法不會返回HTML集合，所以返回的節點不會對應實時文檔結構，着也避免了HTML集合引發的性能問題。

let arr = document.querySelectorAll('div.warning, div.notice > p')
複製代碼
  • 4.重繪和重排

瀏覽器在下載完頁面的全部組件——html,js,css,圖片等以後，會解析並生成兩個內部數據結構—— DOM樹，渲染樹.一旦DOM樹和渲染樹構建完成，瀏覽器就開始繪製頁面元素（paint）.

1.重排發生的條件：

添加或刪除可見的DOM 元素位置變化 元素尺寸改變 內容改變 頁面渲染器初始化 瀏覽器窗口尺寸變化 出現滾動條時會觸發整個頁面的重排

重排一定重繪

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

大多數瀏覽器經過隊列化修改並批量執行來優化重排過程，然而獲取佈局信息的操做會致使隊列強制刷新。

offsetTop,offsetWidth...
scrollTop,scrollHeight...
clientTop,clientHeight...
getComputedStyle()
複製代碼

一些優化建議：將設置樣式的操做和獲取樣式的操做分開：

// 設置樣式
body.style.color = 'red';
body.style.fontSize = '24px'
// 讀取樣式
let color = body.style.color
let fontSize = body.style.fontSize
複製代碼

另外，獲取計算屬性的兼容寫法：

function getComputedStyle(el){
    var computed = (document.body.currentStyle ? el.currentStyle : document.defaultView.getComputedStyle(el,'');
    return computed
}
複製代碼
  • 6.最小化重繪和重排

1.批量改變樣式

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

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

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

複製代碼

上面的優化方法使用了文檔片斷: 當咱們把文檔片斷插入到節點中時，實際上被添加的只是該片斷的子節點，而不是片斷自己。可使得dom操做更有效率。

3.緩存佈局信息

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

4.慎用:hover

若是有大量元素使用:hover,那麼會下降相應速度，CPU升高

5.使用事件委託（經過事件冒泡實現）來減小事件處理器的數量，減小內存和處理時間

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()
}
複製代碼

4.算法和流程控制

1.循環中減小屬性查找並反轉(能夠提高50%-60%的性能)

// for 循環
for(var i=item.length; i--){
    process(item[i]);
}
// while循環
var j = item.length;
while(j--){
    process(item[i]);
}
複製代碼

2.使用Duff裝置來優化循環（該方法在後面的文章中會詳細介紹）

3.基於函數的迭代（比基於循環的迭代慢）

items.forEach(function(value,index,array){
    process(value);
})
複製代碼

4.一般狀況下switch總比if-else快，可是不是最佳方案

5.字符串和正則表達式

1.除了IE外，其餘瀏覽器會嘗試爲表達式左側的字符串分配更多的內存，而後簡單的將第二個字符串拷貝到他的末尾，若是在一個循環中，基礎字符串位於最左側，就能夠避免重複拷貝一個逐漸變大的基礎字符串。 2.使用[\s\S]來匹配任意字符串 3.去除尾部空白的經常使用作法：

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

6.快速響應的用戶界面

1.瀏覽器的UI線程：用於執行javascript和更新用戶界面的進程。

2.在windows系統中定時器分辨率爲15毫秒，所以設置小於15毫秒將會使IE鎖定，延時的最小值建議爲25ms.

3.用延時數組分割耗時任務：

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);
}
複製代碼

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

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由以下部分組成：

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

  2. 一個location對象，只讀。

  3. 一個self對象，指向全局worker對象

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

  5. 全部的ECMAScript對象。如object,Array,Date等

  6. XMLHttpRequest構造器

  7. setTimeout()，setInterval()

  8. 一個close()方法，它能馬上中止worker運行

  • 應用場景
  1. 編碼/解碼大字符串
  2. 複雜數學運算（包括圖像，視屏處理）
  3. 大數組排序
// worker.js
var 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);
}
複製代碼

7.ajax優化

1.向服務器請求數據的五種方式：

  1. XMLHttpRequest

  2. Dynamic script tag insertion 動態腳本注入

  3. iframes

  4. Comet（基於http長鏈接的服務端推送技術）

  5. 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(){
    ...
}
複製代碼

3.ajax性能的一些建議

1.緩存數據

  • 1.在服務端設置Expires頭信息確保瀏覽器緩存多久響應（必須GET請求）
  • 2.客戶端把獲取到的信息緩存到本地，避免再次請求

8.編程實踐

1.避免重複工做

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

// 2.條件預加載（適用於函數立刻執行並頻繁操做的場景）
var b = a > 0 ? '4' : '0';
複製代碼

2.使用Object/Array字面量

3.多用原生方法

9.構建與部署高性能的js應用

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

2.使用H5離線緩存

3.使用內容分發網絡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]
    }
};
複製代碼

10.瀏覽器緩存

1.添加Expires頭

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

11.壓縮組件

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

// 瀏覽器請求時對http header設置
Accept-Encoding: gzip
// Web服務器響應時對http header設置
Content-Encoding: gzip
複製代碼

2.壓縮能將響應的數據量減小將近70%，所以可考慮對html,腳本，樣式，圖片進行壓縮

12.白屏現象的緣由

瀏覽器（如IE）在樣式表沒有徹底下載完成以前不會呈現頁面，致使頁面白屏。若是樣式表放在頁面底部，那麼瀏覽器會花費更長的時間下載樣式表，所以會出現白屏，因此最好把樣式表放在head內。白屏是瀏覽器對「無樣式閃爍」的修繕。若是瀏覽器不採用「白屏」機制，將頁面內容逐步顯示（如Firefox），則後加載的樣式表將致使頁面重繪重排，將會承擔頁面閃爍的風險。

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

使用css表達式時執行函數重寫自身

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

14.減小DNS查找

1.DNS緩存和TTL

1.DNS查找能夠被緩存起來以提升性能：DNS信息會留在操做系統的DNS緩存中（Microsoft Windows上的「DNS Client服務」,以後對該主機名的請求無需進行過多的查找
2.TTL(time to live): 該值告訴客戶端能夠對記錄緩存多久。建議將TTL值設置爲一天
// 客戶端收到DNS記錄的平均TTL只有最大TTL值的一半由於DNS解析器返回的時間是其記錄的TTL的剩餘時間，對於給定的主機名，每次執行DNS查找時接收的TTL值都會變化
3.經過使用Keep-Alive和較少的域名來減小DNS查找
4.通常建議將頁面組件分別放到至少2個，但不要超過4個主機名下
複製代碼

15.避免重定向

這塊須要先後端共同配合，對頁面路由進行統一規範。

最後

歡迎一塊兒探索打造高性能的web應用，在公衆號《趣談前端》加入咱們一塊兒討論吧！

更多推薦

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程