【前端優化】前端常見性能優化

前言：

web前端本質上是一種GUI軟件（圖形用戶界面—採用圖形方式顯示的計算機操做用戶介面）

性能time=下載資源time+服務響應time（api+瀏覽器渲染time
網絡靜態資源佔用了大概50%的時間 - http請求的過程是前端性能優化的核心
前端優化性能指標：首屏性能-首屏渲染時間要在 1s以內

優化點1：資源請求

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

http://www.zyy1217.com/2017/0...

簡述：

瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求；
服務器交給後臺處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）
瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，創建相應的內部數據結構（如HTML的DOM）載入解析到的資源文件，渲染頁面，完成

請求圖示

dns緩存

什麼是Dns

將網址轉化爲計算機理解的IP地址

是否能夠經過緩存減小dns查詢時間？

dns緩存/瀏覽器緩存查詢/本地host查詢/服務來查詢
DNS查找過程------20ms
經過緩存，來減小這種查找功能

cdn服務（內容分發網絡）

網絡請求的過程走最近的網絡環境
解決網絡擁堵---須要添加服務器--靠money解決

相同的靜態資源緩存

前端：本地 — 添加Expire/Cache-Control頭

後端：使用特殊的字符串---來標識某個請求資源版本

請求資源---瀏覽器tag和服務器tag同樣---返回304---信息沒有被修改--能夠直接使用本地緩存
配置etag能夠減輕服務器的壓力

優化點2：減小http請求大小（壓縮/合併）

服務端：Gzip壓縮

Gzip--思想：先把文件放在服務器上進行壓縮，瀏覽器會自動的解壓縮
這些文本文件都應被壓縮：

服務端渲染SSR

前端：合併壓縮常見html/css/js/圖片

html壓縮

1.實例：

goole點擊查看網頁源代碼，能夠看到壓縮後的HTML

2.規則

在HTML中不顯示的字符，包括空格，製表符，換行符等，還有一些其餘意義的字符，如HTML註釋也能夠被壓縮

3.意義

大廠有意義:google的流量，佔到整個互聯網的40%
預計2016年全球網絡流量將會達到1.3ZB(1ZB = 10^9TB)
那麼google在2016年的流量就是1.3ZB * 40%
若是google每1MB請求減小一個字節
每一年能夠節省流量近500TB

4.實現

Webapack — html-webpack-plugin可進行HTML的壓縮

css壓縮

1.規則：

無效代碼刪除+css語義合併(相一樣式代碼)

2.實現：

Webpack css-loader

JS壓縮

1.規則

無效字符的刪除
剔除註釋
代碼語義的縮減和優化 var a = 1, var a=2, var a=3

2.意義

爲了安全性代碼保護

3.使用

Webpack — UglifyJSPlugin

圖片壓縮

實現：

下降色彩點數 + 肉眼不可見

常見圖片格式和使用場景

Png8/png24/png32
png8 —— 256色 + 支持透明
png24 —— 2^24色 + 不支持透明
png32 —— 2^24色 + 支持透明
不一樣圖片使用不一樣的業務場景 — 手淘
jpg有損壓縮，壓縮率高，不支持透明大部分不須要透明圖片的業務場景
Png支持透明，瀏覽器兼容好， 大部分須要透明圖片的業務場景
webp壓縮程度更好，在ios webview有兼容性問題，安卓所有/safari no/更優的圖像數據壓縮算法
svg矢量圖代碼內嵌相對較小，圖片樣式相對簡單的場， 圖片樣式相對簡單的業務場景

圖片優化方案

1.Css雪碧圖— backgroudPosition/圖片大小很大 丟包 fb/需求頁面
2.Image inline base64 webpack

    module: {
    　　loaders: [
    　　　　{
    　　　　　　test: /\.(png|jpg)$/,
    　　　　　　loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
    　　　　}
    　　]
    }

3. 矢量圖svg內嵌標籤(dom渲染，無請求)/iconfont(svg/png)
    svg標籤 內置屬性方法 只能花顏色單一，曲線不復雜
    https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes
4.tinypng.com壓縮圖片網站

文件合併

意義：

文件與文件之間有插入的上行請求，增長了N-1個網絡延遲

文件合併弊端：

首屏渲染問題 合併文件太大，形成慢
緩存失效問題 標記 md5戳 只要有一個變更 則失效 a,b,c三個js合併

合併規則：

