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

你的名字 2023-07-24 02:52 28阅读 0赞

** javaScript阻塞特性**

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

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

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

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

**直接po截图和代码**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5][]

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20230528/af8f50113a5d442b99b2bcc4016852b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20230528/6186962a123b47658bf410cde1dc8c02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: /images/20230528/84aaf7bea8cf45a69919c4e210a6e3dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3]: /images/20230528/3d762c2ac47e4c76a04961b9647a1a0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4]: /images/20230528/3d361fa2bc6141e29e05305fe940081e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5]: /images/20230528/efd3a132e66049029b77d51506f7cb9a.png