一、常規優化
javascript 外聯文件引用放在 html 文檔底部
css 外聯文件引用在 html 文檔頭部
http 靜態資源盡量用多個子域名:充分利用現代瀏覽器的多線程并發下載能力。瀏覽器的多線程下載能力
服務器端提供 html 文檔和 http 靜態資源時,盡量開啟 gzip 壓縮
盡量減少 HTTP Requests 的數量
js/css 的 minify
大量使用 CSS Sprites:這樣做可以大大地減少CSS背景圖片的HTTP請求次數;
首屏不需要展示的較大尺寸圖片,請使用 LazyLoad
避免404錯誤:請求一個外聯 js 失敗時獲得的404錯誤,不但會堵塞并行的下載,而且瀏覽器會嘗試分析404響應的內容,來辨識它是否是有用的Javascript代碼;
減少 cookies 的大?。罕M量減少 cookies 的體積對減少用戶獲得響應的時間十分重要;
去除不必要的 cookie ;
盡量減少 cookie 的大??;
留心將 cookie 設置在適當的域名下,避免影響到其他網站;
設置適當的過期時間。一個較早的過期時間或者不設置過期時間會更快地刪除 cookie,從而減少響應時間。
避免使用 javascript 來定位布局
圖片壓縮優化
不要使用frameset,少使用iframe: 搜索引擎不友好、 即使內容為空,加載也需要時間、會阻止頁面加載。禁止使用iframe引入外部資源,不包括allyes廣告,不包括about:blank的空頁面。
二、中高級優化
combo handler 的引入:
通過combo handler模塊,來合并相同URL下的Javascript和CSS文件,從而減少文件請求數
我們移動端首頁就做了優化
http://res.suning.cn/project/mvs/RES/common/script/??module/iscroll-lite/5.1.3/iscroll-lite.js,module/alertBox/2.0.0/alertBox.js,module/swipe/1.1.0/swipe.js
引入script元素做延遲解析異步渲染,如在移動端應用廣泛的artemplate
添加Expire或Cache-Control:應用于不經常變化的組件,包括腳本、樣式表、Flash組件、圖片
避免重定向:在重定向完畢并且HTML下載完畢之前,是沒有任何東西顯示給用戶的
js代碼優化
代碼邏輯分層
避免全局變量
便于多人協作開發
各部分代碼模塊化,可以按需加載
保持全局變量的清潔
可進行單元測試
減少 DOM Elements 的數量:針對一個展現元素,盡量減少其包含的DOM結點
三、移動端頁面優化
移動頁面的速度跟三個因素有關,分別是:移動網絡帶寬速度,設備性能(CPU,GPU,瀏覽器),頁面本身。
因此移動頁面優化尤其特殊性。除了以上的處理方式,還有一些優化手段
預加載
顯性加載
參考天貓首頁,在頁面加載完畢之前,有一個緩沖的動畫過程。它一方面能增加頁面的趣味性,另一方面能讓后續頁面體驗更流暢
隱性加載 :主要是圖片的懶加載
按需加載
能用css3實現的效果就不要用圖片
使用icon-font代替圖片
盡量避免DataURI
DataURI要比簡單的外鏈資源慢6倍,生成的代碼文件相對圖片文件體積沒有減少反而增大,而且瀏覽器在對這種base64解碼過程中需要消耗內存和cpu,這個在移動端壞處特別明顯。
點擊事件優化
在移動端請適當使用touchstart,touchend,touch等事件代替延遲比較大的click事件。
使用成熟的前端手勢庫
動畫優化
盡量使用css3動畫
適當使用canvas動畫
合理使用requestAnimationFrame (android版本4.3以上)
高頻事件優化
類似touchmove,scroll這類的事件可導致多次渲染,對于這種事件可以通過以下手段進行優化:
使用requestAnimationFrame監聽幀變化,使得在正確的時間進行渲染
增加響應變化的時間間隔,減少重繪次數:移動端的搜索結果頁的lazyload插件就是這么干的