前端性能優化

時間 2019-11-12

標籤前端性能優化欄目系統性能简体版

原文原文鏈接

在講前端性能優化前，先了解下一個網站在瀏覽器端是如何渲染的css

一、首先輸入url地址html

二、瀏覽器根據url向服務器發送http請求前端

三、服務器端接收請求並返回html代碼返回瀏覽器web

四、瀏覽器接收html代碼並解析生成頁面算法

五、解析頁面過程瀏覽器

　　a、HTML文檔生成DOM和CSS生成CSSOM緩存

　　b、DOM和CSSOM生成RenderTree性能優化

　　c、有了RenderTree知道了瀏覽器中有那些節點，各個節點的CSS定義繪製成layout render tree服務器

　　d、有了layout render tree 瀏覽器使用瀏覽器UI繪製每一個節點生成 paint render treecookie

資源的合併和壓縮

　　減小http請求，減小請求資源的大小

　　html壓縮

　　　　html壓縮是壓縮文本中空格，製表符，換行符，註釋等

　　css壓縮

　　　　無效代碼刪除

　　　　代碼合併

　　js的壓縮和混亂

　　　　無效字符刪除，註釋

　　　　代碼語義的縮減和優化

　　　　代碼保護

　　文件合併

　　　　減小http請求

　　　　問題

　　　　　　首屏加載慢

　　　　　　緩存失效問題

　　　　方案

　　　　　　公共庫合併

　　　　　　不一樣頁面的合併

　　開啓gzip

圖片先關優化

　　png8/png24/png32之間的區別

　　　　png8 支持透明，文件大小小

　　　　png24 不支持透明

　　　　png32 支持透明

　　圖片壓縮

　　　　針對真實圖片狀況，捨棄一些相對可有可無的色彩信息

　　　　CSS雪碧圖

　　　　　　把一些圖片整合到一張單獨的圖片中->減小網站http請求數量

　　　　　　缺點：整合圖片比較大，一次加載比較慢

　　　　　　方案：保證雪碧圖資源不要太大

　　　　Image inline

　　　　　　將圖片的內容內嵌到html當中->減小網站http請求

　　　　　　只適合小圖片，不適合大圖片

　　　　矢量圖

　　　　　　使用SVG進行適量圖的繪製

　　　　　　使用iconfont解決icon問題

　　　　　　只適合簡單圖片，不適合複雜圖片

　　　　webp

　　　　　　webp有更優的圖像數據算法，能帶來更小的圖片體積

　　　　　　目前只有安卓能用

　　不一樣格式圖片經常使用的業務場景

　　　　jpg有損壓縮，壓縮率高，不支持透明

　　　　png支持透明

　　　　webp壓縮程度更好，可是隻適合安卓

　　　　svg矢量圖，代碼內嵌，只適合圖片相對簡單的場景

　　壓縮網站

　　　　https://tinypng.com/　　

頁面加載和渲染

　　前面講了解析頁面的過程。頁面解析過程的特色

　　順序執行

　　　　詞法分析的順序是從上到下->頁面DOM，JS資源，CSS資源從上到下

　　併發加載

　　　　web中資源是併發加載　　

　　是否阻塞

　　　　css阻塞

　　　　　　css head中阻塞頁面的渲染

　　　　　　　　頁面出現閃動。

　　　　　　　　這個頁面要呈現相應的效果，須要等待link對應的css加載完畢纔會渲染，因此整個渲染是帶樣式的

　　　　　　css阻塞js的執行

　　　　　　　　css在加載完以前後續的js會被阻塞

　　　　　　css不阻塞外部腳本的加載

　　　　　　　　css不阻塞外部腳本的加載可是阻塞執行，由於js可能會操做DOM，在操做DOM的以前必須等待CSS執行完畢

　　　　js阻塞

　　　　　　直接引入的js阻塞頁面的渲染

　　　　　　　　js document.write可能會修改文檔結構，js代碼的執行會阻塞後面節點的建立

　　　　　　js不阻塞資源的加載

