为什么 我JS代码放在最后,可以还是比元素先加载出来了?代码很简单

这是什么原因啊?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<p>又遇到一个问题,先alert再加载出来的 这段话  与 图片</p>
 <img src="./定义全局变量的3种方式的副本.png" alt="定义全局变量的3种方式">
<script>
var b =2;
  (function() {
  a = 1;
  alert(a);
}());
</script>
</body>
</html>

图片描述

图片描述

阅读 3.8k
6 个回答

浏览器有五个线程:
1.GUI 渲染线程
2.JavaScript 引擎线程
3.定时触发器线程
4.事件触发线程
5.http 异步请求线程

JavaScript代码在运行时实际有两个阶段,解析阶段和执行阶段,解析阶段会执行函数声明提升(函数声明优先级高于变量)和变量提升,检查语法错误(出现语法错误无法进行到执行阶段),并把定时触发器事件放入定时触发器线程队列,http异步请求事件放入异步请求线程队列,随后进入执行阶段。

在执行阶段,JavaScript引擎线程,定时触发器线程和http异步请求线程将会同时执行,JavaScript引擎线程只会阻塞事件触发线程以及GUI渲染线程,但不会阻塞定时触发器线程(js运行时settimeout会计时),但是alert指令会阻塞定时触发器线程(alert弹出时settimeout暂停计时)。而http异步请求线程是并发的,无法被阻塞

该问题中,由于JavaScript线程优先级最高,所以会先弹出alert,此时GUI渲染线程被阻塞,所以图片一直未被渲染,等待用户操作。而http 异步请求线程未被阻塞,图片实际在此之前已经开始下载了。

测试环境:Chrome 59.0.3071.104(正式版本)(64 位)

alert会阻塞所有线程,其中就包括GUI渲染线程,
所以你理解的没问题,就是alert会打断页面的渲染的。
你可以简单理解为,只要alert执行的话,页面的所有的渲染都是停止、。

简单来说是先解析了dom,但是元素还没到渲染的时候遇到了js,然后里面的alert阻塞了后续的执行。

DOM加载和DOM渲染是两个过程,你alert的时候,DOM是已经加载进来了,但是还没有渲染,被alert阻塞掉了

阻塞进程。。。。

楼上的回答很到位,就是阻塞其他所有进程。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题