資源的合并與壓縮

• 核心：減少http請求數(shù)量（合并）減少資源請求大邢峋（壓縮）
• html壓縮：壓縮這些在文本文件中有意義皿哨，但是在html中不顯示的字符长酗，包括空格铜涉，制表符智玻，換行符等，還有一些其他意義的字符芙代，如注釋等也可以被壓縮吊奢。
  1. 使用在線網(wǎng)站進行壓縮（現(xiàn)在不常用）
  2. nodejs提供的 html-minifier 工具（可選是否壓縮注釋，是否壓縮空格等）
  3. 后端模版引擎渲染壓縮
• css壓縮（無效代碼刪除纹烹，css語義合并）
  1. 使用在線網(wǎng)站進行壓縮
  2. 使用的 html-minifier 對 html 中對 css 壓縮
  3. 使用 clean-css 對 css 壓縮
• js壓縮與混亂（無效字符的刪除页滚，剔除注釋，代碼語義的縮減和優(yōu)化铺呵，代碼保護）
  1. 使用在線網(wǎng)站進行壓縮
  2. 使用的 html-minifier 對 html 中對 js 壓縮
  3. 使用 uglifyjs2 對 js 壓縮
• 文件合并
  1. 不合并時
     1. 文件與文件之間有插入的上行請求裹驰，增加了N-1個網(wǎng)絡延遲。
     2. 受丟包問題影響嚴重片挂。
     3. keep-alive經(jīng)過代理服務器時可能會被打斷幻林。
  2. 合并時
     1. 首屏渲染問題。
     2. 緩存失效問題音念。
     3. 結(jié)局方案：
        1. 公共庫單獨合并與業(yè)務代碼分開沪饺。
        2. 不同頁面分別打包（異步加載組件）
        3. 見機行事，隨機應變
  3. 如何進行文件合并闷愤？
     1. 使用在線網(wǎng)站進行文件合并
     2. 使用nodejs實現(xiàn)文件合并（gulp webpack fis3）

圖片相關優(yōu)化

• 各圖片格式對比：
  1. jpg: 有損壓縮 壓縮率高 體積小 加載快 不支持透明（大部分不需要透明圖片的業(yè)務場景比如大的背景圖或輪播圖等）
  2. png: 無損壓縮 體積大 質(zhì)量高 瀏覽器兼容好 （顏色簡單整葡，需要透明圖片，對比性強的小圖片）
     1. png8 -> 256色 支持透明
     2. png24 -> 2^24色 不支持透明
     3. png32 -> 2^24色 支持透明
  3. webp 由谷歌2010提出 壓縮格式更好 在ios webview內(nèi)有兼容問題讥脐，安卓沒問題遭居；優(yōu)勢在于它具有更優(yōu)的圖像數(shù)據(jù)壓縮算法，能帶來更小的圖片體積攘烛，而且擁有肉眼識別無差異的圖像質(zhì)量魏滚；同時具備了無損和有損的壓縮模式，Alpha透明以及動畫的特性坟漱，在JPEG和PNG上的轉(zhuǎn)換效果都非常優(yōu)秀穩(wěn)定和統(tǒng)一鼠次。
  4. SVG（可縮放矢量圖形）文本文件內(nèi)嵌在代碼中，體積更小 可以無限放大不失真 兼容性好 圖片樣式相對簡單（例：iconfont）
  5. Base64
     1. 文本文件 依賴代碼 小圖片的最優(yōu)解決方案 作為雪碧圖的補充而存在
     2. Base64是一種用于傳輸8Bit字節(jié)碼的編碼形式芋齿，將圖片通過Base64編譯腥寇，可將編碼結(jié)果直接寫入html或css從而減少HTTP的請求。
     3. 使用條件：1. 圖片的實際尺寸小觅捆，更新頻率低無法以雪碧圖等形式與其他小圖融合赦役。
