前端優化的技術點淺析

最近關注前端頁面的性能優化，參照一些文章做了整理，在前端方面屬于門外漢，大多數都是在相應的文章中摘取的筆記。

###<code>歸納</code>

使用緩存和cdn

減少頁面的http請求

減少下載下傳的内容

減少渲染過程中的阻塞

減少渲染過程中的瓶頸

</h3>

避免目标頁面重定向，通路頁面的過程中進行了多次重定向

啟用壓縮功能，第三方webserver會将檔案進行壓縮，之後傳輸

改善伺服器的響應時間，pagespeed在服務端的rt超過200ms會認為比較差

靜态檔案采用浏覽器的緩存機制

縮減資源檔案的大小，例如js、css等檔案，去掉無用的空格縮進等

優化圖檔，做一些無損壓縮

縮減首屏内容的大小

使用異步腳本，不用讓使用者等待完成下載下傳再去呈現網頁

network的功能是非常實用和強大的;

從左到右分别是name、method、status、type、initiator、size、time和timeline。name表示加載的檔案名，method表示請求的方法，status表示狀态碼（200為請求成功，304表示從緩存讀取），type表示檔案的mime type的類型。initiator表示發出這個檔案請求的發出者，size表示檔案大小;

time表示每個請求的總時長，timeline以圖表的形式顯示了整個網頁的請求和加載情況;

timeline中有一條藍線和一條紅線，藍線表示dom content loaded事件觸發的時間，紅線表示 window onload事件觸發的時間;

charles中的throtting功能可以模拟慢速網絡，http://www.charlesproxy.com/download/

page speed 是谷歌開發的分析和優化網頁的工具，可以作為浏覽器插件使用。工具基于一系列優化規則對網站進行檢測，對于未通過的規則會給出詳細的建議。與此類似的工具還有 yslow 等，推薦使用gtmetrix網站同時檢視多個分析工具的結果；

阿裡測，http://alibench.com/

0.1秒 : 0.1 秒是使用者感覺的最小粒度，在這個時間範圍内完成的操作被認為是流暢沒有延遲的

1.0秒: 1.0 秒内完成的響應認為不會幹擾使用者的思維流。盡管使用者能感覺到延遲，但 0.1 秒 -1.0 秒内完成的操作并不需要給出明顯 loading 提示

10秒 : 達到 10 秒使用者将無法保持注意力，很可能選擇離開做其他事情

<code>通路資料</code>

pv/uv：最基礎的 pv（頁面通路數量）、uv（獨立通路使用者數量）

頁面來源：頁面的 refer，可以定位頁面的入口

作業系統：了解使用者的 os 狀況，幫助分析使用者群體的特征，特别是移動端，ios 和 android 的分布就更有意義了

浏覽器：可以統計到各種浏覽器的占比，對于是否繼續相容 ie6、新技術（html5、css3 等）的運用等調研提供參考價值

分辨率：對頁面設計提供參考，特别是響應式設計

登入率：登陸使用者具有更高的分析價值，引導使用者登陸是非常重要的

地域分布：通路使用者在地理位置上的分布，可以針對不同地域做營運、活動等

網絡類型：wifi/3g/2g，為産品是否需要适配不同網絡環境做決策

通路時段：掌握使用者通路時間的分布，引導消峰填谷、節省帶寬

停留時長：判斷頁面内容是否具有吸引力，對于需要長時間閱讀的頁面比較有意義

到達深度：和停留時長類似，例如百度百科，使用者浏覽時的頁面到達深度直接反映詞條的品質

<code>性能資料</code>

白屏時間：使用者從打開頁面開始到頁面開始有東西呈現為止，這過程中占用的時間就是白屏時間

首屏時間：使用者浏覽器首屏内所有内容都呈現出來所花費的時間

使用者可操作時間：使用者可以進行正常的點選、輸入等操作

頁面總下載下傳時間：頁面所有資源都加載完成并呈現出來所花的時間，即頁面 onload 的時間

自定義的時間點：對于開發人員來說，完全可以自定義一些時間點，例如：某個元件 init 完成的時間、某個重要子產品加載的時間等等

白屏時間是使用者首次看到内容的時間，也叫做首次渲染時間，chrome 高版本有 firstpainttime 接口來擷取這個耗時，但大部分浏覽器并不支援，必須想其他辦法來監測；

觀察 webpagetest 視圖分析發現，白屏時間出現在頭部外鍊資源加載完附近，因為浏覽器隻有加載并解析完頭部資源才會真正渲染頁面。基于此我們可以通過擷取頭部資源加載完的時刻來近似統計白屏時間。盡管并不精确，但卻考慮了影響白屏的主要因素：首位元組時間和頭部資源加載時間；

首屏時間的統計比較複雜，因為涉及圖檔等多種元素及異步渲染等方式。觀察加載視圖可發現，影響首屏的主要因素的圖檔的加載。通過統計首屏内圖檔的加載時間便可以擷取首屏渲染完成的時間；

首屏位置調用 api 開始統計 -&gt; 綁定首屏内所有圖檔的 load 事件 -&gt; 頁面加載完後判斷圖檔是否在首屏内，找出加載最慢的一張 -&gt; 首屏時間；

