2016-01-07 途牛無線中心 安增軍
1 優化實踐概覽
2 爲什麼要進行前端性能優化？
a) 前後端時間佔比是8:2，前端佔用的時間較多，優化的空間較大
b) 前端涉及的資源很多，js、css、圖片、瀏覽器、cookie、Ajax、html等等，多意味着優化手段較多
c) 最重點的一點是，加載速度對用戶影響重大，特別是首屏。可能有些人感覺慢1-2s貌似也不是太多時間；但是兄臺，如果你是訪問一個頁面， 1-2s貌似感覺不是很長，如果你訪問10張頁面的話，10-20s就是不短的時間啊。如果再乘上網站的UV，這個數字就更恐怖了。
現在前端的優化理論有很多，大家最熟悉的莫過於雅虎XXX條軍規了，確實雅虎給出的建議對前端開發者影響巨大，現在很少能夠看到哪家網站把CSS放在頁面底部、把JS放在頂部、圖片不異步加載、不開啓GZIP壓縮等等。
但是很無奈的是，即使多數網站也都遵循着這些規則，但是網站的加載速度還是不理想。理論總是高於實踐的，理論可以用來指導，但總有很難實踐的地方。結合前段時間做過的性能優化實踐經驗，在這裏拋塊磚，簡要說下自己在前端性能優化方面的一些心得，希望能給大家一些幫助。
優化之前，大家需要了解網站影響速度的點在哪裏，有針對性的優化，比摸石頭過河要事半功倍，每個網站有各自的特徵，這裏結合途牛網站做下分析。
a) 首先大家要對http請求有一定的瞭解，需要知道一張頁面是怎麼從一個URL最後渲染出來的。
真實的情況比以上描述的要複雜的多，不過以上的過程可以描述個大概（詳細的就不要問我 了，鞭子沒有這麼長）。
b) 分析以上流程，可以得出前端優化點主要有以下幾步
i. 發起http請求
ii. 服務器響應http請求&得到html代碼
iii. 瀏覽器解析html並請求靜態資源
iv. 瀏覽器渲染頁面
3 相關優化建議
針對以上4個步驟，以下分別給出相關的優化建議
（其中第二步現在基本上所有的網站都開啓了GZIP壓縮和做了靜態頁面緩存，所以就詳細展開分析，以下主要針對1、3、4三點展開分析）。
a) 在發送http請求時，會將cookie一起發送到後臺，所以要儘量減小cookie的大小，以下是使用空頁面測試cookie大小對響應時間的影響數據。
PS：要儘量減少http請求頭的cookie大小，目前途牛官網PC首頁cookie在1804bytes左右，M站在1797bytes，都有很大的優化空間。
b) 瀏覽器解析html並請求靜態資源，其過程基本如下
i. 瀏覽器首先創建Document對象，解析HTML元素和他們的文本內容後添加Element對象和Text節點到文檔中，遇到樣式表和圖片時，會另起一個請求去獲取資源，這是個異步過程，不會影響到HTML的解析。
ii. 當遇到script腳本時，就會開啓另一個解析模式，因爲JS可能會向頁面中插入元素，就是會改變DOM樹結構；所以在腳本沒有開啓ASYNC和DEFER模式時，頁面會停止解析HTML、CSS和圖片，等待SCRIPT腳本下載和解析完成。
iii. 當腳本開啓DEFER和ASYNC模式時，瀏覽器會另發一個請求去請求腳本，但是不會中斷頁面解析HTML的過程，待腳本下載完成之後，再去解析腳本。
c) 針對以上的過程，大概可以總結的優化方法有以下幾點
i. 瀏覽器首先要解析HTML節點生成DOM樹，所以如果能減少DOM樹，那就能減少解析時間。目前比較通用的方法是將頁面中與SEO無關的內容用script或是textarea包裹起來，或者可以的話，通過ajax方式加載進來。
ii. 在瀏覽器解析到樣式表、圖片、腳本時，會啓動一個http請求，每個http請求都會耗費一定的時間，並且每個瀏覽器都有自己http併發請求上線數，在達到上線時，新啓動的請求就會進入等待序列，所以要儘量較少http請求數，目前合併CSS和JS的方式很多，這裏就不介紹了。
iii. 針對圖片，一般採用的方式是儘量壓縮&合併圖片，二是異步化圖片。
iv. 而對於JS的優化，個人感覺是比較複雜的。主要原因是JS特殊的下載和解析模式。JS的優化包括2方面的優化，一塊是JS文件的優化，一塊是JS語法的優化。JS文件的優化是指按需加載JS文件，即如果首屏不要某個JS文件，那我在頁面初始化的時候就不用去加載這個JS文件，在需要這塊JS的時候，再通過事件觸發去加載這個JS文件，這個過程難點在於按需的“需”上，這個判斷標準理解起來比較簡單，但是真正操作過程中就比較難，目前我們採用的方式主要是將JS分成兩塊——首屏和非首屏，首屏的JS在頁面初始化的時候加載，非首屏的JS通過事件觸發加載。對於JS文件中的JS語法優化，本次優化的並不是很多，因爲改動已經開發好的JS成本比較大，並且這塊雖然有一定的影響，但本次優化時發現影響不是很大，這裏主要介紹查看JS執行效率的兩款工具，一個是大家常用的chrome dev，另一個是IE下的性能測試利器－Dynatrace Ajax Edition，這兩款軟件詳細的使用教程網站有很多資料，感興趣的可以去了解下。
v. 除此之外，需要關注的是CDN；目前公司的靜態資源託管在其他公司的CDN上，託管方從自身利益考慮，給各個公司的資源總是不均衡，所以優化過程中總是出現CDN網絡問題；如果有類似問題，還得要時常催促下託管方。
d) 在瀏覽器渲染方面，對渲染時間影響比較大是兩個操作——重繪和迴流。
要了解這2個概念，首先要介紹下渲染流程：
i. 渲染流程
- 構造DOM樹
- 計算樣式表
- 構建渲染樹
- 佈局（Layout）- 定位座標和大小、是否換行、各種position, overflow, z-index
- 繪製
- 展示
ii. 影響到頁面渲染的時間的主要有以下兩個操作:
重繪 – 這是一種頁面DOM元素幾何尺寸不變，位置不變，只改變背景色或者字體顏色這類屬性，這樣的話，只會局部重新繪製。
迴流 – 這種方式是改變了DOM元素的幾何尺寸或者改變了DOM元素的位置，這樣就需要重新佈局，從而導致頁面全局重新繪製。
瀏覽器繪製是個很複雜的過程，各個瀏覽器渲染過程都有些差異，不過大體上的流程都大體一致（不含Trident內核）。瀏覽器的重繪和迴流很難去避免，只能在實際過程中多加註意，少用Table，少通過JS直接改變DOM節點等等。