• css雪碧圖：優(yōu)：通過圖片整合減少HTTP請求；缺：整合圖片過大時栅炒，一次加載過慢或請求失敗時掂摔，會導致頁面失常（可以根據(jù)業(yè)務場景拆分整合為多張雪碧圖术羔，移動端使用較少）。

CSS JS的加載與執(zhí)行

1. 一個網(wǎng)站在瀏覽器端是如何被渲染的乙漓？

   
   
   頁面加載渲染過程.png

2. HTML渲染過程特點：

   1. 順序執(zhí)行（自上而下） 并發(fā)加載（瀏覽器對域名的加載數(shù)量有限制）
   2. 是否阻塞
      1. CSS阻塞
         1. CSS在head中以link形式引入會阻塞頁面的渲染级历，需等link標簽所引入的CSS加載后，方進行渲染叭披。
         2. CSS會阻塞JS的執(zhí)行（JS執(zhí)行可能會依賴已經(jīng)生成好CSS的DOM）寥殖。
         3. CSS不阻塞外部腳本加載。
         4. CSS加載方式
         5. 1. link 2. @import 3. 行內(nèi)樣式 4. 內(nèi)部樣式表
         6. link與@import的區(qū)別：
            1. link功能更多涩蜘，可以定義RSS嚼贡，Rel等，@import只能加載CSS同诫。
            2. 解析link時粤策，頁面會同步加載css。@import所引用的只能等頁面加載完成后加載剩辟。
            3. @import需要IE5以上
            4. link可以JS引入掐场。@import不可
         7. CSS選擇器優(yōu)先級
            1. ！important > 行內(nèi) > id > class >tag > * > 繼承 > 默認
            2. 從右向左解析
            3. 約具體優(yōu)先級越高贩猎，后面的會覆蓋前面的
         8. CSS書寫順序：位置屬性 > 大小 > 文字系列 > 背景邊框 > 其他
      2. JS阻塞
         1. <script>直接引入會阻塞頁面的渲染（JS執(zhí)行可能會改變現(xiàn)有頁面結(jié)構）熊户。
         2. JS不會阻塞資源的加載。
         3. JS順序執(zhí)行吭服，阻塞后續(xù)JS邏輯的執(zhí)行嚷堡。
         4. defer屬性：
            1. 延遲腳本執(zhí)行，DOM加載完成后再執(zhí)行腳本艇棕。
            2. 非外部引入的內(nèi)置<script>標簽defer屬性不生效蝌戒，也不應該在外部腳本中使用document.write
         5. async屬性：
            1. 使用另一個進程下載腳本，下載時不會阻塞渲染沼琉，腳本下載完畢后暫停解析HTML北苟，執(zhí)行該腳本，腳本執(zhí)行完畢后恢復解析HTML打瘪。
            2. 當同時多個外部腳本加載時友鼻，無法保障執(zhí)行順序，哪個先下載完成就先執(zhí)行哪個闺骚。
         6. 腳本直接無依賴關系就使用async彩扔，反之用defer。
         7. 同時使用async與defer時僻爽，defer不起作用虫碉，由async決定。
   3. 依賴關系
   4. 引入方式

懶加載與預加載

