今天介紹前端性能優(yōu)化，采用的方法是 CRP（關(guān)鍵渲染路徑）躁染，也就是在關(guān)鍵點(diǎn)上做優(yōu)化封恰。
首先，拋出一個(gè)問題褐啡，當(dāng)我們在瀏覽器輸入一個(gè)地址，到頁面渲染成功鳖昌，發(fā)生了什么备畦？
這個(gè)問題的答案百度一下低飒，到處都是。在此懂盐，我說一下我的理解：
? 這個(gè)過程總共有7個(gè)過程完成
一褥赊、URL解析
二、DNS解析
三莉恼、TCP三次握手拌喉，建立客戶端與服務(wù)端的連接通道
四、發(fā)送HTTP請(qǐng)求
五俐银、服務(wù)器處理和響應(yīng)
六尿背、TCP的四次揮手，關(guān)閉客戶端和服務(wù)端的連接通道
七捶惜、瀏覽器解析渲染
對(duì)于我們前端來說田藐，優(yōu)化的重點(diǎn)放在 DNS解析、與瀏覽器解析上吱七，外加緩存苞轿。
關(guān)鍵路徑一瀏覽器解析過程：
1仿畸、生成DOM樹? ? ? ? ? ? ? ? ? ? ? ? ? ?//標(biāo)簽語義化、避免多級(jí)嵌套（最佳不超過四層）
2、生成CSSOM樹? ? ? ? ? ? ? ? ? ? ? //css解析過程是從右到左解析微饥，所以避免多層級(jí)嵌套（尤其是在使用sass 或 less 過程中）
3、將DOM樹與CSSOM樹融合成渲染樹
4茬斧、通過布局計(jì)算 回流....完成頁面渲染
這個(gè)過程中威蕉，有一些需要注意的點(diǎn): 一、HTML與CSS都是阻礙頁面渲染的東西苍碟，二酒觅、引入CSS的方法有l(wèi)ink 與? @import ，前者是通過異步的方式請(qǐng)求資源微峰，后者是通過同步的方式請(qǐng)求資源舷丹。在開發(fā)過程中，應(yīng)該減少@import 的使用蜓肆。在遇到樣式極少的情況下颜凯，建議直接寫在頁面頂部<style></style>里面。三仗扬、js加載症概，為了讓頁面加載速度更快，在頁面中遇到<script> 標(biāo)簽的? 早芭，如果加載的這個(gè)js文件有依賴 可以加關(guān)鍵字async （ < script async>）,如果沒有依賴加關(guān)鍵字 defer ( < script? defer>),在開發(fā)過程中彼城，大部分請(qǐng)情況下加 defer 。四、頁面渲染一次必然有一次回流和重繪募壕，所以為了減少頁面回流调炬，應(yīng)該少操作DOM。
以上說的這幾點(diǎn)舱馅，利用框架 vue 或者react 開發(fā)缰泡，是可以避免的。
關(guān)鍵路徑二：網(wǎng)絡(luò)交互層面上的優(yōu)化：
1代嗤、DNS方面的優(yōu)化
? ? 每一次DNS解析時(shí)間預(yù)計(jì)20-120毫秒? ?/ 減少DNS請(qǐng)求次數(shù)? ?/ DNS預(yù)解析(下圖淘寶為例)
2棘钞、減少HTTP請(qǐng)求次數(shù)和請(qǐng)求資源大小
資源合并壓縮 / 使用字體圖標(biāo) / 數(shù)據(jù)延遲分批加載 / CDN資源 ......
3、利用好緩存資源
如果第一次請(qǐng)求了干毅，以后重新加載頁面宜猜，直接讀取緩存。
常用緩存有 內(nèi)存緩存? 和 硬盤緩存
使用情況：? 打開網(wǎng)頁輸入地址溶锭，直接查找硬盤緩存宝恶；
? ? ? ? ? ? ? ? ? ? F5刷新，優(yōu)先查找內(nèi)存緩存趴捅，然后查找硬盤緩存垫毙；
? ? ? ? ? ? ? ? ? ? 強(qiáng)制刷新：全部服務(wù)器請(qǐng)求資源。
在這一方面拱绑， 更多的操作是服務(wù)端來配置一些參數(shù)综芥，與前端關(guān)聯(lián)性不大。
在之后面試過程中猎拨，如果提及到前端優(yōu)化的問題膀藐，就可以從這些點(diǎn)分別去闡述，思想：?CRP（關(guān)鍵渲染路徑）红省。
以上就是我對(duì)前端優(yōu)化的一點(diǎn)認(rèn)識(shí)额各，當(dāng)然還有更多層面的優(yōu)化，例如：代碼運(yùn)行方面吧恃、代碼編譯虾啦、安全等方面。希望同學(xué)們補(bǔ)充痕寓、或者有不對(duì)的地方傲醉，提出意見。
