人人IT網

人人IT網

當前位置: 主頁 > IT新聞 > 互聯網 >

web前端優化方法

時間:2016-12-03 12:03來源:Internet 作者:Internet 點擊:
目前,互聯網BS模式應用發展越來越多,越來越廣泛,包括網站系統、OA平台的開發等,那麼如何做好、做得出色,给用戶帶來很好的體驗呢?下面跟大家分享一下Web前端優化方面的經驗,這些經驗都是工作實踐中比較
目前,互聯網BS模式應用發展越來越多,越來越廣泛,包括網站系統、OA平台的開發等,那麼如何做好、做得出色,给用戶帶來很好的體驗呢?下面跟大家分享一下Web前端優化方面的經驗,這些經驗都是工作實踐中比較實用的技術
  1、盡量減少HTTP請求個數——須權衡

  合並圖片(如css sprites,內置圖片使用數據)、合並CSS、JS,這一點很重要,但是要考慮合並後的文件體積。

  2、为文件頭指定Expires或Cache-Control,使內容具有緩存性。

  區分靜態內容和動態內容,避免以後頁面訪問中不必要的HTTP請求。

  3、避免空的src和href

  留意具有這兩個屬性的標簽如link,script,img,iframe等;

  4、使用gzip壓縮內容

  Gzip壓縮所有可能的文件類型以來減少文件體積

  5、把CSS放到頂部

  實現頁面有秩序地加載,這對於擁有較多內容的頁面和網速較慢的用戶來說更为重要,同時,HTML規範清楚指出样式表要放包含在頁面的區域內;

  6、把JS放到底部

  HTTP/1.1 規範建議,瀏覽器每個主機名的並行下載內容不超過兩個,而問題在於腳本阻止了頁面的平行下載,即便是主機名不相同

  7、避免使用CSS表達式

  頁面顯示和縮放,滾動、乃至移動鼠標時,CSS表達式的計算頻率是我們要關注的。可以考慮一次性的表達式或者使用事件句柄來代替CSS表達式。

  8、將CSS和JS放到外部文件中

  我們需要權衡內置代碼帶來的HTTP請求減少與通過使用外部文件進行緩存帶來的好處的折中點。

  9、精簡CSS和JS

  目的就是減少下載的文件體積,可考慮壓縮工具JSMin和YUI Compressor。

  10、剔除重复的JS和CSS

  重复調用腳本,除了增加額外的HTTP請求外,多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存,它們都存在重复運算JavaScript的問題。

  11、使AJAX可緩存

  利用時間戳,更精巧的實現響應可緩存與服務器數據同步更新。

  12、盡早刷新輸出緩沖

  尤其對於css,js文件的並行下載更有意義

  13、使用GET來完成AJAX請求

  當使用XMLHttpRequest時,瀏覽器中的POST方法是一個“兩步走”的過程:首先發送文件頭,然後才發送數據。在url小於2K時使用GET獲取數據時更加有意義。

  14、延遲加載

  確定頁面運行正常後,再加載腳本來實現如拖放和動畫,或者是隱藏部分的內容以及折叠內容等。

  15、預加載

  關注下無條件加載,有條件加載和有預期的加載。

  16、盡量減少iframe的個數

  考慮即使內容为空,加載也需要時間,會阻止頁面加載,沒有語意,注意iframe相對於其他DOM元素高出1-2個數量級的開銷,它會在典型方式下阻塞onload事件,IE和Firefox中主頁面样式表會阻塞它的下載。

  17、避免404

  HTTP請求時間消耗是很大的,有些站點把404錯誤響應頁面改为“你是不是要找*”,這雖然改進了用戶體驗但是同样也會浪費服務器資源(如數據庫等)。

  18、減少Cookie的大小

  去除不必要的coockie 使coockie體積盡量小以減少對用戶響應的影響,設置合理的過期時間。較早地Expire時間和不要過早去清除coockie,都會改善用戶的響應時間。

  19、優化圖像

  嘗試把GIF格式轉換成PNG格式,看看是否節省空間。在所有的PNG圖片上運行pngcrush(或者其它PNG優化工具)

  20、不要在HTML中縮放圖像——須權衡

  不要为了在HTML中設置長寬而使用比實際需要大的圖片。
交流群:103791667
From:ITEYE
頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
發表評論
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
評價:
表情:
驗證碼:點擊我更換圖片
欄目列表
推薦內容