以下是性能準則，根據對頁面加載時間的影響強弱排序。 1、減少HTTP請求。 1）理解并行連接。HTTP1.1協議很明確地限制了單個用戶不能在同一時間保持2個以上的連接。最近幾年，大部分瀏覽器都突破了這個限制。 2）合并資源文件。大一些的文件比小的文件好。我們要把內容合并成盡可能少的文件。可能的話，把css文件合并成一個單獨的文件（或者抽出所有網頁公共的css文件），把jsvascript文件合并成一個單獨的文件。 3）使用圖片精靈。幾十個小圖標組成一張大圖，使用background-position選擇小圖標，假如有60個小圖標，瀏覽器只需要做一個http請求即可，那就節省了59次http請求，這絕對是一個可觀的性能提升。 2、使用CDN加速。
CDN是一個擁有很多很多服務器、經過策略性部署的、可以覆蓋全球的網絡系統。不管你在哪里，只要有人訪問你的網站，他就會從最近的一個節點取數據給他。 3、避免空的src或者href屬性值。
當頁面加載的過程中，一個有著空的src屬性的img元素被js動態賦值的話，瀏覽器依然會發起一個http請求，雖然他是一個空值。同樣的問題也發生在href屬性上。 解決方案：1）<a href="javascript:;" class="">111</a> ?? 2）<a href="#something" id="trig" class="">22</a> ?? ??? ?var trig = document.getElementById('trig'); ?? ??? ?trig.click(function(e){ ?? ?? ??? ??e.preventDefault(); ?? ??? ?}) ? 4、?增加過期頭。
你應該在所有的靜態文件（圖片，樣式等）上都加上過期頭。過期的日期要定的很遙遠，基本上認為永不過期，這樣瀏覽器就會緩存靜態文件。 <meta http-equiv="charset" content="iso-8859-1"> <meta http-equiv="expires" content="31 Dec 2008"> 這樣發送到瀏覽器的頭部就應該包含： content-type: text/html charset:iso-8859-1 expires:31 Dec 2008 當然，只有瀏覽器可以接受這些附加的頭部字段，并能以適當的方式使用它們時，這些字段才有意義。 5、啟GZIP壓縮。 HTTP1.1協議引入Accept-Encoding這個功能，它可以表明http請求內容是被壓縮過的。但注意，應該壓縮一切文字類的內容，例如HTML、CSS、腳本，但是不能壓縮圖片和pdf文件，他們會越壓越大。
6、把css放在頭部。 ? ? 這樣做的話，不會讓用戶盯著白屏一段時間，html和css同時加載出來。
7、把Javascript放在尾部。 ? ? 腳本會組織并行加載。換句話說，當瀏覽器加載一個腳本時，他不會加載其他文件。如果把腳本放在頭部，那他就會阻止頁面的渲染，開始的時候用戶就什么也看不到。
8、避免使用css表達式。 什么是css表達式？ object.style.left = (document.body.clientWidth/2) - (object.offsetWidth/2) 其實這就是居中的寫法，最后用css代碼來實現。 css表達式的執行頻率遠遠超出你的想象。 9、刪除不使用的css語句。 ? ? 目前大多數瀏覽器的樣式引擎都是遍歷所有的css規則來尋找匹配元素的。如果有很多沒用的css語句，那就會白白浪費樣式引擎的時間。移除之后，還會減少css文件的體積，節省帶寬。
10、對Javascrip、css進行代碼壓縮。 ? ? 這里的壓縮是指把所有的非功能性字符從代碼移除，比如空白行，換行符，注釋，分隔符等。利用第三方壓縮工具即可（YUI）。
11、減少重繪。
? ? 1）規定圖片的寬和高。當瀏覽器在生成布局樹的時候，他會給每一個元素留一個區域。如果不在一開始規定好img的寬和高，那瀏覽器就只能猜了，當他把圖片下載完后發現猜錯了，他預留的區域不對，那只能重繪來糾正錯誤。 2）不要用表格布局。瀏覽器是一行一行顯示表格的，如果一行的列寬和行高和之前的不一樣那之前繪好的行也會重新繪制。 ?? ?? ? 3）定義字符集。大多數瀏覽器（除了ie678）都會暫停頁面渲染直到他們找到字符集的定義。這是因為字符集是渲染頁面的一個重要因素。不同的字符集可能意味著完全不同的渲染，顯示的效果也完全不同。 ? ? 4）不要重組DOM。重新排列DOM通常都會引發瀏覽器重繪。如果一定要操作DOM，如果有很多節點要添加，不要一次加一個。比如，要添加一個列表，千萬不要先添加ul元素或者ol元素，然后一個一個地把li加上去，每次添加都會產生一次重繪。所以添加有兩個li的列表會產生三次重繪。不如把整個列表的html代碼一次性加進去，這樣只產生了一次重繪。對于DOM節點，能不操作最好，如果一定要操作，必須使用產生重繪最少的方法。 ? 參考：http://www.iefans.net/liulanqi-zuida-bingfa-lianjieshu/（詳解瀏覽器最大并發連接數） 《高性能HTML5》

轉載于:https://www.cnblogs.com/weihuan/p/8721354.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的性能准则的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。