1. 用performance分析前端頁面效能
從這張經典的圖里，我們可以大致看到乙個網頁從url輸入到主要資源載入完成的主要過程：獲取 url -> 重定向 -> 服務端快取 -> dns查詢 -> 建鏈 -> 文件傳輸 ->** 文件資源解析和處理 **-> 主要資源載入完成。
傳統的前端秒開效能優化基本上是通過優化以上各個節點的時間來完成的
2. 從資源角度分析頁面效能
從5個方面來優化頁面的效能：
1. 載入優化
1.1 避免重定向
1.2 網域名稱、請求收斂
1.3 資源按需載入
1.4 資源合併壓縮
1.5 資源(預)快取
1.6 資源預請求
2. 優化
2.1 用css等代替小
2.2 合併小圖
2.3 正確使用格式，尺寸
2.4 適當壓縮
2.5 懶載入
3. css優化
3.1 css寫在頭部
3.2 避免css表示式
3.3 移除空置的css規則
3.4 避免內聯style
4. js優化
4.1 減少重繪和回流
4.2 快取dom選擇與計算
4.3 盡量使用事件**
4.4 盡量使用id選擇器
5. 渲染優化
5.1 減少dom數量、層級
5.2 css3動畫代替js動畫
5.3 使用requestanimationframe
5.4 高頻事件裡面減少計算和操作
5.5 使用硬體加速觸發gpu渲染
5 前端效能優化
一 減少http請求數量 1 使用css精靈圖 將多張合併成一張達到減少http請求，可以通過css的background image和backgound position來訪問內容。2 合併css和js，並進行壓縮 3 採用懶載入 二 控制資源檔案的載入優先順序 一般將css放在頭部，js放在底部...
H5 前端效能測試實踐
如下圖所示，是精選平台開啟 h5 頁面的幾個過程截圖。1 載入網路請求 這個過程主要是 webview 拿到 h5 頁面 url 之後，呼叫 loadurl 方法，開始去網路上請求第乙個資源檔案。這個階段主要包含 dns 解析 建立網路鏈結 資料傳輸的耗時。2 html 解析 webview 拿到 ...
H5 前端效能測試實踐
如下圖所示，是精選平台開啟 h5 頁面的幾個過程截圖。1 載入網路請求 這個過程主要是 webview 拿到 h5 頁面 url 之後，呼叫 loadurl 方法，開始去網路上請求第乙個資源檔案。這個階段主要包含 dns 解析 建立網路鏈結 資料傳輸的耗時。2 html 解析 webview 拿到 ...