web移動前端有哪些優化方案？

01-05

例如要開發嵌在微信里的頁面，但是微信打開頁面的速度實在是太慢了，有什麼方法能讓頁面跑得更快呢？

1. 避免壞請求

2. 避免CSS @import

3. 避免使用document.write

4. 合併多個外部CSS文件

5. 合併多個外部JavaScript文件

6. 通過CSS sprites來整合圖像

7. 延遲JavaScript的載入

8. 啟用壓縮/ GZIP

9. 啟用Keep-Alive

10. 將小的CSS和JavaScript代碼內嵌到HTML中

11. 利用瀏覽器緩存

12. 壓縮CSS代碼

13. 盡量減少DNS查詢次數

14. 盡量減少重定向

15. 優化樣式表和腳本的順序

17. 縮小原始圖像

18. 指定圖像尺寸

更多內容參見 Web前端優化最佳實踐及工具集錦

剔除在移動端不重要或體驗不好的功能
代碼越少越好，請求越少越好，文件越小越好(JS/HTML/CSS/IMAGE)
用好http cache，local storage，app cache ...

首屏內容少於300k，請求少於50個！

做到這個標準，一般情況下就不會擔心性能有嚴重的問題了。

除了其他和移動端類似的優化方式，微信webview裡面有個大家都沒注意的大坑－－IOS webview的緩存是內存里的，也就是說你微信開一個網頁，退出進程後再進入微信頁面，所有資源都是200！！！這種體驗就是明明有的頁面二次訪問的時候挺好，一不注意過一會再開就又像第一次一樣全都卡的要死。。

對此美團,百度,滴滴等互聯網公司採用了LocalStorage－－對就是那個用來存本地數據的玩意～結合工程化手段替代webview本身文件緩存機制的優化。大概原理就是所有文件緩存利用js寫入LocalStorage進行控制，這樣即使用戶刷新也不會有304請求。多頁面間有模塊復用的話，利用js控制可以將緩存細化到AMD模塊級別，達到模塊級別的共享復用，最極限的節省帶寬和提高載入速度。我們的業務已經全線鋪開了這套工程化方案。

具體的解決方案我在我們的專欄中發了文章，移動端性能想優化到極致的同學可以移步這裡--LsLoader 移動WEB工程化緩存方案 - 美團外賣前端技術棧 - 知乎專欄. 如果有好的IDEA可以來專欄交流。

被安卓渲染性能坑出翔，怒答！

## 載入

配合grunt/gulp/webpack使用風味更佳

0. 減少同源請求數量（雪碧圖，data-url，合併JS，合併CSS）

1. 壓縮壓縮再壓縮（uglify JS，壓縮CSS，壓縮圖片）

2. 善加利用緩存，localStorage，CDN， ApplicationCache等

## 渲染

0. 減少瀏覽器的重繪

1. 避免使用border-shadow等渲染開銷極高的CSS屬性

2. transform: translateZ(0)強制開啟硬體加速

3. 遇見渲染瓶頸請profile

Chrome里開DevTool 看Network標籤里主要瓶頸在哪

最好開模擬器限定network throttle

web優化

一、CSS

1、盡量不要在行內寫CSS

2、使用link代替@import

3、壓縮CSS

4、避免使用CSS表達式

5、CSS寫在HTML文件上部

二、JavaScript

1、JS以外部文件形式引入

2、避免重複的JS代碼

3、減少JS對DOM的操作

4、避免無謂的循環

5、JS代碼（引入連接）放在頁面下部

6、壓縮JS代碼

三、HTML

如果可能減少頁面中的DOM元素

四、圖片

圖片使用適當的格式，比如小圖片用GIF PNG8等這樣會減少圖片的大小。