精簡代碼，為網(wǎng)站減負(fù)的十大建議

網(wǎng)站快速加載，是提供良好用戶體驗(yàn)的前提。然而，網(wǎng)站功能的不斷增多，程序包的不斷臃腫，導(dǎo)致網(wǎng)站訪問時(shí)較大的下載量，最終影響了響應(yīng)速度。沒有一個(gè)用戶喜歡等待，如何減少代碼量，為網(wǎng)站減去過多負(fù)擔(dān)，Craig Buckler在sitepoint網(wǎng)站發(fā)表了一篇文章《 10 Quick and Easy Fixes to Reduce Page Weight》，分享為網(wǎng)站減負(fù)的十個(gè)建議。下面為該文的編譯內(nèi)容。

2013年，網(wǎng)頁文件大小增加了32%，竟然達(dá)到了1.7Mb，包含96個(gè)獨(dú)立HTTP請求。這只是一個(gè)平均數(shù)值，其中近一半的網(wǎng)站已經(jīng)超過了這個(gè)數(shù)值。網(wǎng)站的過度臃腫正趨于流行，其中很大的責(zé)任在于Web開發(fā)者。

過于笨重的網(wǎng)站將嚴(yán)重影響網(wǎng)站的最終體驗(yàn)，主要表現(xiàn)在以下四個(gè)方面：

• 更大的下載量，導(dǎo)致更慢的用戶體驗(yàn)。并不是每個(gè)人都擁有20M的網(wǎng)絡(luò)連接，尤其是對于那些不發(fā)達(dá)地區(qū)。不管你的網(wǎng)站多么優(yōu)秀，用戶永遠(yuǎn)不希望等待。
• 移動Web訪問正迅速發(fā)展，移動網(wǎng)民幾乎占到所有網(wǎng)民的1/4。在典型的3G網(wǎng)絡(luò)連接下，一個(gè)1.7Mb的網(wǎng)站加載需要近一分鐘。如果你的網(wǎng)站無法高效工作于這些移動設(shè)備，那采用響應(yīng)式Web設(shè)計(jì)技術(shù)又有什么用呢？
• 網(wǎng)站加載速度已被谷歌加入排名算法中。加載緩慢會降低網(wǎng)站排名，同時(shí)也會影響搜索引擎優(yōu)化。
• 網(wǎng)站包含的代碼越多，更新和維護(hù)它所花費(fèi)的時(shí)間就會越長。

Craig Buckler預(yù)言，2014年網(wǎng)頁文件大小將會下降。那如何精簡代碼，為網(wǎng)站減負(fù)呢？Craig Buckler給出了十條建議。這些建議中涉及到的技術(shù)均是大家熟知的。

1.啟用GZIP壓縮

根據(jù) W3Techs.com上的數(shù)據(jù)顯示，近一半的網(wǎng)站都未進(jìn)行過壓縮。在Web主機(jī)上，通過簡單的服務(wù)器設(shè)置即可開啟GZIP壓縮。

2.支持瀏覽器緩存

如果瀏覽器能容易地緩存一個(gè)文件，那它就無需反復(fù)下載該文件了。實(shí)現(xiàn)該功能的一個(gè)解決方案，就是在HTTP頭中設(shè)置合適的 Expires Header、上一次修改時(shí)間或采用的 ETags。

你可通過配置服務(wù)器來自動完成以上工作。下面是Apache中的.htaccess文件，其中的代碼實(shí)現(xiàn)了“將所有圖片緩存一個(gè)月”的功能。

3.使用CDN

瀏覽器限制了每個(gè)域中可同時(shí)處理的并發(fā)HTTP請求數(shù)量：4至8個(gè)。如果你的網(wǎng)頁需要從域中加載96個(gè)資源，那在最好的情況下，瀏覽器也需發(fā)生12組并發(fā)請求才能加載完所有數(shù)據(jù)。（因?yàn)槲募笮〔⒉煌@種情況實(shí)際上并不會發(fā)生，但該限制仍然適用。）

如若從另一個(gè)域中請求靜態(tài)文件，則可使瀏覽器處理的HTTP請求數(shù)量加倍。此外，一個(gè)文件被調(diào)用后就會產(chǎn)生一個(gè)緩存文件，以供下一個(gè)調(diào)用它的網(wǎng)站使用。我們可選用JavaScript庫（如jQuery）和字體庫，同時(shí)你也可以考慮專用的圖片托管。

前面提到的三條建議可以加快網(wǎng)站的加載速度，下面的建議將幫助我們高效地減少網(wǎng)站的冗余代碼。

4.刪掉沒用的資源

網(wǎng)站一直在變革之中。如果你不再使用某組件，那就刪掉與之關(guān)聯(lián)的CSS和JavaScript。如果它們包含在一個(gè)單獨(dú)文件中，處理起來就會很簡單。否則，你需要借助一些工具，如Chrome的Audit開發(fā)工具、 JSLint、 Dust-Me Selectors、 CSS Usage、 unused-css.com，也可構(gòu)建 grunt-uncss此類的工具。

5.合并和壓縮CSS

