從前端角度來看高性能(néng)網站建設的幾個原則
我對(duì)于Web網站開(kāi)發(fā)開(kāi)有很多年的實踐經(jīng)驗，提供網站相應速度一直是網站開(kāi)發(fā)人員孜孜不倦的追求，無論後(hòu)端程序的優化，數據庫的優化，還(hái)是前端的優化，最終目的隻有一個，讓網站更快的打開(kāi)，給用戶提供更好(hǎo)的浏覽體驗，這(zhè)裡(lǐ)隻介紹從前端人員的角度來，在網站建設中要注意的一些原則。
1、減少網站的HTTP請求數
構造請求、等待響應需要時(shí)間，因此請求數量越少越好(hǎo)，減少請求的總體思路就(jiù)是合并資源，減少顯示一個頁面(miàn)需要的文件數，常規的方法有：
1.1 Image Map
通過(guò)設置<img>标簽的usemap屬性與使用<map>标簽可以在一幅圖片上切分出多個區域，指向(xiàng)不同的鏈接。比起(qǐ)使用多幅圖片分别構造鏈接減少了請求數。
1.2. CSS Sprite（CSS貼圖整合/貼圖拼合/貼圖定位）
通過(guò)設置元素的background-position樣(yàng)式做到。一般用于界面(miàn)圖标。典型的可以參考TinyMCE編輯器上方的那些小按鈕。多個小圖實質是從一個統一的大圖通過(guò)不同的偏移量裁剪而來，這(zhè)樣(yàng)加載界面(miàn)上的衆多按鈕實際上隻要請求一次（請求大圖一次），從而減少HTTP請求數。
2、 使用Gzip壓縮
使用Gzip壓縮HTTP報文，減小體積，減少傳輸時(shí)間。
3、 將(jiāng)css樣(yàng)式表文件置于頁面(miàn)前部
先加載樣(yàng)式表，這(zhè)樣(yàng)頁面(miàn)渲染得以較早開(kāi)始，給用戶頁面(miàn)加載較快的感覺，所以css最好(hǎo)放在<head></head>之間。
4、將(jiāng)Js腳本放在頁面(miàn)底部
原因同3，先處理頁面(miàn)顯示，頁面(miàn)渲染較早完成(chéng)，而腳本邏輯稍後(hòu)執行，這(zhè)樣(yàng)給用戶頁面(miàn)加載較快的感覺。
5、避免使用CSS表達式
過(guò)于複雜的JavaScript腳本邏輯、DOM查找、選擇操作將(jiāng)會(huì)降低頁面(miàn)處理效率。
6、將(jiāng)JavaScript與CSS作爲外聯資源
這(zhè)似乎與原則1中的合并思想相悖，但其實不然：考慮每個頁面(miàn)都(dōu)引入了一個公共的JavaScript資源（例如jQuery或是ExtJS這(zhè)樣(yàng)的JavaScript庫），單就(jiù)一個頁面(miàn)的表現來看，内聯（即將(jiāng)JavaScript嵌入HTML）頁面(miàn)將(jiāng)比外聯（使用<script>标簽引入）頁面(miàn)加載更快（因爲其較少的HTTP請求數）。但如果有很多頁面(miàn)都(dōu)引入了這(zhè)個公共JavaScript資源，那麼(me)内聯方案會(huì)造成(chéng)重複傳輸（因爲這(zhè)個資源内嵌在每個頁面(miàn)中了，所以每次打開(kāi)一個頁面(miàn)都(dōu)要將(jiāng)這(zhè)部分資源傳輸一遍，從而造成(chéng)網絡傳輸資源的浪費）。而將(jiāng)這(zhè)種(zhǒng)資源獨立出來外聯引用可以解決這(zhè)個問題。
6、減少域名
每次請求新域名都(dōu)需要進(jìn)行通過(guò)DNS查找不同的域名，且DNS緩存無法發(fā)揮作用。因此應該盡量將(jiāng)站點組織在一個統一域名下，避免使用過(guò)多子域名，網站保留一個主域名即可。
7、 壓縮你的JavaScript
使用JS壓縮工具壓縮你的JavaScript吧，很有效哦。看看jQuery的兩(liǎng)個不同的發(fā)行版本就(jiù)知道(dào)區别了：
jquery-1.6.2.js jQuery未壓縮代碼大小，230KB
jquery-1.6.2.min.js 壓縮版jQuery代碼大小：89.4KB
8、 盡量http避免重定向(xiàng)
一次重定向(xiàng)意味著(zhe)在你真正訪問到想要看到的頁面(miàn)前加入了一輪額外的HTTP請求（客戶端發(fā)起(qǐ)HTTP請求→HTTP服務器返回重定向(xiàng)響應→客戶端對(duì)新URL發(fā)起(qǐ)請求→HTTP服務器返回内容，下劃線部分爲額外的請求），因此消耗更多的時(shí)間（也就(jiù)給人反應更慢的感覺）。因此除非必要，不要随意使用重定向(xiàng)，如果有下面(miàn)的需求，可以采用重定向(xiàng)。
8.1. 避免URL失效
舊站點遷移後(hòu)，爲了避免舊的URL失效，通常將(jiāng)對(duì)舊URL的請求重定向(xiàng)至新系統的對(duì)應地址。
8.2. URL美化/僞靜态
在可讀性好(hǎo)的URL與實際資源URL之間轉換
9、移除重複的腳本
不要在一個頁面(miàn)中重複引入相同的腳本。例如腳本B和C都(dōu)依賴于A，那麼(me)在使用了B和C的頁面(miàn)中就(jiù)有可能(néng)存在對(duì)A的重複引用。解決方法，對(duì)于簡單的站點手動檢查依賴性，消去重複引入；對(duì)于複雜的站點則需要構建自己的依賴管理/版本控制機制。
總結：在網站制作時(shí)候把握上面(miàn)9個原則，可以讓我們前端頁面(miàn)速度和響應速度更快，網站建設中是一門比較精細的技術，希望從事(shì)前端開(kāi)發(fā)的網頁設計師可以知道(dào)更多的基礎知識。
