欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

提高Web頁面性能的技巧

2017-07-10 14:31:41 1958瀏覽

現(xiàn)在動輒幾兆大小的頁面加載量，讓性能優(yōu)化成了不可避免的熱門話題。WEB 應用越流暢，用戶體驗就會越好，繼而帶來更多的訪問量。這也就是說，我們應該反省一下那些過度美化的 CSS3 動畫和多重操作的 DOM 元素是否都考慮到了在性能方面的影響。在說性能優(yōu)化之前，我們有必要理清瀏覽器視覺繪制方面的兩個術(shù)語：

Repaint（重繪）：如果某些操作影響了 DOM 元素的可見性，但又沒有影響布局，那么就會發(fā)生瀏覽器的重繪，比如 opacity，background-color,visibility 和 outline 屬性。由于瀏覽器必須檢查 DOM 中所有節(jié)點的可見性——某些圖層或許會置于重繪元素的圖層下面，所以重繪是一個非常繁重的邏輯。

Reflow（回流）：回流是一個更具破壞性的操作，它會讓瀏覽器重新計算所有元素的坐標位置和尺寸大小。往往由于一個元素的變化，繼而引起其子元素、父元素以及相鄰元素的變化。

不管用戶或者應用本身是否正在執(zhí)行某些邏輯，這兩種操作都會阻塞瀏覽器進程。極端情況下，一個 CSS 效果會降低 JavaScript 的執(zhí)行速度。下面是觸發(fā)回流事件的幾種情境：

1. 添加、刪除和修改可見的 DOM 元素
2. 添加、刪除和修改部分 CSS 樣式，比如修改元素的寬度，會影響其相鄰元素的布局位置
3. CSS3 動畫和過渡效果
4. 使用 offsetWidth 和 offsetHeight。這種情境很詭異，讀取一個元素的 offsetWidth 和 offsetHeight 屬性會觸發(fā)回流

用戶行為，比如鼠標懸停、輸入文本、調(diào)整窗口大小、修改字體樣式等等

瀏覽器的底層實現(xiàn)各有不同，所以渲染頁面的開銷也各有輕重。好在我們有一些通常規(guī)則可以進行性能優(yōu)化。

使用最佳實踐所建議的布局技巧

雖然已經(jīng)是 2015 了，但我還是要說不要使用行內(nèi)聯(lián)樣式和 table 布局。

HTML 文檔下載完成后，行內(nèi)樣式會觸發(fā)一次額外的回流事件。解析器在解析 table 布局時需要計算大量的單元格的尺寸，所以是件很重的操作。由于單元格往往是根據(jù)表頭寬度確定的，所以使用 table-layout: fixed 可以緩解部分性能消耗。

使用 Flexbox 布局也存在性能損失，因為在頁面加載完成后，flex item 可能會發(fā)生位置和尺寸的變化。

精簡 CSS 樣式

樣式越少，回流越快，此外，盡量不要使用過于復雜的選擇器。這一問題尤其突出在使用類似 Bootstrap 框架的網(wǎng)站上。使用 Unused CSS,uCSS,grunt-uncss 和 gulp-uncss 等工具可以有效剔除無用樣式。

精簡 DOM 層級

精簡 DOM 層級，指的是減少 DOM 樹的級數(shù)已經(jīng)每一分支上 DOM 元素的數(shù)量，結(jié)果就是層級越少、數(shù)量越少，回流越快。此外，如果無需考慮舊版本瀏覽器，應該盡量剔除無意義的包裹類標簽和層級。

細粒度操作 DOM 樹

操作 DOM 樹時的粒度要盡可能細化，這有助于減弱局部 DOM 變化給整體帶來的影響。

從文檔流中移除復雜的動畫效果

應該確保使用動畫的元素脫離了文檔流，使用 position: absolute 和 position: fixed屬性脫離文檔流的元素會被瀏覽器創(chuàng)建一個新層來存放，這些圖層上的修改不會影響其他圖層上的元素。

巧用隱藏方式

使用 display: none; 隱藏的元素不會觸發(fā)頁面的重繪和回流事件，所以可以在這些元素隱藏期間配置樣式，配置完成后再轉(zhuǎn)換為可見狀態(tài)。

批量更新元素

單詞更新所有 DOM 元素的性能要優(yōu)于多次更新。下面這段代碼觸發(fā)了三次頁面回流：

 

通過以下代碼可以精簡為一次頁面回流事件，并且提高了代碼的可維護性：

 

同理，我們還可以減少操作 DOM 的頻率。假設(shè)我們要創(chuàng)建一個如下所示的無序列表：

 

如果分次添加每一個 item 將會觸發(fā)多次頁面回流，簡單而高效的方式是使用 DOM fargment 在內(nèi)存中創(chuàng)建完整的 DOM 節(jié)點，然后一次性添加到 DOM 中：

 

約束元素變化的影響

這里的約束是指，盡量避免某個元素的變化引起大范圍的變化。假設(shè)我們有一個 tab 選項卡的組件，選項卡內(nèi)部的內(nèi)容長短不一，這就導致了每個選項卡的高度不唯一。這一設(shè)計帶來的問題就是每次切換選項卡時，周圍的元素都要重新布局。我們可以通過一個固定高度來避免這一情況。

權(quán)衡流暢度和性能

一次移動一像素的位置看起來雖然很流暢，但對于某些低性能終端會是很大的壓力。一次移動四像素降低幀速雖然看起來稍有些遲鈍，但性能壓力降低了。這就是需要我們權(quán)衡的地方：流暢度和性能。

使用開發(fā)者工具分析頁面重繪

目前主流瀏覽器都在開發(fā)者工具中提供了監(jiān)控頁面重繪的功能。在 Blink/Webkit 內(nèi)核的瀏覽器中，使用 Timeline 面板可以記錄一個頁面活動詳情：

 

下面是火狐開發(fā)者工具中的 TimeLine:

 

在 IE 中這個功能被放置在了 UI Responsiveness 面板中：

 

所有的瀏覽器都使用綠色來顯示頁面重繪和頁面回流事件。上面的測試只是幾個簡單的示例，其中沒有調(diào)用繁重的動畫效果，所以布局渲染在總時間中占據(jù)了較大比重。減少頁面回流和頁面重繪，自然提高頁面性能。