記錄
參考移動(dòng)端網(wǎng)站提升頁面加載性能的優(yōu)化技巧
- 減少每個(gè)頁面需要獲取額外資源的HTTP請求數(shù)熟菲。
- 減少每個(gè)請求加載的大小。
- 優(yōu)化客戶端執(zhí)行的優(yōu)先級和腳本執(zhí)行的效率朴恳。
具體實(shí)現(xiàn)方案：
- 減少請求：
- cnds ,自建靜態(tài)資源庫（statics）
- 整合資源
- 統(tǒng)一管理資源加載抄罕，減少重復(fù)加載
- Sprites是css中處理圖片
- 使用Webpack等打包工具壓縮 合并文件css ,js,html
- 使用瀏覽器緩存和本地緩存
- Cache-Control或者Expires頭標(biāo)記的資源，這些頭能標(biāo)記資源需要緩存的時(shí)間
- HTML5的localStorage操作于颖，可以讀寫鍵值數(shù)據(jù)呆贿，每個(gè)域名大概有5MB的容量(緩存問題：失效，存滿 時(shí)新增的刪除處理)
- 使用Webpack等打包工具壓縮 合并文件css ,js,html
- 首次使用的時(shí)候在HTML中嵌入資源：
- 資源沒有很高的被緩存的幾率的話森渐，最好把它嵌入到頁面的HTML中（叫inlining）
- 圖片和其他的二進(jìn)制資源其實(shí)也是可以通過內(nèi)嵌包含base64編碼的文本來嵌入到HTML中
- 在第一次請求資源后必須能夠使用代碼在客戶端緩存資源做入，因此，在移動(dòng)設(shè)備上同衣，使用HTML5 localStorage能很好地做到內(nèi)嵌竟块。
- 使用HTML5服務(wù)端發(fā)送事件
- 這種方式比HTML的WebSocket更高效，WebSocket的使用場景是耐齐，當(dāng)有許多客戶端和服務(wù)端的交互的時(shí)候（比如消息或者游戲）浪秘，在全雙工連接上建立一個(gè)雙向通道。
- 轉(zhuǎn)變成Server-Sent事件需要重構(gòu)網(wǎng)站的Javascript代碼
- 消除重定向
- 在原先的請求上傳遞移動(dòng)的web頁會(huì)比傳遞一個(gè)重定向的信息并讓客戶端再請求移動(dòng)頁面更快埠况。
- 減少資源負(fù)載
- 關(guān)于移動(dòng)端頁面的大小問題耸携，渲染小頁面更快，獲取小資源也更快辕翰，減小每個(gè)請求的大小通常不如減少頁面請求個(gè)數(shù)那么顯著地提高性能夺衍。
- 壓縮文本和圖像
- gzip這樣的壓縮技術(shù),依靠增加服務(wù)端壓縮和瀏覽器解壓的步驟(這些操作都是被高度優(yōu)化過了，而且測試表明喜命，壓縮對網(wǎng)站還是起到優(yōu)化性能的作用的沟沙，那些基于文本的響應(yīng)的畴，包括HTML，XML尝胆，JSON（Javascript Object Notation）丧裁，Javascript，和CSS可以減少大約70%的大小含衔。)
- 調(diào)整圖片大小
- 提前優(yōu)化圖片大小和質(zhì)量 到PC,移動(dòng)平臺
- 使用大小兩套圖片煎娇，小圖占位，onload加載原（大）圖
- 使用lazyload或一些其他延遲加載具提高頁面渲染效率
- 使用HTML5和CSS 3.0來簡化頁面
1.結(jié)構(gòu)元素贪染，例如header缓呛，nav，article和footer 語義化的標(biāo)簽使得頁面更簡單和更容易解析杭隙，哟绊，可以有更快的JavaScript執(zhí)行效率- 新屬性 placeholder（占位） ，autofocus 痰憎，input 類型（e-mail票髓，URL，數(shù)字铣耘，范圍洽沟，日期和時(shí)間）減少之前js操作來提高體驗(yàn)
- 層次，圓角蜗细，陰影裆操，動(dòng)畫，過渡和其他的圖片效果炉媒，CSS 3.0踪区，功能同上減少耗損
- 延遲讀取和執(zhí)行的腳本
- 用戶操作如拖拽可以在onload事件之后再進(jìn)行加載，而在些之前是進(jìn)行頁面渲染
- 延遲加載的異步版本的API
- 使用Ajax來增強(qiáng)進(jìn)程
- 增加進(jìn)程吊骤，（ 跨域問題缎岗，你需要使用XHR2）
- 使用HTML5的WEB WORKER特性操作多線程應(yīng)用，（個(gè)人理解水援，如果真要大計(jì)算只要不是本地應(yīng)用都可以使用websocket+serverEnd來處理密强，畢竟服務(wù)器的運(yùn)算支持能力更強(qiáng)）
- 使用移動(dòng)事件茅郎，如touch 代替click等蜗元。
總結(jié)
馬海祥博客點(diǎn)評：
如果缺少了持續(xù)和仔細(xì)的測試提醒，性能的優(yōu)化就只是討論而已系冗，是無法完成的奕扣，如果沒有指定基準(zhǔn)做比較，你系統(tǒng)上的任何改動(dòng)都僅僅是理論而已掌敬，如果沒有真實(shí)的測試數(shù)據(jù)惯豆，猜測性能的瓶頸是毫無意義的池磁。
有很多開源和通用的工具能進(jìn)行集成測試，并且能進(jìn)行不同地域和帶寬/延遲的測試楷兽，另外地熄，RUM（real user monitoring）工具能將測試環(huán)境從實(shí)驗(yàn)室變成不可預(yù)測的真實(shí)用戶行為。
觀察移動(dòng)設(shè)備的測試選擇和桌面場景一樣芯杀，如果你在選擇一個(gè)自動(dòng)化的解決方案端考，請確保使用一個(gè)能持續(xù)測試，并且能區(qū)分出應(yīng)用優(yōu)化方法前后的變化的解決方案揭厚。
如果性能優(yōu)化如果只是在發(fā)展過程中的一個(gè)步驟而已却特，它不會(huì)有什么效果的，它必須成為一個(gè)持續(xù)改善網(wǎng)站的一部分
結(jié)合實(shí)踐運(yùn)用一些基本的軟件原則進(jìn)行開發(fā)筛圆，
- 精簡(減少資源裂明，壓縮資源…)
- 優(yōu)化 （業(yè)務(wù)邏輯，算法…）
這是有順序的一種結(jié)合方式
