html加载顺序、onload、JQ.ready()

最新推荐文章于 2021-06-24 16:38:21 发布

有且仅有

最新推荐文章于 2021-06-24 16:38:21 发布

阅读量8.2k

点赞数 1

分类专栏： JavaScript 文章标签： jquery javascript html dom ready

本文链接：https://blog.csdn.net/u010297957/article/details/47124209

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML加载顺序

1. html文档中的所有dom标签会被按顺序加载包括css、js的内和外引用，在所有浏览器中都是如此。

1.1 仅有一个特殊情况：当使用document.write("js外引用地址");引用js时，IE不会去及时的加载和执行所引用的js。

解决方案：因为dom是一个标签一个标签加载，为了使后面的js代码使用到了这个外部js内容是不会找不到，可以将这段引用js的输出语句单独写在一个语句块中<script type="text/javascript">******</script>保证它一定被使用。

<span style="font-size:14px;"><script type="text/jscript">
    document.write('<script type="text/javascript" src="test.js"></script>
</script></span>

1.2 也就是说html是同步加载（阻塞加载）的，前面的没有加载完，后边的不会被加载。比如：前面js写了个alert();那么你不去点这个alert的话，后面的所有元素都会在那等着被解析。

1.3 特别提醒：html文档并不十分严谨，即使你在<html></html>外面写div，js也是一样能被加载。

onload事件

1. onload是window对象的事件，它在窗口中所有东西都加载完时会被触发。记住它是窗口(window)中所有东西而不是文档(document)，意味着如果你嵌入了<iframe>或者使用了<frameset>，而其中引用了很大的图片，此事件也会等图片完全加载了才去执行。

2. 当你有需要在window中所有东西都加载完时才去执行的js代码，你可以使用它。但大部分情况下，你的js不需要也不想等window全部加载完。

为什么需要ready()?

1.1 从目的来说，使用ready()函数的原因是你需要一个jquery环境来放置JQ相关代码；JQ团队让你将JQ代码放入一个ready()函数中，他们来保证你写的JQ代码一定能找得到JQ.js中的东西。

1.2 那么我们来看看他们是怎么写这个方法的：

<span style="font-size:18px;">jQuery.ready.promise = function( obj ) {
	if ( !readyList ) {

		readyList = jQuery.Deferred();

		// Catch cases where $(document).ready() is called after the browser event has already occurred.
		// we once tried to use readyState "interactive" here, but it caused issues like the one
		// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
		if ( document.readyState === "complete" ) {
			// Handle it asynchronously to allow scripts the opportunity to delay ready
			setTimeout( jQuery.ready );

		// Standards-based browsers support DOMContentLoaded
		} else if ( document.addEventListener ) {
			// Use the handy event callback
			document.addEventListener( "DOMContentLoaded", completed, false );

			// A fallback to window.onload, that will always work
			window.addEventListener( "load", completed, false );

		// If IE event model is used
		} else {
			// Ensure firing before onload, maybe late but safe also for iframes
			document.attachEvent( "onreadystatechange", completed );

			// A fallback to window.onload, that will always work
			window.attachEvent( "onload", completed );

			// If IE and not a frame
			// continually check to see if the document is ready
			var top = false;

			try {
				top = window.frameElement == null && document.documentElement;
			} catch(e) {}

			if ( top && top.doScroll ) {
				(function doScrollCheck() {
					if ( !jQuery.isReady ) {

						try {
							// Use the trick by Diego Perini
							// http://javascript.nwbox.com/IEContentLoaded/
							top.doScroll("left");
						} catch(e) {
							return setTimeout( doScrollCheck, 50 );
						}

						// detach all dom ready events
						detach();

						// and execute any waiting functions
						jQuery.ready();
					}
				})();
			}
		}
	}
	return readyList.promise( obj );
};</span>

总结其代码逻辑来说：

1. 概念：

1.1 理想的文档加载完==*.html中所有标签元素加载完；这包括js、css的内外引用，不(想)包括图片、iframe和frameset引用的html中所有内容..（其他没测试）。

1.2 准备好ready：JQ定义的一个时间点，不同浏览器不同，JQ非常想使他们统一到一个时间点，但事实并不是，总有些差别。

1.2 标准浏览器：IE9+、FireFox、Chrome、Opera、Safari；他们支持addEventListener事件监听和DOMContentLoaded事件。

2. 流程

a：如果是标准浏览器：先使用标准浏览器都支持的事件DOMContentLoaded来判断文档是否加载完，加载完就认为ready，执行程序员自定义的ready内容。最不济，使用window.onload来触发你的ready代码。

b：如果不是标准浏览器(就是IE低版本)：那就用onreadystatechage来判断文档是否加载完，认为ready。最不济也用window.onload。

b继续，如果是顶层（也就是说不是frame之类的），那么就认为top.doScroll("left");不抛出异常时认为ready。

3. 事实上

JQ非常想要统一其函数在所有浏览器上的体验，包括ready，但是“人生之不如意，十之八九”。

举个例子，IE11支持DOMContentLoaded，那么他会在这个事件发生后执行你的ready，但是如果有iframe和frameset的话IE11默认frame中内嵌的html文档完毕之后才会触发顶级文档的DOMContentLoaded。而Chrome测试就是不等frame中内嵌的html文档加载就会触发。还是不一样。

4. 所以

写JQ方法，请把内容写在ready()中(大多数情况下合适，也可能不合适)，JQ团队尽量保证所有浏览器的统一体验。如有不测风云，造成代码错误，请明白我上面说的这些逻辑，然后请自行调试…