91麻豆精品在线观看_一级做性色a爰片久久毛片免费_zzijzzij亚洲日本少妇jizjiz_国产日产欧美欧韩在线_日本高清在线www3344

據(jù)調(diào)查，網(wǎng)頁(yè)大小在2013年平均增長(zhǎng)了32%，平均達(dá)到了1.7M，單獨(dú)的HTTP請(qǐng)求達(dá)到96個(gè)，說(shuō)實(shí)話(huà)，這是一個(gè)令人震驚的數(shù)字，而且這只是個(gè)平均值，有一半的網(wǎng)站會(huì)大于這個(gè)值。

那么，一個(gè)“頁(yè)面超重”的網(wǎng)站有什么影響呢？具體來(lái)說(shuō)，有以下4點(diǎn)：

①、網(wǎng)站代碼越多，用戶(hù)下載的就越多，加載速度就會(huì)越慢。在國(guó)內(nèi)，并不是每個(gè)人都能享受20M的寬帶，每一個(gè)開(kāi)發(fā)者心里都很清楚，用戶(hù)不愿意等。

②、眾所周知，移動(dòng)互聯(lián)網(wǎng)發(fā)展迅速，對(duì)于2G網(wǎng)絡(luò)來(lái)說(shuō)，加載1.7M的頁(yè)面甚至需要一分鐘時(shí)間。

③、影響搜索引擎抓取速度將會(huì)對(duì)網(wǎng)站排名造成很大影響。

④、對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，代碼量越大，就越不容易更新和維護(hù)。

如今已經(jīng)有很多人開(kāi)始關(guān)注這個(gè)問(wèn)題，并出現(xiàn)了很多優(yōu)化的工具，而且這些技術(shù)都非常容易上手，不需要花太多時(shí)間，也不需要重新開(kāi)發(fā)。

在本文中，我會(huì)給大家一些建議，雖說(shuō)前三個(gè)建議實(shí)際上不能給“網(wǎng)頁(yè)減肥”，但它們?nèi)阅苡行У募涌炀W(wǎng)頁(yè)加載速度。

1、用GZIP格式壓縮

gzip是GNUzip的縮寫(xiě)，它是一個(gè)GNU自由軟件的文件壓縮程序。它是Jean-loupGailly和MarkAdler一起開(kāi)發(fā)的，第一次公開(kāi)發(fā)布版本是1992年10月31日發(fā)布的版本0.1，1993年2月發(fā)布了版本1.0。

我們?cè)贚inux中經(jīng)常會(huì)用到后綴為.gz的文件，它們就是GZIP格式的，現(xiàn)今已經(jīng)成為Internet上使用非常普遍的一種數(shù)據(jù)壓縮格式，或者說(shuō)一種文件格式。

HTTP協(xié)議上的GZIP編碼是一種用來(lái)改進(jìn)WEB應(yīng)用程序性能的技術(shù)，大流量的WEB站點(diǎn)常常使用GZIP壓縮技術(shù)來(lái)讓用戶(hù)感受更快的速度。

這一般是指WWW服務(wù)器中安裝的一個(gè)功能，當(dāng)有人來(lái)訪(fǎng)問(wèn)這個(gè)服務(wù)器中的網(wǎng)站時(shí)，服務(wù)器中的這個(gè)功能就將網(wǎng)頁(yè)內(nèi)容壓縮后傳輸?shù)絹?lái)訪(fǎng)的電腦瀏覽器中顯示出來(lái)。

一般對(duì)純文本內(nèi)容可壓縮到原大小的40%，這樣傳輸就快了，效果就是你點(diǎn)擊網(wǎng)址后會(huì)很快的顯示出來(lái)，當(dāng)然這也會(huì)增加服務(wù)器的負(fù)載，一般服務(wù)器中都安裝有這個(gè)功能模塊的。

根據(jù)W3C組織調(diào)查，大部分的網(wǎng)站都沒(méi)有啟用壓縮功能。

2、支持瀏覽器緩存

如果瀏覽器支持緩存，我們就不用重復(fù)下載網(wǎng)頁(yè)資源，最簡(jiǎn)單的設(shè)置緩存方法是在響應(yīng)頭中添加相應(yīng)的內(nèi)容，包括：Expires header，Last-Modified等。

你可以可以通過(guò)配置服務(wù)器來(lái)自動(dòng)添加這些屬性，比如你在Apache服務(wù)器中配置緩存所有的照片一個(gè)月:

3、使用內(nèi)容分發(fā)網(wǎng)絡(luò) (CDN)

CDN的全稱(chēng)是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。其目的是通過(guò)在現(xiàn)有的Internet中增加一層新的網(wǎng)絡(luò)架構(gòu)，將網(wǎng)站的內(nèi)容發(fā)布到最接近用戶(hù)的網(wǎng)絡(luò)“邊緣”，使用戶(hù)可以就近取得所需的內(nèi)容，提高用戶(hù)訪(fǎng)問(wèn)網(wǎng)站的響應(yīng)速度。

