你的位置:首页 > 软件开发 > Java > (转)高性能JavaScript:加载和运行(动态加载JS代码)

(转)高性能JavaScript:加载和运行(动态加载JS代码)

发布时间:2016-08-12 13:00:04
浏览器是如何加载JS的当浏览器遇到一个<script>标签时,浏览器首先根据标签src属性下载JavaScript代码,然后运行JavaScript代码,继而继续解析和翻译页面。如果需要加载的js文件很多很大,则会让人感觉页面加载很慢,影响页面的交互。浏览器在遇到&l ...
浏览器如何加载JS的当浏览器遇到一个<script>标签时,浏览器首先根据标签src属性下载JavaScript代码,然后运行JavaScript代码,继而继续解析和翻译页面。如果需要加载的js文件很多很大,则会让人感觉页面加载很慢,影响页面的交互。浏览器在遇到<body>之前,不会渲染页面的任何部分,如果此时<head>中需要加载的js文件很大的话,可能用户开始看到的页面就是一个“白板”,这种情况会立马让用户崩溃。Internet Explorer 8, Firefox 3.5, Safari 4, 和Chrome 2 允许并行下载JavaScript 文件。这表明当一个script文件正在下载时,不会阻塞其他script的下载。并行下载script加快了script的下载时间,但还是要阻塞其他资源的下载,如图片。解决方案FF, Opera, Chrome和Safari3+会在节点接收完成后发出一个load事件;IE则是发出一个readystatechange事件,<script>元素有一个readyState属性,它的值随着下载过程而改变。readyState有5种取值:uninitialized(默认状态),loading(下载开始),loaded(下载完成),interactive(下载完成但尚不可用),complete(所有数据已准备好)。微软文档上说,这些取值不一定全部出现,有时script会得到loaded不出现complete,有时script会得到complete不出现loaded。最安全的做法就是,在readystatechange事件中检查这两种状态,当出现两种状态之一时,删除readystatechange句柄,以避免事件不会被执行两次。根据上面的描述,新的动态加载代码如下所示:请看下面的使用示例:loadScript.js:实现loadScript函数页面文件:
<head>动态脚本加载是最常用的JavaScript非阻塞下载方式,因为它跨浏览器而且简单易用。这种方法需要用到ajax,先把ajax的辅助方法列出来:
/**      }else if(defaults.method.toLowerCase() == "post"){这种方法的限制是:JavaScript文件必须与页面放在同一个域内。因为第三方库 
         
        
        

原标题:(转)高性能JavaScript:加载和运行(动态加载JS代码)

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。