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脚本的加载与解析的更多相关文章

  1. LodopJS文档式模版的加载和赋值

    Lodop模版有两种方法,一种是传统的JS语句,可以用JS方法里的eval来执行,一种是文档式模版,是特殊格式的base64码,此篇博文介绍文档式模版的加载,文档式模版的生成以及传统JS模版的生成加载 ...

  2. Lodop的JS模版代码、文档式模版 生成加载赋值博文索引

    Lodop获取全部JS代码,传统JS模版的生成.LODOP设置打印设计返回JS代码是变量 LodopJS代码模版的加载和赋值 Lodop生成文档式模版 LodopJS文档式模版的加载和赋值 由于加载J ...

  3. 如何在word文档中添加mathtype加载项

    MathType是强大的数学公式编辑器,通常与office一起使用,mathtype安装完成后,正常情况下会在word文档中的菜单中自动添加mathtype加载项,但有时也会出现小意外,mathtyp ...

  4. 第一百一十八节，JavaScript，动态加载脚本和样式

    JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...

  5. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  6. js, javascript 图片懒加载 实例代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Javascript图片预加载详解 分类： JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  8. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  9. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

随机推荐

  1. java并发编程学习: 守护线程(Daemon Thread)

    在正式理解这个概念前,先把 守护线程 与 守护进程 这二个极其相似的说法区分开,守护进程通常是为了防止某些应用因各种意外原因退出,而在后台独立运行的系统服务或应用程序. 比如:我们开发了一个邮件发送程 ...

  2. 如何动态在文档中加入＜script＞＜/script＞写入大段js？

    <script language="javascript">var script = document.createElement("script" ...

  3. JS组件系列——Form表单验证神器： BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  4. 【强烈推荐】数据库迁移利器：Migrator.Net

    简介 很郁闷,写了一天的遇到LiveWriter错误,可恶啊 几年前在做项目中第一次接触到了Migrator.Net,就深深被吸引住了,至此以后在新的大项目中,我都会使用Migrator.Net来创建 ...

  5. 基于FPGA的飞机的小游戏

    基于FPGA的飞机的小游戏 实验原理 该实验主要分为4个模块,采用至上而下的设计方法进行设计.由50M的晶振电路提供时钟源,VGA显示控制模块.图形显示控制模块.移动模块的时钟为25M,由时钟分频电路 ...

  6. 覆盖问题：最大覆盖问题（Maximum Covering Location Problem，MCLP）和集覆盖问题（Location Set Covering Problem，LSCP）

    集覆盖问题研究满足覆盖所有需求点顾客的前提下,服务站总的建站个数或建 设费用最小的问题.集覆盖问题最早是由 Roth和 Toregas等提出的,用于解决消防中心和救护车等的应急服务设施的选址问题,他们 ...

  7. 理解C# 4 dynamic(2) – ExpandoObject的使用

    ExpandoObject的使用非常简单,很容易入手.上一篇里面已经有详细的介绍了,可以看这里(理解C# 4 dynamic(1) - var, object, dynamic的区别以及dynamic ...

  8. c++/java/python priority_que实现最大堆和最小堆

    #include<iostream>#include<vector>#include<math.h>#include<string>#include&l ...

  9. Jsoup 使用教程：数据抽取

    1.使用DOM方法来遍历一个文档 问题 你有一个HTML文档要从中提取数据,并了解这个HTML文档的结构. 方法 将HTML解析成一个Document之后,就可以使用类似于DOM的方法进行操作.示例代 ...

  10. SqlServer基础复习

    一.数据类型      包括整数类型(可以用来做主键)的如bit,int ,samllint,tinyint,bigint,存储的范围不同,常用的有int,bigint等:树脂类型decimal(p, ...