前端性能優化總結

1.原則

多使用內存，緩存或者其餘方法

減小CPU計算，減小網絡請求

減小IO操做（硬盤讀寫）

2.加載資源優化

靜態資源的合併和壓縮。

靜態資源緩存（瀏覽器緩存策略）。

使用CDN讓靜態資源加載更快。

3. 渲染優化

CSS放head中，JS放body後

圖片懶加載

減小DOM操做，對DOM操做作緩存

減小DOM操做，多個操做盡可能合併在一塊兒執行

事件節流

儘早執行操做 DOMContentLoaded

4. 示例

4.1 資源合併

a.js  b.js  c.js  ---  abc.js

4.2 緩存

經過鏈接名稱控制緩存

<script src="abc_1.js" ></script>

只有改變內容的時候，連接名稱纔會改變。

4.3 懶加載

<img src="preview.png" realsrc="abc.png" id="img1" />
    <script>
        var i = document.getElementById('img1');
        i.src = i.getAttribute('realsrc');
    </script>

4.4 緩存dom查詢

//沒有緩存dom
        for (let i = 0; i < document.getElementsByTagName('p').length; i++) {

        }

        //緩存dom
        var p = document.getElementsByTagName('p');
        for (let i = 0; i < p.length; i++) {

        }

4.5 合併dom插入

var listNode = document.getElementById('list');
        var flag = document.createDocumentFragment();
        var li;
        for (let i = 0; i < 10; i++) {
            li = document.createElement('li');
            li.innerHTML = i;
            flag.appendChild(li);
        }
        listNode.appendChild(flag);

10次dom插入 ---> 1次dom插入

4.6 事件節流

監聽文字改變事件，無操做100毫秒後執行操做，不用每次觸發。

var textarea = document.getElementById('ta');
        var timeoutId;
        textarea.addEventListener('keyup',function(){
            if(i){
                clearTimeout(i);
            }
            timeoutId = setTimeout(() => {
                //操做
            }, 100);
        });

事件節流主要用於觸發頻率較高的事件，設定一個緩衝觸發事件。

補充

異步加載

非核心代碼異步加載 -- 異步加載的方式 -- 區別

1.動態腳本加載

用js建立

2.defer

3.async

<script src="script.js"></script>
沒有 defer 或 async，瀏覽器會當即加載並執行指定的腳本，「當即」指的是在渲染該 script 標籤之下的文檔元素以前，也就是說不等待後續載入的文檔元素，讀到就加載並執行。
<script async src="script.js"></script>
有 async，加載和渲染後續文檔元素的過程將和 script.js 的加載與執行並行進行（異步）。
<script defer src="myscript.js"></script>
有 defer，加載後續文檔元素的過程將和 script.js 的加載並行進行（異步），可是 script.js 的執行要在全部元素解析完成以後，DOMContentLoaded 事件觸發以前完成。

關於 defer，咱們還要記住的是它是按照加載順序執行腳本的

標記爲async的腳本並不保證按照指定它們的前後順序執行。對它來講腳本的加載和執行是牢牢挨着的，因此無論你聲明的順序如何，只要它加載完了就會馬上執行。

瀏覽器緩存

總結的很是好

瀏覽器緩存 -- 緩存的分類 -- 緩存的原理

緩存就是html文件在本地存在的副本，

強緩存

發現有緩存直接用。

Expires: 絕對時間，判斷客戶端日期是否超過這個時間
Cache-Control：相對時間，判斷訪問間隔是否大於3600秒

//在設定時間以前不會和服務端進行通訊了
//若是兩個都下發之後者爲準

協商緩存

詢問服務器緩存是否能夠用，在進行判斷是否用。

Last-Modified/If-Modified-Since

第一次請求，respone的header加上Last-Modified（最後修改時間）

再次請求，在request的header上加上If-Modified-Since 

和服務端的最後修改時間對比，若是沒有變化則返回304 Not Modified，可是不會返回資源內容；若是有變化，就正常返回資源內容。

瀏覽器收到304的響應後，就會從緩存中加載資源

若是協商緩存沒有命中，瀏覽器直接從服務器加載資源時，Last-Modified的Header在從新加載的時候會被更新

Etag/If-None-Match

這兩個值是由服務器生成的每一個資源的惟一標識字符串，只要資源有變化就這個值就會改變；其判斷過程與Last-Modified/If-Modified-Since相似，他能夠精確到秒的更高級別。

DNS預解析

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.zhix.net">

在一些瀏覽器的a標籤是默認打開dns預解析的，在https協議下dns預解析是關閉的，加入mate後會打開。