WEB項目最佳化技巧(必會)

來源:互聯網
上載者:User
1.Minimize HTTP Requests 減少HTTP請求
  圖片、css、script、flash等等這些都會增加http請求數,減少這些元素的數量就能減少回應時間。把多個JS、CSS在可能的情況下寫進一個檔案,頁面裡直接寫入圖片也是不好的做法,應該寫進CSS裡,利用 CSS sprites 將小圖拼合後利用background來定位。
  2.Use a Content Delivery Network 利用CDN技術
CDN 確實是好東西,不過伺服器供應商的這項服務一般是要收費的。
  3.Add an Expires or a Cache-Control Header 設定標頭檔到期或者靜態緩衝
  瀏覽器會用緩衝來減少http請求數來加快頁面載入的時間,如果頁面頭部加一個很長的到期時間,瀏覽器就會一直快取頁面面裡的元素。不過這樣如果頁面裡的東西變動的話就要改名字了,否則使用者端不會主動重新整理,看自己衡量了~ 這項可以通過修改.htaccess檔案來實現。
  4.Gzip Components Gzip壓縮
  Gzip格式是一種很普遍的壓縮技術,幾乎所有的瀏覽器都有解壓Gzip格式的能力,而且它可以壓縮的比例非常大,一般壓縮率為85%
  5.Put Stylesheets at the Top 把CSS放頂部
  讓瀏覽者能儘早的看到網站的完整樣式。
  6.Put Scripts at the Bottom 把JS放底部
  網站呈現完畢後再進行功能設定,當然這些JS要在你的載入過程中不影響內容表現。
  7.Avoid CSS Expressions 避免CSS Expressions
  CSS運算式很可怕,這個只被IE支援的東西執行時候的運算量非常大,你移動一下滑鼠它都要進行重計算的。
  8.Make JavaScript and CSS External 將JS和CSS外鏈
  前面講到了緩衝這個事情,一些較為公用的JS和CSS,我們可以使用外鏈的形式,譬如我就是從Google外鏈來的Jquery檔案,如果我的瀏覽者在瀏覽別的使用了這個外鏈檔案的網站時已經下載並緩衝了這個檔案,那麼他在瀏覽我的網站的時候就不需要再進行下載了!~
  9.Reduce DNS Lookups 減少DNS尋找
  貌似是要減少網站從外部調用資源,我的Google分析和picasa的外鏈圖片都算在裡面了。
  10.Minify JavaScript and CSS 減小JS和CSS的體積
  寫JS和CSS都是有技巧的,用最少的代碼實現同樣的功能,減少空白,增強邏輯性,用縮寫方式等等,當然也有不少工具也能夠幫你實現這一點。
  11. Avoid Redirects 避免重新導向
  再寫入連結時,雖然”http://www. today-s-ooxx. com”和”http://www. today-s-ooxx. com/” 僅有一個最後的”/”只差,但是結果是不同的,伺服器需要花時間把前者重新導向為後者然後進行跳轉,這個要自己注意,也可以在Apache裡用Alias 或者mod_rewrite或者DirectorySlash解決。
  12. Remove Duplicate Scripts 重複資料刪除指令碼
  重複調用的代碼瀏覽器並不會識別忽略,而是會再次運算一遍,這當然是大大的浪費。
  13. Configure ETags 配置ETags
  搞不清楚咋回事,總之我是在. htaccess裡把它刪除了。
  14. Make Ajax Cacheable 緩衝Ajax
  Ajax是即時響應的,在瀏覽器接收到新的資料前,舊的資料被緩衝,這樣能夠更好的提高效率。
  15. Flush the Buffer Early 儘早的釋放緩衝
  當使用者進行頁面請求時,伺服器端需要花費200到500毫秒時間來拼合HTML,將寫在head與body之間,釋放緩衝,這樣可以將檔案頭先發送出去,然後再傳送檔案內容,提高效率。
  16. Use GET for AJAX Requests 用GET方式進行AJAX請求
  Get 方法和伺服器只有一次互動(發送資料),而 Post 要兩次(發送頭部再發送資料)。
  17. Post-load Components 消極式載入組件
  最先載入必須的組件進行頁面初始化,然後再載入其他,YUI Image Loader 是很好的例子。
  18. Preload components 預先載入組件
  提前載入以後可能用到的東西,和消極式載入並不衝突,它的目的是為後續請求提供更快的響應,參見Google首頁上的CSS sprites應用。
  19. Reduce the Number of DOM Elements 減少DOM元素數量
  複雜的頁面結構意味著更長的下載及回應時間,更合理更高效的使用標籤來架構頁面,是好的前端的必備條件。
  20. Split Components Across Domains 跨域分離組件
  頁面組件多個來源可以增大你的平行下載量,但注意不要過多,超過2-4個網域名稱會引起上面說到的DNS尋找浪費。
  21. Minimize the Number of iframes 減少iframe數量
  需要更有效利用 ifames。
  iframe 優點:有利於下載緩慢的廣告等第三方內容,安全沙箱,並行下載指令碼
  iframe 缺點:即使為空白也會有較大資源消耗,會阻止頁面的onload,非語義
  22. No 404s 不要出現404頁面
  網站本身裡(非搜尋結果)出現404頁面,無意義的404頁面會影響使用者體驗並且會消耗伺服器資源。
  23. Reduce Cookie Size 減小Cookie
  Cookie在伺服器及瀏覽器之間的通過檔案頭進行交換,儘可能減小Cookie體積,設定合理的到期時間,能夠很好的提高效率。

以上就介紹了WEB項目最佳化技巧(必會),包括了方面的內容,希望對PHP教程有興趣的朋友有所協助。

  • 聯繫我們

    該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

    如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.