|
|
A.減少HTTP請求數.
減少HTTP請求數有什么好處:
降低服務器跟客戶端的建立和消除HTTP請求和響應Header的開銷
減少服務器為HTTP連接的進程和線程的開銷,如果可能,還會包括GZIP壓縮的CPU開銷.
B.減小被請求文件大小, 減少請求數據占用的網絡帶寬.
C.讓用戶更快的看到想要的結果.
D.提高客戶端渲染速度.
E讓瀏覽器同時能請求更多的數據.
F.提高服務器相應速度.
G.通過版本化控制客戶端Cache.
引用
二.如何解決我們的麻煩
A.如何減少HTTP請求數
1.合并JS文件跟 CSS文件.
2.合并框架圖片以及相對變動較少的圖片成一張,通過CSS背景切割來完成渲染.
3.合理使用本地Cache來緩存JS/CSS/IMAGE.
4.合理使用UserData緩存JS文件,對于FF用戶可以單獨請求服務器,這樣能解決80%用戶的問題.
5.把JS跟CSS合并成一個文件
寫法如下:
<?header('Content-type: */*');?>
<!-- /*
window.onload=function(){
document.getElementById("test2").innerHTML="傳說中滴JS測試者。如果你看到我，那<strong>JS</strong>也生效了";
}
<!-- */
<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}
引用
以上內容的文件同時被JS跟Style引用,都是有效的
B.減小被請求文件大小,減少請求數據占用的網絡帶寬
1.壓縮JS體積
刪除JS中空白換行,注釋,混淆把長變量換成短變量
2.壓縮CSS體積
刪除CSS注釋
CSS中的寫法盡量用簡寫,比如:
.bak{background:url(sina.gif) no-repeat left};
3.使用DIV+CSS方式搭建網站結構,提高CSS重用性,來減少HTML文件大小.
4.使用服務器端GZIP壓縮JS/ CSS文件,縮小傳輸文件大小.
附注:Apache1跟Apache2的GZIP的效率跟方式不一樣的,根據需要自行選擇
C.讓用戶更快的看到想要的結果
用戶對于一個站點的白頁的忍受時間根據統計是8-12秒.
對于用戶能忍受的頁面白頁時間是8-10秒, 白頁的產生可能由于各種原因引起,我們能做的就是怎么讓用戶能變的稍微能等待更久.
方案1.多做一個引導頁,讓用戶體會其中的變化
案例:mail.aol.com中的loading引導頁
方案2.優先載入頁面結構以及結構圖片,后一步載入當前頁面數據,再后 一步載入Iframe,Flash等數據.讓用戶盡早的看到被打開頁面的希望.
D.提高客戶端渲染速度
這個問題就比較泛泛了,影響客戶端的渲染速度有多方面的,主要目的都是提高程序方面的效率.
1. 對于大索引的結構,盡可能的少用索引訪問,能用訪問兄弟節點的方式盡可能用訪問兄弟節點的方式.
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. 字符串拼接盡可能用數組方式
<script language="JScript">
function StringBuilder(sString){//字符串連接操作類
this.length=0;
this.append=function(sString){
this.length+=(this._parts[this._current++]=String(sString)).length;
this._string=null;
return this;
}
this.toString=function(){
if(this._string!=null)
return this._string;
var s=this._parts.join("");
this._parts=[s];
this._current=1;
return this._string=s;
}
this._current=0;
this._parts=[];
this._string=null;
if(sString!=null)
this.append(sString);
}
var str=new StringBuilder();
str.append("a");
str.append("b");
alert(str.toString());
</script>
引用
3. 大規模添加節點數據,請不要使用appendChild方式,盡量使用類似innerHTML的insertAdjacentHTML方式,FF下需修正
function addHTML(oParentNode, sHTML) {
if(window.addEventListener) {// for MOZ
var oRange = oParentNode.ownerDocument.createRange();
oRange.setStartBefore(oParentNode);
var oFrag = oRange.createContextualFragment(sHTML);
oParentNode.appendChild(oFrag);
}
else {// for IE5+
oParentNode.insertAdjacentHTML("BeforeEnd", sHTML);
}
}
E讓瀏覽器同時能請求更多的數據.
瀏覽器默認只是支持單域名同時有兩個HTTP請求,使用多域名將能把請求數提高,在網絡條件優良的情況下,能更快的下載數據,呈現結果.
對于images2這樣的機器,為什么能同時有超過2個以上請求數,有待考察.
F.對于需快速響應的文件,把其放入快速響應的服務器,應該是不錯的方案,優化方案請系統儲備組提供.
G.通過版本化控制客戶端Cache.
通常js/css這類文件改動比較頻繁,但是為了加載速度變快,我們有可能需要設定這類文件的過期時間為幾天后,這樣我們碰到的問題就是,如何及時更新這些在cache的文件?
通過一個簡單的配置,通過修改JS的版本來及時告訴瀏覽器,這些文件必須重新請求了,不要繼續使用瀏覽器cache中的數據.
方案有好幾個:
1. 手動改這些js的文件名
2. 手動改這些js的路徑
3. 通過URL Rewrite方式來改重定位js路徑
4. 通過一個在高響應服務器上的一個js配置告知頁面,這個頁面該鏈接哪些JS文件
5. 大版本不變,小版本不斷追加,等一定時間后,統一更新,高效利用cache
JavaScript技術：優化網頁之快速的呈現我們的網頁，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
