javascript - 为什么 我JS代码放在最后，可以还是比元素先加载出来了？代码很简单
本文介绍了javascript - 为什么 我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>
解决方案
浏览器有五个线程：
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 位）
这篇关于javascript - 为什么 我JS代码放在最后，可以还是比元素先加载出来了？代码很简单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
