深度講解：web前端性能優化

1、課程簡介：

一、課程大綱

涉及到的分類

• 網絡層面
• 構建層面
• 瀏覽器渲染層面
• 服務端層面

涉及到的功能點

• 資源的合併與壓縮
• 圖片編解碼原理和類型選擇
• 瀏覽器渲染機制
• 懶加載預加載
• 瀏覽器存儲
• 緩存機制
• PWA
• Vue-SSR

前端性能優化原理

• 做用及原理
• 如何與真實業務場景結合
• 理論結合實踐
• 量化分析

課程安排

• 基礎優化          1-3章
• 進階優化           4-7章
• 綜合服務優化    9章
• 回顧總結           10章

2、資源合併與壓縮

一、http請求的過程及潛在的性能優化點

課程目標

• 理解減小http請求數量和減小請求資源大小兩個優化要點
• 掌握壓縮與合併的原理
• 掌握經過在線網站和fis3兩種實現壓縮與合併的方法

瀏覽器的一個請求從發送到返回都經歷了什麼

動態的加載靜態的資源

• 一、dns是否能夠經過緩存減小dns查詢時間
• 二、 網絡請求的過程走最近的網絡環境
• 三、 相同的靜態資源是否能夠緩存
• 四、 可否減小http請求大小
• 五、 可否減小http請求數量
• 六、 服務端渲染

二、html壓縮

資源的合併與壓縮設計到的性能點：

一、減小http請求的數量
二、減小請求的大小
複製代碼

google首頁案例分析

一、html壓縮
二、css壓縮
三、js的壓縮與混亂
四、文件合併
五、 開啓gzip
複製代碼

如何進行html的壓縮

• 一、使用在線網站進行壓縮
• 二、node.js提供了html-minifier工具
• 三、後端模板引擎渲染壓縮

三、css及js壓縮

css的壓縮

一、無效代碼刪除
 二、css語義合併
複製代碼

css壓縮的方式

一、使用在線網站進行壓縮
 二、使用html-minifier對html中的css進行壓縮
 三、使用clean-css對css進行壓縮
複製代碼

js的壓縮語混亂

• 一、無效字符的刪除
• 二、剔除註釋
• 三、代碼語意的縮減和優化
• 四、代碼保護

js壓縮的方式

• 一、使用在線網站進行壓縮
• 二、使用html-minifier對html中的js進行壓縮
• 三、使用uglifyjs2對js進行壓縮

四、文件合併優勢

• 一、文件與文件有插入之間的上行請求，又增長了N-1個網絡延遲
• 二、受丟包問題影響更嚴重
• 三、通過代理服務器時可能會被斷開

文件合併缺點

一、首屏渲染問題
二、緩存失效問題
複製代碼

文件合併對應缺點的處理

一、公共庫合併
二、不一樣頁面的合併
三、見機行事，隨機應變
複製代碼

文件合併對應方法

一、使用在線網站進行合併
二、使用nodejs進行文件合併
複製代碼

3、圖片相關優化

課程目標

• 理解圖片相關的優化的核心概念
• 結合facebook和淘寶移動首頁案例分析
• 掌握經過在線網站和fis3兩種實現圖片相關的一些優化 ###一、一張JPG的解析過程
  jpg有損壓縮：雖然損失一些信息，可是肉眼可見影響並不大 ###二、png8/png24/png32之間的區別
  p png32是在png24上支持了透明，針對不一樣的業務場景選擇不一樣的圖片格式很重要

三、不一樣的格式圖片經常使用的業務場景

不一樣格式圖片的特色

一、jpg有損壓縮，壓縮率高，不支持透明 
二、png支持透明，瀏覽器兼容性好
三、webp壓縮程度更好	，在ios webview中有兼容性問題
四、svg矢量圖，代碼內嵌，相對較小，圖片樣式相對簡單的場景(儘可能使用，繪製能力有限，圖片簡單用的比較多)
複製代碼

不一樣格式圖片的使用場景

