-
首屏數據請求提前，避免 JavaScript 文件加載後才請求數據
爲了進一步提升頁面加載速度，可以考慮將頁面的數據請求儘可能提前，避免在 JavaScript 加載完成後纔去請求數據。通常數據請求是頁面內容渲染中關鍵路徑最長的部分，而且不能並行，所以如果能將數據請求提前，可以極大程度上縮短頁面內容的渲染完成時間。
-
首屏加載和按需加載，非首屏內容滾屏加載，保證首屏內容最小化
JavaScript 資源放到 HTML 文檔底部可以防止 JavaScript 的加載和解析執行對頁面渲染造成阻塞。由於 JavaScript 資源默認是解析阻塞的，除非被標記爲異步或者通過其他的異步方式加載，否則會阻塞 HTML DOM 解析和 CSS 渲染的過程。
-
模塊化資源並行下載
在加載大量的圖片元素時，儘量預先限定圖片的尺寸大小，否則在圖片加載過程中會更新圖片的排版信息，產生大量的重排
-
inline 首屏必備的 CSS 和 JavaScript
在 HTML 中直接縮放圖片會導致頁面內容的重排重繪，此時可能會使頁面中的其他操作產生卡頓，因此要儘量減少在頁面中直接進行圖片縮放。
-
meta dns prefetch 設置 DNS 預解析
設置文件資源的 DNS 預解析，讓瀏覽器提前解析獲取靜態資源的主機 IP，避免等到請求時才發起 DNS 解析請求。通常在移動端 HTML 中可以採用如下方式完成。
<!--cdn域名預解析-->
<meta http-equiv="x-dns-prefetch-control" content="on" >
<link rel="dns-prefetch" href="//cdn.domain.com" >-
資源預加載
對於移動端首屏加載後可能會被使用的資源，需要在首屏完成加載後儘快進行加載，保證在用戶需要瀏覽時已經加載完成，這時候如果再去異步請求就顯得很慢。
-
圖片壓縮處理
在移動端，通常要保證頁面中一切用到的圖片都是經過壓縮優化處理的，而不是以原圖的形式直接使用的，因爲那樣很消耗流量，而且加載時間更長。
-
使用較小的圖片，合理使用 base64 內嵌圖片
在頁面使用的背景圖片不多且較小的情況下，可以將圖片轉化成 base64 編碼嵌入到 HTML 頁面或 CSS 文件中，這樣可以減少頁面的 HTTP 請求數。需要注意的是，要保證圖片較小，一般圖片大小超過 2KB 就不推薦使用 base64 嵌入顯示了。
-
使用更高壓縮比格式的圖片
使用具有較高壓縮比格式的圖片，如 webp（需要設計降級兼容方案）等。在同等圖片畫質的情況下，高壓縮比格式的圖片體積更小，能夠更快完成文件傳輸，節省網絡流量。
圖片懶加載
<img data-src="//cdn.domain.com/path/photo.jpg" alt="懶加載圖片" >使用 MediaQuery 或 srcset 根據不同屏幕加載不同大小圖片
使用 iconfont 代替圖片圖標
頁面元素儘量使用事件代理，避免直接事件綁定
儘量使用 id, 合理緩存 DOM 對象
使用 touchstart 代替 click
避免使用 eval、with，使用 join 代替連接符＋，推薦使用 ECMAScript6 的字符串模板
儘量使用 ECMAScript6＋的特性來編程
使用 NativeView 代替 DOM 的性能劣勢
加載優化
- 合併css、JavaScript
- 合併小圖片，使用雪碧圖
- 緩存一切可以緩存的資源
- 使用長cache
- 使用外聯引用css、JavaScript
- 壓縮html、css、JavaScript
- 啓用GZip
- 使用首屏加載
- 使用按需加載
- 使用滾動加載
- 通過media query加載
- 增加loading進度條
- 減少cookie
- 避免重定向
- 異步加載第三方資源
css優化
- 避免圖片和iframe等空的src
- 儘量避免重設圖片大小
- 圖片儘量避免使用dataUrl
- 避免html寫style屬性
- 避免css表達式
- 移除空的css規則
- 不濫用float
- 不濫用web字體
- 不聲明過多的font-size
- 值爲0時不需要任何單位
- 標準化各瀏覽器前綴
- 避免使用id選擇器
- 儘量堅持class嵌套
圖片優化
- 使用智圖 七牛圖片api
- 使用（css3、svg、iconfont）代替圖片
腳本優化
- 減少重繪和迴流
- 緩存dom選擇與計算
- 緩存列表長度
- 使用事件代理，避免批量綁定事件
- 儘量使用id選擇器
- 使用touchstart、touchend代替click
渲染優化
- html使用viewpoint
- 減少dom節點
- 儘量使用css3動畫
- 合理使用requestAnimationFrame動畫代替setTimeout
- 適當使用canvas動畫
- 使用css3 transitions、css3 3d transfroms、opacity、Canvas、webgl、video來觸發GPU渲染