web開發的性能准則(減少頁面加載時間方面)


准則(概述)

  • 減少 HTTP 請求
  • 使用CDN加速
  • 避免空的src或href屬性值
  • 增加過期頭
  • 啟GZIP壓縮
  • 把css文件放到頭部
  • 把javascript放到尾部
  • 避免使用css表達式
  • 刪除不使用的css語句
  • 對javascript、css代碼進行壓縮
  • 減少重繪

減少HTTP請求

減少HTTP請求是上面性能准則中最為顯著的一條,我們可以分為三個主要方面來討論

  • 使用並行連接
    開發人員往往只考慮服務器端對性能的影響卻疏忽了瀏覽器端的限制,比如有多少資源可以在同一時間加載。HTTP1.1協議明確的限制了單個用戶在同一時間不能保持兩個以上的連接,但是,現代瀏覽器大部分都突破了這個限制,很多瀏覽器可以支持四個甚至六個並行的連接。同樣的,你也可以將資源文件散列到不同的域名下面,這種做法充分的利用了瀏覽器並發,所以可以提高加載效率,但是由於DNS的查詢有耗時,太多的域名解析又會使性能降低。
  • 合並資源文件
    並行鏈接的討論得出一個結論,大一些的文件比小一些的文件好,雖然說這個說法聽起來有些別扭,但是在現今的網絡環境里,這個說法可以得到證實(體積大的文件比多個小文件加載快)。此外每個HTTP請求在時間上和帶寬上至少會產生一些開銷,如果可以合並資源,減少HTTP請求,會提升一定的性能。
  • 使用圖片精靈(css sprite)
    這個名詞應該比較熟悉和常用,它的意思就是把幾張圖片合並成一張。這是一種有效減少HTTP請求的方法,在使用圖片的時候你只需要使用一些css的定位來決定這個圖片的位置即可。當我們使用其中的一個圖標時,其他的圖片也會被緩存(不需要再次請求)如果有100個圖標則可以減少99次HTTP請求。

使用CDN加速(內容分發系統)

CDN是一個擁有很多服務器、經過策略性部署的、可以覆蓋全球的網絡系統,當用戶訪問一個比較大的網站時,CDN會從最近的一個節點為用戶提供服務。但是動態數據的處理最好放在集中的服務器中,因為跨地域同步數據庫是一個令開發者頭痛的問題,所有大多數互聯網公司都把購買、登陸等數據相關的事物放到一個地方處理。另外,CDN服務是很貴的,如果網站的流量值得去付出這么多錢,它無疑會給性能帶來提升。

避免空的src和href屬性

我們使用javascript給空的src賦值時,javascript放在文檔的最后,此時雖然src是空的仍然會發出一個HTTP請求。當我們點擊一個空的href屬性的鏈接時,同樣會發出一個HTTP請求,雖然這個HTTP請求不會有影響加載時間但是會給服務端造成一定的流量浪費。我們可以創建一個帶有描述性信息的很href屬性,並阻止這次HTTP請求
<a href="#SometingDescriptive" id="TriggerName">TriggerName</a> <script type="text/javascript"> $("#TriggerName").click(function (e) { e.prventDefaulet(); // 取消默認行為 ... }); </script>
另外,空的src和href也是會產生報錯的

增加過期頭

增加了過期頭之后瀏覽器便會緩存這些文件,當用戶第二次訪問這個網站的時候就不會再像服務端請求這個文件。關於緩存的詳細介紹可以點這里

啟用GZIP壓縮

HTTP協議1.1引入了Accept-Encoding這個功能(表明HTTP請求的內容是壓縮過的),GZIP就是其中的一種壓縮方式,它是現在壓縮比率最高的,據雅虎的統計它減小了大約70%的響應大小。它不僅僅會減小文件傳輸時間,同時也節省了帶寬。

把css放在頭部

瀏覽器並不會等全部HTML解析完成之后才渲染元素,而是同時進行,把css放到前面就會保證先渲染的那一部分元素的顯示樣式是正確的,這么寫在性能方面也有很大的意義,你絕不希望引起大量的瀏覽器重繪。如果你的樣式文件放到頁面的底部,那么瀏覽器就會等所有文件都加載完才會繪制頁面,那么用戶很有可能盯着白屏一長段時間,

把javascript放在尾部

腳本會阻止並行加載(link支持最大限度的並行加載),也就是說,當瀏覽器加載一個腳本的時候時,它不會加載其他文件。如果腳本在頭部那他會阻止頁面的渲染。我們可以用script標簽上的DRFFER屬性通知瀏覽器去異步的加載其他文件,但是這么做會出現兩個問題。

  • 不是所有瀏覽器都認識這個屬性
  • 用了DEFFER屬性的腳本不可以使用document.write()

避免使用css表達式

  • 只有部分瀏覽器支持CSS表達式(IE5、6、7)
  • 在打包壓縮后CSS表達式會比正常的CSS長得多
  • 執行頻率高得多(往往當用戶移動鼠標或滾動頁面時它就會執行)

減少頁面的回流與重繪

關於這個問題可以去我博客園的 博客 來查看。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM