javaScript高性能执行和加载(动态地创建script元素)

最新推荐文章于 2024-06-17 17:10:14 发布

程宇寒

最新推荐文章于 2024-06-17 17:10:14 发布

阅读量759

点赞数

文章标签： javaScript js 动态加载script元素前端开发高性能

本文链接：https://blog.csdn.net/czh500/article/details/105401262

版权

javaScript阻塞特性

javaScript中有个阻塞的特性，就是当浏览器在执行js代码时，不能同时做其他任何事情，无论js代码是内嵌的还是外部引入的。

为了改善上面的阻塞情况，应尽可能的减少页面中<script>标签的出现次数，这同时也是考虑到http请求会带来额外的性能开销，也就是说应减少页面中外链脚本的数量。

怎样才能解决 javaScript中阻塞的问题呢？解决方式不止一种，我这里就先写一种吧。

解决方式1：动态的创建<script>元素

直接po截图和代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javaScript高性能执行和加载(动态地创建script元素)</title>
</head>
<body>
<h3>javaScript高性能执行和加载(动态地创建script元素)</h3>
</body>
<script type="text/javascript">
function load_script(url, callback) {
	var script = document.createElement("script");
	script.type = "text/javascript";
	if (script.readyState) { //IE浏览器   
		script.onreadystatechange = functio()
		{
			if (script.readyState == "loaded"
					|| script.readyState == "complete") {
				script.onreadystatechange = null;
				callback();
			}
		}
	} else { //others
		script.onload = function() {
			console.log(url + '文件加载完毕了...........');
			callback();
		}
	}
	script.src = url;
	console.log('设置<script>元素的src属性完毕===============');
	document.getElementsByTagName("head")[0].appendChild(script);
	console.log('将<script>元素添加到dom树完毕################');
}

//当要加载多个js脚本文件时，为了确保正确的加载顺序，可以将load_script()函数的执行串联起来
load_script('js/a.js',function(){
	load_script('js/b.js',function(){
		load_script('js/c.js',function(){
			//这里写全部js文件载入后的操作
			console.log('--------哈哈哈,全部js文件载入完毕喽，开心到起飞！--------');
		})
	})
});
</script>
</html>