服務項目
聯(lián)系方式
保定市遨游計算機服務有限公司
咨詢熱線:13313028229
售后:0312-6791400
售后:0312-6791126
網(wǎng)址:bsnls.com
地址:保定朝陽大街國貿(mào)大廈8樓808室
咨詢熱線:13313028229
售后:0312-6791400
售后:0312-6791126
網(wǎng)址:bsnls.com
地址:保定朝陽大街國貿(mào)大廈8樓808室
關于網(wǎng)站性能優(yōu)化準則
[來源:bsnls.com]
[作者:網(wǎng)站建設]
[日期:15-10-27]
[瀏覽次數(shù):]
規(guī)則一:減少HTTP請求。這本書的規(guī)則順序是按照其重要性來排名的,減少HTTP請求作為第一個規(guī)則,足見其重要性。根據(jù)黃金法則,減少組件數(shù)量從而減少HTTP請求是最有效的性能優(yōu)化方式,其中有幾項技術值得提一下:
CSS Sprites。應該前端人都比較熟悉了,把圖片整合到一個大圖里,利用background-position來定位。
data:URL。值得一說把圖片變?yōu)閮?nèi)聯(lián)的,減少了圖片請求,webpack里圖片小于8kb就會轉為base64的data:URL。
合并腳本和CSS。
規(guī)則二:使用CDN。這個規(guī)則不用多說,分發(fā)內(nèi)容使之更靠近終端用戶,減少了請求時間。
規(guī)則三:添加Expires頭。善用緩存,給長久不變的內(nèi)容組件設置有效期較久的Expires頭。
規(guī)則四:壓縮組件。利用gzip等內(nèi)容編碼對文檔或組件進行壓縮,通常能將相應數(shù)據(jù)量減少70%左右。
規(guī)則五:將樣式表放在頂部。頁面在打開工程中逐步呈現(xiàn),用戶會覺得頁面快一些,也讓用戶在等待過程中有一個良好的反饋。把CSS放在底部的話有可能出現(xiàn)白屏現(xiàn)象。
規(guī)則六:將腳本放在底部。頁面下載腳本時會阻止其他內(nèi)容下載與呈現(xiàn),以防止瀏覽器的重繪重排。所以把腳本放在頁面的底部不會阻止頁面內(nèi)容的呈現(xiàn),而且頁面一些可視化組件可以盡早下載而不被阻塞。
規(guī)則七:避免使用CSS表達式。CSS表達式會進行頻繁的求值,導致了性能低下。
規(guī)則八:使用外部JavaScript和CSS。純粹而言,內(nèi)聯(lián)更快一些,因為滿足了規(guī)則一的減少HTTP請求,但是這個問題上,一定要考慮緩存帶來的性能優(yōu)化,外部文件很有可能被緩存下來,從而提升了性能。
規(guī)則九:減少DNS查找。善用DNS緩存,比如持久連接。
規(guī)則十:精簡JavaScript。移除不必要的字符空格,我們常見的.min.js就是如此。
規(guī)則十一:避免重定向。3xx的響應狀態(tài)碼代表著一股重定向的響應。其中URL結尾缺少斜線造成的重定向需要特別注意,不要因為這一點失誤損傷性能。
規(guī)則十二:刪除重復腳本。
規(guī)則十三:配置ETag。說起這個不得不說條件請求If-Modified-Since和If-None-Match,都是用來進行緩存再驗證。ETag的問題是服務器構造ETag時,盡管兩個文件完全一樣,但如果處于不同的服務器的話還是會有不同的ETag,增加了HTTP進行請求下載的次數(shù),這對于后臺是服務器集群的網(wǎng)站性能損傷很大。
規(guī)則十四:使Ajax可緩存。雖然Ajax是異步的,但也不能讓等待響應的時間過長。優(yōu)化準則的話參見上面的性能準則,其中善用緩存依然是我們重點關注的。
書最后用這些準則分析了美國十大網(wǎng)站,發(fā)現(xiàn)有效利用這些規(guī)則性能有很大的提升空間,我也看了一下自己實習時候項目,發(fā)現(xiàn)可優(yōu)化的地方非常多。以后的開發(fā)過程中要謹記這些準則,讓自己產(chǎn)品的用戶獲得更好的體驗。
下一頁:站內(nèi)關鍵詞分析選擇