js 延遲加載 改變JS的位置加快網(wǎng)頁(yè)加載速度
更新時(shí)間：2012年12月11日 16:43:22 作者：
當(dāng)一個(gè)網(wǎng)站有很多js代碼要加載，js代碼放置的位置在一定程度上將會(huì)影像網(wǎng)頁(yè)的加載速度,為了提高加載速度，本文總結(jié)了一下幾個(gè)注意點(diǎn)
當(dāng)一個(gè)網(wǎng)站有很多js代碼要加載，js代碼放置的位置在一定程度上將會(huì)影像網(wǎng)頁(yè)的加載速度，為了讓我們的網(wǎng)頁(yè)加載速度更快，本文總結(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)頁(yè)加載留出更多的時(shí)間！
2、js最后加載方案一
在需要插入JS的地方插入以下代碼:
程序代碼
<span id=”L4EVER”>LOADING…</span>
當(dāng)然,那個(gè)LOADING…你可以換成自己喜歡的小圖片.看起來很有AJAX效果呢.
然后在頁(yè)面最底端插入:
程序代碼
<span id=”AD_L4EVER”>你的JS代碼在這里!</span >
<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML=”";</script>
3、讓JS最后加載方案二
這個(gè)牽涉到網(wǎng)頁(yè)的加載順序問題，例如引入外部js腳本文件時(shí)，如果放入html的head中,則頁(yè)面加載前該js腳本就會(huì)被加載入頁(yè)面，而放入body中，則會(huì)按照頁(yè)面從上倒下的加載順序來運(yùn)行javascript的代碼~~~ 所以我們可以把js外部引入的文件放到頁(yè)面底部，來讓js最后引入，從而加快頁(yè)面加載速度。
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)頁(yè)加載留出更多的時(shí)間！
2、js最后加載方案一
在需要插入JS的地方插入以下代碼:
程序代碼
復(fù)制代碼 代碼如下:
<span id=”L4EVER”>LOADING…</span>
當(dāng)然,那個(gè)LOADING…你可以換成自己喜歡的小圖片.看起來很有AJAX效果呢.
然后在頁(yè)面最底端插入:
程序代碼
復(fù)制代碼 代碼如下:
<span id=”AD_L4EVER”>你的JS代碼在這里!</span >
<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML=”";</script>
3、讓JS最后加載方案二
這個(gè)牽涉到網(wǎng)頁(yè)的加載順序問題，例如引入外部js腳本文件時(shí)，如果放入html的head中,則頁(yè)面加載前該js腳本就會(huì)被加載入頁(yè)面，而放入body中，則會(huì)按照頁(yè)面從上倒下的加載順序來運(yùn)行javascript的代碼~~~ 所以我們可以把js外部引入的文件放到頁(yè)面底部，來讓js最后引入，從而加快頁(yè)面加載速度。
您可能感興趣的文章:
- javascript實(shí)現(xiàn)一個(gè)網(wǎng)頁(yè)加載進(jìn)度loading
- JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)加載進(jìn)度條代碼超簡(jiǎn)單
- jquery插件NProgress.js制作網(wǎng)頁(yè)加載進(jìn)度條
- JavaScript實(shí)現(xiàn)當(dāng)網(wǎng)頁(yè)加載完成后執(zhí)行指定函數(shù)的方法
- Windows下使用apache模塊實(shí)現(xiàn)合并多個(gè)js、css提高網(wǎng)頁(yè)加載速度
- javascript 改變網(wǎng)頁(yè)加載的CSS
- JS+CSS實(shí)現(xiàn)網(wǎng)頁(yè)加載中的動(dòng)畫效果
相關(guān)文章
這篇文章介紹了ES6新增的關(guān)鍵字let和const，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
JavaScript基本概念初級(jí)講解論壇貼的學(xué)習(xí)記錄
JavaScript基本概念 論壇貼建議大家看下，都是一些js的高級(jí)的技巧知識(shí)小結(jié)。2009-02-02
這篇文章主要介紹了Javascript快速排序算法的相關(guān)資料,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了forward和redirect的區(qū)別,在前端開發(fā)中,有很多剛?cè)胄械呐笥巡涣私膺@兩者之間的區(qū)別,那么這篇文章可以帶給你新的認(rèn)知,需要的朋友可以參考下2023-03-03
Document.location.href和.replace的區(qū)別示例介紹
document.location.href和document.location.replace都可以實(shí)現(xiàn)從A頁(yè)面切換到B頁(yè)面，下面為大家介紹下它們的區(qū)別2014-03-03
淺談JavaScript數(shù)據(jù)類型及轉(zhuǎn)換
本文向大家簡(jiǎn)單介紹了javascript的數(shù)據(jù)類型以及他們直接的轉(zhuǎn)換方法，雖然沒有太多示例，但是也是個(gè)人的一些經(jīng)驗(yàn)總結(jié)，這里推薦給大家。2015-02-02
這篇文章主要介紹了javascript判斷office版本示例,需要的朋友可以參考下2014-04-04
js關(guān)于字符長(zhǎng)度限制的問題示例探討
字符長(zhǎng)度限制在某些特殊的使用場(chǎng)合還是比較實(shí)用的，下面為大家用示例探討下，感興趣的朋友可以參考下2014-01-01
本文使用JS、CSS、標(biāo)簽屬性等方式去除IE鏈接上的虛線框，方法很簡(jiǎn)單，大家可以選擇使用2013-11-11
javascript學(xué)習(xí)筆記(十三) js閉包介紹(轉(zhuǎn))
閉包（closure）是Javascript語(yǔ)言的一個(gè)難點(diǎn)，也是它的特色，很多高級(jí)應(yīng)用都要依靠閉包實(shí)現(xiàn)2012-06-06