這兩天一直在談頁面優(yōu)化提高頁面性能,以下一個(gè)小tip供參考。

1、減少頁面請(qǐng)求數(shù)。

a、圖片、外聯(lián)css/js都需要向服務(wù)器請(qǐng)求（本地緩存除外），如果小圖片很多或者外聯(lián)文件很多的時(shí)候，往往花去大量的時(shí)間去發(fā)送和接收這些文件，盡量合并圖片和css/js文件。

b、把相同域名的請(qǐng)求放在一起。

如果頁面上這樣引用：

<script language=”javascript” type=”text/javascript” src=”http://img.china.alibaba.com/a.js“></script>

<script language=”javascript” type=”text/javascript” src=”http://style.china.alibaba.com/b.js“></script>

<script language=”javascript” type=”text/javascript” src=”http://img.china.alibaba.com/c.js“></script>

<script language=”javascript” type=”text/javascript” src=”http://style.china.alibaba.com/d.js“></script>

 注意加粗部分，應(yīng)該已經(jīng)看出問題在哪里了吧。

改正如下寫法，頁面請(qǐng)求會(huì)快很多：

<script language=”javascript” type=”text/javascript” src=”http://img.china.alibaba.com/a.js“></script>

<script language=”javascript” type=”text/javascript” src=”http://img.china.alibaba.com/c.js“></script>

<script language=”javascript” type=”text/javascript” src=”http://style.china.alibaba.com/b.js“></script>

<script language=”javascript” type=”text/javascript” src=”http://style.china.alibaba.com/d.js“></script>

2、提高頁面渲染效率。
例如，寫table的時(shí)候設(shè)置table-layout:fixed,寫圖片的時(shí)候設(shè)定圖片的寬度和高度比讓頁面自己去計(jì)算寬度來的更高效?？偠灾?，不要給瀏覽器太多東西去“思考”。

3、提高js的執(zhí)行效率。

例如，在js中合并數(shù)組盡量使用join(),而不是str+=””。盡量避免使用document.write等比較低效的函數(shù)。

4、優(yōu)化頁面url

優(yōu)化頁面url路徑，減少url字節(jié)數(shù)，url不要埋的太深。對(duì)比以下兩個(gè)路徑同樣是條資訊但從字節(jié)少上相差了一倍。當(dāng)url數(shù)量巨大的時(shí)候，復(fù)雜、冗長的url會(huì)造成頁面巨大的負(fù)擔(dān)。

最新評(píng)論