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

微信二維碼