實踐一下前端性能分析

時間 2019-11-11

標籤實踐一下前端性能分析欄目系統性能简体版

原文原文鏈接

最近在讀一本經典書《高性能網站建設進階指南》。javascript

雖然書籍不少年前就出版了，但裏面的內容仍是回味無窮，此次就好好的實踐了一下。php

紙上得來終覺淺，絕知此事要躬行，實踐中將會發現一些問題。css

有個官方網址《Even Faster Web Sites》，點擊「Run the Examples」按鈕，就能進入在線demo。html

在Github上面有個叫awesome-wpo的項目，裏面記錄了各個方面關於性能的資源，有書籍、文章、工具等。前端

下面全部的實驗都是在Chrome 49瀏覽器中執行的。java

1、瀏覽器並行下載數量

瀏覽器的併發請求數目限制是針對同一域名的。git

同一時間針對同一域名下的請求有必定數量限制，超過限制數目的請求會被阻塞。github

因此咱們常常能看到不一樣靜態資源會有不一樣域名，例如圖片、JavaScript、CSS等。web

HTTP1.1與HTTP1.0，限制的數量還不同。算法

1）HTTP1.1

先來看看browserscope網上的數量限制的統計結果，比IE六、IE7那會兒進步了不少。

接下來作一個對比，分別是一個域名和兩個域名，分別加載圖片。

當一個域名的時候最多隻能併發6個請求，而兩個域名的時候能併發10個請求。

2）長鏈接

因爲長鏈接的關係，HTTP1.1建議每一個服務器創建少許的鏈接。

若是瀏覽器支持 keep-alive（長鏈接），它會在請求的包頭中添加：

長鏈接的原理是使用同一個TCP鏈接來發送和接收多個HTTP請求/應答，而不是爲每個新的請求/應答打開新的鏈接的方法。

當客戶端發送另外一個請求時，它會使用同一個鏈接。這一直繼續到客戶端或服務器端認爲會話已經結束，其中一方中斷鏈接。

下圖左邊每次請求後都會斷開，右邊就是請求後不會立刻斷開。

因此想要高併發量還能夠降級到HTTP1.0，不過具體狀況如何，我還沒試驗過。

3）Cookie-free Domains

在YSlow中有23條規則，第20條就是「Use Cookie-Free Domains for Components」。

在請求下載靜態小圖片、靜態小文件的時候，瀏覽器會把它當成普通請求同樣，在request的header信息裏附加cookie信息。

若是每一個header都附加1kB的cookie，那麼對於一個有50個小文件的複雜網頁來說，就白白增長了50kB的傳輸量。

網上有不少相關的解決方案，能夠嘗試一下。

2、行內腳本阻塞並行下載

覽器會保持css和js的解析順序，若是把行內腳本放在樣式表以後，會明顯地延遲資源的下載（結果是樣式表下載完成而且行內腳本執行完畢時，後續資源才能開始下載）。

這是由於行內腳本可能含有依賴於樣式表中樣式的代碼，好比document.getElementsByClassName()。

行內腳本就是將腳本直接寫在HTML頁面中。

<head>
  <link rel="stylesheet" href="css/all-normal.css" type="text/css" />
</head>
<body>
  <div id="content"></div>
  <script>
    var content = '';
    for(i=1; i<1000000; i++)
        content += '寫入頁面';
    document.getElementById('content').innerHTML = content;
  </script>
  <img src="images/ui.png" />
</body>

下面經過Chrom的工具查看下：

再來看看ui.png這個請求的詳細狀況，能夠參考下Google中的文檔，不過須要翻一下才能看到。

Stalled：瀏覽器獲得要發出這個請求的指令，到請求能夠發出的等待時間，通常是代理協商、以及等待可複用的TCP鏈接釋放的時間，不包括DNS查詢、創建TCP鏈接等時間等。

Request sent：請求第一個字節發出前到最後一個字節發出後的時間，也就是上傳時間。

Waiting（TTFB）：請求發出後，到收到響應的第一個字節所花費的時間(Time To First Byte)。

Content Download：收到響應的第一個字節，到接受完最後一個字節的時間，就是下載時間。

的確出現了延時下載，我將「script」標籤去掉後，看到的確是並行下載的。

3、圖像優化

平時就會作圖像優化，例如製做Sprite圖等。這裏是介紹下壓縮圖片。

關於壓縮的原理，涉及到些算法，能夠上網查詢下。

網友Jia在《圖片原理與優化》說：

常見的格式中JPG、PNG、GIF亦屬於位圖，因此它們的數據結構大體相同，只是每一種圖片格式都有不一樣的壓縮算法，不一樣的掃描方式，可是優化的方法都有一個共同點，都是圍繞着每一個像素顏色值來下手。