公共庫合併 業務代碼不合並 公共庫合併
不一樣頁面的各自合併 異步加載組件，不一樣頁面單獨打包，監聽路由變化，自動下載

實現

Webpack — require.ensure([], callback)
http://www.cnblogs.com/rubylouvre/p/4981929.html
Webpack — 指定entry就是一個打包的入口
entry:{
  index:["./src/index.js","./src/main.js"]
}

優化點3：瀏覽器渲染

瀏覽器拿到資源後怎麼工做？
http://taligarsiel.com/Projec... how bowser work

概述：

拿到是一個html文件— 裏面內嵌了不少css.js.靜態資源連接
Html渲染特色：順序執行、併發加載（同一域名加載限制）
併發加載： result: 10 in IE 8, 6 in Firefox 3+ and Chrome 5+

瀏覽器會解析三個東西：
（1） HTML/SVG/XHTML，解析這三種文件會產生一個 DOM Tree。
（2） CSS，解析 CSS 會產生 CSS 規則樹。
（3） Javascript腳本，v8引擎，主要是經過 DOM API 和 CSSOM API 來操做 DOM Tree 和 CSS Rule Tree.

載入後立刻執行，執行時會阻塞頁面後續的內容（包括頁面的渲染、其它資源的下載 — 視瀏覽器內核爲定）

Dom解析：

最早請求 字節 字符 詞法分析 dom樹
自上而下 邊下載邊渲染 不斷重繪迴流
DOM 樹的構建過程是一個深度遍歷過程：當前節點的全部子節點都構建好後纔會去構建當前節點的下一個兄弟節點
解析完一部份內容就顯示一部份內容，解析、渲染、http請求並行

css解析

#nav li 去找全部的li，而後再去肯定它的父元素是否是#nav

渲染過程

Render tree結構不等同於dom樹
網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關係
Layout計算出每一個節點在屏幕中的位置
繪製 遍歷render樹，並使用UI後端層繪製每一個節點

Dom/Css渲染優化點

重繪/迴流

名詞解釋：

二者關係

迴流必將引發重繪而重繪不必定會引發迴流

優化：減小reflow/repaint

Css/js的位置 爲何這麼重要，連接放在那裏無所謂嗎？

css阻塞

Css — head — 阻塞頁面渲染（首屏）— 白屏，閃屏
Css — 阻塞js執行/不阻塞js加載 - 邊下邊渲染

緣由：

瀏覽器線程 — GUI渲染線程與javascript線程互斥    
javascript執行依賴dom和css 動態修改

結論：

css通常放在頭部

Js阻塞

直接引入js阻塞頁面渲染 script 
js不阻塞資源加載, — 順序執行 阻塞後續js執行 按文檔結構

Webkit Html-preload-scanner 預加載

阻塞渲染，不阻塞加載，js執行時，扔預先下載一些資源，這是一個負責查找和加載子資源的對象。它經過掃描節點中的 "src" , "link"等屬性，找到外部鏈接資源後，經過CachedResourceLoader進行預加載

解決方法

defer — IE獨有
 IE並行下載js文件、整個DOM裝載完畢執行、多個defer的<script>在執行時也會按照其出現的順序

js通常放在頁面最尾部

補充：瀏覽器內核常駐線程

Q：

1.多個js的加載順序

順序執行

加載後當即執行並阻塞渲染

2.cache-control的參數

緩存請求指令：

Cache-Control: max-age=<seconds>
 
Cache-Control: max-stale[=<seconds>]
 
Cache-Control: min-fresh=<seconds>
 
Cache-control: no-cache
 
Cache-control: no-store
 
Cache-control: no-transform
 
Cache-control: only-if-cached

緩存響應指令

Cache-control: must-revalidate
 
Cache-control: no-cache
 
Cache-control: no-store
 
Cache-control: no-transform
 
Cache-control: public
 
Cache-control: private
 
Cache-control: proxy-revalidate
 
Cache-Control: max-age=<seconds>
 
Cache-control: s-maxage=<seconds>

3.chrome獨有 Html-preload-scanner 預加載

在WebKit中,預加載掃描器指的是一個副解析器,當HTML主解析器被一個同步的script標籤阻塞時,預加載掃描器就會啓動.而後,它會立刻找出接下來即將須要獲取的資源(好比樣式表,腳本,圖片等資源)的URL,而後儘量早的發起網絡請求,而不用等到主解析器恢復運行,從而提升了總體的加載時間