一、jpg：大部分不須要透明圖片的業務場景
二、png：大部分須要透明圖片的業務場景
三、webp：android所有(解碼速度和壓縮率高於jpg和png，可是ios safari還沒支持)
四、svg：圖片樣式相對簡單的業務場景
複製代碼

四、圖片壓縮的幾種狀況

一、針對真實圖片狀況，捨棄一些相對可有可無的色彩信息
二、CSS雪碧圖：把你的網站用到的一些圖片整合到一張單獨的圖片中 
   //優勢：減小HTTP請求的數量(經過backgroundPosition定位所需圖片)
   //缺點：整合圖片比較大時，加載比較慢(若是這張圖片沒有加載成功，整個頁面會失去圖片信息)facebook官網任然在用，主要pc用的比較多，相對性能比較強
三、Image-inline：將圖片的內容嵌到html中  //base64信息，減小網站的HTTP請求,若是圖片比較小比較多，時間損耗主要在請求的骨幹網絡
四、使用矢量圖：使用SVG進行矢量圖的繪製,使用icon-font解決icon問題 
五、在android下使用webp：webp的優點主要體如今它具備更優的圖像數據壓縮算法，能帶來更小的圖片體積，並且擁有肉眼識別無差別的圖像質量；同時具有了無損和有損的壓縮模式、Alpha透明以及動畫的特性，在JPEG和PNG上的轉化效果都很是優秀、穩定和統一
複製代碼

4、css和js的裝載與執行

課程目標

• 理解瀏覽器端html、css、js的裝載過程
• 結合chrome的能力學習掌握css、js加載過程當中的優化點
• 經過案例分析和實戰演練深刻理解學習的優化點

一、HTML頁面加載渲染的過程

一個網站在瀏覽器端是如何進行渲染的

二、HTML渲染過程當中的一些特色

• 順序執行，併發加載
• 是否阻塞
• 依賴關係
• 引入方式

阻塞的幾種方式：
   css的加載是否會阻塞js的加載
   css的加載是否會阻塞js的執行
   css的加載是否會影響頁面的渲染
   js的執行是否會阻塞js的執行和js的加載

依賴：
若是咱們把css代碼放在head中去引入的話，那麼咱們整個頁面的渲染實際上就會等待head中css加載並生成css樹，最終和DOM整合生成RanderTree以後纔會進行渲染

js async異步加載


引入：
script src引入有相關阻塞頁面行爲
js資源是否須要動態加載
複製代碼

三、順序執行，併發加載

• 詞法分析

• 併發加載
• 併發上限

四、css阻塞和js阻塞

css阻塞

• css head中阻塞頁面的渲染
• css阻塞js的執行
• css不阻塞外部腳步的加載

css head中經過 link方式引入，避免頁面閃動，由於這樣只有等css加載完纔會渲染
js的執行極可能要操做DOM
複製代碼

js阻塞

• 直接引入的js阻塞頁面的渲染
• js 不阻塞資源的加載
• js順序執行，阻塞後續js的執行

直接經過script src在head中引入，html parse 認爲js會動態修改文檔結構，沒有進行後面文檔的分析

5、懶加載與預加載

• 理解懶加載和預加載的原理
• 懶加載和預加載的案例分析
• 懶加載與預加載的案例實戰

一、懶加載原理

• 圖片進入可視區域以後請求圖片資源
• 對於電商等圖片不少，頁面很長的業務場景適用
• 減小無效資源的加載
• 併發加載的資源過多會會阻塞js的加載，影響網站的正常使用

img src被設置以後，webkit解析到以後纔去請求這個資源。因此咱們但願圖片到達可視區域以後，img src纔會被設置進來，沒有到達可視區域前並不現實真正的src，而是相似一個1px的佔位符。

二、預加載原理

• 圖片等靜態資源在使用以前的提早請求
• 資源使用到時能從緩存中加載，提高用戶體驗
• 頁面展現的依賴關係維護

三、懶加載原生js和zepto.lazyload

