提升Web頁面性能的技巧

如今動輒幾兆大小的頁面加載量,讓性能優化成了不可避免的熱門話題。WEB 應用越流暢,用戶體驗就會越好,繼而帶來更多的訪問量。這也就是說,咱們應該檢討一下那些過分美化的 CSS3 動畫和多重操做的 DOM 元素是否都考慮到了在性能方面的影響。在說性能優化以前,咱們有必要理清瀏覽器視覺繪製方面的兩個術語:css

Repaint(重繪):若是某些操做影響了 DOM 元素的可見性,但又沒有影響佈局,那麼就會發生瀏覽器的重繪,好比opacity,background-color,visibility 和 outline 屬性。因爲瀏覽器必須檢查 DOM 中全部節點的可見性——某些圖層或許會置於重繪元素的圖層下面,因此重繪是一個很是繁重的邏輯。gulp

Reflow(迴流):迴流是一個更具破壞性的操做,它會讓瀏覽器從新計算全部元素的座標位置和尺寸大小。每每因爲一個元素的變化,繼而引發其子元素、父元素以及相鄰元素的變化。瀏覽器

無論用戶或者應用自己是否正在執行某些邏輯,這兩種操做都會阻塞瀏覽器進程。極端狀況下,一個 CSS 效果會下降 JavaScript 的執行速度。下面是觸發迴流事件的幾種情境:性能優化

添加、刪除和修改可見的 DOM 元素 添加、刪除和修改部分 CSS 樣式,好比修改元素的寬度,會影響其相鄰元素的佈局位置 CSS3 動畫和過渡效果 使用 offsetWidth 和 offsetHeight。這種情境很詭異,讀取一個元素的 offsetWidth 和 offsetHeight 屬性會觸發迴流 用戶行爲,好比鼠標懸停、輸入文本、調整窗口大小、修改字體樣式等等 瀏覽器的底層實現各有不一樣,因此渲染頁面的開銷也各有輕重。好在咱們有一些一般規則能夠進行性能優化。app

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

雖然已是 2015 了,但我仍是要說不要使用行內聯樣式和 table 佈局。框架

HTML 文檔下載完成後,行內樣式會觸發一次額外的迴流事件。解析器在解析 table 佈局時須要計算大量的單元格的尺寸,因此是件很重的操做。因爲單元格每每是根據表頭寬度肯定的,因此使用 table-layout: fixed 能夠緩解部分性能消耗。grunt

使用 Flexbox 佈局也存在性能損失,由於在頁面加載完成後,flex item 可能會發生位置和尺寸的變化。工具

精簡 CSS 樣式

樣式越少,迴流越快,此外,儘可能不要使用過於複雜的選擇器。這一問題尤爲突出在使用相似 Bootstrap 框架的網站上。使用Unused CSS,uCSS,grunt-uncss 和 gulp-uncss 等工具能夠有效剔除無用樣式。佈局

精簡 DOM 層級

精簡 DOM 層級,指的是減小 DOM 樹的級數已經每一分支上 DOM 元素的數量,結果就是層級越少、數量越少,迴流越快。此外,若是無需考慮舊版本瀏覽器,應該儘可能剔除無心義的包裹類標籤和層級。性能

細粒度操做 DOM 樹

操做 DOM 樹時的粒度要儘量細化,這有助於減弱局部 DOM 變化給總體帶來的影響。

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

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

巧用隱藏方式

使用 display: none; 隱藏的元素不會觸發頁面的重繪和迴流事件,因此能夠在這些元素隱藏期間配置樣式,配置完成後再轉換爲可見狀態。

批量更新元素

單詞更新全部 DOM 元素的性能要優於屢次更新。下面這段代碼觸發了三次頁面迴流:

var myelement = document.getElementById('myelement');
myelement.width = '100px';
myelement.height = '200px';
myelement.style.margin = '10px';

經過如下代碼能夠精簡爲一次頁面迴流事件,而且提升了代碼的可維護性:

var myelement = document.getElementById('myelement');
myelement.classList.add('newstyles');

.newstyles {
    width: 100px;
    height: 200px;
    margin: 10px;
}

同理,咱們還能夠減小操做 DOM 的頻率。假設咱們要建立一個以下所示的無序列表:

輸入圖片說明

若是分次添加每個 item 將會觸發屢次頁面迴流,簡單而高效的方式是使用 DOM fargment 在內存中建立完整的 DOM 節點,而後一次性添加到 DOM 中:

var
    i, li,
    frag = document.createDocumentFragment(),
    ul = frag.appendChild(document.createElement('ul'));

for (i = 1; i <= 3; i++) {
    li = ul.appendChild(document.createElement('li'));
    li.textContent = 'item ' + i;
}

document.body.appendChild(frag);

約束元素變化的影響

這裏的約束是指,儘可能避免某個元素的變化引發大範圍的變化。假設咱們有一個 tab 選項卡的組件,選項卡內部的內容長短不一,這就致使了每一個選項卡的高度不惟一。這一設計帶來的問題就是每次切換選項卡時,周圍的元素都要從新佈局。咱們能夠經過一個固定高度來避免這一狀況。

權衡流暢度和性能

一次移動一像素的位置看起來雖然很流暢,但對於某些低性能終端會是很大的壓力。一次移動四像素下降幀速雖然看起來稍有些遲鈍,但性能壓力下降了。這就是須要咱們權衡的地方:流暢度和性能。

使用開發者工具分析頁面重繪

目前主流瀏覽器都在開發者工具中提供了監控頁面重繪的功能。在 Blink/Webkit 內核的瀏覽器中,使用 Timeline 面板能夠記錄一個頁面活動詳情:

輸入圖片說明

下面是火狐開發者工具中的 TimeLine:

輸入圖片說明

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

輸入圖片說明

全部的瀏覽器都使用綠色來顯示頁面重繪和頁面迴流事件。上面的測試只是幾個簡單的示例,其中沒有調用繁重的動畫效果,因此佈局渲染在總時間中佔據了較大比重。減小頁面迴流和頁面重繪,天然提升頁面性能。

相關文章
相關標籤/搜索