江苏龙网

  1. 首页 > 资讯 > 科技 > >

『』知道html5 Web Worker标准吗？能实现JavaScript的多线程？

js为什么是单线程？
主要是因为最开始javascript是单纯的服务于浏览器的一种脚步语言（那时候没有nodejs） 。浏览器是为了渲染网页 ， 通过dom与用户交互 ， 如果一个线程需要给dom执行click事件 ， 而另一个进程要删除这个dom ， 这2个动作可能同时进行 ， 也可能先后进行（像java,c#等语言中会引入锁的概念 ， 这样会变得异常复杂） ， 那么就会造成很多不可预料的错误 。
所以 ， 为了避免复杂性 ， 从一诞生 ， JavaScript就是单线程 ， 这已经成了这门语言的核心特征 。为了利用多核CPU的计算能力 ， HTML5提出Web Worker标准 ， 允许JavaScript脚本创建多个线程 ， 但是子线程完全受主线程控制 ， 且不得操作DOM 。所以 ， 这个新标准并没有改变JavaScript单线程的本质 。
浏览器是多线程的
浏览器打开一个tab ， 就会单独开一个进程 ， 这个进程包含多个线程
主要包含的线程有：
GUI渲染线程
负责渲染浏览器界面 ， 解析HTML ， CSS ， 构建DOM树和RenderObject树 ， 布局和绘制等 。
当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时 ， 该线程就会执行
注意 ， GUI渲染线程与JS引擎线程是互斥的 ， 当JS引擎执行时GUI线程会被挂起（相当于被冻结了） ， GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行 。JS引擎线程
也称为JS内核 ， 负责处理Javascript脚本程序 。（例如V8引擎）
JS引擎线程负责解析Javascript脚本 ， 运行代码 。
JS引擎一直等待着任务队列中任务的到来 ， 然后加以处理 ， 一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序
同样注意 ， GUI渲染线程与JS引擎线程是互斥的 ， 所以如果JS执行的时间过长 ， 这样就会造成页面的渲染不连贯 ， 导致页面渲染加载阻塞 。事件触发线程
归属于浏览器而不是JS引擎 ， 用来控制事件循环（可以理解 ， JS引擎自己都忙不过来 ， 需要浏览器另开线程协助）
当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等） ， 会将对应任务添加到事件线程中
当对应的事件符合触发条件被触发时 ， 该线程会把事件添加到待处理队列的队尾 ， 等待JS引擎的处理
注意 ， 由于JS的单线程关系 ， 所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行） 定时触发器线程
传说中的setInterval与setTimeout所在线程
浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确）
因此通过单独线程来计时并触发定时（计时完毕后 ， 添加到事件队列中 ， 等待JS引擎空闲后执行）
注意 ， W3C在HTML标准中规定 ， 规定要求setTimeout中低于4ms的时间间隔算为4ms 。异步http请求线程
在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
将检测到状态变更时 ， 如果设置有回调函数 ， 异步线程就产生状态变更事件 ， 将这个回调再放入事件队列中 。再由JavaScript引擎执行 。
上面列出的线程之间 ， 有一个重要的规则是:GUI渲染线程与JS引擎线程互斥 ， 那么我们可以得出以下结论JS阻塞页面加载 ， 那么在js运行的这段时间内 ， GUI的渲染会停止 ， 这段时间内的界面交互 ， DOM的重绘与回流会停止 ， 会被保存到待执行队列中 ， 直到js线程空闲 ， 才会执行这些队列 。
我们用下面的一段代码和运行结果来说明这个机制：
.box {width: 200px;height: 200px;margin-top: 100px;background: #f09;animation: bounce 2s linear 0s infinite alternate;background-image: linear-gradient(45deg, #3023AE 0%, #f09 100%);}@keyframes bounce {0% {border-radius: 40% 60% 72% 28% / 70% 77% 23% 30%;}100% {border-radius: 75% 25% 24% 76% / 13% 15% 85% 87%;}}


推荐阅读


上一篇：『』iQOO发布Z1：延续品牌特征，用联发科扛起性价比大旗

下一篇：：看点：天玑1000红米10X Pro、天玑800+90Hz屏华为畅享Z