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

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

2、將多個(gè)js文件合并到一個(gè)url中加載，以減少http請(qǐng)求。對(duì)于此點(diǎn)，可閱讀 http://dancewithnet.com/2010/06/08/minify-js-and-css-files-in-server/

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

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 }

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

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

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

使用方法

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

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

總結(jié)

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

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