網站性能優化·前端篇

時間 2019-11-07

標籤網站性能優化前端欄目網站開發简体版

原文原文鏈接

咱們的目標是優先顯示與用戶要在網頁上執行的主要操做有關的內容。html

上面這句話出自《關鍵呈現路徑》。前端

什麼是前端性能？

前端性能，即頁面性能，簡單來講就是能看到頁面內容的時間以及能夠開始在頁面上操做的時間。web

前端性能與瀏覽器的運做方式密切相關，故想要優化性能就要從瞭解瀏覽器是如何顯示頁面的入手。瀏覽器

基本流程：數據結構

render tree（頁面上所顯示的最終結果）是由 DOM tree（開發工具中所顯示的 HTML 所定義的內容結構）與 CSSOM tree（樣式表所定義的規則結構）合併並剔除不可見的節點所造成的，其中不包含以下節點：框架

資源加載：dom

默認狀況下，JavaScript 腳本會在引入它的位置執行（若是是外聯腳本則還須要等待加載完畢），這時會阻斷 DOM tree 的構建；若是在運行腳本時瀏覽器還沒有完成 CSS 的下載和 CSSOM tree 的構建，瀏覽器會將腳本執行延遲到這些操做結束以後。異步

影響性能的因素：前端性能

提升如下幾個方面，整體性能就會獲得大幅度提高：工具

所要達到的理想指標：

爲了在首次渲染時儘量快，咱們須要優化如下三個變量：

常規步驟：

經過 Navigation Timing API 能夠獲取瀏覽器在處理網頁的關鍵步驟的時間戳。

其中，各步驟的意義以下：

domLoading 表示開始解析第一批收到的 HTML 文檔的字節
domInteractive 表示完成所有 HTML 的解析而且 DOM 構建完畢
domContentLoaded 表示 DOM 與 CSSOM 皆已準備就緒
- 若是沒有解析器阻塞 JavaScript，DOMContentLoaded 事件會在 domInteractive 以後當即觸發
- 不少 JavaScript 框架會在執行它們本身的邏輯前等待這個事件的觸發
domComplete 表示全部的處理都已完成而且全部的附屬資源都已經下載完畢
loadEvent 做爲網頁加載的最後一步以便觸發附加的應用邏輯

排除阻止呈現的 JavaScript 和 CSS
優化 JavaScript 的用法
- 推薦使用異步 JavaScript 資源
- Avoid synchronous server calls
- 延遲解析 JavaScript
- 避免運行時間長的 JavaScript
優化 CSS 的用法
- 將 CSS 放到文檔頭部
- 避免使用 CSS import
- 內聯阻止呈現的 CSS