一、原理：先將img標籤中的src連接設爲同一張圖片（空白圖片），將其真正的圖片地址存儲再img標籤的自定義屬性中（好比data-src）。當js監聽到該圖片元素進入可視窗口時，即將自定義屬性中的地址存儲到src屬性中，達到懶加載的效果。

注意問題： 一、關注首屏處理,由於還沒滑動 二、佔位，圖片大小首先須要預設高度，若是沒有設置的話，會所有顯示出來

###四、預加載原生js和preloadJS實現 ####預加載實現的幾種方式 第一種方式：直接請求下來

<img src="www.pic27.com/sadfafd/dafdsa.jpg" style="display: none"/>
<img src="www.pic27.com/sadfafd/dsaf.jpg" style="display: none"/>
<img src="www.pic27.com/sadfafd/dasfd.jpg" style="display: none"/>
<img src="www.pic27.com/sadfafd/fdsa.jpg" style="display: none"/>
複製代碼

第二種方式：image對象

var image = new Image();
image.src = "www.pic26.com/dafdafd/safdas.jpg"；
複製代碼

第三種方式：xmlhttprequest

缺點：存在跨域問題
優勢：好控制
複製代碼

本質：平衡瀏覽器加載能力，讓它儘量飽和起來

6、重繪與迴流

• 理解瀏覽器重繪與迴流的機制
• 對於一些經典的案例進行分析
• 重繪與迴流的案例分析

一、css性能讓javascript變慢

要把css相關的外部文件引入放進head中，加載css時，整個頁面的渲染是阻塞的，一樣的執行javascript代碼的時候也是阻塞的，例如javascript死循環。

一個線程   =>  javascript解析
一個線程   =>  UI渲染
複製代碼

這兩個線程是互斥的，當UI渲染的時候，javascript的代碼被終止。當javascript代碼執行，UI線程被凍結。因此css的性能讓javascript變慢。

頻繁觸發重繪與迴流，會致使UI頻繁渲染，最終致使js變慢

二、什麼是重繪和迴流

迴流

• 當render tree中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建。這就成爲迴流(reflow)

• 當頁面佈局和幾何屬性改變時，就須要迴流 ####重繪

• 當render tree中的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不影響佈局，好比background-color。就稱重繪 ####關係

迴流必將引發重繪，可是重繪不必定會引發迴流

三、避免重繪、迴流的兩種方法

觸發頁面重佈局的一些css屬性

• 盒子模型相關屬性會觸發重佈局

width、height、padding、margin、display、border-width、border、min-height
複製代碼

• 定位屬性及浮動也會觸發重佈局

top、bottom、left、right、position、float、clear
複製代碼

• 改變節點內部文字結構也會觸發重佈局

text-align、overflow-y、font-weight、overflow、font-family、line-height、vertical-align、white-space、font-size
複製代碼

優化點：使用不觸發迴流的方案替代觸發迴流的方案

只觸發重繪不觸發迴流

color、
border-style、border-radius、
visibility、
text-decoration、
background、background-image、background-position、background-repeat、background-size、
outline、outline-color、outline-style、outline-width
box-shadow
複製代碼

新建DOM的過程

一、獲取DOM後分割爲多個圖層
二、對每一個圖層的節點計算樣式結果(Recalculate style 樣式重計算)
三、爲每一個節點生成圖形和位置(Layout 迴流和重佈局)
四、將每一個節點繪製填充到圖層位圖中(Paint Setup和Paint  重繪)
五、圖層做爲紋理上傳至gpu
六、符合多個圖層到頁面上生成最終屏幕圖像(Composite Layers 圖層重組)
複製代碼

chrome建立圖層的條件

將頻繁重繪迴流的DOM元素單獨做爲一個獨立圖層，那麼這個DOM元素的重繪和迴流的影響只會在這個圖層中

