JavaScript的猜测预加载

最新推荐文章于 2024-08-16 23:38:56 发布

wanzizhe

最新推荐文章于 2024-08-16 23:38:56 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/wanzizhe/article/details/79067746

本文通过一个简单的HTML页面示例，详细解析了JavaScript代码在不同位置（如头部、body内部及外部script标签）的执行顺序，并解释了浏览器预加载机制如何影响页面渲染与脚本执行的顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head 
runat="server">
<title>测试js的执行顺序</title>
<scriptlanguage="javascript"type="text/javascript">
var a 
= "这是一段在Header里面的JS代码";
alert(a);
</script>
</head>
<body 
onload="javscript:alert('这是在body的Onload事件中的代码！');">
<form 
id="form1"runat="server">
<div>
<p>测试一下js的执行顺序
</p>
</div>
</form>
<scriptlanguage="javascript"type="text/javascript">
var a 
= "这是body最后的JS代码";
alert(a);
</script>
</body>
</html>
<script>
alert("我是html后面的script");
</script>
输出结果为：（1）弹出：这是一段在Header里面的JS代码
（2）弹出：这是body最后的JS代码
（3）弹出：我是html后面的script 的同时页面显示 测试一下js的执行顺序
（4）最后弹出：这是在body的Onload事件中的代码！
这时候就有疑问了，为什么（3）中的测试一下js的执行顺序 在（2）这是body最后的JS代码之后才显
示在页面上的呢？
这就是浏览器猜测预加载功能！！！
在遇到第一个<script>标签的时候，被阻塞，但是这是预加载器（Speculativeloader）继续“阅读”
文档，发现了第二个body中的<script>标签，并试图加载它，在第一个<script>标签加载完成之后，
解析器发现了第二个body中的<script>标签，由于预加载器已经把它加载下来了，放在了浏览器的缓
存里，所以会被立即执行，之后，浏览器才会收到渲染请求<p>测试一下js的执行顺序</p>显示在页面
上。