前端效能優化總結,這也是我做程式設計師的第五個年頭了
前文
轉眼間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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 前端效能優化總結前端優化
- 總結前端效能優化的方法前端優化
- 一個程式設計師 && 作者 && 設計師的 2018 年終總結程式設計師
- [譯] 2019 前端效能優化年度總結 — 第五部分前端優化
- 程式設計師的 2021 年總結程式設計師
- 我是6年的程式設計師了程式設計師
- 小程式效能優化總結優化
- 一個程式設計師的2021總結程式設計師
- [推廣] 程式設計師的痛點:我竟然還不懂 Linux 效能優化程式設計師Linux優化
- 2018 這一年似乎我不再是了程式設計師了程式設計師
- 一個在成都7年的程式設計師2022總結程式設計師
- 打個總結:Web效能優化Web優化
- web前端培訓React效能優化總結Web前端React優化
- 幹了3年程式設計師,我開竅了程式設計師
- 好程式設計師分享Web前端效能最佳化程式設計師Web前端
- 一個Java程式設計師的2018年總結 | 掘金年度徵文Java程式設計師
- Android效能優化——效能優化的難題總結Android優化
- 我的 2023 總結,一個程式設計師與物業的對抗之路程式設計師
- Java程式設計師:這是一個最好的時代,也是一個最壞的時代Java程式設計師
- 前端效能優化小結前端優化
- 程式設計技巧整理:Java程式效能最佳化總結!程式設計Java
- 最全的前端程式設計師常用英語詞彙都在這了~前端程式設計師
- 我不是一個成功的人,但是我想做一個優秀的程式設計師程式設計師
- 做程式設計師快30天了程式設計師
- 好程式設計師前端教程css對齊方案總結程式設計師前端CSS
- 這年頭 程式設計師也得會保護自己程式設計師
- canvas效能優化總結Canvas優化
- React 效能優化總結React優化
- React效能優化總結React優化
- iOS 效能優化總結iOS優化
- 00後程式設計師,2023年終總結程式設計師
- 做個清醒的程式設計師之要不要做程式設計師程式設計師
- PHP的效能優化方法總結PHP優化
- MySQL的SQL效能優化總結MySql優化
- 三十歲程式設計師的2021年度總結程式設計師
- 程式設計師年度總結:2019年,你的出路在哪?程式設計師
- 十年開發的程式設計師,總結出了這些開發經驗程式設計師
- 系統效能優化總結優化