• <ol id="gebcs"></ol>
    <track id="gebcs"><i id="gebcs"></i></track>

    頁面優化有哪些?

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


    黄片基地 <