1. 懶加載：

   1. 圖片進入可視區(qū)域之后請求圖片資源胸梆。
   2. 適用于電商等圖片很多敦捧，頁面很長的業(yè)務場景须板。
   3. 可以有效的減少無效資源的加載。
   4. 并發(fā)記載的資源過多會阻塞js加載兢卵，影響網(wǎng)站的正常使用逼纸。

   /**HTML部分**/
   <img src="" class="image-item" lazyload="true" data-original="圖片路徑"/>
   /**JS部分**/
   //獲取可是區(qū)域的高度
   var viewHeight = document.documentElement.clientHeight;
   function lazyload() {
       var eles = document.querySelectorAll('img[data-original][lazyload]')
       Array.prototype.forEach.call(eles, function (item, index) {
           var rect;
           if (item.dataset.original === '') {
             return
           }
           //getBoundingClientRect:返回元素的大小及其相對于視口的位置。
           rect = item.getBoundingClientRect()
           if (rect.bottom >= 0 && rect.top < viewHeight) {
             !function () {
               var img = new Image()
               img.src = item.dataset.url
               img.onload = function () {
                 item.src = img.src
               }
               item.removeAttribute("data-original")
               item.removeAttribute("lazyload")
             }()
           }
       }
   }
   //手動調(diào)用济蝉，使第一屏圖片正常顯示
   lazyload()
   document.addEventListener('scroll', lazyload)
   //需要預先設置圖片高度占位，如果圖片沒有預設高度菠发，每個img的hight幾乎為零王滤，會導致首屏可是區(qū)域圖片過多。
   

2. 預加載

   1. 圖片等靜態(tài)資源在使用之前的提前請求滓鸠。
   2. 資源被需要時可以從緩存中加載雁乡，提升用戶體驗。
   3. 頁面展示的依賴關系維護糜俗。

   //解決方案1:使用Image對象
       var image = new Image()
       image.src = "圖片地址"
   //解決方案2:使用XMLHttpRequest對象
       //優(yōu)：對整個請求過程有更好的監(jiān)控踱稍，可以更好的控制傳輸過程。
       //缺：存在跨域問題
   //解決方案3:使用preload.js
   
   

重繪與回流

• 頁面渲染方式：
  1. 服務器渲染（所見即所得-頁面呈現(xiàn)的內(nèi)容我們在html源文件可以找到）
  2. 客戶端渲染（頁面呈現(xiàn)的內(nèi)容悠抹，在html源文件找不到）
• 瀏覽器內(nèi)核：1. 渲染引擎（HTML解釋器珠月，CSS解釋器，布局楔敌，網(wǎng)絡啤挎，存儲等） 2. JS引擎
• 瀏覽器渲染
  1. HTML解釋器（將HTML文檔經(jīng)過語法分析輸出DOM樹）
  2. CSS解釋器 （解析CSS文檔 生成樣式規(guī)則）
  3. 圖布局層計算模式（布局計算每個對象的精確位置與大小）
  4. 視圖繪制模式（進行具體節(jié)點的圖像繪制卵凑，將像素渲染在屏幕上）
  5. JavaScript引擎（編譯執(zhí)行JavaScript代碼）
• 回流： 當render tree中的一部分（或全部）因為元素的規(guī)模尺寸庆聘，布局，隱藏等改變而需要重新構建勺卢，這就稱為回流（reflow）伙判，當頁面 布局 和 幾何屬性 改變時就需要回流。
  1. 觸發(fā)頁面重新布局的屬性
     1. 盒子模型相關屬性（width,height, padding, margin, display, border-width,border, min-height ）
     2. 定位屬性及浮動(top, bottom, left, right, position, float, clear)
     3. 改變節(jié)點內(nèi)部文字結(jié)構(text-align, overflow-y, font-weight, overflow, font-family, line-height, vertival-align, white-space, font-size)
• 重繪 ：當render tree中的一些元素需要更新屬性黑忱，而這些屬性只影響元素的外觀宴抚，風格，而不影響布局的杨何，稱之為重繪（background-color酱塔，color）
• ==回流必定引起重繪，重繪不一定會引起回流==
• 新建DOM的過程
  1. 獲取DOM后分割為多個圖層
  2. 對每個涂層對節(jié)點計算樣式結(jié)果
  3. 為每個節(jié)點生成圖形和位置（Layout-回流和重新布局）
  4. 將每個節(jié)點繪制填充到圖層位圖中
  5. 將圖層作為紋理上傳到CPU
  6. 復合多個圖層到頁面上生成最終屏幕圖像
• 將 頻繁重繪回流++ 的DOM元素單獨作為一個 獨立圖層危虱，那么這個DOM元素的重繪和回流的影響 只會在這個圖層中羊娃。
• 生成新圖層
  1. 3D或者透視變化CSS屬性（translated 3d，translateZ）
  2. 使用加速視頻解碼的video標簽埃跷，iframe標簽
  3. 擁有3D(WebGL)上下文或者加速的2D上下文<canvas>
  4. 混合插件（flash）
  5. 使用動畫的元素（opacity）
  6. 元素有一個包含符合層的后代節(jié)點
  7. 該元素在符合層上渲染蕊玷，z-index較低邮利，有兄弟節(jié)點
• 優(yōu)化點：
  1. 用 translate 代替 top。
  2. 用 opacity 替換 visibility垃帅，使用visibility替換display:none延届。
  3. 不要一條一條修改DOM的樣式，預先定義好class贸诚，然后修改DOM的className方庭。
  4. DOM離線后修改（先display:none，修改完成后再顯示）酱固。
  5. 不要把DOM節(jié)點的屬性值（offsetHeight,offsetWidth）放在循環(huán)里當循環(huán)的變量械念。
  6. 不使用table。
  7. 動畫實現(xiàn)速度的選擇运悲，速度越快回流次數(shù)越多龄减。
  8. 將頻繁運行的動畫變?yōu)閳D層，圖層可以阻止節(jié)點回流影響別的元素班眯。
  9. 啟用GPU加速