1）工具

公司如今開發都用gulp構建工具，裏面就有個插件「gulp-image」，用這個工具壓png圖片，能壓掉不少，jpg就很少了。

關於構建工具能夠參考《前端自動化構建工具gulp記錄》

網上還提供不少在線工具，例如國外的tinypng，國內的tuhaokuai。

下圖來自於tinypng網，國寶熊貓幫我壓縮了54%的質量，不過這個網站我上了很久纔上去。

2）webP

WebP，是一種支持有損壓縮和無損壓縮的圖片文件格式，派生自圖像編碼格式 VP8。

根據 Google 的測試，無損壓縮後的 WebP 比 PNG 文件少了 45％的文件大小，即便這些 PNG 文件通過其餘壓縮工具壓縮以後，WebP 仍是能夠減小 28％的文件大小。

兼容性方面，Android兼容性較好，畢竟是本身的東西，不過IOS Safrai徹底不支持，下圖中顯示中國的瀏覽器已經覆蓋到了67.37%。

4、iframe

在多年前曾經寫過一篇基礎概念的iframe，叫《iframe的一些記錄》。

一直能看到iframe的種種缺點，可是並無經過數據表達出來，此次用數聽說明一下。

1）阻塞onload事件

在「Iframes Blocking」這個頁面中，經過iframe加載一個頁面，這個頁面要4秒後才加載完，直接致使的父頁面也要4秒後才能加載成功。

2）腳本位於iframe以前

在「Script Before Iframe」這個頁面中，script腳本標籤寫在了iframe以前。

圖中紅色框框中的就是iframe中的內容，的確被阻塞了。

後面又試驗了一下將CSS放在iframe以前或以後，並不會被阻塞。

3）iframe中鏈接共享

在「Parent and Iframe Connections」這個頁面中，父頁面和iframe中的頁面都包含了5張圖片。

這五張圖片並非並行下載，而是有前後順序的，紅色方框中的圖片來自於iframe。

5、CSS選擇符

下面這些就是CSS選擇符：

#toc { margin-left: 20px; }
.chapter { font-weight: bold; }
A { text-decoration: none; }
H1 + #toc { margin-top: 40px; }
#toc > LI { font-weight: bold; }
#toc A { color: #444; }
* { font-family: Arial; }
[href="#index"] { font-style: italic; }
[title~="Index"] { font-style: italic; }
A:hover { text-decoration: underline; }

概括下來有5種選擇符，元素、關係、屬性、僞類和僞對象選擇符。

CSS選擇符是從右向左匹配的，在MDN的《編寫高效的 CSS》中介紹了幾種高效CSS指南。

1）選擇器測試結構

在「Selector Tests」頁面中有6種寫好的，頁面中1000個那種結構。

1. Baseline設置了CSS類，但不會匹配

2. Tag就多了個A標籤CSS設置

3. Class設置了A中的class屬性

4. Child使用了關係選擇符中的子選擇符「>」

5. Descendant使用了關係選擇符中的包含選擇符

6. Universal使用了通配符

<div>
  <div>
    <div> <p> <a id='id0001' class='class0001'>0001</a> </p> </div>
    ...
    <div> <p> <a id='id1000' class='class1000'>1000</a> </p> </div>
  </div>
</div>

2）耗時記錄

	Baseline	Tag	Class	Child	Descendant	Universal
CSS類	.noclass0001 { background: #CFD; } ... .noclass1000 { background: #CFD; }	A { background: #CFD; } .noclass0001 { background: #CFD; } ... .noclass1000 { background: #CFD; }	.class0001 { background: #CFD; } ... .class1000 { background: #CFD; }	DIV > DIV > DIV > P > A.class0001 { background: #CFD; } ... DIV > DIV > DIV > P > A.class1000 { background: #CFD; }	DIV DIV DIV P A.class0001 { background: #CFD; } ... DIV DIV DIV P A.class1000 { background: #CFD; }	P.pclass0001 * { background: #CFD; } ... P.pclass1000 * { background: #CFD; }
耗時	85ms	63ms	71ms	101ms	77ms	501ms
耗時	60ms	67ms	479ms	185ms	444ms	76ms
耗時	59ms	1116ms	64ms	73ms	67ms	54ms
耗時	69ms	62ms	68ms	67ms	62ms	83ms
耗時	52ms	63ms	68ms	78ms	68ms	77ms
耗時	60ms	62ms	72ms	87ms	67ms	81ms
去掉最高和最低後平均耗時	62ms	63.75ms	69.75ms	84.75ms	69.75ms	79.25