網(wǎng)站最基礎(chǔ)的東西是什么？
——內(nèi)容，SEO（搜索引擎優(yōu)化）還是UE（用戶體驗(yàn)）？都不對！是速度！
內(nèi)容再豐富的網(wǎng)站，假如慢到無法拜訪也是毫無意義的； SEO做的再好的網(wǎng)站，假如搜索蜘蛛抓不到也是白搭； UE設(shè)計(jì)的再人性化的網(wǎng)站，假如用戶連看都看不到也是空談。
所以網(wǎng)頁的效率盡對是最值得關(guān)注的方面。如何才干提高一個(gè)網(wǎng)頁的效率呢？
第一條：Make Fewer HTTP Requests 盡可能的減少HTTP的Request懇求數(shù)。
80%的用戶響應(yīng)時(shí)間都是浪費(fèi)在前端。而這些時(shí)間重要又是由于下載圖片、樣式表、JavaScript腳本、flash等文件造成的。減少這些資源文件的Request懇求數(shù)將是提高網(wǎng)頁顯示效率的重點(diǎn)。
這里似乎有個(gè)抵觸，就是假如聆科網(wǎng)絡(luò)減少了很多的圖片，樣式，腳本或者flash，那么網(wǎng)頁豈不是光禿禿的，那多丟臉呢？實(shí)在這是一個(gè)曲解。聆科網(wǎng)絡(luò)們只是說盡量的減少，并沒有說完整不能應(yīng)用。減少這些文件的Request懇求數(shù)，當(dāng)然也有一些技巧和建議的：
1、用一個(gè)大圖片代替多個(gè)小圖片。
這的確有點(diǎn)顛覆傳統(tǒng)的思維了。以前有些人一直認(rèn)為多個(gè)小圖片的下載速度之和會(huì)小于一個(gè)大圖片的下載速度。但是現(xiàn)在利用httpwatch工具的對多個(gè)頁面進(jìn)行分析后的成果表明事實(shí)并不是這樣。
一個(gè)100k的大圖片總耗費(fèi)時(shí)間盡對大于4個(gè)25k的小圖片的總耗費(fèi)時(shí)間。而且重要差別就是4個(gè)小圖片的Blocked時(shí)間盡對大于1個(gè)大圖片的Blocked時(shí)間。
所以假如可能還是應(yīng)用大圖片來調(diào)換過多的瑣碎的小圖片吧。這也是為什么翻轉(zhuǎn)門的效率要高于圖片調(diào)換實(shí)現(xiàn)的滑動(dòng)門的原因。
但是，請注意：也不能用太大的單張圖片，由于那樣會(huì)影響到用戶體驗(yàn)。例如個(gè)幾兆的背景圖片的應(yīng)用盡對不是一個(gè)好主意。
2：合并你的css文件。
根據(jù)“盡可能的減少HTTP的Request懇求數(shù)”準(zhǔn)則你會(huì)知道，為了方便組織和計(jì)劃樣式表，將用于不同用處的樣式表文件分別開來，形成不同的css文件，然后在頁面中根據(jù)需要引用多個(gè)css文件。這樣的確是不公平的，由于那樣會(huì)產(chǎn)生更多的HTTP的Request懇求數(shù)。從而下降網(wǎng)頁的效率。所以，從提高網(wǎng)頁效率的角度上而言，聆科網(wǎng)絡(luò)們還是應(yīng)當(dāng)將所有的css 寫在同一個(gè)css文件中。但是標(biāo)題又來了。那么怎么來很好的組織和計(jì)劃樣式表呢？這的確是個(gè)抵觸。聆科網(wǎng)絡(luò)現(xiàn)在的做法是采用兩套版本。編纂版和宣布版。編纂版仍 然應(yīng)用多個(gè)css文件以便于計(jì)劃和組織。而等到宣布的時(shí)候，再將多個(gè)css文件合并到一個(gè)文件中往，從而達(dá)到減少HTTPRequest懇求數(shù)的目標(biāo)。
3：合并你的javascript文件。
原因和處理方法同上，不再贅言。
第二條：Use a Content Delivery Network 應(yīng)用CDN
這個(gè)看上往似乎很深?yuàn)W的樣子，但是只要聯(lián)合中國的網(wǎng)絡(luò)特點(diǎn)，這個(gè)便不難懂得了?！氨狈椒?wù)器”、“南方服務(wù)器”、“電佩服務(wù)器”、“網(wǎng)通服務(wù)器”……這些 詞聽起來是那么熟悉和壓抑。假如，一個(gè)北京的電信用戶試圖從廣東的網(wǎng)通服務(wù)器上打開一個(gè)類似《壁紙合集》帖子的網(wǎng)頁時(shí)，你就能很深進(jìn)的懂得。
鑒于這個(gè)不是聆科網(wǎng)絡(luò)開發(fā)職員力所能及的準(zhǔn)則，所以這里也就未幾言了。
第三條：Add an Expires Header 添加周期頭
這個(gè)也并非開發(fā)職員來節(jié)制，而是網(wǎng)站服務(wù)器治理員的職責(zé)。所以，假如作為開發(fā)職員的你不懂得和明白也沒有關(guān)系。還是把這個(gè)準(zhǔn)則告訴公司的網(wǎng)站服務(wù)器治理員。
第四條：Gzip Components 啟用Gzip壓縮
這個(gè)大家應(yīng)當(dāng)比擬熟悉。Gzip的思想就是把文件先在服務(wù)器端進(jìn)行壓縮，然后再傳輸。這對于體積較大的純文字型的文件有殊效。鑒于這也并非開發(fā)職員，而是網(wǎng)站服務(wù)器治理員的工作范疇，這里就不具體講解了。假如你對此感愛好，可以資訊貴公司的網(wǎng)站服務(wù)器治理職員。
第五條：Put CSS at the Top 把CSS樣式放在頁面的上方。
無論是HTML還是XHTML還是CSS都是說明型的語言，而非編譯型的。所以CSS到上方的話，那么瀏覽器解析結(jié)構(gòu)的時(shí)候，就已經(jīng)可以對頁面進(jìn)行渲染。 這樣就不會(huì)呈現(xiàn)，頁面結(jié)構(gòu)光禿禿的先出來，然后CSS渲染，頁面又忽然華麗起來，這樣太具有“戲劇性”的頁面瀏覽體驗(yàn)了。
第六條：Move Scripts to the Bottom 將腳本放在底部
原因同第五條一樣。只是腳本一般是用來于用戶交互的。所以假如頁面還沒有出來，用戶連頁面都不知道什么樣子，那談交互簡直就是扯談。所以，腳本和CSS正好相反，腳本應(yīng)當(dāng)放在頁面的底部。
第七條：Avoid CSS Expressions 避免應(yīng)用CSS中的Expressions
CSS中的Expressions實(shí)在也是一種if判定首先有必要先闡明一下CSS Expressions是什么一個(gè)東西。實(shí)在它就像其它語言中的if……else……語句。這樣在CSS中就可以進(jìn)行簡略的邏輯判定了，css就可以根結(jié)一些情況分辨應(yīng)用不同的樣式了。但是CSS中Expressions 的代價(jià)卻是極高的。當(dāng)你的頁面需要根據(jù)判定來渲染后果的元素很多的時(shí)候，那么你的瀏覽器將長期處于假逝世狀態(tài)，從而給用戶帶來極差的用戶體驗(yàn)。
第八條：Make JavaScript and CSS External 將javascript和css獨(dú)立成外部文件
這一條似乎和第一條有點(diǎn)抵觸。的確，假如從HTTP的request懇求數(shù)來講的話，這樣做的確是下降了效率。但是之所以這么做，是由于另外一個(gè)重要的考 慮因素——緩存。由于外部的引用文件會(huì)被瀏覽器緩存，所以假如javascript和css體積較大的時(shí)候，聆科網(wǎng)絡(luò)們將它們獨(dú)立成外部文件。這樣當(dāng)用戶只要瀏 覽一次以后，這些體積較大的js和css文件就能被緩存起來，從而極高地提高用戶再次拜訪時(shí)的效率。
第九條：Reduce DNS Lookups 減少DNS查詢
DNS域名解析系統(tǒng)。大家都知道，我們之所以能記住那么多的網(wǎng)址，是由于我們記住的都是單詞，而非那串具體的數(shù)學(xué)IP地址，而幫我們把那些單詞和那樣的ip地址接洽起來的就是DNS。那這一條對聆科網(wǎng)絡(luò)們到底有什么真正意義上的領(lǐng)導(dǎo)意義呢？實(shí)在有兩條：
1：假如不是必需，請不要把網(wǎng)站放到兩臺(tái)服務(wù)器上。
2：網(wǎng)頁中的圖片、css文件、js文件、flash文件等等，不要太多的疏散在不同的網(wǎng)絡(luò)空間中。這就是為什么那種只發(fā)一個(gè)網(wǎng)站中的壁紙圖片的帖子，要比壁紙圖片起源于不同網(wǎng)站的帖子顯示要快得多的原因。
第十條：Minify JavaScript and CSS 減少JavaScript和CSS文件的體積
這點(diǎn)很好懂得。在你的終極宣布版本中把沒有必要的空行、空格和注釋全部往掉。顯然手工往處理效率太低，好在網(wǎng)上到處都是用于壓縮這些東西的工具。壓縮JavaScript代碼體積的工具隨處可見，聆科網(wǎng)絡(luò)便不再列舉了。
第十一條：Avoid Redirects 避免跳轉(zhuǎn)
只從網(wǎng)頁開發(fā)職員的角度來解讀此條。那么聆科網(wǎng)絡(luò)們可以解讀到什么東西呢？2點(diǎn)——
1：“此域名已過期，5秒鐘以后，頁面將跳轉(zhuǎn)到http://www.某某.com/index.html頁面”，這句話看起來的確很熟悉。但是，這就希奇了，為什么不直接鏈接到那個(gè)頁面呢？
2：一些鏈接地址請更明白的寫出來。例如:將http://hi.tloo.cn/寫成http://hi.tloo.cn （注意最后面一個(gè)“/”符號(hào)）。的確，這兩個(gè)網(wǎng)址都能拜訪到聆科網(wǎng)絡(luò)的博客，但是，事實(shí)上，它們是有差別的。http://hi.tloo.cn的成果是個(gè)301響應(yīng)，它會(huì)被重新指向http://hi.tloo.cn/ 。但是顯然，中間多浪費(fèi)了一些時(shí)間。
第十二條 Remove Duplicate Scripts 移除重復(fù)的腳本
對重復(fù)說“不！”
這個(gè)準(zhǔn)則的道理很淺易，但是真正在工作中，很多人卻由于“項(xiàng)目時(shí)間緊”、“太累了”、“初期沒有計(jì)劃好”……這樣的理由敷衍過往了。你，的確可以找很多的理由不往處理這些過剩重復(fù)的腳本代碼，假如你的網(wǎng)站不需要更高的效率和后期保護(hù)的話。
也正是這點(diǎn)，聆科網(wǎng)絡(luò)提示大家一些，一些javascript框架、javascript包必定要慎用。至少要問一下：用了這個(gè)js kit 到底給聆科網(wǎng)絡(luò)們多少方便，提高了多少工作效率。然后，再與它由于過剩的、重復(fù)的代碼帶來的負(fù)面后果比擬一下。
第十三條：Configure ETags 配置你的實(shí)體標(biāo)簽
首先來講講什么是Etag吧。Etag（Entity tags ）實(shí)體標(biāo)簽。這個(gè)tag和你在網(wǎng)上經(jīng)?？吹降臉?biāo)簽云那種tag有點(diǎn)差別。這個(gè)Etag不是給用戶用的，而是給瀏覽器緩存用的。Etag是服務(wù)器告訴瀏覽器 緩存，緩存中的內(nèi)容是否已經(jīng)產(chǎn)生變更的一種機(jī)制。通過Etag，瀏覽器就可以知道現(xiàn)在的緩存中的內(nèi)容是不是最新的，需不需要重新從服務(wù)器上重新下載。這和 “Last-Modified”的概念有點(diǎn)類似。很遺憾作為網(wǎng)頁開發(fā)職員對此無能為力。他依然是網(wǎng)站服務(wù)器職員的工作范疇。假如，你對此有愛好，可以咨詢 貴公司的網(wǎng)站服務(wù)器治理員。
第十四條：Make Ajax Cacheable 上面的準(zhǔn)則也實(shí)用Ajax
Ajax的應(yīng)用要適當(dāng)現(xiàn)在的Ajax似乎有點(diǎn)被神話了，似乎網(wǎng)頁只要Ajax了，那么就不存在效率標(biāo)題了。實(shí)在這是一種曲解。拙劣的應(yīng)用Ajax不會(huì)讓你的網(wǎng)頁效率更高，反而會(huì)下降你的網(wǎng)頁效率。Ajax的確是個(gè)好東西，但是請不要過火的神話它。應(yīng)用Ajax的時(shí)候也要考慮上面的那些準(zhǔn)則。
