【web前台优化】浅谈动静态引入JS文件对浏览器的影响（BUG为例）

上一篇 / 下一篇  2012-04-10 12:03:46 / 个人分类：web前台优化

查看( 1421 ) / 评论( 1 ) / 评分( 5 / 0 )

目前常用的几种常用的动态引入外部文件的方法：

第一种：代码首先创建SCRIPT.标记并插入到HEAD标记中，再将SCRIPT.的src属性指向外部JS文件，由之后的SCRIPT.标记中代码调用外部程序全局变量。

<script>

var js = document.createElement("script");

document.getElementsByTagName("head")[0].appendChild(js);

js.src = 'http://code.jquery.com/jquery-1.4.2.js';

</script>

 

<script. type="text/javascript">

alert($)

</script>

各浏览器表现及分析如下：

IE Firefox Opera

弹出($)函数体。此方法中动态附加进文档的js文件会阻断下一个SCRIPT.标记内的代码解析，直至它全部解析完。

Chrome Safari

脚本出错,"$ is not defined"。此方法中动态附加进文档的js文件不会阻断下一个SCRIPT.标记内的代码解析。

 

第二种：代码首先创建SCRIPT.标记，将src属性指向外部JS文件。最后插入到HEAD标记中，由之后的SCRIPT.标记中代码调用外部程序全局变量。

<script. type="text/javascript">

var js = document.createElement("script");

js.src = 'http://code.jquery.com/jquery-1.4.2.js';

document.getElementsByTagName("head")[0].appendChild(js);

</script>

 

<script. type="text/javascript">

alert($)

</script>

各浏览器表现及分析如下：

Firefox Opera

弹出($)函数体。此方法中动态附加进文档的js文件会阻断下一个SCRIPT.标记内的代码解析，直至它全部解析完。

IE Chrome Safari

脚本出错,"$ is not defined"。此方法中动态附加进文档的js文件不会阻断下一个SCRIPT.标记内的代码解析。

 

静态方式：

 上述两种是动态的，在我们页面中也常用到静态加载js文件的方法，例如

type="text/javascript" src='http://imgcache.qq.com/paipai/cos/portal/js/page.js'></script> 

这种静态方式会对所有浏览器都产生阻塞，即必需要等到page.js加载结束后才能够继续解析下一个script标签里的代码。

BUG例证：

IE6打开页面：http://beauty.paipai.com/mall/meifu/index.shtml，对页面进行多几次的刷新操作，会出下图页面没有数据，且报脚本错误的情况：

 

遇见这样的BUG后，按照以下步骤来分析原因：

 

1、 在这种出现BUG的情况下抓包查看JS文件，数据正常吐出，但是为什么页面上却展现不出来呢？

 

2、继续IE6对JS文件的加载时间，可以明显的发现在有BUG情况下时fill_tmp_act_1.1.0.js的加载时间过长，且fill_tmp_act_1.1.0.js与o4.js文件的加载时间只相隔0.001秒。

  

3、继续查看页面源代码，步骤1中04.js吐出的数据是由jsloader.load方法异步加载生成的，jsloader.load方法是动态引入外部JS文件第二种，所以在IE浏览中不会产生阻塞，fill_tmp_act_1.1.0.js不需要等到04.js加载完毕后再进行加载，虽然不会产生堵塞，但是由于IE6对于JS文件的执行效率很低，而04.js中调用到了fill_tmp_act_1.1.0.js中的fillAct方法，所以很有可能在fill_tmp_act_1.1.0.js文件没有加载完毕的情况下已经回调了这个方法，就如步骤2中这两条JS文件加载的时间很接近，且fill_tmp_act_1.1.0.js加载耗时过长，所以04.js先吐出了json数据，但是不能同步调用到fillAct方法执行。

  

解决方法：fill_tmp_act_1.1.0.js文件是函数公共库文件，通过把静态引入的fill_tmp_act_1.1.0.js文件放在需要调用该文件的对象前面加载来解决。

 

小结：这样处理后IE6下的这个BUG的确是得到了解决，然后由于静态引入JS方式在所有的浏览器中是都会产生阻塞，也一定程度上影响到了页面的性能。当我们在做web前台性能优化的测试过程中，有一条标准是尽量让外部引入的js文件后加载（js置低），也需要弄清楚JS文件的具体功能，对于这种公共库函数的js文件，还是提前加载要好一些，因为用户在功能方面的体验是非常重要的，同时可以通过其他方式来优化前台的性能。

 

 

 

 


收藏 举报

TAG: js加载 web性能优化 动态 静态

云层专版 引用 删除 云层   /   2012-04-10 16:08:04
评 5 分
 

评分：0

我来说两句

Open Toolbar