js 延遲加載 改變JS的位置加快網(wǎng)頁加載速度
更新時(shí)間:2012年12月11日 16:43:22 作者:
當(dāng)一個(gè)網(wǎng)站有很多js代碼要加載,js代碼放置的位置在一定程度上將會(huì)影像網(wǎng)頁的加載速度,為了提高加載速度,本文總結(jié)了一下幾個(gè)注意點(diǎn)
當(dāng)一個(gè)網(wǎng)站有很多js代碼要加載,js代碼放置的位置在一定程度上將會(huì)影像網(wǎng)頁的加載速度,為了讓我們的網(wǎng)頁加載速度更快,本文總結(jié)了一下幾個(gè)注意點(diǎn):
1、延遲加載js代碼
<script type=”text/javascript” src=”" id=”my”></script>
<script type=”text/javascript”>
setTimeout(“document.getElementById(‘my').src='include/php100.php'; “,3000);//延時(shí)3秒
</script>
這樣通過延遲加載js代碼,給網(wǎng)頁加載留出更多的時(shí)間!
2、js最后加載方案一
在需要插入JS的地方插入以下代碼:
程序代碼
<span id=”L4EVER”>LOADING…</span>
當(dāng)然,那個(gè)LOADING…你可以換成自己喜歡的小圖片.看起來很有AJAX效果呢.
然后在頁面最底端插入:
程序代碼
<span id=”AD_L4EVER”>你的JS代碼在這里!</span >
<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML=”";</script>
3、讓JS最后加載方案二
這個(gè)牽涉到網(wǎng)頁的加載順序問題,例如引入外部js腳本文件時(shí),如果放入html的head中,則頁面加載前該js腳本就會(huì)被加載入頁面,而放入body中,則會(huì)按照頁面從上倒下的加載順序來運(yùn)行javascript的代碼~~~ 所以我們可以把js外部引入的文件放到頁面底部,來讓js最后引入,從而加快頁面加載速度。
1、延遲加載js代碼
復(fù)制代碼 代碼如下:
<script type=”text/javascript” src=”" id=”my”></script>
<script type=”text/javascript”>
setTimeout(“document.getElementById(‘my').src='include/php100.php'; “,3000);//延時(shí)3秒
</script>
這樣通過延遲加載js代碼,給網(wǎng)頁加載留出更多的時(shí)間!
2、js最后加載方案一
在需要插入JS的地方插入以下代碼:
程序代碼
復(fù)制代碼 代碼如下:
<span id=”L4EVER”>LOADING…</span>
當(dāng)然,那個(gè)LOADING…你可以換成自己喜歡的小圖片.看起來很有AJAX效果呢.
然后在頁面最底端插入:
程序代碼
復(fù)制代碼 代碼如下:
<span id=”AD_L4EVER”>你的JS代碼在這里!</span >
<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML=”";</script>
3、讓JS最后加載方案二
這個(gè)牽涉到網(wǎng)頁的加載順序問題,例如引入外部js腳本文件時(shí),如果放入html的head中,則頁面加載前該js腳本就會(huì)被加載入頁面,而放入body中,則會(huì)按照頁面從上倒下的加載順序來運(yùn)行javascript的代碼~~~ 所以我們可以把js外部引入的文件放到頁面底部,來讓js最后引入,從而加快頁面加載速度。
您可能感興趣的文章:
- javascript實(shí)現(xiàn)一個(gè)網(wǎng)頁加載進(jìn)度loading
- JavaScript實(shí)現(xiàn)網(wǎng)頁加載進(jìn)度條代碼超簡單
- jquery插件NProgress.js制作網(wǎng)頁加載進(jìn)度條
- JavaScript實(shí)現(xiàn)當(dāng)網(wǎng)頁加載完成后執(zhí)行指定函數(shù)的方法
- Windows下使用apache模塊實(shí)現(xiàn)合并多個(gè)js、css提高網(wǎng)頁加載速度
- javascript 改變網(wǎng)頁加載的CSS
- JS+CSS實(shí)現(xiàn)網(wǎng)頁加載中的動(dòng)畫效果
相關(guān)文章
JavaScript中的關(guān)鍵字"VAR"使用詳解 分享
JScript的語法教程里面說在聲明變量時(shí)忽略var關(guān)鍵字是完全合法的。但是事實(shí)常常又證明想當(dāng)然的結(jié)果是不可靠的。2013-07-07javascript 進(jìn)階篇2 CSS XML學(xué)習(xí)
CSS我覺得應(yīng)該沒有不會(huì)的吧。。不過因?yàn)槲易约翰淮髸?huì)于是還是補(bǔ)在這里好了2012-03-03Node.js生成HttpStatusCode輔助類發(fā)布到npm
本篇文章小編為大家介紹利用Node.js為Node.js生成HttpStatusCode輔助類并發(fā)布到npm,有需要的朋友可以參考一下2013-04-04Typescript中interface與type的相同點(diǎn)與不同點(diǎn)的詳細(xì)說明
這篇文章主要介紹了Typescript中interface與type的相同點(diǎn)與不同點(diǎn),并配有實(shí)例說明,需要的朋友可以參考下2022-11-11使用Grunt.js管理你項(xiàng)目的應(yīng)用說明
以前我們可能使用NodeJS自己寫一個(gè)build程序,但是現(xiàn)在Grunt.js能夠提供我們需要的一切2013-04-04JavaScript DOM學(xué)習(xí)第八章 表單錯(cuò)誤提示
這一章詳細(xì)介紹的表單錯(cuò)誤提示的方法比那種大多數(shù)使用警告框的方法要好的多。2010-02-02javascript函數(shù)中的arguments參數(shù)
arguments當(dāng)然只在function體內(nèi)才有意義, arguments.length 返回的是傳入function的實(shí)參個(gè)數(shù)2010-08-08