瀏覽器存儲

• Cookie：（HTTP請求無狀態(tài)希停，所以需要cookie去維持客戶端狀態(tài)）
  1. 生成方式：
     1. http response header 中的 set-cookie。
     2. js中document.cookie 可以讀寫cookie署隘。
  2. 服務端生成宠能，客戶端存儲與管理，存儲上限4KB定踱。
  3. 以域名的形式進行區(qū)分棍潘，不同域名下的cookie是獨立的⊙旅模可以設置生效的域亦歉，可以操作Cookie是當前域及當前域下的所有子域，一個域名上限20條畅哑。
  4. 使用場景：
     1. 會話狀態(tài)管理肴楷，（登錄狀態(tài)，購物車）
     2. 個性化設置（自定義設置荠呐，主題）
     3. 瀏覽器行為跟蹤
     4. 瀏覽器端和服務器端交互赛蔫。
     5. 客戶端自身數(shù)據(jù)存儲。
  5. 屬性：1. expire 過期時間 2. httponly禁止JS讀寫
  6. Cookie在相關域名下存在CDN的流量損耗（解決辦法：CDN的域名和主站域名分開）
• LocalStorage（專職瀏覽器存儲泥张；5M左右呵恢； 僅在客戶端使用，不與服務端通信媚创； 接口封裝較好渗钉； 瀏覽器本地緩存方案）
• SessionStorage（會話級別的瀏覽器存儲；5M左右； 僅在客戶端使用鳄橘，不與服務端通信声离； 接口封裝較好； 對于表單信息的維護）
• IndexedDB（是一種低級API瘫怜，用于客戶端存儲大量結(jié)構化數(shù)據(jù)术徊，該API使用索引來實現(xiàn)對該數(shù)據(jù)的高性能搜索，雖然WebStorage對于存儲較少量的數(shù)據(jù)很有用鲸湃，但對于存儲更大量的數(shù)據(jù)化結(jié)構來說赠涮，這個方法不太有用，IndexedDB提供了一個解決方案暗挑∈滥遥可以為應用創(chuàng)建離線版本）
• PWA（Web App新模型，漸進式Web App窿祥，通過一系列新的Web特性，配合優(yōu)秀的UI交互設計蝙寨，逐步的增強Web App的用戶體驗）
  1. 可靠性：在沒有網(wǎng)絡的環(huán)境下也能提供基本的頁面訪問晒衩，為不會出現(xiàn)“未鏈接到互聯(lián)網(wǎng)”的頁面。
  2. 快速：針對網(wǎng)絡渲染和網(wǎng)絡數(shù)據(jù)訪問有較好優(yōu)化墙歪。
  3. 融入：應用可以被增加到手機桌面听系，并且和普通應用一樣有全屏，推送等特性虹菲。
  4. 性能檢測-lighthouse 谷歌插件
