WEB学习进阶之路二

举报
sujrexia 发表于 2020/06/17 17:10:47 2020/06/17
【摘要】 要熟练并审核的掌握js,就必须对js的运行原理和机制了如指掌,本次就学习下js的运行原理和机制现代浏览器都是多进程的,一个窗口就是一个进程。js是单线程运行的,主要是js可以操作dom,多线程运行时,一个删除,一个新增,算哪个,所以未来js依旧会是单线程运行。浏览器打开一个窗口至少有4个进程1. 一个主进程,负责资源下载,界面展示等主要基础功能;2. 一个GPU进程,负责3D图示绘制;3. ...

要熟练并深刻的掌握js,就必须对js的运行原理和机制了如指掌,本次就学习下js的运行原理和机制

  • 现代浏览器都是多进程的,一个窗口就是一个进程。

  • js是单线程运行的,主要是js可以操作dom,多线程运行时,一个删除,一个新增,算哪个,所以未来js依旧会是单线程运行。

  • 浏览器打开一个窗口至少有4个进程

    1. 一个主进程,负责资源下载,界面展示等主要基础功能;

    2. 一个GPU进程,负责3D图示绘制;

    3. 一个网络进程,负责网络通信;

    4. 一个渲染进程,负责js执行,页面渲染等功能;

    5. 一个插件进程,如果有浏览器插件,可以有多个;

    不过需要注意一点,这些知识只是目前有效,后面随着技术的发展,这些知识可能就过期了,记住定期更新自己的知识

    比如我的电脑:


接下来学习下这几个进程中最主要的渲染进程,也是本章节的主要内容

GUI渲染线程

   打开浏览器,看到一个页面,操作如下

  1. 解析html代码,生成dom tree

  2. 解析css代码,生成cssom

  3. 集合dom tree和cssom生成 rendering tree

  4. 如果修改了颜色,背景等,gui就会repaint;如果改变了元素的尺寸,gui就会reflow;这里有个知识点,reflow的成本比repaint的成本要高

JS引擎线程

也就是常说的js内核,js引擎和gui线程只能同时一个工作,js优先执行,js执行时,gui停止渲染,js就阻塞了gui渲染,记住这点,优化页面于此息息相关。

JS定时器线程

由于js是单线程的,js就重新开一个计时器线程,等时间到了之后,js计时器线程就把任务放到任务队列尾部,等js引擎线程来执行

JS异步线程

异步线程执行异步的http请求,当请求完成后,就是收到响应(通过http状态来判断),将任务放到任务队列尾部,等js引擎线程来执行

事件循环线程

事件循环线程管理者task queue,当js执行过程中碰到事件绑定,异步操作,定时任务时;当期完成时,将其的回掉或者操作放到task queue的队尾,等js引擎线程空闲时执行。

对于event loop,这里用一张网络盗图看看执行过程,

关于setTimeout和setInterval

setTimeout是一次性的,setInterval是循环的;

时间累积,当使用setInterval时,任务执行的时间大于定时的时间,就会造成时间累积,累积会造成事件丢失。所以特殊情况下可以使用setTimeout代替setInterval

<script>
function foo() {
    setTimeout("foo", 1000);
    //todo something...
}

setTimeout("foo", 1000);
</script>

setTimeout("bar", 0); 表示尽快执行,就是说主线程的事件处理完成之后,第一时间或者最快执行bar

关于定时器执行时,并不是很准确,主要有以下几个原因,

第一,定时线程的时间到了,将任务放到任务队列,但是如果主线程被占用,那么这个任务就会一直等待,知道主线程任务完成

第二,定时器在各个浏览器实现时,有最小时间限制,比如在嵌套层数过深时,就会导致回掉阻塞

第三,未被激活的tabs,各个浏览器最小时间也不一样,比如firefox是1s

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。