标签：触发器 settime 简单的 head 异步加载 w3c com 回调 body
进程线程简单的理解：进程里面可以有多个线程，进程就是QQ，线程就是会话。
浏览器里面的进程：
第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
渲染进程是多线程的：
GUI渲染线程
js引擎线程
事件触发线程
定时触发器线程
异步http请求线程
渲染线程与JS引擎线程互斥
由于JavaScript是可操纵DOM的，如果在修改这些元素属性同时渲染界面（即JS线程和UI线程同时运行），那么渲染线程前后获得的元素数据就可能不一致了。
因此为了防止渲染出现不可预期的结果，浏览器设置GUI渲染线程与JS引擎为互斥的关系，当JS引擎执行时GUI线程会被挂起， GUI更新则会被保存在一个队列中等到JS引擎线程空闲时立即被执行。
举一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
// 页面上的hello world不会变成红色
document.getElementById("app").style.color = "red";
</script>
</head>
<body>
<div id="app">
hello world!
</div>
</body>
</html>JS阻塞页面加载
从上述的互斥关系，可以推导出，JS如果执行时间过长就会阻塞页面。
譬如，假设JS引擎正在进行巨量的计算，此时就算GUI有更新，也会被保存到队列中，等待JS引擎空闲后执行。 然后，由于巨量计算，所以JS引擎很可能很久很久后才能空闲，自然会感觉到巨卡无比。
所以，要尽量避免JS执行时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
总结一下：
标签：触发器 settime 简单的 head 异步加载 w3c com 回调 body
原文地址：https://www.cnblogs.com/liea/p/12499121.html