• Service Worker：一個腳本靠胜，瀏覽器獨立于當前頁面，將其在后臺運行毕源，為實現(xiàn)一些不依賴頁面或者用戶交互的特性打開了一扇大門浪漠。在未來這些特性將包括推送信息，背景后臺同步霎褐，geofencing（地理圍欄定位）址愿，但它將推出的第一個首要特性，就是攔截和處理網(wǎng)絡請求的能力冻璃，包括以編程方式來管理被緩存的響應响谓。

瀏覽器緩存

• httpheader中的Cache-Control(Response,Request)

  1. max-age：最大緩存時間
     1. 在HTTP1.1被提出;
     2. max-age:31536000;
     3. status Code:200;
     4. 在這段時間內(nèi)瀏覽器不會再向服務器發(fā)送請求。
  2. s-maxage：最大緩存時間
     1. status Code:304;
     2. 只對public緩存設備（CDN）生效;
     3. 同時出現(xiàn)時優(yōu)先級高于max-age省艳，若s-maxage未過期則向代理服務器請求緩存資源;
     4. s-maxage:31536000;
  3. private：只能被瀏覽器緩存（默認）
  4. public：可以被代理服務器與瀏覽器緩存（未明確設置public 但使用了s-maxage也表示可以被代理服務器緩存）
  5. no-cache：繞開瀏覽器娘纷，每次請求不會詢問瀏覽器緩存直接與服務器通信確認資源是否過期（Cache-Control：private,max-age=0,no-cache）
  6. no-store：不使用任何緩存策略。

• Expires:(HTTP1.0版本有效)緩存過期時間跋炕；用來指定資源的到期時間赖晶，是服務器端的具體時間點，告訴瀏覽器在過期時間之前可以直接從瀏覽器緩存取數(shù)據(jù)枣购，無需再次請求嬉探。

  1. expires:Wed, 24 Jun 2018 12:19:34 GMT
  2. 優(yōu)先級：Cache-Control > Expires 同時存在以Cache-Control為準
  3. 會存在時間戳問題擦耀，此屬性對本地時間有依賴，若修改客戶端時間會失效涩堤。

• Last-Modified/If-Modified-Since（基于客戶端和服務端協(xié)商的緩存機制）

  1. If-Modified-Since 資源文件的最后的修改時間：在request header上 眷蜓；若資源沒有更新，status Code:304;
  2. Last-Modified 資源最后修改時間：存在response header中
  3. 與Cache-Control配合使用胎围。
  4. Last-Modified缺點：
     1. 某些服務器不能獲取精確的修改時間吁系。
     2. 有可能文件的修改時間改了，但是文件內(nèi)容沒有更改白魂。

• Etag/If-None-Match（文件內(nèi)容的hash值）

  1. Etag存在response header中
  2. If-None-Match存在request header中
  3. 兩者相比較有變化status Code:200汽纤，沒變化status Code:304
  4. 比Last-Modified/If-Modified-Since更精確，優(yōu)先級更高福荸。
  5. 與Cache-Control配合使用蕴坪。

• 分級緩存策略

  1. 200狀態(tài)（form cache）：由expires/cache-control控制控制。1. expires絕對時間敬锐，cache-control相對時間背传，兩者存在時cache-control覆蓋expires，只要沒有失效台夺，瀏覽器只訪問自己的緩存径玖。
  2. 304狀態(tài)：由Last-Modified/Etag控制，協(xié)商緩存情況颤介。
  3. 200狀態(tài)：沒有緩存或者協(xié)議緩存失效梳星，瀏覽器直接去服務器下載更新數(shù)據(jù)

• 緩存流程圖

  
  
  緩存過程.png

• Cache-control流程圖

  
  
  cache-control.png

服務端性能優(yōu)化

• VUE渲染面臨的問題-首屏渲染
  1. 構建層模版編譯。
  2. 對無關數(shù)據(jù)進行prerender
  3. 服務端渲染