html5體驗(yàn)優(yōu)化頁(yè)面加載的14條建議

十年的修水網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整修水建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“修水網(wǎng)站設(shè)計(jì)”,“修水網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

1. fake 頁(yè) - 首屏加速
目標(biāo)：首屏 3s 以內(nèi)
因?yàn)?71% 的用戶期望移動(dòng)頁(yè)面跟 pc 頁(yè)面一樣快 (3s) ，74% 的用戶能容忍的響應(yīng)時(shí)間為 5 秒，所以我們必須保證移動(dòng)端頁(yè)面有足夠的速度。


方案：
- 避免頁(yè)面長(zhǎng)時(shí)間白頁(yè)，頁(yè)面渲染只需要完整的HTML 以及 CSS
- 加載結(jié)束后頁(yè)面第一屏便渲染結(jié)束，然后再異步加載js
- 靜態(tài)資源不使用 cookie
- 優(yōu)化加載順序 css頭、js尾


2. 降低請(qǐng)求「數(shù)」
- 將可合并的 CSS、JS 文件合并
- CSS sprites 合并圖片資源


3. 降低請(qǐng)求「量」
- 合理的使用圖片資源（對(duì)大圖進(jìn)行處理，使用矢量圖片）
- JS混淆（通過(guò)簡(jiǎn)化函數(shù)名稱，變量名稱，去空格等達(dá)到減小 JS 文件的大?。?br />- 規(guī)劃好使用的第三方工具庫(kù)，減少不必要的引用
- 啟用 GZIP 壓縮
- Zepto 替換 JQuery


4. 緩存一切可緩存的
- 頁(yè)面緩存（manifest，減輕服務(wù)器壓力、加快頁(yè)面加載速度）
- 數(shù)據(jù)緩存（localStorage/indexedDataBase）
- 只緩存非敏感信息


5. 合理使用 Ajax 的 Get、Post
- Post方法在AJAX 請(qǐng)求下會(huì)被拆分成兩個(gè):sending header first, then sending data
- Get提交的數(shù)據(jù)較少
- Post相對(duì)來(lái)說(shuō)更安全


6. 使用合理的圖片加載方案
- 延遲加載：使用 setTimeOut 或 setInterval進(jìn)行加載延遲
- 條件加載：符合某些條件，或觸發(fā)了某些事件才開(kāi)始異步下載
- 可視區(qū)加載：即僅加載用戶可以看到的區(qū)域，這個(gè)主要由監(jiān)控滾動(dòng)條來(lái)實(shí)現(xiàn)，一般會(huì)在距用戶看到某圖片前一定距離遍開(kāi)始加載，這樣能保證用戶拉下時(shí)正好能看到圖片


7. 減少渲染回流
- HTML渲染過(guò)程
| 生成DOM樹(shù)
| 計(jì)算CSS樣式
| 構(gòu)建 render tree
| reflow，定位元素位置大小
| 繪制頁(yè)面
- 這些操作會(huì)導(dǎo)致回流
| 操作dom結(jié)構(gòu)
| 動(dòng)畫(huà)
| DOM樣式修改
| 獲取元素尺寸的API
注：若是 javascript 動(dòng)態(tài)改變 DOM Tree 便會(huì)引起 reflow 頁(yè)面中的元素改變，只要不影響尺寸，比如只是顏色改變只會(huì)引起 repaint 不會(huì)引起回流


8. 減少使用定位元素
- static元素處于文檔流中，其渲染速度是最快的
- absolute定位元素在手機(jī)上可能會(huì)導(dǎo)致的問(wèn)題：
- 定位元素在手機(jī)上不能顯示
- 定位元素動(dòng)畫(huà)效果失效。
- 以上問(wèn)題便是 UI 渲染失效多導(dǎo)致，最好的解決方案是減少使用定位元素，否則只能引起強(qiáng)烈 reflow 才能解決
- Fix 定位元素導(dǎo)致的問(wèn)題
- fixed元素遭遇文本框時(shí)失效，可能會(huì)飄到頁(yè)面中間阻擋輸入
- 影響效率


9. 手動(dòng)釋放資源
- 不能完全依賴于瀏覽器的垃圾**
- 資源必須手動(dòng)釋放
| 釋放沒(méi)有使用的閉包
| 觀察者需要得到清理
| 釋放定時(shí)器
| view 切換過(guò)程中，在 destroy 中釋放 view 相關(guān)資源


10. 區(qū)域滾動(dòng)使用 Iscroll
- webapp 區(qū)域滾動(dòng)
- 解決動(dòng)畫(huà)過(guò)程帶來(lái)的長(zhǎng)短頁(yè)問(wèn)題


11. Touch 事件替換 Click
- Click 點(diǎn)擊響應(yīng)比 Touch 慢 300ms（手機(jī)需要知道你是不是想雙擊放大網(wǎng)頁(yè)內(nèi)容）
- 解決動(dòng)畫(huà)過(guò)程帶來(lái)的長(zhǎng)短頁(yè)問(wèn)題
- 總而言之，IScroll 方案的提出，是讓webapp 媲美 native app 靠近了一大步，真正的平起平坐還需要瀏覽器的支援


12. 合理使用 CSS 特性
- 不要使用 CSS 字體
- 避免使用 CSS 表達(dá)式
- 高頻渲染觸發(fā) GPU 加速（CSS3transitionsCSS3 3D transforms）


13. 盡量不要使用 DataURI
- 解析是由成本


- 手機(jī)端 DataURI 要比簡(jiǎn)單的外鏈資源要慢 6倍


14. 合理使用 Canvas 動(dòng)畫(huà)
- Canvas是狀態(tài)機(jī)，減少狀態(tài)切換能提高效率
- Canvas分層渲染
- 少用 shadow
- canvas.WIDTH1: = canvas.WIDTH1: 代替context.clearRect(0, 0, WIDTH1:, HEIGHT1)
- 坐標(biāo)系整數(shù)化
- 使用requeatAnimationFrame
- 放棄 settimeout 動(dòng)畫(huà)