码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript的加载和执行

时间:2015-12-18 18:14:43      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:

总结:

在</body>闭合之前,将所有的<script>标签放到页面底部.这样能确保在脚本执行之前页面已经完成渲染.

合并脚本, 页面中的<script>标签越少, 加载速度越快,响应也迅速.

无阻塞下载javaScript的方法,见下面

1. 脚本位置,组织脚本&

    由于脚本会阻塞页面其他资源的下载,推荐所有的<script>标签尽可能放在<body>标签的底部,以尽量减小对整个页面下载的影响

  例如:<body><script type="" src="1.js&2.js&3.js"></script></body>

2. 无阻塞脚本

   window对象的load事件触发后再下载脚本

   1)  延迟的脚本defer

       <script type="" src="1.js" defer></script>因带defer可以放在文件的任何位置,解析到script标签的时候开始下载,但不会执行,直到DOM加载完成之后, 或者在onload之前被调用

       Defer:指明本元素所含的脚本不会修改DOM,因此代码能安全地延迟执行.(仅支持IE4+, Firefox 3.5+)

   2) 脚本动态元素

       (1) var script = document.createElement(‘script‘);

            script.type = ‘text/javascript‘;

            script.src = ‘file.js‘;

            document.getElementsByTagName(‘head‘)[0].appendChild(script);

            文件在该元素被添加到页面时开始下载. 无论何时下载,下载和执行都不会被阻塞页面其他进程(Firefox和Opera会等待此前所有动态脚本执行完)

       (2) readyState(uninitiated初始状态, loading开始下载, loaded下载完成, interactive数据完成下载但尚不可用, complete所有数据已准备就绪)

   3) XMLHttpRequest脚本注入, 获取脚本并注入到页面中.

   4) LazyLoad类库

   <script type="text/javascript" src="lazyload_min.js"></script>

       <script type="text/javascript" src="file.js">

            LazyLoad.js([‘first.js‘, ‘last.js‘], function(){

      Appliction.init();

    });

       </script>

 

       

 

JavaScript的加载和执行

标签:

原文地址:http://www.cnblogs.com/floraCnblogs/p/js-load-execute.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!