<dd id="t699n"></dd>

  • <em id="t699n"></em>

    1. <dd id="t699n"></dd>

      頁面優化有哪些?

      時間:2021-07-30 10:07:54 類型:web前端
      字號:    

      一、常規優化

      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插件就是這么干的


      黄网站免费 <