隨著互聯(lián)網(wǎng)的發(fā)展，前端優(yōu)化越來越被人們重視，在一個大型的大型電子商務(wù)網(wǎng)站技術(shù)架構(gòu)中，前端架構(gòu)一定是一項必不可少的工作，國內(nèi)幾個大型的互聯(lián)網(wǎng)公司也有非常強大的前端技術(shù)人員。在業(yè)界享有名氣淘寶UED團隊就有好幾十人。在瀏覽器訪問一個網(wǎng)站時，有10%-20%的時間是花在下載HTML上面，有80%-90%時間是花在下載頁面中所有組件上面。如果我們可以把后端時間縮短一半，整體響應(yīng)時間只能減少5%-10%。然而我們關(guān)注前端，同樣是其響應(yīng)時間縮短一半，那整體性能能減少40%-45%。
看些研究數(shù)據(jù)：
l Amazon 慢 0.1 s -> 1% 用戶放棄交易
l Google 慢 0.4s -> 0.6% 放棄搜索
l Yahoo! 慢 0.4s -> 減少 5%-9% 的流量
l Bing 慢 2s -> 收入下降 4.3 %
在前端發(fā)展了那么長時間，其優(yōu)化經(jīng)驗也有很多值得借鑒，下面作簡單介紹。
1. 盡可能的減少HTTP請求數(shù)
2. 使用CDN
3. 添加Expires頭(或者 Cache-control)
4. Gzip 組件
5. 把CSS樣式放在頁面的上方。
6. 將腳本放在底部(包括內(nèi)聯(lián)的)
7. 避免在CSS中使用Expressions
8. 將javascript和css獨立成外部文件
9. 減少DNS查詢
10. 壓縮JavaScript和CSS文件 (包括內(nèi)聯(lián)的)
11. 避免跳轉(zhuǎn)
12. 移除重復(fù)的腳本
13. 配置 ETags
14. 緩存Ajax請求
以上內(nèi)容在網(wǎng)上都有介紹，在此不作多說，有興趣的同學(xué)可以google一把。
Ajax和動態(tài)HTML的日益普及網(wǎng)頁上面的js和css也變得非常龐大，web程序也變得像桌面程序一樣，很大一部分代碼不會在啟動時候使用，而是采取插件式架構(gòu)，允許動態(tài)加載模塊。
在一個大型結(jié)構(gòu)復(fù)雜的網(wǎng)頁上面，為了不影響用戶體驗，可以把js分為兩部分，一部分是渲染頁面必須的，剩下是一部分。這樣也在一定程度上面提高用戶體驗，給用戶第一時間看到完整的頁面。再尋找哪些js可以被拆分，可以通過一些輔助工具來判斷，firebug就是一個非常好的工具，可以通過查看哪些函數(shù)onload之前未被使用。通過判斷可以把其中一部分拆分出來，但是有些不開始拆分，例如頁面的錯誤處理和業(yè)務(wù)判斷等js是不能拆分的，如果要拆分合理必將是一項嚴謹?shù)墓ぷ鳌?/p>
Js有兩種方式被包含在頁面中，一種是行內(nèi)腳本，一種是外部腳本。對外面腳本瀏覽器在下載js或者執(zhí)行腳本的同時不會下載其他內(nèi)容，有時候這種情況是必要，但是卻會影響頁面其他展示，理想情況是不堵塞其他內(nèi)容下載的方式來加載js。目前也有對應(yīng)的技術(shù)，用得比較多的是XHR Eval，xhr注入，script ifram，script dom element，script defer document.write script Tag。具體使用情況要根據(jù)環(huán)境來定。
由于使用外部腳本，有人可能會想到把全部使用內(nèi)部腳本，這種做法不可取，這樣會增加頁面大小，而且瀏覽器不會緩存js，少數(shù)內(nèi)部腳本是可取的。但是大多情況下使用外部腳本，這樣無論在團隊開發(fā)，還是版本控制還會帶來很大好處。
現(xiàn)成開源的js組件很多，可以根據(jù)熟悉程度和業(yè)務(wù)應(yīng)用性使用，jquery，yui，ext，dojo。如果自行開發(fā)，除非有強大團隊，要不維護成本太高，而且功能不完善。
Prototype
驚艷，野性， 代碼風(fēng)格類Ruby，新手不易上手，文檔缺乏
Jquery
乖巧 靈活 易用
Dojo
強大，復(fù)雜，笨重
它的設(shè)計初衷就是：不光只運行在瀏覽器的腳本環(huán)境中，甚至像pdf/rhino這些也擁有
腳本環(huán)境的地方也能使用
Yui
溫順，矯健，文檔齊全，編碼語法相對傳統(tǒng)，封裝的形式比較接近于Java
Ext
Ext: 野生，炫，侵入太強，適用于精英團隊
1. 組件延遲加載
不可見的組件: 非當前的Tab，隱藏的圖片
附加組件：動畫,拖動
2. 預(yù)加載組件
無條件的預(yù)加載(Google 首頁的例子）
有條件的預(yù)加載（淘寶首頁搜索提示功能的例子）
3. 減少DOM元素個數(shù)
元素越多，下載的數(shù)據(jù)越多，JS操作DOM速度越慢
4. 盡量少使用 iframe
l 公共文件的重復(fù)加載
l 瀏覽器的消耗
l 優(yōu)化圖片
嘗試使用PNG，png擁有g(shù)if所有功能，還支持alpha透明，文件比較小，所以盡可能使用png格式圖片。
刪除圖片的元數(shù)據(jù)，例如photoshop的元數(shù)據(jù)，這樣在一定程度上能減少圖片大小而不影響圖片質(zhì)量。
l CSS sprites
可以把網(wǎng)站常用的小圖片集合在一張圖片中，通過Css定位到小圖上面，從而減少http請求。
l 不要在HTML中縮放圖片
<imgwidth="100" height="100" src=“cat.jpg" />
l 0.1秒
用戶直接操作ui中對象的感覺極限。例如，用戶直接選擇表格的一列到該列高亮顯示，或者反饋被選擇的時間間隔。
l 1秒
用戶隨意在計算機指令空間操作而無需過度等等時間的感覺極限。0.2-1.0的時間延遲會被用戶注意到，會讓用感覺到計算機正在對指令進行處理中。等待的時間過長，會讓用戶失去流暢的體驗。
l 10秒
用戶專注于任務(wù)的極限，超過10秒的任何操作都要有一個進度指示器，以及有一個讓用戶中斷操作，而且有清晰的標示方法。假設(shè)用戶超過10秒后返回界面，他們將要重新適應(yīng)。在實際工作中有些操作超過10秒是可以接受的，比如撤換操作任務(wù)。
換句話說js在執(zhí)行如果超過0.1秒，會讓人感覺到不平滑。如果超過1秒會讓人感覺應(yīng)用程序緩慢；超過10秒那么用戶會非常沮喪。這些就是用于足夠快的標準。