一、3D或透視變換CSS屬性(perspective transform)
二、使用加速視頻解碼的<video>節點
三、擁有3D(webGl)上下文或加速的2D上下文的<canvas>節點
四、混合插件(如Flash)
五、對本身的opacity作css動畫或使用一個動畫webkit變換的元素
六、擁有加速css過濾器的元素
七、元素有一個包含複合層的後代節點(一個元素擁有一個子元素，該子元素在本身的層裏)
八、元素有一個z-index較低且包含一個複合層的兄弟元素(換句話說，就是該元素在複合層上層渲染)
複製代碼

gif圖

總結

一、避免使用觸發迴流、重繪的CSS屬性 二、將重繪、迴流的影響範圍限制在單獨的圖層(layers)以內 三、圖層合成過程當中消耗很大頁面性能，這時候須要平衡考慮重繪迴流的性能消耗

四、實戰優化點總結

一、用translate替代top屬性
二、用opacity代替visibility
//opacity不會觸發重繪也不會觸發迴流，只是改變圖層alpha值，可是必需要將這個圖片獨立出一個圖層
//visibility會觸發重繪
三、不要一條一條的修改DOM的樣式，預先定義好class，而後修改DOM的className
四、把DOM離線後修改，好比：先把DOM給`display:none`（有一次reflow），而後你修改100次，而後再把它顯示出來
五、不要把DOM節點的屬性值放在一個循環裏當成循環的變量
六、不要使用table佈局，可能很小的一個小改動會形成整個table的從新佈局
//div只會影響後續樣式的佈局
七、動畫實現的速度的選擇
//根據performance量化性能優化
八、對於動畫新建圖層
九、啓用gpu硬件加速(並行運算)，gpu加速意味着數據須要從cpu走總線到gpu傳輸，須要考慮傳輸損耗
//transform:translateZ(0)
//transform:translate#d(0)
複製代碼

7、瀏覽器存儲

• 連接localstorage、cookie、sessionstorage、indexedDB的概念和使用
• 學習理解pwa和service worker的應用
• 案例分析和實戰

一、cookies

多種瀏覽器存儲方式並存，如何選擇？

一、由於http請求無狀態，因此須要cookie去維持客戶端狀態
二、cookie的生成方式：1.http  response  header set-cookie
				   2.js中能夠經過document.cookie能夠讀寫cookie
三、cookie的使用用處：1.用於瀏覽器端和服務器端的交互(用戶狀態)
				   2.客戶端自身數據的存儲			
四、expire：過時時間
五、cookie的限制：1.做爲瀏覽器存儲，大小4kb左右
				2.須要設置過時時間 expire	 
六、重要屬性：httponly 不支持js讀寫(防止收到模擬請求攻擊)	
七、不太做爲存儲方案而是用於維護客戶關係
八、優化點：cookie中在相關域名下面-cdn的流量損耗 
         解決方案：cdn的域名和主站域名要分開			  
複製代碼

二、localStorage

localstorage

• 一、HTML5設計出來專門用於瀏覽器存儲的
• 二、大小爲5M左右
• 三、僅在客戶端使用，不和服務端進行通訊
• 四、接口封裝較好
• 五、瀏覽器本地緩存方案 ####sessionstorage

• 會話級別的瀏覽器存儲

• 大小爲5M左右
• 僅在客戶端使用，不和服務器端進行通訊
• 接口封裝較好
• 對於表單信息的維護 ###三、indexedDB

• IndexedDB是一種低級API，用於客戶端存儲大量結構化數據。該API使用索引來實現對該數據的高性能搜索。雖然Web Storage對於存儲叫少許的數據很管用，但對於存儲更大量的結構化數據來講，這種方法不太有用。IndexedDB提供了一個解決方案。

• 爲應用建立離線版本。

cdn域名不要帶cookie
localstorage存庫、圖片
複製代碼

四、Service Worker產生的意義

五、PWA與Service Worker

PWA(Progressive Web Apps)是一種Web App新模型，並非具體指某一種前言的技術或者某一個單一的知識點，咱們從英文縮寫來看就能看出來，這是一個漸進式的Web App，是經過一系列新的Web特性，配合優秀的UI交互設計，逐步加強Web App的用戶體驗

六、PWA與Service worker

