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