• 浏览器内核中各个线程之间的关系


    到了这里,已经对浏览器的运行有了一个整体的概念,接下来,先简单梳理一些概念 :

    GUI渲染线程与JS引擎线程互斥

    由于JavaScript是可操纵DOM的,如果在修改这些元素属性同时渲染界面(即JS线程和UI线程同时运行),那么渲染线程前后获得的元素数据就可能不一致了。

    因此为了防止渲染出现不可预期的结果,浏览器设置GUI渲染线程与JS引擎为互斥的关系,当JS引擎执行时GUI线程会被挂起,
    GUI更新则会被保存在一个队列中等到JS引擎线程空闲时立即被执行。

    JS阻塞页面加载

    从上述的互斥关系,可以推导出,JS如果执行时间过长就会阻塞页面。

    譬如,假设JS引擎正在进行巨量的计算,此时就算GUI有更新,也会被保存到队列中,等待JS引擎空闲后执行。
    然后,由于巨量计算,所以JS引擎很可能很久很久后才能空闲,自然会感觉到巨卡无比。

    所以,要尽量避免JS执行时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。

    WebWorker,JS的多线程?

    前文中有提到JS引擎是单线程的,而且JS执行时间过长会阻塞页面,那么JS就真的对cpu密集型计算无能为力么?

    所以,后来HTML5中支持了Web Worker

    MDN的官方解释是:

    Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面  一个worker是使用一个构造函数创建的一个对象(e.g. Worker()) 运行一个命名的JavaScript文件   这个文件包含将在工作线程中运行的代码; workers 运行在另一个全局上下文中,不同于当前的window  因此,使用 window快捷方式获取当前全局的范围 (而不是self) 在一个 Worker 内将返回错误

    这样理解下:

    • 创建Worker时,JS引擎向浏览器申请开一个子线程(子线程是浏览器开的,完全受主线程控制,而且不能操作DOM)

    • JS引擎线程与worker线程间通过特定的方式通信(postMessage API,需要通过序列化对象来与线程交互特定的数据)

    所以,如果有非常耗时的工作,请单独开一个Worker线程,这样里面不管如何翻天覆地都不会影响JS引擎主线程,
    只待计算出结果后,将结果通信给主线程即可,perfect!

    而且注意下,JS引擎是单线程的,这一点的本质仍然未改变,Worker可以理解是浏览器给JS引擎开的外挂,专门用来解决那些大量计算问题。

    其它,关于Worker的详解就不是本文的范畴了,因此不再赘述。

  • 相关阅读:
    react中实现滚动到指定位置固定显示导航栏,反之浸入背景
    activeElement解决ios滚动到底部显示内容时,键盘挡住显示内容的问题
    公积金无租房备案提取如何办理?(以成都为例)
    公积金状态封存怎么解封?
    你应该知道的公积金基础知识科普
    react antd表单不用form.create方法怎么设置input 回显值
    简述个人账户向公司账户转账的方法
    js拖拽进入和离开重复触发的问题
    Electron截屏功能
    Electron在mac下快捷键失效的问题及解决
  • 原文地址:https://www.cnblogs.com/crith/p/9961296.html
Copyright © 2020-2023  润新知