JavaScript 性能優化（1）

當訪問一個網頁時，網頁作了什麼

1. DNS 尋址、IP 解析 - 具體可看： 開發者工具下 - Network - Status Code（200OK，301跳轉等等）。

域名是從右向左解析的。好比www.baidu.com 這個地址。先解析最右邊的點 . ,在解析com、baidu、若是沒有news，就自動添加www縮寫到主頁。

2. webserver

（F12）開發者工具 - Perfomance：訪問一個網站時，當前網頁每一個處理階段的精確時間（timestamp）。

3. 前端頁面渲染流程

3.1  HTML 頁面請求：

3.1.1  HTML文檔下載，如html、js、css、video、audio、img等）

3.1.2  HTML文檔解析 -> dom樹（頁面結構） ->  render樹（顏色、距離、位置） -> 逐級解析dom樹 - > html標籤，link（css），JavaScript，img 等外部引用標籤

link標籤，儘可能減小頁面的reflow（迴流），來提高性能。

JavaScript，用js繪製節點會阻塞其餘標籤解析、甚至下載，如儘可能避免使用document.write()

img src，圖片加載可先使用分辨率較低的圖片。

3.2 瀏覽器的js引擎

3.2.1 V8(c++) Google發佈的開源JavaScript引擎。chrome://about/  （chrome的經常使用功能列表）

3.2.2 SpiderMonkey - Mozilla項目的一部分，C語言實現的JavaScript引擎。

 

4. 分析網站性能的工具：www.webpagetest.org

技術優化出發點：

 

 

性能優化技術類的一些概念

• 首屏時間（加載到第一屏的功能點，所消耗的時間點）
• 白屏時間（從進入頁面到head解析的時間）
• 可操時間（與模塊相關，主要是測試核心模塊的使用率，以及用戶感知）
• 連通率（多爲視頻站點。時間爲縱軸，主要是對應時間用戶看到視屏或者聽到聲音的比例）

 

騰訊推薦的前端性能優化利器 - Passive Event Listeners 和 Timeline