一、前言
網頁生成的過程：
要理解網頁性能為什么不好吟榴，需要先了解網頁是怎么生成的郊楣。
網頁生成過程，大致分為五步：
1.HTML代碼轉化成DOM
2.css代碼轉化成CSSOM(css object model)
3.結合DOM和CSSOM摔刁，生成一顆渲染樹（包含每個節(jié)點的視覺信息）
4.生成布局(layout)挥转，即將所有渲染樹的所有節(jié)點進行平面合成
5.將布局繪制(paint)在屏幕上
這五步里面，第一步到第三步都非彻睬快绑谣，耗時的是第四步和第五步∞忠“生成布局”(flow)和繪制(paint)這兩步借宵，合稱為“渲染”。
二矾削、優(yōu)化的意義
現(xiàn)階段PC的性能絕大多數(shù)情況是過剩的壤玫，但移動端性能就參差不齊了，因此對移動端H5頁面進行精細的性能優(yōu)化是極其重要的哼凯。
移動端的WEB頁面本身渲染性能產于Native的APP欲间，只管產品的功能，不關注性能優(yōu)化断部，將極大的影響Web頁面的體驗猎贴。
三、用戶的感知
當用戶能夠在1-2秒內打開H5頁面，看到信息的展示嘱能，或者能夠開始進行下一步操作吝梅，用戶會感覺速度還好，還可以接受惹骂；而頁面如果在2-5秒后才可以進去可用的狀態(tài)苏携，用戶的耐心會逐漸喪失；而如果一個界面查過5秒甚至更久才能顯示出來对粪，這對用戶來說基本是無法忍受的右冻，也許有一部分用戶會推出重新進入，但更多的用戶會直接放棄使用著拭。
四纱扭、優(yōu)化方案
1.首屏加載
當頁面資源較多時，用戶從點擊開始加載頁面儡遮，用戶第一感知是什么時候加載完成乳蛾。正常情況下，應該是在可見屏幕范圍內鄙币，頁面內容完全展示肃叶，如果在弱網狀態(tài)下，會出現(xiàn)資源加載進度條十嘿，這樣避免資源未加載完因惭，展示出殘缺不全的頁面，影響用戶體驗绩衷，因此首屏加載蹦魔，事件是一個重要的優(yōu)化點。
在加載時間較長的時候咳燕，務必要讓用戶明確感知到加載完成的提示勿决，通常是在加載過程中顯示Loading的進度條，加載完成的時候隱藏它迟郎，從心理上剥险，只會讓用戶有一種期待感，而不至于太多枯燥宪肖。
對于一些重量級的移動WEB應用表制，例如【游戲H5】、【場景式H5】控乾，開始前需要加載很多資源么介，為了讓后面的游戲過程更為流暢，一個 帶百分比的進度條就顯得格外重要蜕衡。
2.按需加載
按需加載能夠提升首屏加載速度壤短，但盡可能避免對低性能的移動設備的影響，按需加載可能帶來更多的重繪，從而降低了渲染性能久脯，出現(xiàn)卡頓死機現(xiàn)象纳胧。
3.資源懶加載Lazyload
懶加載已經有很多成熟方案，PC端常用的優(yōu)化點帘撰，同樣適用于移動端跑慕。滾屏加載利用瀏覽器空閑時間請求將來要使用的資源，以便用戶訪問下一頁時更快地響應摧找。無條件預先加載：頁面加載完成（load）后核行，馬上獲取其他資源。
4.盡量減少HTTP請求
用戶響應時間的80%是發(fā)生在前端蹬耘。
圖像芝雪，樣式表，腳本综苔，F(xiàn)Lash等減少部件數(shù)量也就降低了呈現(xiàn)網頁所需的HTTP請求的數(shù)量：其中的大部分時間實在下載的網頁的所有組件惩系。
圖片資源：
--css sprite
--base64:URL(內鏈資源，有兼容問題如筛，不會被緩存)蛆挫；
--SVG sprite(未來趨勢，國外大量網站在使用)妙黍；
--icon font
--利用css3繪制簡單icon
Javascript、css瞧剖、HTML等
--合并文件并壓縮文件;
--盡量使用css3動畫代替JS/flash動畫
--盡量使用外聯(lián)js和css資源
服務器拭嫁、域名等部署
--服務器端啟用Gzip技術
--利用CDN加速靜態(tài)資源
--資源分域存放，分域請求
--減少cookie
--配置Etag文件版本標識抓于，高效利用緩存做粤，避免重復下載
--服務端接口合并
--避免與服務器接口不必要的數(shù)據(jù)傳輸
--合理選用GET、POST請求方式
--盡量避免重定向
-在定義鏈接地址的href屬性的時候捉撮，盡量使用最完整的怕品、直接的地址。
--最大限度地減少DOM訪問
-避免使用javascript固定布局
-避免空圖片src
