提高網(wǎng)頁效率的14條注意事項圖文第3/3頁
第三條:Add an Expires Header 添加周期頭
這個也并非開發(fā)人員來控制,而是網(wǎng)站服務(wù)器管理員的職責。所以,如果作為開發(fā)人員的你不了解和明白也沒有關(guān)系。還是把這個準則告訴公司的網(wǎng)站服務(wù)器管理員。
第四條:Gzip Components 啟用Gzip壓縮
這個大家應(yīng)該比較熟悉。Gzip的思想就是把文件先在服務(wù)器端進行壓縮,然后再傳輸。這對于體積較大的純文字型的文件有特效。鑒于這也并非開發(fā)人員,而是網(wǎng)站服務(wù)器管理員的工作范疇,這里就不詳細講解了。如果你對此感興趣,可以資訊貴公司的網(wǎng)站服務(wù)器管理人員。
第五條:Put CSS at the Top 把CSS樣式放在頁面的上方。
無論是HTML還是XHTML還是CSS都是解釋型的語言,而非編譯型的。所以CSS到上方的話,那么瀏覽器解析結(jié)構(gòu)的時候,就已經(jīng)可以對頁面進行渲染。這樣就不會出現(xiàn),頁面結(jié)構(gòu)光禿禿的先出來,然后CSS渲染,頁面又突然華麗起來,這樣太具有“戲劇性”的頁面瀏覽體驗了。
第六條:Move Scripts to the Bottom 將腳本放在底部
原因同第五條一樣。只是腳本一般是用來于用戶交互的。所以如果頁面還沒有出來,用戶連頁面都不知道什么樣子,那談交互簡直就是扯談。所以,腳本和CSS正好相反,腳本應(yīng)該放在頁面的底部。
第七條:Avoid CSS Expressions 避免使用CSS中的Expressions
首先有必要先說明一下CSS Expressions是什么一個東西。其實它就像其它語言中的if……else……語句。這樣在CSS中就可以進行簡單的邏輯判斷了。舉個簡單的例子——input{background-color:expression((this.readOnly && this.readOnly==true)?"#0000ff":"#ff0000")}
</style>
<INPUT TYPE="text" NAME="">
<INPUT TYPE="text" NAME="" readonly="true">
第八條:Make JavaScript and CSS External 將javascript和css獨立成外部文件
這一條好像和第一條有點矛盾。的確,如果從HTTP的request請求數(shù)來講的話,這樣做的確是降低了效率。但是之所以這么做,是因為另外一個重要的考慮因素——緩存。因為外部的引用文件會被瀏覽器緩存,所以如果javascript和css體積較大的時候,我們將它們獨立成外部文件。這樣當用戶只要瀏覽一次以后,這些體積較大的js和css文件就能被緩存起來,從而極高地提高用戶再次訪問時的效率。
第九條:Reduce DNS Lookups 減少DNS查詢
DNS域名解析系統(tǒng)。大家都知道我們之所以能記住那么多的網(wǎng)址,是因為我們記住的都是單詞,而非http://202.153.125.45這樣的東西,而幫我們把那些單詞和202.153.125.45這樣的ip地址聯(lián)系起來的就是DNS。那這一條對我們到底有什么真正意義上的指導意義呢?其實有兩條:
1:如果不是必須,請不要把網(wǎng)站放到兩臺服務(wù)器上。
2:網(wǎng)頁中的圖片、css文件、js文件、flash文件等等,不要太多的分散在不同的網(wǎng)絡(luò)空間中。這就是為什么那種只發(fā)一個網(wǎng)站中的壁紙圖片的帖子,要比壁紙圖片來源于不同網(wǎng)站的帖子顯示要快得多的原因。
第十條:Minify JavaScript and CSS 減少JavaScript和CSS文件的體積
這點很好理解。在你的最終發(fā)布版本中把沒有必要的空行、空格和注釋全部去掉。顯然手工去處理效率太低,好在網(wǎng)上到處都是用于壓縮這些東西的工具。壓縮JavaScript代碼體積的工具隨處可見,我便不再列舉了,這里我只提供一個用于壓縮css代碼體積的在線工具網(wǎng)站——http://www.cssdrive.com/index.php/main/csscompressor
它提供了多種壓縮方式,可以適應(yīng)多種要求。
第十一條:Avoid Redirects 避免跳轉(zhuǎn)
我只從網(wǎng)頁開發(fā)人員的角度來解讀此條。那么我們可以解讀到什么東西呢?2點——
1:“此域名已過期,5秒鐘以后,頁面將跳轉(zhuǎn)到http://www.xxxxxx.com/index.html頁面”,這句話看起來的確很熟悉。但是,我就奇怪了,為什么不直接鏈接到那個頁面呢?
2:一些鏈接地址請更明確的寫出來。例如:將http://www.dhdzp.com/ 寫成http://www.dhdzp.com (注意最后面一個“/”符號)。的確,這兩個網(wǎng)址都能訪問到我的博客,但是,事實上,它們是有區(qū)別的。http://www.dhdzp.com 的結(jié)果是個301響應(yīng),它會被重新指向http://www.dhdzp.com/ 。但是顯然,中間多浪費了一些時間。
第十二條 Remove Duplicate Scripts 移除重復(fù)的腳本
這個準則的道理很淺顯,但是真正在工作中,很多人卻因為“項目時間緊”、“太累了”、“初期沒有規(guī)劃好”……這樣的理由搪塞過去了。你,的確可以找很多的理由不去處理這些多余重復(fù)的腳本代碼,如果你的網(wǎng)站不需要更高的效率和后期維護的話。
也正是這點,我提醒大家一些,一些javascript框架、javascript包一定要慎用。至少要問一下:用了這個js kit 到底給我們多少方便,提高了多少工作效率。然后,再與它因為多余的、重復(fù)的代碼帶來的負面效果比較一下。
第十三條:Configure ETags 配置你的實體標簽
首先來講講什么是Etag吧。Etag(Entity tags )實體標簽。這個tag和你在網(wǎng)上經(jīng)??吹降臉撕炘颇欠Ntag有點區(qū)別。這個Etag不是給用戶用的,而是給瀏覽器緩存用的。Etag是服務(wù)器告訴瀏覽器緩存,緩存中的內(nèi)容是否已經(jīng)發(fā)生變化的一種機制。通過Etag,瀏覽器就可以知道現(xiàn)在的緩存中的內(nèi)容是不是最新的,需不需要重新從服務(wù)器上重新下載。這和“Last-Modified”的概念有點類似。很遺憾作為網(wǎng)頁開發(fā)人員對此無能為力。他依然是網(wǎng)站服務(wù)器人員的工作范疇。如果,你對此有興趣,可以咨詢貴公司的網(wǎng)站服務(wù)器管理員。
第十四條:Make Ajax Cacheable 上面的準則也適用Ajax
現(xiàn)在的Ajax好像有點被神話了,好像網(wǎng)頁只要Ajax了,那么就不存在效率問題了。其實這是一種誤解。拙劣的使用Ajax不會讓你的網(wǎng)頁效率更高,反而會降低你的網(wǎng)頁效率。Ajax的確是個好東西,但是請不要過分的神話它。使用Ajax的時候也要考慮上面的那些準則。
后記:
當然,上面的這些也只是供你參考的理論上的準則。具體的情況還是要具體的去對待。理論和準則只是用來指導現(xiàn)實工作的,卻是萬萬不可死記硬套。
相關(guān)文章
前端html+css實現(xiàn)動態(tài)生日快樂代碼
?生日送什么禮物總是要花一番心思,別出心裁不落俗套,什么禮物才能讓那一個她開心呢?來看看前端大大用html+css實現(xiàn)動態(tài)生日快樂代碼吧,親測可用。2023-01-01
CSS設(shè)置網(wǎng)頁的字體 防瀏覽器瀏覽頁面字體變形
CSS設(shè)置網(wǎng)頁的字體 防瀏覽器瀏覽頁面字體變形...2007-03-03




