Javascript 装载和执行
来源:互联网 发布:怎么申请软件版权 编辑:程序博客网 时间:2024/06/05 04:00
Javascript 装载和执行
明白了JS的装载和执行,没有给出很好的解决方案,在IE下可用defer属性;
浏览器对于Javascript的运行有两大特性:1)载入后马上执行,2)执行时会阻塞页面后续的内容(包括页面的渲染、其它资源的下载)。于是,如果有多个js文件被引入,那么对于浏览器来说,这些js文件被被串行地载入,并依次执行。
因为javascript可能会来操作HTML文档的DOM树,所以,浏览器一般都不会像并行下载css文件并行下载js文件,因为这是js文件的特殊性造成的。所以,如果你的javascript想操作后面的DOM元素,基本上来说,浏览器都会报错说对象找不到。因为Javascript执行时,后面的HTML被阻塞住了,DOM树时还没有后面的DOM结点。所以程序也就报错了。
所以,你知道为什么有很多网站把javascript放在网页的最后面了,要么就是动用了window.onload或是docmuemt ready之类的事件。因为,绝大多数的Javascript代码并不需要等页面,可以异步载入。
script的defer和async属性
IE自从IE6就支持defer标签,如:
<script defer type="text/javascript" src="./alert.js" >
</script>
对于IE来说,这个标签会让IE并行下载js文件,并且把其执行hold到了整个DOM装载完毕(DOMContentLoaded),多个defer的<script>在执行时也会按照其出现的顺序来运行。最重要的是<script>被加上defer后,其不会阻塞后续DOM的的渲染。但是因为这个defer只是IE专用,所以一般用得比较少。
而我们标准的的HTML5也加入了一个异步载入javascript的属性:async,无论你对它赋什么样的值,只要它出现,它就开始异步加载js文件。但是, async的异步加载会有一个比较严重的问题,那就是它忠实地践行着“载入后马上执行”这条军规,所以,虽然它并不阻塞页面的渲染,但是你也无法控制他执行的次序和时机。你可以看看这个示例去感受一下。
支持 async标签的浏览器是:Firefox3.6+,Chrome 8.0+,Safari 5.0+,IE 10+,Opera还不支持(来自这里)所以这个方法也不是太好。因为并不是所有的浏览器你都能行。
动态创建DOM方式
这种方式可能是用得最多的了。
function loadjs(script_filename) {
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', script_filename);
script.setAttribute('id', 'coolshell_script_id');
script_id = document.getElementById('coolshell_script_id');
if(script_id){
document.getElementsByTagName('head')[0].removeChild(script_id);
}
document.getElementsByTagName('head')[0].appendChild(script);
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs(script);
这个方式几乎成了标准的异步载入js文件的方式
0 0
- JavaScript 装载和执行
- Javascript 装载和执行
- Javascript 装载和执行
- Javascript 装载和执行
- Javascript 装载和执行
- Javascript 装载和执行
- Javascript 装载和执行
- Javascript 装载和执行
- JAVASCRIPT 装载和执行
- Javascript 装载和执行 浏览器的渲染原理简介
- 加快程序装载和执行速度
- js的装载和执行顺序
- 从操作系统角度看可执行文件的装载和执行
- Linux装载和执行可执行程序的分析
- Linux中可执行程序的装载和执行
- JS----执行与装载
- 程序装载及执行说明
- 可执行文件的装载与执行
- 操作系统实验——处理器调度
- HEXO搭建个人博客
- H5 打开百度和高德地图的方式
- EasyUI总结二
- linux上很方便的上传下载文件工具rz和sz
- Javascript 装载和执行
- PL/SQL 内建函数
- 求第k大
- 数据结构与算法分析笔记与总结(java实现)--数组1:二维数组中的查找
- MapReduce理解-深入理解MapReduce
- LevelDb 深入介绍
- 解决点击edittext,弹出软键盘时布局往上顶的问题
- Android备忘录
- Linux-Test(测试指令)