一.我們需要解決的麻煩
A.減少HTTP請求數(shù).
減少HTTP請求數(shù)有什么好處:
降低服務(wù)器跟客戶端的建立和消除HTTP請求和響應(yīng)Header的開銷
減少服務(wù)器為HTTP連接的進(jìn)程和線程的開銷,如果可能,還會(huì)包括GZIP壓縮的CPU開銷.
B.減小被請求文件大小, 減少請求數(shù)據(jù)占用的網(wǎng)絡(luò)帶寬.
C.讓用戶更快的看到想要的結(jié)果.
D.提高客戶端渲染速度.
E讓瀏覽器同時(shí)能請求更多的數(shù)據(jù).
F.提高服務(wù)器相應(yīng)速度.
G.通過版本化控制客戶端Cache.
引用
二.如何解決我們的麻煩
A.如何減少HTTP請求數(shù)
1.合并JS文件跟 CSS文件.
2.合并框架圖片以及相對變動(dòng)較少的圖片成一張,通過CSS背景切割來完成渲染.
3.合理使用本地Cache來緩存JS/CSS/IMAGE.
4.合理使用UserData緩存JS文件,對于FF用戶可以單獨(dú)請求服務(wù)器,這樣能解決80%用戶的問題.
5.把JS跟CSS合并成一個(gè)文件
寫法如下:
window.onload=function(){
document.getElementById("test2").innerHTML="傳說中滴JS測試者。如果你看到我，那JS也生效了";
}
引用
以上內(nèi)容的文件同時(shí)被JS跟Style引用,都是有效的
B.減小被請求文件大小,減少請求數(shù)據(jù)占用的網(wǎng)絡(luò)帶寬
1.壓縮JS體積
刪除JS中空白換行,注釋,混淆把長變量換成短變量
2.壓縮CSS體積
刪除CSS注釋
CSS中的寫法盡量用簡寫,比如:
.bak{background:url(sina.gif) no-repeat left};
3.使用DIV+CSS方式搭建網(wǎng)站結(jié)構(gòu),提高CSS重用性,來減少HTML文件大小.
4.使用服務(wù)器端GZIP壓縮JS/ CSS文件,縮小傳輸文件大小.
附注:Apache1跟Apache2的GZIP的效率跟方式不一樣的,根據(jù)需要自行選擇
C.讓用戶更快的看到想要的結(jié)果
用戶對于一個(gè)站點(diǎn)的白頁的忍受時(shí)間根據(jù)統(tǒng)計(jì)是8-12秒.
對于用戶能忍受的頁面白頁時(shí)間是8-10秒, 白頁的產(chǎn)生可能由于各種原因引起,我們能做的就是怎么讓用戶能變的稍微能等待更久.
方案1.多做一個(gè)引導(dǎo)頁,讓用戶體會(huì)其中的變化
案例:mail.aol.com中的loading引導(dǎo)頁
方案2.優(yōu)先載入頁面結(jié)構(gòu)以及結(jié)構(gòu)圖片,后一步載入當(dāng)前頁面數(shù)據(jù),再后 一步載入Iframe,Flash等數(shù)據(jù).讓用戶盡早的看到被打開頁面的希望.
D.提高客戶端渲染速度
這個(gè)問題就比較泛泛了,影響客戶端的渲染速度有多方面的,主要目的都是提高程序方面的效率.
1. 對于大索引的結(jié)構(gòu),盡可能的少用索引訪問,能用訪問兄弟節(jié)點(diǎn)的方式盡可能用訪問兄弟節(jié)點(diǎn)的方式.
var t1=new Date();
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("xml.xml");
var node=xmlDoc.documentElement.firstChild;
var a=[],i=-1;
do a[++i]=node.getAttribute("text");
while(node=node.nextSibling);
a=a.join("");
document.write(a.length);
alert(new Date()-t1);
引用
2. 字符串拼接盡可能用數(shù)組方式
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
