創(chuàng)新互聯(lián)分享了14條網(wǎng)站性能改進(jìn)的原則,單獨(dú)每次讀取原理,與樣品。大部分的這些原則是非常實(shí)用,適合網(wǎng)站架構(gòu)師,前端工程師。前端工程師的重要性要居于其中很多。

原則1 減少HTTP請(qǐng)求數(shù)

結(jié)構(gòu)要求,等待響應(yīng)需要時(shí)間,所以請(qǐng)求的數(shù)量,越少越好。下降的整體思路是結(jié)合資源,減少請(qǐng)求的數(shù)量通過(guò)根據(jù)文檔的減少頁(yè)面數(shù)量。

1. Image Map

通過(guò)設(shè)置usemap屬性,可以使用標(biāo)記標(biāo)簽圖像分割的多個(gè)區(qū)域,來(lái)指向不同的鏈接。而不是使用多個(gè)形象建設(shè)鏈接分別減少請(qǐng)求的數(shù)量。

2. CSS Sprite(CSS貼圖整合/貼圖拼合/貼圖定位)

通過(guò)設(shè)置元素background-position的css樣式來(lái)設(shè)置。常用的界面圖標(biāo)。一個(gè)典型的可以參考以上小按鈕TinyMCE編輯器。許多個(gè)小圖從一個(gè)統(tǒng)一的大圖來(lái)設(shè)置不同的偏移量分離而來(lái)，這個(gè)接口加載事實(shí)上只要請(qǐng)求許多按鈕一次更大的(請(qǐng)求),從而減少HTTP請(qǐng)求。

3. Inline Image(內(nèi)聯(lián)圖片)

在Inline Image的SRC的內(nèi)聯(lián)圖像不是外部圖像文件中指定的URL,但是直接的將圖片信息直接的導(dǎo)入。如數(shù)據(jù):SRC = " data:image/gif;base64,R0lGODlhDAAMAL...”有用在某些特殊情況下(如一個(gè)小圖片僅用于當(dāng)前頁(yè)面)。

原則2 利用多線路CDN

為你的網(wǎng)站提供各種線路(例如,國(guó)內(nèi)電信、聯(lián)通、移動(dòng)),設(shè)置多個(gè)位置(北、南、西),可以快速訪問(wèn)所有用戶。

原則3 利用HTTP Cache

對(duì)于一些不是頻繁更新資源的(比如一個(gè)靜態(tài)圖片)有更長(zhǎng)的Expires標(biāo)題信息,這些資源緩存后,未來(lái)不能重復(fù)傳播了很長(zhǎng)一段時(shí)間。

原則4 使用Gzip壓縮

使用Gzip壓縮HTTP消息,減小體積,減少傳輸時(shí)間。

原則5 將樣式表置于頁(yè)面前部

加載樣式表,這個(gè)頁(yè)面呈現(xiàn)渲染是從早期開(kāi)始,給用戶的感覺(jué)頁(yè)面加載速度更快。

原則6 將腳本置于頁(yè)面尾部

原因同5，首先,處理頁(yè)面，頁(yè)面渲染就可以早些時(shí)候完成,腳本邏輯執(zhí)行將在后期,因此,給用戶頁(yè)面加載速度就會(huì)更加的快速。

原則7 避免使用CSS表達(dá)式

不簡(jiǎn)單的JS邏輯,DOM查找,選擇操作將降低處理效率。

原則8 將JavaScript與CSS作為外聯(lián)資源

這似乎是與合并的想法原則1相反,但事實(shí)上不是這樣:考慮每一頁(yè)介紹了常見(jiàn)的JavaScript資源(如jQuery或ExtJS JavaScript庫(kù)),單在一個(gè)頁(yè)面性能的情況下,內(nèi)聯(lián)JavaScript(嵌入HTML頁(yè)面加載速度比拓展。但是如果有很多頁(yè)介紹常見(jiàn)的JavaScript資源,所以內(nèi)聯(lián)的解決方案將導(dǎo)致重復(fù)傳輸(因?yàn)橘Y源嵌入在每個(gè)頁(yè)面,所以每次你打開(kāi)一個(gè)頁(yè)面的這一部分資源轉(zhuǎn)移,導(dǎo)致浪費(fèi)網(wǎng)絡(luò)資源)。但是這種資源拓展參考可以解決這個(gè)問(wèn)題。

原則9 減少DNS查找

1. 使用Keep-Alive保持連接

