性能優(yōu)化感覺大家都能說出幾條來，粗略點(diǎn)無非是減少http請(qǐng)求、減輕請(qǐng)求數(shù)據(jù)大小等等，詳細(xì)點(diǎn)就是css/js合并壓縮、雪碧圖等等，但實(shí)在是散亂無章，如何有條理地回答面試官的問題就很重要了，其實(shí)可以從不同的維度，不同方面去進(jìn)行回答。前端文章同質(zhì)性太嚴(yán)重了，我最近的我都是總結(jié)整理，不是自己寫的！
總結(jié)自：
鳥瞰前端 , 再論性能優(yōu)化
預(yù)備知識(shí)
“從用戶輸入U(xiǎn)Rl到頁面展示給用戶瀏覽器客戶端的過程中發(fā)生了什么？”
前端經(jīng)典面試題: 從輸入U(xiǎn)RL到頁面加載發(fā)生了什么？
瀏覽器渲染原理
- HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree
- 把DOM Tree和CSS Rule Tree經(jīng)過整合生成Render Tree（布局階段）
- 元素按照算出來的規(guī)則，把元素放到它該出現(xiàn)的位置，通過顯卡畫到屏幕上
CSS不會(huì)阻塞DOM Tree生成，會(huì)阻塞渲染，但JS會(huì)阻塞DOM 加載。
重繪和回流
瀏覽器宿主環(huán)境
1. 突破單線程解析渲染阻塞限制
瀏覽器是一個(gè)單線程解析模式去解析渲染從服務(wù)器端拿到的html文本，css加載（渲染）的過程中會(huì)對(duì)后續(xù)的腳本資源加載造成阻塞，腳本的加載也會(huì)阻塞后續(xù)DOM結(jié)構(gòu)的解析造成頁面的留白時(shí)間增長(zhǎng)，雅虎的35條軍規(guī)中有一條就是樣式文件放在頭部，腳本文件放在DOM節(jié)點(diǎn)最末尾，減少阻塞。這里還有幾個(gè)針對(duì)腳本文件的優(yōu)化：
- 針對(duì)不需要DOM操作（主要考慮是需要操作DOM的腳本往往需要獲取一些樣式信息）的Js腳本可以采用動(dòng)態(tài)創(chuàng)建script的方式載入，動(dòng)態(tài)載入的腳本不阻塞后續(xù)資源的加載。
- 腳本文件加載可以加上defer或者async屬性標(biāo)識(shí)防止阻塞
defer是在HTML解析完之后才會(huì)執(zhí)行，如果是多個(gè)，按照加載的順序依次執(zhí)行
async是在加載完成后立即執(zhí)行，如果是多個(gè)，執(zhí)行順序和加載順序無關(guān)
2. 避開Cookie性能bug——靜態(tài)資源CDN
Cookie是前端作為前后臺(tái)登錄態(tài)校驗(yàn)最通常用的緩存方案，但鑒于瀏覽器在每次都會(huì)往同域的任何資源的http請(qǐng)求中自動(dòng)帶上cookie信息的情況，這里有必要進(jìn)行優(yōu)化一下，因?yàn)橄馽ss、js、image這些資源請(qǐng)求是不需要cookie信息的，會(huì)無端造成請(qǐng)求帶寬的浪費(fèi)（想象一下我們的cookie大小假設(shè)為10K，100個(gè)請(qǐng)求就是近1M的大小，高并發(fā)下以我們現(xiàn)行網(wǎng)絡(luò)帶寬也是蠻大的一筆負(fù)擔(dān)了）。
Cookie free性能優(yōu)化方案的處理方式是CDN異域靜態(tài)資源服務(wù)器部署我們的前端css、js、image資源。
3. 代碼優(yōu)化——事件委托等
其實(shí)這里有很多點(diǎn)：
- 要插入DOM片段時(shí)最好使用fragment一次性插入；
- 動(dòng)態(tài)生成100li如何綁定事件，可以通過事件冒泡利用事件委托給父元素綁定事件即可；
- 對(duì)于查找過的節(jié)點(diǎn)可以緩存下來，避免再次查找
- ...
DNS層
DNS預(yù)解析
前端優(yōu)化:DNS預(yù)解析提升頁面速度
這里也是我第一次遇到link標(biāo)簽的另外用法。
HTTP層
1. 減少HTTP請(qǐng)求數(shù)量
- 合并CSS、JS文件
- CSS sprites雪碧圖
- font-icon字體圖標(biāo)
- 圖片base64編碼傳輸
- 圖片懶加載
- HTTP緩存機(jī)制
2. 減輕HTTP請(qǐng)求數(shù)據(jù)大小
css、script、圖片壓縮：這些可以gulp或者webpack自動(dòng)化腳本里面定義腳本任務(wù)來完成。
服務(wù)器開啟gzip壓縮：一般現(xiàn)在服務(wù)器都有開啟Gzip壓縮，壓縮率通常都是30%以上，效果還是不錯(cuò)的。
