关于js在页面的装载与执行的一些问题

最新推荐文章于 2022-10-13 21:40:01 发布

BUFan97

最新推荐文章于 2022-10-13 21:40:01 发布

阅读量181

点赞数

分类专栏：问题文章标签： JavaScript

本文链接：https://blog.csdn.net/BUFan63759/article/details/88380503

版权

问题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

javascript在html中的加载顺序

通常来说，浏览器对于Javascript的运行有两大特性：1）载入后马上执行，2）执行时会阻塞页面后续的内容
Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree

按HTML文档流顺序执行JavaScript代码，那么我们按照初学的HTML框架

<html>
<head>
<script type="text/javascript" src="">
		js代码
</script> 
</head>
<body>
	页面元素
</body>
</html>

在这里插入图片描述

在页面加载时，存在于head标签中的JavaScript脚本就会执行，而此时DOM树还未加载其后面的节点，这就会导致HTML被阻塞，JavaScript脚本报错，找不到对象。

解决方法

（1）将JS文件都放在</body>甚至</HTML>后面后再进行调用

（2）将JS代码封装在window.onload或是docmuemt.ready之类的事件

以上为同步载入js的方法，主要因为 js 中可能有输出 document 内容、改动dom、重定向等行为，所以默认同步运行才是安全的，但很有可能堵塞浏览器的处理。
所以又有了异步加载js
简单说：同步载入js是瀑布模型，而异步加载js是并发模型。

网上比较常见的异步载入写法

常见异步载入（Script DOM Element）

(function() { 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'xxx.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
})();

动态创建DOM方式

function loadjs(script_filename) {
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', script_filename);
    script.setAttribute('id', 'coolshell_script_id');
 
    script_id = document.getElementById('coolshell_script_id');
    if(script_id){
        document.getElementsByTagName('head')[0].removeChild(script_id);
    }
    document.getElementsByTagName('head')[0].appendChild(script);
}
 
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs(script);

异步载入的其他方法
由于Javascript的动态特性，还有非常多异步载入方法：

XHR Eval
XHR Injection
Script in Iframe
Script Defer
document.write Script Tag

BUFan97

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于js在页面的装载与执行的一些问题

javascript在html中的加载顺序通常来说，浏览器对于Javascript的运行有两大特性：1）载入后马上执行，2）执行时会阻塞页面后续的内容按HTML文档流顺序执行JavaScript代码，那么我们按照初学的HTML框架&lt;html&gt;&lt;head&gt;&lt;script type="text/javascript" src=""&gt; js代码&lt...
复制链接

扫一扫

专栏目录