JavaScript阻塞特性(补充)

xiaoyeshen · 2014-10-08 10:16 · 1099次阅读

对于javascript加载外链js,而导致页面加载缓慢,或者用户交互页面渲染延迟,这里给出一点建议:

如果外链地址一样可以合并链接,进行加载,如下:

<script type=“text/javascript” src=“http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js”></script>

这是雅虎提供的合并处理器,可以同时加载yahoo-min.js和event-min.js,减少一个alert(‘script’);

一种延迟加载的方法:defer

&lt;html&gt;
&lt;head&gt;
      &lt;title&gt;Script&lt;/title&gt;
&lt;body&gt;
      &lt;script defer&gt;
             alert('defer');
      &lt;/script&gt;
      &lt;script&gt;
             alert('script');
      &lt;/script&gt;
      &lt;script&gt;
             window.onload = function(){alert('onload');}
      &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

不支持defer属性的浏览器弹出顺序:defer-script-load

支撑defer属性的浏览器弹出顺序:script-defer-load

一种无阻塞加载的方法:Script DOM Element

JavaScript动态创建script DOM元素并设置其src属性

var se = document.createElement('script');
se.src = 'http://www.xx.com/test.js';
document.ge('head')[0].appendChild(se);

这种方式适用于所有的浏览器,而且没有跨域的限制,实现起来也非常的简单和易于理解,唯一的缺点是不能保证各个脚本的执行顺序。

收藏

暂无评论

登录后可以进行评论。没有账号?马上注册