HTML文档、javascript脚本的加载与解析
1、onload事件
1.1 onload事件分类
a、文档加载完成事件(包括脚本、图片等资源都加载完),绑定方法:<body onload="doSomething()"></body> 或者 window.onload=doSomething
b、图片与脚本加载事件
var image = document.createElement('img');
image.onload = function () {
$('#image').html('image loaded')
}
image.src = 'ww.png'; var script = document.createElement('script');
script.onload = function () {
$('#script').html('script loaded')
}
script.src = 'test.js';
document.getElementById('container').appendChild(script); // 加载script并触发onload事件之前,必须插入到dom中
注意: 1、图片元素的src属性赋值之后就开始加载,不必等到插入dom文档中;而脚本元素必须插入到dom中之后才开始加载
2、对于图片元素,onload事件必须在src赋值之前绑定
3、样式表的加载事件特点与js脚本相同
1.2 onload事件与DOM事件
jQuery封装的dom文档加载完成方法:$(function(){})
该方法注册的事件是在dom文档元素(不包括图片)加载完成并且脚本执行完之后触发,总是位于onload之前执行
一种简单的测试方法:将img元素对图片的加载设为http处理并返回字节流的方式,在后台处理程序中添加断点,程序运行时,我们发现onload总是在img请求返回之后才会触发,而dom事件正常触发不受影响(一种说法是jQuery的dom事件是对window.onload事件的封装,该例说明这种说法是错误的)
2、js脚本的加载、解析与执行
2.1 js脚本文件在等待或加载期间,js执行线程处于阻塞还是闲置?
答:为闲置状态,示例代码如下,
lottery.js的内容:
alert('lottery.js');
在页面中的一段代码如下:
<script type="text/javascript">
setTimeout(function () { alert('blocking')}, 0);
alert('script1');
</script>
<script type="text/javascript" src="/js/lottery.js" onload="alert('loaded')"></script>
<script type="text/javascript">
alert('script2');
</script>
实际测试的响应结果有两种(ie11与chrome):
1、script1 -> blocking -> lottery.js -> loaded -> script2
2、script1 -> lottery.js -> loaded -> blocking -> script2
‘blocking’总是在‘script1’之后、‘script2’之前,因此其执行必定在lottery.js加载期间(ie7中script无onload事件,其执行结果除了无onload响应结果,其他与ie11相同,因此该结论同样使用于ie7)
2.2 脚本文件的onload事件与该脚本的执行关系
在2.1的示例中,‘loaded’总是在‘lottery.js’之后、‘script2’之前,因此onload处理程序紧随lottery.js之后并在下一段脚本之前执行
2.3 chrome中脚本、图片等外部资源的下载时多线程进行,但脚本的解析、执行依然是单线程
2.4 函数声明的提升(即非匿名函数)是以script标签为单位
如下代码:
<script type="text/javascript">
test()
</script>
<script type="text/javascript">
function test() {
alert('hello')
}
</script>
运行时会显示test未定义,将这个标签合二为一或者上下顺序调整一下则会正常执行
2.5 js脚本可以放置在dom中间,此时可以访问到位于脚本之前加载的html元素,而无法访问之后的
具体原因:js执行与dom解析时同一线程,脚本之后的元素尚未解析,因此无法访问
2.6 js脚本对dom的操作会立即生效,因此可以在脚本中操作上一行代码插入的html元素
如下所示
$('#myDiv').html('<span></span>')
$('#myDiv span').html('my span')
代码中,第2行可以立即对第1行插入的html元素进行访问
另外需要注意的是,js对dom的操作不会立即绘制到页面,原因:绘制页面与执行js虽然是两个不同的线程,但是这两个线程是互斥的,即js当执行完成并闲置时,页面才会更新,详细可以参考JavaScript下的setTimeout(fn,0)意味着什么?
2.7 某一js文件不存在(返回404错误),页面会忽略该文件正常加载显示;某一js文件加载较慢(fiddler设断点),页面处于loading状态,等待文件加载完
HTML文档、javascript脚本的加载与解析的更多相关文章
- LodopJS文档式模版的加载和赋值
Lodop模版有两种方法,一种是传统的JS语句,可以用JS方法里的eval来执行,一种是文档式模版,是特殊格式的base64码,此篇博文介绍文档式模版的加载,文档式模版的生成以及传统JS模版的生成加载 ...
- Lodop的JS模版代码、文档式模版 生成加载赋值博文索引
Lodop获取全部JS代码,传统JS模版的生成.LODOP设置打印设计返回JS代码是变量 LodopJS代码模版的加载和赋值 Lodop生成文档式模版 LodopJS文档式模版的加载和赋值 由于加载J ...
- 如何在word文档中添加mathtype加载项
MathType是强大的数学公式编辑器,通常与office一起使用,mathtype安装完成后,正常情况下会在word文档中的菜单中自动添加mathtype加载项,但有时也会出现小意外,mathtyp ...
- 第一百一十八节,JavaScript,动态加载脚本和样式
JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- js, javascript 图片懒加载 实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- javascript图片懒加载与预加载的分析
javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...
- HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% // ...
随机推荐
- vijos P1780 【NOIP2012】 开车旅行
描述 小\(A\)和小\(B\)决定利用假期外出旅行,他们将想去的城市从\(1\)到\(N\)编号,且编号较小的城市在编号较大的城市的西边,已知各个城市的海拔高度互不相同,记城市\(i\)的海拔高度为 ...
- codevs 2924 数独挑战
2924 数独挑战 http://codevs.cn/problem/2924/ 题目描述 Description "芬兰数学家因卡拉,花费3个月时间设计出了世界上迄今难度最大的数独游戏,而 ...
- codev 2147 数星星
2147 数星星 http://codevs.cn/problem/2147/ 题目描述 Description 小明是一名天文爱好者,他喜欢晚上看星星.这天,他从淘宝上买下来了一个高级望远镜.他十分 ...
- 写Java也得了解CPU--伪共享
第一次接触伪共享的概念,是在马丁的博客上:而ifeve也把这一系列博文翻译整理好了.概读了几次,感觉到此概念的重要.因此有了这个系列的第二篇读后总结. 1. 什么是伪共享(False sharing) ...
- 屏蔽防止被别的网站嵌入框架代码(防止被人frame)
<SCRIPT LANGUAGE=javascript> if (top.location != self.location)top.location=self.location; < ...
- 40个让你的网站屌到爆的jQuery插件
一 个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...
- 一些有用的configue参数
--prefix 指定文件被安装到文件系统中的目录名.例:--prefix=/usr/local/apache --enable-layout 该选项允许你选择一个预先定义好的文件系统结构,也就是可以 ...
- MySQL多配置方式的多实例的部署
安装MySQL需要注意的事项: 选择MySQL的版本的建议: 1)稳定版:选择开源的社区版的稳定版GA版本 2)选择MySQL数据库GA版本发布后六个月以后得GA版本 3)选择发布版本前后几个月没有大 ...
- epub电子书--目录结构介绍
epub电子书简介 epub全称为Electronic Publication的缩写,意为:电子出版, epub于2007年9月成为国际数位出版论坛(IDPF)的正式标准,以取代旧的开放Open eB ...
- android MVC && MVP && MVVM分析和对比
相关:http://www.cnblogs.com/wytiger/p/5305087.html 出处http://blog.csdn.net/self_study,对技术感兴趣的同鞋加群544645 ...