chrome 插件 lighthouse

檢測是否是一個漸進式web app
一、當前手機在弱網環境下能不能加載出來
二、離線環境下能不能加載出來
...
複製代碼

一、可靠：沒有網絡的環境中也能提供基本的頁面訪問，而不會出現「未鏈接到互聯網」的頁面
二、快速：針對網頁渲染及網絡數據訪問有較好的優化
三、融入(Engaging)：應用能夠被增長到手機桌面，而且和普通應用同樣有全屏、推送等特性
複製代碼

service worker

service worker是一個腳本，瀏覽器獨立於當前頁面，將其在後臺運行，爲實現一些不依賴頁面的或者用戶交互的特性打開了一扇大門。在將來這些特性將包括消息推送，背景後臺同步，geofencing(地理圍欄定位)，但他將推出的第一個首要的特性，就是攔截和處理網絡請求的能力，包括以編程方式來管理被緩存的響應。
複製代碼

####案例分析

chrome://serviceworker-internals/
chrome://inspect/#service-worker/
複製代碼

service worker網絡攔截能力，存儲Cache Storage，實現離線應用

####indexedDB

callback && callback()寫法
至關於 
if(callback){
   callback();
}
複製代碼

七、cookie、session、localStorage、sessionStorage基本操做

八、indexedDB基本操做

object store:對象存儲
自己就是結構化存儲
複製代碼

function openDB(name, callback) {
            //創建打開indexdb  indexedDB.open
            var request = window.indexedDB.open(name)
            request.onerror = function(e) {
                console.log('on indexedDB error')
            }
            request.onsuccess = function(e) {
                    myDB.db = e.target.result
                    callback && callback()
                }
                //from no database to first version,first version to second version...
            request.onupgradeneeded = function() {
                console.log('created')
                var store = request.result.createObjectStore('books', {
                    keyPath: 'isbn'
                })
                console.log(store)
                var titleIndex = store.createIndex('by_title', 'title', {
                    unique: true
                })
                var authorIndex = store.createIndex('by_author', 'author')

                store.put({
                    title: 'quarry memories',
                    author: 'fred',
                    isbn: 123456
                })
                store.put({
                    title: 'dafd memories',
                    author: 'frdfaded',
                    isbn: 12345
                })
                store.put({
                    title: 'dafd medafdadmories',
                    author: 'frdfdsafdafded',
                    isbn: 12345434
                })
            }
        }
        var myDB = {
            name: 'tesDB',
            version: '2.0.1',
            db: null
        }

        function addData(db, storeName) {

        }

        openDB(myDB.name, function() {
            // myDB.db = e.target.result
            // window.indexedDB.deleteDatabase(myDB.name)
        });

        //刪除indexedDB
複製代碼

九、indexDB事務

transcation 與  object store創建關聯關係來操做object store
創建之初能夠配置
複製代碼

var transcation = db.transcation('books', 'readwrite')
 var store = transcation.objectStore('books')

 var data =store.get(34314)
 store.delete(2334)
 store.add({
     title: 'dafd medafdadmories',
     author: 'frdfdsafdafded',
     isbn: 12345434
 })

複製代碼

十、Service Worker離線應用

serviceworker須要https協議

十一、如何實現ServiceWorker與主頁面之間的通訊

詳細學習https://lavas.baidu.com/guide/v1/foundation/lavas-start

8、緩存

指望大規模數據能自動化緩存，而不是手動進行緩存，須要瀏覽器端和服務器端協商一種緩存機制

• 理解Cache-Control所控制的緩存策略
• 學習理解last-modified 和 etage以及整個服務端瀏覽器端的緩存流程
• 案例分析和實戰，基於node實踐以上緩存方式

一、httpheader

可緩存性

一、 public:代表響應能夠被任何對象（包括：發送請求的客戶端，代理服務器，等等）緩存。
二、 private:代表響應只能被單個用戶緩存，不能做爲共享緩存（即代理服務器不能緩存它）。
三、 no-cache:強制全部緩存了該響應的緩存用戶，在使用已存儲的緩存數據前，發送帶驗證器的請求到原始服務器
四、 only-if-cached:代表若是緩存存在，只使用緩存，不管原始服務器數據是否有更新
複製代碼