　　　　　　　　預先掃描器會對後續資源加載

　　　　　　js順序執行，阻塞後續js邏輯的執行　

　　　　　　　　js執行時單線程　

　　依賴關係

　　　　頁面的渲染依賴於css的加載

　　　　　　頁面必須等待DOM和CSSOM的加載，纔會去生成RenderTree，推薦把css放到head中，這樣不會出現頁面閃動問題

　　　　js執行順序的依賴關係

　　　　　　須要關注js在加載關係是否有依賴關係

　　　　js邏輯對於dom邏輯的依賴關係

　　引入方式

　　　　css

　　　　　　link

　　　　　　@import

　　　　　　script

　　　　　　　　阻塞問題

　　　　　　defer

　　　　　　　　在文檔渲染完畢，在DOMContentLoaded以前調用執行

　　　　　　　　是順序執行，不會阻塞頁面加載

　　　　　　async

　　　　　　　　js異步加載，不會阻塞頁面加載，放棄js直接的依賴關係

　　　　　　js資源動態引入

　　　　　　代碼實戰

一個簡單的引入js代碼

<!DOCTYPE html>
<html>
<head>
<script src="a.js" defer></script>
<script src="b.js" defer></script>
<script>
    window.addEventListener('DOMContentLoaded', function(){
        console.log('DOMContentLoaded')
    })
</script>
</head>
<body>
    <p>js加載</p>
</body>
</html>

View Code

script

圖片結果能夠看出a.js，b.js阻塞頁面的渲染

defer

圖片結果能夠看出a.js，b.js不阻塞頁面加載，看出defer執行是在頁面渲染完畢和DOMContentLoaded之間執行

async

圖片結果能夠看出a.js，b.js不阻塞頁面加載，可是在DOMContentLoaded並不會影響async的加載　

　　加載和執行優化

　　　　css樣式表置頂

　　　　js腳本置底

　　　　合理使用js異步加載能力

懶加載

　　圖片進入可視區域以後請求圖片資源

　　減小無效資源的加載

　　併發加載的資源過多會阻塞js的加載

預加載

　　靜態資源在使用以前提早進行請求

　　提高用戶體驗

重繪和迴流

　　css性能讓js變慢

　　css放在head中，在加載css時，會阻塞整個頁面渲染，js代碼執行時，頁面渲染也是阻塞的

　　迴流

　　　　當RenderTree中的一部分由於元素的規模尺寸，佈局，隱藏等改變並且須要從新構建。稱爲迴流

　　　　當頁面佈局和幾何屬性改變時就須要迴流

　　重繪

　　　　當RenderTree中的一些元素須要更新屬性，而這些只是影響元素的外觀，風格，而不會影響佈局的，好比background-color。稱爲重繪。

　　觸發頁面重佈局的屬性

　　　　盒子模型相關屬性會觸發重佈局

　　　　　　width/height/padding/margin/display/border-width/border/min-height

　　　　定位屬性及浮動也會觸發重佈局

　　　　　　top/bottom/left/right/position/float/clear

　　　　改變節點內部文字結構也會觸發重佈局

　　　　　　text-align/overflow-y/font-weight/overflow/font-family/vertival-align/white-space/font-size

　　只觸發重繪的屬性

　　　　color/border-style/border-radius/visibility/text-decoration/background/background-image/background-position/background-repeat/background-size/outline-color/outline/outline-style/outline-width/box-shadow

　　優化點

　　　　translate替代top

　　　　opacity替換visibility

　　　　預先定義好class，然修改DOM的className

　　　　把DOM離線後修改，好比把DOM設置display:none，最後在顯示出來

　　　　不要把DOM節點的屬性值放在一個循環裏當成循環裏的變量 offsetHeight，offsetWidth

　　　　不要使用table佈局

　　　　動畫實現的速度的選擇

　　　　啓動GPU硬件加速 transform:translateZ(0)

瀏覽器存儲

　　　　用於瀏覽器和服務器之間交互

　　　　客戶端自身數據存儲