CDN有別于鏡像，因?yàn)樗如R像更智能，或者可以做這樣一個(gè)比喻：CDN=更智能的鏡像+緩存+流量導(dǎo)流。

因而，CDN可以明顯提高Internet網(wǎng)絡(luò)中信息流動(dòng)的效率，從技術(shù)上全面解決由于網(wǎng)絡(luò)帶寬小、用戶(hù)訪(fǎng)問(wèn)量大、網(wǎng)點(diǎn)分布不均等問(wèn)題，提高用戶(hù)訪(fǎng)問(wèn)網(wǎng)站的響應(yīng)速度。

為更好地理解CDN，讓我們看一下CDN的工作流程，當(dāng)用戶(hù)訪(fǎng)問(wèn)已經(jīng)加入CDN服務(wù)的網(wǎng)站時(shí)，首先通過(guò)DNS重定向技術(shù)確定最接近用戶(hù)的最佳CDN節(jié)點(diǎn)，同時(shí)將用戶(hù)的請(qǐng)求指向該節(jié)點(diǎn)。

當(dāng)用戶(hù)的請(qǐng)求到達(dá)指定節(jié)點(diǎn)時(shí)，CDN的服務(wù)器（節(jié)點(diǎn)上的高速緩存）負(fù)責(zé)將用戶(hù)請(qǐng)求的內(nèi)容提供給用戶(hù)。

具體流程為: 用戶(hù)在自己的瀏覽器中輸入要訪(fǎng)問(wèn)的網(wǎng)站的域名，瀏覽器向本地DNS請(qǐng)求對(duì)該域名的解析，本地DNS將請(qǐng)求發(fā)到網(wǎng)站的主DNS，主DNS根據(jù)一系列的策略確定當(dāng)時(shí)最適當(dāng)?shù)腃DN節(jié)點(diǎn)，并將解析的結(jié)果（IP地址）發(fā)給用戶(hù)，用戶(hù)向給定的CDN節(jié)點(diǎn)請(qǐng)求相——應(yīng)網(wǎng)站的內(nèi)容。

以上三個(gè)方法可以有效地加快頁(yè)面的訪(fǎng)問(wèn)速度，現(xiàn)在我們將對(duì)你的代碼進(jìn)行診斷，幫助我們給頁(yè)面減肥。

4、刪除不需要的資源

當(dāng)你不再需要一個(gè)組件的時(shí)候，你應(yīng)該刪掉它的CSS和JavaScript代碼，如果這些代碼都單獨(dú)放在一個(gè)文件中，那刪掉它們也不是難事，但如果已經(jīng)沒(méi)有用的代碼和其它代碼在一個(gè)文件中，那你肯定要費(fèi)不少精力去刪掉它們。

這個(gè)時(shí)候你就需要使用第三方的工具來(lái)幫你一鍵解決，比如JSLint，Dust-Me Selectors，CSS Usage或是像grunt-uncss一樣的構(gòu)建工具。

5、style和font重復(fù)定義的沉余代碼

要充分利用好CSS代碼定義自己的顏色大小等，有些網(wǎng)站既用了CSS代碼定義了之后又去使用style或者是font這樣的代碼進(jìn)行定義，這樣就無(wú)形中增加了無(wú)用代碼，容易造成代碼冗余，因此我們要對(duì)這樣的代碼進(jìn)行壓縮，實(shí)現(xiàn)代碼精簡(jiǎn)。

6、通用和最小化CSS

理想情況下，需要一個(gè)單獨(dú)的CSS文件，讓每個(gè)頁(yè)面都調(diào)用這一個(gè)布局，當(dāng)然，如果你想要支持老版本的IE，你就得多弄一個(gè)CSS文件。

另外，我還要提醒大家一點(diǎn)：當(dāng)你把它們構(gòu)建到服務(wù)器上之前，你應(yīng)該把代碼間所有不必要的格式都刪掉。

有很多預(yù)處理工具都可以幫你解決這件麻煩事，比如Sass，LESS和Stylus。

有一些方法可以幫助你直接合并多個(gè)CSS文件，在Windows上：

copy file1.css+file2.css file.css

在Mac或Linux上：

cat file1.css file2.css > file.css

你可以把得到的CSS文件再經(jīng)過(guò)在線(xiàn)的CSS壓縮工具刪除格式化。

最后，在head標(biāo)簽中加載所有的CSS，這樣瀏覽器就知道你的頁(yè)面樣式不用多次重繪了。

7、通用和最小化的JavaScript

利用外部文件，我們可以用Javascript代碼和CSS代碼放在外部文件里面，在我們的HTML代碼里面加上調(diào)用代碼進(jìn)行調(diào)用即可，如果打開(kāi)一個(gè)網(wǎng)站去檢查它的源文件，前面如果有大量的Javascript代碼和CSS代碼就容易使得網(wǎng)站有用的內(nèi)容文字部分推到后面去了，是不利于搜索引擎抓取的。

