JavaScript同步与异步加载的三种方法，企业级异步加载

最新推荐文章于 2024-09-14 18:52:56 发布

智者潜行

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量135

点赞数

分类专栏：从头再来文章标签： javascript

本文链接：https://blog.csdn.net/lfoy112/article/details/106769411

版权

从头再来专栏收录该内容

10 篇文章 0 订阅

订阅专栏

	<!--防止js阻塞html渲染。也防止js文件里面有操作dom时出错。-->
	<!--属性defer IE8及以下使用的。 等 待dom加载完了才下载-->
	<!--W3C html5属性，IE9及以上支持，写下属性async ，装逼用的。可以完整显示-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			console.log('111');
		</script>
		<!--写下属性async ，装逼用的。可以完整显示-->
	</head>
	<body>
		<div id="">

		</div>
		<!--防止js阻塞html渲染。也防止js文件里面有操作dom时出错。-->
		<!--属性defer IE8及以下使用的。 等 待dom加载完了才下载-->
		<!--W3C html5属性，IE9及以上支持，写下属性async ，装逼用的。可以完整显示-->
		<script src="js/utils.js" type="text/javascript" charset="utf-8" async="async"></script>

		<script type="text/javascript">
			function async_load() {
				var s = document.createElement('script'),
					oScript = document.getElementsByTagName('script')[0];
				s.type = "text/javascript";
				//一设置scr属性，资源就开始下载
				s.src = "js/utils.js";
				s.async = true;
				oScript.parentNode.insertBefore(s, oScript);
				//document.body.appendChild(s);
			}
			if (window.attachEvent) {
				window.attachEvent('onload', async_load)
			} else {
				window.addEventListener('load', async_load, false);
			}


			function exec_util_width_loading_script(url, fn) {
				var s = document.createElement('script'),
				oScript = document.getElementsByTagName('script')[0];
				s.type = 'text/javascript';
				//兼容IE
				if (s.readyState) {
					s.onreadystatechange = function() {
						var state = s.readyState;
						if (state === 'complate' || state === 'loaded') {
							utils[fn]();
						}
					}
				} else {
					//W3C
					s.onload = function() {

					}
				}
				s.scr = "utils.js";
				oScript.parentNode.insertBefore(s, oScript);
			}
			exec_util_width_loading_script('utils.js','test');
		</script>
	</body>
</html>