web app 的技術參考 -- 來自 【百度移動建站指南】

標籤：

最佳化頁面效能　　考慮到行動裝置和移動互連網的特點，在進行移動網站的頁面開發設計時，一個總的原則是考慮使用者訪問的效率， 降低頁面載入時間。 下面的內容來自百度，然後我自己做了筆記。另外可參考這個系列的文章。減少訪問請求數

• 從設計實現層面簡化頁面，不要放太多的圖片、複雜的表達、動畫、視頻等等。

這個好理解，位元據太占流量。

 

• 資源合并及壓縮：比如將背景圖片、導航圖片等等作為一張圖片，這樣只需一次請求，而不是多次。

資源合并，只用一次請求，解決問題。 壓縮，是將檔案大小降低，比如css，js去空白。

至於壓縮，涉及到的內容較為複雜一些：參考《用 HTTP 壓縮加快 Web 資料的發送》《配置Tomcat,Apache的gzip壓縮(HTTP壓縮)來提高瀏覽網站速度》《【HTTP】Fiddler（一） - Fiddler簡介》

 

• 靜態資源（Css、Js、Image）懶載入

參考一下這篇文章《讓我們再聊聊瀏覽器資源載入最佳化》

 

• 非同步執行inline指令碼

不懂，網上東西也不多，後續跟進。

• 避免重複的資源請求

最常見的就是，jQuery引用了好幾次。

• 縮小cooike

為什麼呢？寬頻佔得過多，還是很消耗資源？

• 設定串連方式為keep-alive

《談HTTP的KeepAlive》

• 減少DNS查詢

《最佳化網站設計（九）：減少DNS尋找的次數》

• 移動端可見地區是有限的，採用消極式載入方式

和上面“靜態資源（Css、Js、Image）懶載入”有什麼區別

• 開啟伺服器壓縮（gzip方式）

上面已經說過，有點多餘了

   最佳化圖片處理

1. 圖片走CDN
2. 少用動態gif圖
3. 圖片不適宜過多及過大
4. 零碎圖片使用css Sprite技術一次性下載
5. 避免使用bmp圖片
6. 圖片壓縮

1. 要錢。 2.3.5.6 可以在後台用外掛程式控製圖片上傳的規格

  最佳化HTML

1. 減少HTML標籤，減少不必要的嵌套
2. 廢棄table標籤
3. 減少DOM深度
4. 壓縮HTML，去掉注釋，空格換行等資訊

　　想起了阮老師的《也許，DOM 不是答案》

  最佳化JS

1. 使用臨時變數或者數組儲存document.images及document.forms等集合資料
2. 慎用with文法
3. 使用AJAX緩衝
4. 避免eval及Function文法
5. 避免使用inlineScript
6. 非同步、底部載入js
7. 合并壓縮js
8. 字串串連使用數組的join方式

這些知識不熟！！！

web app 的技術參考 -- 來自 【百度移動建站指南】