據(jù)我博客收集的數(shù)據(jù)顯示：平均每個(gè)頁(yè)面加載了18個(gè)javascript文件，雖然把像jQuery這樣的庫(kù)文件單獨(dú)分開(kāi)非常實(shí)用，但是你自己的JavaScript代碼應(yīng)該保持通用和最小化。

同樣很多第三方的工具可以幫你解決這樣事情，比如YUI Compressor，Closure Compiler和我最喜歡用的The JavaScript CompressorRater，簡(jiǎn)化的JavaScript代碼會(huì)加快網(wǎng)頁(yè)的訪(fǎng)問(wèn)速度，減少HTTP請(qǐng)求次數(shù)。

最后，最好在HTML的body標(biāo)簽后放置JavaScript引用代碼，這樣能保證JavaScript代碼不影響到其它內(nèi)容的加載。

8、減少頁(yè)面嵌套的表格

對(duì)于表格要盡量少使用，尤其是嵌套的表格部分，雖然CSS排版使得我們編寫(xiě)代碼更加的精簡(jiǎn)容易，但往往也是少不了表格的使用的，我們可以不去避免，但一定要減少使用多層嵌套的表格，不要產(chǎn)生沒(méi)有用的代碼。

9、網(wǎng)站圖片的優(yōu)化

對(duì)于一些圖片站來(lái)說(shuō)，加載錯(cuò)誤的圖片格式會(huì)對(duì)你的網(wǎng)頁(yè)造成很大影響，所以，我建議圖片站的站長(zhǎng)一定要多對(duì)圖片做些優(yōu)化。

（1）、圖片優(yōu)化原則

一般來(lái)說(shuō)選取圖片我們應(yīng)用遵循如下原則：

①、照片使用JPG格式。

②、其它所有的圖片都使用PNG格式。

（2）、調(diào)整大圖的大小

目前智能機(jī)所拍出的照片越來(lái)越大，你不可能把原照片直接展示在頁(yè)面中，普通的編輯器都會(huì)直接上傳原圖，這樣會(huì)讓頁(yè)面的加載速度慢到另一個(gè)級(jí)別，在正常的照片處理中，一般都沒(méi)有必要給用戶(hù)高質(zhì)量的圖片展示，所以，你需要一個(gè)自動(dòng)調(diào)整圖片大小的工具。

需要注意的是，圖片的尺寸是不能超過(guò)容量的大小的，這樣一來(lái)頁(yè)面加載了全圖，卻無(wú)法展示出來(lái)，現(xiàn)在照片的尺寸基本上都超過(guò)電腦顯示屏的尺寸了。

圖片的大小在網(wǎng)頁(yè)總大小中占很大的比重，圖片減小50%會(huì)導(dǎo)致整體頁(yè)面大小減少75%，所以你應(yīng)該認(rèn)真解決一下圖片的加載。

（3）、進(jìn)一步壓縮圖片

僅僅調(diào)優(yōu)圖片的大小是不夠的，你應(yīng)該通過(guò)第三方工具對(duì)圖片進(jìn)行分析，進(jìn)一步壓縮圖片。

比較好用的工具有OptiPNG，PNGOUT，jpegtran和jpegoptim，這些工具大都能安裝成獨(dú)立的工具或是整合到開(kāi)發(fā)過(guò)程中，另外像Smush這樣的工具，還可以直接在云端處理。

10、刪除不必要的字體和注釋

Web fonts已經(jīng)徹底改變了字體的設(shè)計(jì)，它減少了很多不必要的文本，然而，目前的字體仍然會(huì)給你的網(wǎng)頁(yè)帶來(lái)多余的字節(jié)。

如果你使用超過(guò)兩種字體，這就已經(jīng)開(kāi)始對(duì)性能造成影響了。

網(wǎng)頁(yè)代碼盡量少用注釋?zhuān)覀冎酪欢纬绦蚶锩婕由献⑨屇軌虮阌谖覀兛焖僬业胶屠斫饩唧w代碼對(duì)應(yīng)的功能，對(duì)于編程人員修改網(wǎng)頁(yè)是有幫助的，但是這樣的代碼對(duì)于搜索引擎來(lái)說(shuō)是沒(méi)有任何的意義的，只能說(shuō)是噪聲，因此我們要減少網(wǎng)頁(yè)代碼里面出現(xiàn)的注釋部分。

我相信大部分網(wǎng)站都可以通過(guò)以上的優(yōu)化減小大概30%-50%的重量，但是身為一個(gè)完美主義的開(kāi)發(fā)者這是遠(yuǎn)遠(yuǎn)不夠的，我們?cè)诮酉聛?lái)的系列文章中會(huì)繼續(xù)對(duì)網(wǎng)站瘦身進(jìn)行深入研究。