前端效能優化總結，這也是我做程式設計師的第五個年頭了

前文

轉眼間2018年就要結束了，越是寫部落格就越發現，部落格的力量是有限的，除非超越部落格。寫公開發表的文章是大不同的。筆記可以寫得像銅牆鐵壁那麼規整，可以一層一層地嵌進去。但是發表在部落格上的文章就像程式碼，是寫給自己之外的人看的，要講究閱讀體驗。偶爾要用段子活躍一下氣氛給讀者提提神，字裡行間也要注意正確地使用行話。尤其是寫一些教程一般的文章時，要循序漸進地講述自己的操作過程，還要戰戰兢兢地擔心別人無法復現自己的結果（人類的本質是復讀機）。

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

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類似，他可以精確到秒的更高階別。

最後

儘管有年月日的劃分，但日子畢竟是連在一起過的，所以今年未完成的學習安排並不會在2019年到來的那一刻戛然而止。2019年，想必會是忙碌的一年。預祝大家2019年，加班少點，工資多點！

這裡推薦一下我的學習交流群：731771211，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入

點選： 加入

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2396391/，如需轉載，請註明出處，否則將追究法律責任。