理想的情況是只擁有一個(gè)CSS文件（如果你使用RWD以支持IE的老版本，那就需要兩個(gè)CSS文件。）構(gòu)建并維護(hù)幾個(gè)單獨(dú)的CSS文件也算合理，但在部署到產(chǎn)品服務(wù)器之前，你應(yīng)該將它們集合在一起，并刪掉那些不必要的空白區(qū)域。

Saas、LESS和Stylus等預(yù)處理器可幫你完成這些痛苦的工作。 Grunt.js、 Gulp等工具可自動化你的工作流。如果你更喜歡GUI，可借助Koala提供的免費(fèi)跨平臺應(yīng)用。

如果你覺得這些比較麻煩，也可手動通過命令行工具將CSS文件集中在一起，如在Windows中，可使用如下代碼：

在Mac/Linux中，可使用如下代碼：

最終文件經(jīng)過在線CSS壓縮工具（如 cssminifier.com、 CSS Compressor & Minifieror等）壓縮后即可運(yùn)行。

最后，請記住在頭部（Head）加載所有CSS，以便瀏覽器展示接下來的HTML元素，同時(shí)也可避免瀏覽器下次再重繪頁面元素。

6.壓縮并合并JavaScript

平均每個(gè)頁面需加載18個(gè)JavaScript文件，所以我們要將自己編寫的JavaScript代碼進(jìn)行合并和壓縮。我們可以自己構(gòu)建壓縮工具，也可以使用在線工具，如 YUI Compressor、 Closure Compiler及 CompressorRater。

使用JavaScript壓縮工具進(jìn)行壓縮，必須十分謹(jǐn)慎。你的代碼有一點(diǎn)小問題，即便丟失了一個(gè)分號，壓縮過程也可能會失敗。無論如何，對JavaScript文件進(jìn)行壓縮，可減少HTTP請求數(shù)量，從而提高網(wǎng)站性能。

最好在</body>之前加載JavaScript（緊挨</body>），這樣可確保該腳本不會阻礙其它內(nèi)容的加載，同時(shí)在該腳本被下載和執(zhí)行之前，頁面的內(nèi)容已加載完畢，并可閱讀了。

7.使用正確的圖片格式

錯(cuò)誤地使用圖片格式會增加網(wǎng)頁的負(fù)載。圖片格式通常有以下使用原則：

• 照片使用JPG格式；
• 其他的使用PNG格式。

當(dāng)你有一些小圖像，它們僅包含有限的幾種色彩集，采用GIF格式，其壓縮效果可能更好。本文暫不討論向量圖。

現(xiàn)在有大量免費(fèi)的圖形軟件包，可用來轉(zhuǎn)換圖片的格式。其中像XnView允許你批處理這些文件。請記住下面兩條原則：

• JPG為一種有損壓縮格式，其質(zhì)量介于0（質(zhì)量很差、更小的文件）至100（質(zhì)量最好，更大的文件）之間。介于30至70之間的大部分圖片顯示效果比較好。
• PNG支持256顏色表和24位的真彩色。如果你不需要透明，并能控制調(diào)色板，那256的PNG圖像顏色模式可能壓縮得更好。

8.重整大圖片的尺寸

即便是最入門級的智能手機(jī)上的照片機(jī)（三百萬像素），其拍出來的照片往往太大而不適合在網(wǎng)站上顯示。但大部分內(nèi)容編輯者往往將圖片直接從相機(jī)中直接上傳到網(wǎng)站上。因此，我們需要一個(gè)可以自動調(diào)整圖片尺寸的系統(tǒng)。

圖片的尺寸永遠(yuǎn)不能超過它所在容器的最大值。如果網(wǎng)站模板的寬度最大為800px，那圖片的寬度就不能超過該值。一些高分辨率、Retina顯示屏，可顯示寬度為1600px的圖片，但這仍比從相機(jī)中直接輸出的圖片要小。

在降低網(wǎng)頁文件大小方面，圖片尺寸的調(diào)整起著重要的作用。將圖片尺寸縮小50%，可節(jié)省75%的總空間，相當(dāng)于減少了文件大小。

9.進(jìn)一步壓縮圖片

即便已將圖片調(diào)整為正確的格式和尺寸，你仍可使用一些分析和優(yōu)化圖像的工具進(jìn)一步壓縮圖片。這些工具包括 OptiPNG、 PNGOUT、 jpegtran和 jpegoptim。大部分工具可獨(dú)立安裝，也可整合入你構(gòu)建的過程中。另外，還有一些在線工具，如Smush，它可以工作于云上。

10.去掉不必要的字體

Web字體對設(shè)計(jì)進(jìn)行了重大改革，減少了基于圖像的字體的使用。但是，使用傳統(tǒng)字體后，網(wǎng)頁的代碼量往往會增加數(shù)百KB。所以網(wǎng)站中這種字體的使用盡量控制在兩、三種以內(nèi)。

利用以上提到的方法，大部分網(wǎng)頁文件可以減去總大小的30~50%。對于一般的網(wǎng)站，可以減掉800KB的代碼量，訪問速度可獲明顯提升。（編譯：陳秋歌 審校：張紅月）

內(nèi)容來自：10 Quick and Easy Fixes to Reduce Page Weight

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