如果連接斷開(kāi),然后下一個(gè)連接執(zhí)行DNS查找,即使對(duì)應(yīng)的域名,IP映射緩存,搜索也需要一些時(shí)間

2. 減少域名

新域名請(qǐng)求每次都應(yīng)該要通過(guò)不同的DNS查找，DNS緩存卻不能發(fā)揮作用。所以你應(yīng)該試著組織網(wǎng)站統(tǒng)一域名下,避免使用太多的子域名

原則10 壓縮你的JavaScript

使用JS壓縮工具壓縮你的JS吧，效果使很不錯(cuò)的。根據(jù)jQuery兩個(gè)不同的發(fā)行版本就能發(fā)現(xiàn)他們之間的區(qū)別:

http://code.jquery.com/jquery-1.6.2.js 閱讀版jQuery代碼，230KB

http://code.jquery.com/jquery-1.6.2.min.js 壓縮版jQuery代碼(用于實(shí)際部署)，89.4KB

原則11 盡量避免重定向

重定向意味著在實(shí)際訪問(wèn)你想看到首頁(yè)加入輪額外的HTTP請(qǐng)求(客戶端發(fā)起HTTP請(qǐng)求→HTTP服務(wù)器返回重定向響應(yīng)→客戶端對(duì)新URL發(fā)起請(qǐng)求→HTTP服務(wù)器返回內(nèi)容，下劃線部分為額外的請(qǐng)求)，因此消耗更多的時(shí)間(也對(duì)人的感覺(jué)反應(yīng)慢)。所以,除非必要,不要使用重定向。幾個(gè)“必要”:

1. 避免URL失效

遷移后的舊網(wǎng)站,為了避免舊URL失敗,往往舊URL的請(qǐng)求重定向到一個(gè)新系統(tǒng)相應(yīng)的地址。

2. URL美化

可讀性好的URL和實(shí)際資源URL之間的轉(zhuǎn)換,比如,谷歌工具欄,用戶記住http://toolbar.google.com這豐富的語(yǔ)義地址在人類身上,但很難記住,真正的源地址http://www.google.com/tools/firefox/toolbar/FT3/intl/en/index.html。所以有必要保持前,將被重定向到后者根據(jù)前者要求。

原則12 移除重復(fù)的腳本

不要一個(gè)頁(yè)面重復(fù)的使用相同的版本。B和C都依賴于一個(gè)腳本,例如,在頁(yè)面中使用B和C可能存在反復(fù)的引用。解決方案,對(duì)于簡(jiǎn)單的網(wǎng)站依賴手動(dòng)檢查,消除重復(fù)的介紹,對(duì)于復(fù)雜的網(wǎng)站你需要網(wǎng)站建設(shè)知識(shí)建立自己的版本的依賴管理/控制機(jī)制。

原則13 小心處理ETag

除了last - modified ETag是另一個(gè)HTTP緩存。由hash方法確定資源是否被修改。但是在某種程度上說(shuō)還是存在一定的問(wèn)題：

1. 不一致：不同的Web服務(wù)器(Apache,IIS等)ETag格式定義是不同的

2. ETag的計(jì)算是不穩(wěn)定的(由于考慮過(guò)多因素)，例如：

1) ETag在不同的服務(wù)器上，具有相同的資源，大型Web應(yīng)用程序通常由多個(gè)服務(wù)器提供服務(wù),這將導(dǎo)致服務(wù)器上的客戶端緩存資源顯然仍然有效,當(dāng)下一次請(qǐng)求B被認(rèn)定為失敗由于不同的ETag,導(dǎo)致相同的重復(fù)傳播資源。

2) 資源不變,是其他因素導(dǎo)致的變化,比如配置文件變化,使ETag的變化。直接后果是系統(tǒng)更新后端緩存失效,導(dǎo)致運(yùn)輸數(shù)量、網(wǎng)站性能下降。

原則14 在Ajax中利用HTTP Cache

Ajax是一個(gè)異步請(qǐng)求,異步請(qǐng)求將不會(huì)阻止你現(xiàn)在操作,當(dāng)請(qǐng)求完成時(shí),你可以立即看到結(jié)果。但異步不代表可以瞬時(shí)完成,也不代表可以寬容需要無(wú)限的時(shí)間完成。所以對(duì)于Ajax請(qǐng)求的性能也需要注意。

當(dāng)前題目：高性能網(wǎng)站建設(shè)原則
文章來(lái)源：http://www.rwnh.cn/news/162285.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)