使用者可操作預設可以統計domready時間，因為通常會在這時候綁定事件操作。對于使用了子產品化異步加載的 js 可以在代碼中去主動标記重要 js 的加載時間；

總下載下傳時間預設可以統計onload時間，這樣可以統計同步加載的資源全部加載完的耗時。如果頁面中存在很多異步渲染，可以将異步渲染全部完成的時間作為總下載下傳時間；

navigation timing 是一個可以在web中精确測量性能的javascript api。這個api提供了一個簡單的方法來獲得頁面導航、加載事件的精确而又詳細的時間狀态。目前在 ie9、chrome、firefox nightly builds 中可用；

chrome 工具-&gt;控制台,輸入performance，就可以看到資料(測量以毫秒的形式從1970年1月1日的午夜開始,結果為0表示該事件未發生)；

navigationstart：當load/unload動作被觸發時，也可能是提示關閉目前文檔時（即Enter鍵在url位址欄中按下，頁面被再次重新整理，submit按鈕被點選）。如果目前視窗中沒有前一個文檔，那麼navigationstart的值就是fetchstart。

redirectstart：它可能是頁面重定向時的開始時間（如果存在重定向的話）或者是0。

unloadeventstart：如果被請求的文檔來自于前一個同源（同源政策）的文檔，那麼該屬性存儲的是浏覽器開始解除安裝前一個文檔的時刻。否則的話（前一個文檔非同源或者沒有前一個文檔），為0。所謂同源是指，域名，協定，端口相同。

unloadeventend：表示同源的前一個文檔解除安裝完成的時刻。如果前一個文檔不存在或者非同源，則為0。 + redirectend：如果存在重定向的話，redirectend表示最後一次重定向後伺服器端response的資料被接收完畢的時間。否則的話就是0。

fetchstart：fetchstart是指在浏覽器發起任何請求之前的時間值。在fetchstart和domainlookupstart之間，浏覽器會檢查目前文檔的緩存。

domainlookupstart：這個屬性是指當浏覽器開始檢查目前域名的dns之前的那一時刻。如果因為任何原因沒有去檢查dns（即浏覽器使用了緩存，持久連接配接，或者本地資源），那麼它的值等同于fetchstart。

domainlookupend：指浏覽器完成dns檢查時的時間。如果dns沒有被檢查，那麼它的值等同于fetchstart。

connectstart：當浏覽器開始于伺服器連接配接時的時間。如果資源取自緩存（或者伺服器由于其他任何原因沒有建立連接配接，例如持久連接配接），那麼它的值等同于domainlookupend。

connectend：當浏覽器端完成與伺服器端建立連接配接的時刻。如果沒有建立連接配接它的值等同于domainlookupend。

secureconnectionstart：可選。如果頁面使用https，它的值是安全連接配接握手之前的時刻。如果該屬性不可用，則傳回undefined。如果該屬性可用，但沒有使用https，則傳回0。

responsestart：指用戶端收到從伺服器端（或緩存、本地資源）響應回的第一個位元組的資料的時刻。

responseend：指用戶端收到從伺服器端（或緩存、本地資源）響應回的最後一個位元組的資料的時刻。

domloading：指document對象建立完成的時刻。

dominteractive：指文檔解析完成的時刻，包括在“傳統模式”下被阻塞的通過script标簽加載的内容（除了使用defer或者async屬性異步加載的情況）。

domcontentloadedeventstart：當domcontentloaded事件觸發之前，浏覽器完成所有script（包括設定了defer屬性但未設定async屬性的script）的下載下傳和解析之後的時刻。

domcontentloadedeventend：當domcontentloaded事件完成之後的時刻。它也是javascript類庫中domready事件觸發的時刻。

domcomplete：如果已經沒有任何延遲加載的事件（所有圖檔的加載）阻止load事件發生，那麼該時刻将會将document.readystate屬性設定為”complete”，此時刻就是domcomplete。

loadeventstart：該屬性傳回的是load事件剛剛發生的時刻，如果load事件還沒有發生，則傳回0。

loadeventend：該屬性傳回load事件完成之後的時刻。如果load事件未發生，則傳回0。

dns域名解析時長：從發起頁面域名解析至解析完成；

domainlookupend-domainlookupstart

connect建立與伺服器tcp連接配接時長：從發起tcp連接配接至三次握手完成；

connectend-connectstart

request請求時長：從發起頁面請求至伺服器端傳回第一個位元組；

responsestart-requeststart

response響應時長：從接收伺服器發回的第一位元組至首頁面下載下傳完成；

responseend-responsestart

domready頁面dom樹解析：從頁面跳轉至頁面dom元素穩定；

domcontentloadedeventend-starttime

<code>文章參考</code>

http://fex.baidu.com/blog/2014/05/build-performance-monitor-in-7-days/

https://developers.google.com/speed/docs/insights/rules

http://www.html5rocks.com/en/tutorials/webperformance/basics/?redirect_from_locale=zh

http://www.programmer.com.cn/14601/