web前端性能優化

時間 2019-11-19

標籤 web 前端性能優化欄目 HTML 简体版

原文原文鏈接

1、概念

1.優化地方：首屏時間，資源加載，交互響應，渲染，滾動，圖片，動畫

2.頁面速度因素：網絡寬帶速度設備性能（CPU,GPU,瀏覽器）頁面自己（js,css等）

3.法則：減小請求，合併，壓縮，樣式，css雪碧圖，外聯內聯，DNS，圖片壓縮，渲染優化等

4.RTT：(Round-Trip Time)往返時間簡單來講就是發送方從發送數據開始，到收到來自接受方的確認信息所經歷的時間。

5.14KB原則: 控制頁面資源包在14KB內來減弱慢啓動的影響

6.緩存：

協議緩存：Cache-Control(或Expires) Last-Modified(或Etag)

離線緩存：Cache Manifest

本地存儲：localStorage sessionStorage

indexDB

7.requestAnimationFrame計算FPS(每秒鐘畫面更新次數) 1000ms/60=16.67

8.網絡耗時的測定：window.performance

9.GPU渲染:transform,opacity,filter，video

使用GPU能夠優化動畫效果 GPU渲染會達到60fps 使用對GPU友好的css屬性

觸發硬件加速的css(瀏覽器經過某些樣式建立了一個獨立圖層，圖層中的動畫由GPU進行預處理而且觸發了硬件加速)

2、優化場景

方法：減小http請求，壓縮，懶加載，css Sprite，異步加載，cdn,縮小cookie，避免重定向

　　壓縮圖片，腳本執行優化，touch事件優化，減小dom節點，canvas, 動畫優化，GPU加速，緩存，首屏，無阻塞，離線包

2.1 圖片

圖片格式選擇

圖片壓縮工具： gifsicle:建立和優化GIF圖片 jpegtran:優化jpeg圖片 optipng:無損png優化 pngquant :有損png優化

依靠css3繪製圖片：體積小，減小請求，矢量

使用iconfont代替圖片：加載性能好，支持css樣式，兼容性好，矢量，缺點：只支持單色圖標

Data URL弊端：在作加載優化時，須要綜合考慮是否採用

Base64編碼的數據體積一般是原數據的體積的4/3css

消耗更多CPU和內存資源前端

爲了使其可緩存，寫在CSS中致使CSS文件大了css3

適用於圖片小，頁面上引用圖片總數很少的場景web

2.2 加載/滾動

加載優化

預加載：顯性加載隱性加載

按需加載：懶加載，響應式加載（使用srcset+sizes屬性與w標識符）

2.3 ajax

數據埋點，統計等場景，不用ajax,用img 設置src

優勢:不存在跨域；並行加載，不影響頁面加載；更簡單

2.4 js和css

1.localStorage/indexDB:Localstorage不支持大文件,頻繁讀寫,會溢出;indexDB相似數據庫

2.webwoker:

運行在後臺、獨立於其餘腳本、不會影響頁面的性能

除了DOM操做以外、理論上任何JS腳本任務均可放入worker中執行

用戶體驗上來看、提高了性能

　　3.timeline工具

4.渲染優化

避免在document上直接進行頻繁的DOM操做
使用classname代替內聯修改樣式
緩存Layout屬性值
設置元素的position爲absolute或fixed
讀寫分離,批量操做
不要在css裏面寫expression
不要在16ms內發生屢次渲染行爲

5.滾動渲染:重繪是一個阻塞操做，滾動時減小繪製

6.策略:ajax

requestAnimationFrame
絕對定位
開啓GPU加速: -webkit-transform :translateZ(0)
Canvas
禁止圖像縮放（使用實際大小的圖片很是重要）
根據實際頁面狀況慎用耗性能的CSS屬性

7.構建工具支持:文件體積的減少

Webpack: Tree-shaking –刪除無用代碼

Webpack: CommonsChunk --提取公共代碼

3、首屏優化

資源內聯
壓縮直出內容：直出數據，不直出dom，dom經過模板數據生成
首屏數據預拉取：加載js文件,發送請求拉取數據
非首屏預拉取首屏數據:話題詳情中點擊,預先取首屏的數據
靜態資源存儲到localStorage:資源包減少,流量節省
網絡環境差別化加載資源:webview提供接口,2G網絡加載低質量圖片,Wi-Fi環境中預加載資源
數據複用:我的中心（用戶信息）

        if (/MicroMessenger/ig.test(navigator.userAgent)){ // 微信環境加載js api 
            resourcesToLoad.push('http://res.wx.qq.com/open/js/jweixin-1.0.0.js');
        }
        wx.getNetworkType({
            success: function (res) {
                var networkType = res.networkType; // 返回網絡類型2g，3g，4g，wifi
            if ( networkType == 'wifi' ) { //若是是wifi環境，預加載全部的圖片文件 
                //預加載的資源代碼 
                var resouresToPreLoad = [xxxxxx, xxxxxxxx]; //此處省略一堆資源代碼
                for (var i = resouresToPreLoad.length - 1; i >= 0; i--) {
                    new Image().src = resouresToPreLoad[i];
                }
                }
            }
        });