到期

一、 max-age=<seconds>:設置緩存存儲的最大週期，超過這個時間緩存被認爲過時(單位秒)。與     Expires相反，時間是相對於請求的時間。
二、 s-maxage=<seconds>:覆蓋max-age 或者 Expires 頭，可是僅適用於共享緩存(好比各個代理)，而且私有緩存中它被忽略。cdn緩存
三、 max-stale[=<seconds>]
代表客戶端願意接收一個已通過期的資源。 可選的設置一個時間(單位秒)，表示響應不能超過的過期時間。
四、 min-fresh=<seconds>
表示客戶端但願在指定的時間內獲取最新的響應。
複製代碼

從新驗證和從新加載

一、must-revalidate：緩存必須在使用以前驗證舊資源的狀態，而且不可以使用過時資源。
二、proxy-revalidate：與must-revalidate做用相同，但它僅適用於共享緩存（例如代理），並被私有緩存忽略。
三、immutable ：表示響應正文不會隨時間而改變。資源（若是未過時）在服務器上不發生改變，所以客戶端不該發送從新驗證請求頭（例如If-None-Match或If-Modified-Since）來檢查更新，即便用戶顯式地刷新頁面。在Firefox中，immutable只能被用在 https:// transactions. 
複製代碼

一、no-store:緩存不該存儲有關客戶端請求或服務器響應的任何內容。
二、no-transform:不得對資源進行轉換或轉變。Content-Encoding, Content-Range, Content-Type等HTTP頭不能由代理修改。例如，非透明代理能夠對圖像格式進行轉換，以便節省緩存空間或者減小緩慢鏈路上的流量。 no-transform指令不容許這樣作。
複製代碼

二、Expires

Expires

一、緩存過時時間，用來指定資源到期的時間，是服務器端的時間點
二、告訴瀏覽器在過時時間前瀏覽器能夠直接從瀏覽器緩存中存取數據，而無需再次請求
複製代碼

一、expires是http1.0的時候的
二、http1.1時候，咱們但願cache的管理統一進行，max-age優先級高於expires，當有max-age在的時候expires可能就會被忽略。
三、若是沒有設置cache-control時候會使用expires
複製代碼

三、Last-modified和If-Modified-since

一、基於客戶端和服務器端協商的緩存機制
二、 last-modified          -->      response header
    if-modified-since      -->      request header
三、須要與cache-control共同使用
複製代碼

304：
200：
複製代碼

last-modified有什麼缺點？

一、某些服務端不能獲取精確的修改時間
二、文件修改時間改了，但文件的內容卻沒有變
複製代碼

四、Etag 和 If-none-match

一、文件內容的hash值
二、etag            -->reponse header
   if-none-match   -->request header
三、須要與cache-control共同使用
複製代碼

好處：

比if-modified-since更加準確
優先級比etage更高
複製代碼

四、流程圖

9、服務端性能優化

服務端用的node.js由於和前端用的同一種語言，能夠利用服務端運算能力來進行相關的運算而減小前端的運算

課程目標

• 理解vue渲染遇到的問題

• 學習理解vue-ssr和原理和引用
• 按理分析和實戰

vue渲染面臨的問題

先加載vue.js
=>  執行vue.js代碼
=>  生成html
複製代碼

之前沒有前端框架時，
用jsp/php`在服務端進行數據的填充`，發送給客戶端就是已經`填充好數據`的html
複製代碼

使用jQuery異步加載數據
使用React和Vue前端框架
複製代碼

怎麼在vue這個層面對性能進行提高

一、構建層的模板編譯(runtime,compile拆開),構建層作模板編譯工做。webpack構建時候，統一，直接編譯成runtime能夠執行的代碼 

二、數據無關的prerender的方式

三、服務端渲染
複製代碼