相對與HTML,CSS，javascript是最影響瀏覽器性能的，因為瀏覽器在遇到《script》標(biāo)簽時，必須等待js代碼下載和執(zhí)行完畢后再執(zhí)行后面的內(nèi)容，因此當(dāng)頁面中js文件過多時，網(wǎng)站訪問速度明顯下降。然而，現(xiàn)在的web應(yīng)用用到j(luò)s只會越來越多，那么我們?nèi)绾斡行ЫM織js代碼來提高網(wǎng)站的性能呢？通過相關(guān)資料，我總結(jié)了以下需要注意的幾點。

1、將script標(biāo)簽置于網(wǎng)頁底部，一般置于標(biāo)簽之前。這樣用戶不必等待js加載并執(zhí)行完成后就可以完整的瀏覽整個網(wǎng)頁。

2、將多個js文件合并到一個url中加載，以減少http請求。對于此點，可閱讀 http://dancewithnet.com/2010/06/08/minify-js-and-css-files-in-server/

3、通過js動態(tài)創(chuàng)建《script》標(biāo)簽動態(tài)加載js文件，以達到無阻賽的加載腳本，可以寫一個函數(shù)來做這個工作

1 function loadScript(url,callback){

2 ? ? ?var script=document.createElement("script");

3 ? ? ?script.type="text/javascript";

4 ? ? ?if(script.readyState){

5 ? ? ? ? ? //ie 瀏覽器

6 ? ? ? ? ? script.onreadystatechange=function(){

7 ? ? ? ? ? ? ? ?if(script.readyState=="loaded" || ? ? ? ?script.readyState=="complete"){

8 ? ? ? ? ? ? ? ? ? ? script.onreadystatechange=null;

9 ? ? ? ? ? ? ? ? ? ? callback();

10 ? ? ? ? ? ? ? ?}

11 ? ? ? ? ? }

12 ? ? ?}else{

13 ? ? ? ? ? script.οnlοad=function(){

14 ? ? ? ? ? ? ? ?callback();

15 ? ? ? ? ? }

16 ? ? ?}

17 ? ? ?script.src=url;

18 ? ? ?document.getElementByTagName("head")[0].appendChild(script);

19 }

以上這種方式是一種跨瀏覽器的非常易用的方法，也可以通過XMLHttpRequest腳本注入的方式，但此方式有跨域的限制，所以推薦上面的方式。

互聯(lián)網(wǎng)上有很多這樣的js庫，供我們下載使用：

Lazyload類庫，下載地址：http://github.com/rgrove/lazyload/

使用方法

PHP1.CN | 中國最專業(yè)的PHP中文社區(qū) | json解析格式化 | PHP資訊 | PHP教程 | 數(shù)據(jù)庫技術(shù) | 服務(wù)器技術(shù) | 前端開發(fā)技術(shù) | PHP框架 | 開發(fā)工具 | 在線工具

Copyright ? 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社區(qū) 版權(quán)所有 京ICP備19059560號-4

總結(jié)

以上是生活随笔為你收集整理的php动态页面加载慢,通过动态加载JS文件提升网站访问速度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。