網站加速 美工和前端開發人員也很關鍵

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

一般而言，關於網站的加速，大部分人認為是後端開發者和系統管理的職責。 這種觀點不完全正確，因為一個高性能的網站，不僅取決於網站的後端，還依賴網站的前端，也就是說還依賴于美工和前端開發人員。

事實上，就目前的網路環境來看，我們在流覽正常的網站時，通常總耗費時間的10-20%用在了後端，剩下80-90%的時間被前端所消耗。 所以，如果 你計畫提升網站的速度，不妨在優化後端的同時，讓美工和前端開發人員考慮以下幾個方面。 相信你可能會感歎，不大動刀戈也可以有效地提升網站的性能。

1. 盡可能減少 HTTP 要求的次數。 例如：用一張圖片代替多張圖片，再用CSS顯示。

2. 採用CDN對網站加速。 CDN可以在不改動原有網站架構的前提下，很大幅度地提升網站的存取速度。 特別是對於那些擁有全國(或世界各地)使用者的網站，效果會更加明顯。

3. CSS檔放在頁面頭部。 瀏覽器在顯示頁面之前，必須要得到CSS。 否則無法顯示網頁。 所以，將CSS檔 放在頁面頭部是明智之舉。 伯樂線上的開發團隊曾經做過測試，如果一張網頁包括多個JS檔，同時CSS檔放在網頁最後。 使用者流覽網頁時，非常明顯地感覺 到網頁先是空白(下載JS和其他檔)，然後再顯示出來。 顯然，這種情況下，使用者體驗是非常差的。 與此相反，如果將CSS檔放在頁面頭部，使用者流覽網頁 時，可以先看到網頁 (網頁無明顯空白)。

4. JS檔放在頁面尾部。 道理和CSS檔放在頁面頭部一樣。

5. 將CSS和JS代碼單獨存放在獨立于網頁的檔中。 現在很多的瀏覽器，如Firefox， IE 7，8 等等都會將圖片，CSS，JS等外部的檔案快取在使用者本地，所以，使用者通過這些瀏覽器流覽網頁時只傳輸網頁的文本內容，不再次下載圖片，CSS，JS等外 部的檔。 這樣一來，訪問的速度自然可以提升不少。 另外，將CSS和JS代碼單獨存放在獨立于網頁的檔，也便於管理。

6. 對JS「瘦身」。 用協力廠商的工具(不需要手工)對JS進行壓縮，包括刪除注釋，空格等等，通常情況下可以減小20%左右。 例如，未「瘦身」前JS為100KB， 「瘦身」後80KB.

除第2項外，其他5個方面都是和美工和前端開發人員相關。 更多未提到的技巧，歡迎補充。

原文位址：HTTP://forum.jobbole.com/showthread.php/1417