二、方案
對(duì)于究竟應(yīng)該使用哪種方案。這完全取決于你需要自身的需要。這張圖描述了什么時(shí)候使用什么方法:
從總體上看來,Script DOM Element 是比較好的方案。NCZ 的博客上提過,目前最好的技術(shù)是:
創(chuàng)建兩個(gè) JavaScript 文件。第一個(gè)文件只提供動(dòng)態(tài)下載 Javascript 的代碼,第二個(gè)文件則包含所有其他頁面所需腳本的文件。
像 <script> 在頁部(</body> 之前)引入第一個(gè)文件。
創(chuàng)建第二個(gè) <script> 來執(zhí)行下載第二個(gè) Javascript 文件的函數(shù)和其他的初始化代碼。
三、實(shí)現(xiàn)代碼
根據(jù)上面的提到的技術(shù)。NCZ 推薦第一個(gè)文件只包含相應(yīng)的實(shí)現(xiàn)第二個(gè)文件動(dòng)態(tài)加載的代碼:
function loadScript(url, callback){
var script = document.createElement("script") script.type = "text/javascript";
if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function(){ callback(); }; }
script.src = url; document.getElementsByTagName("head")[0].appendChild(script); }
然后,我們可以在頁面中這樣做:
<script type="text/javascript" src="http://your.cdn.com/first.js"></script> <script type="text/javascript"> loadScript("http://your.cdn.com/second.js", function(){ //初始化你的代碼 }); </script>
在 HTML5 上,我們可以使用 async 屬性。這個(gè) HTML 屬性的作用正是我們需要的 NON-Blocking 下載技術(shù)。雖然目前支持的瀏覽器并不多(似乎只有 Firefox 3.6+ ?),但給需要平行下載的 Javascript(按照方案看來,一般是第一個(gè) JS 文件) 加上這個(gè)屬性,也不會(huì)影響其他不支持的瀏覽器,所以,是推薦使用的。
<script type="text/javascript" async src="foo.js"></script>
四、實(shí)踐
YUI3 的 Loader 使用了 NCZ 的這樣的方法。而在支付寶。我們也使用了類似的方法。這里簡單說一下。
<script type="text/javascript" charset="utf-8"> // 配置 combo 服務(wù)的 PATH araleConfig = { combo_host: "} </script>
<script type="text/javascript" src="core.js"></script>
在使用的時(shí)候,再利用 Loader.use() 來實(shí)現(xiàn)代碼的動(dòng)態(tài)加載。當(dāng)然,這里不僅僅是動(dòng)態(tài)加載,還有一定的緩存機(jī)制在里面。建議你查看相關(guān)的 combo 服務(wù)的技術(shù)。目前支付寶前端架構(gòu)組的工友們,已經(jīng)在這一塊取得了一些不錯(cuò)的進(jìn)展(根據(jù)測試報(bào)告,速度是非常不錯(cuò)的,可能會(huì)在適當(dāng)?shù)臅r(shí)候開源出來)。
五、總結(jié)
前端性能優(yōu)化方面。還有很多東西可以做。并且,隨著 HTML5 技術(shù)的出現(xiàn)和 Javascript 技術(shù)的不斷創(chuàng)新,相信還有更多東西是值得期待。前端們,加油吧,未來有很多東西應(yīng)該是由你來主導(dǎo)的。
本文鏈接:http://m.95time.cn/tech/web/2011/8259.asp
出處:幸福收藏夾
責(zé)任編輯:bluehearts
上一頁 加載 Javascript 最佳實(shí)踐 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|