前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >知识点归纳笔记:关于浏览器内核的多线程机制

知识点归纳笔记:关于浏览器内核的多线程机制

作者头像
用户1272076
发布2019-03-26 17:34:27
8080
发布2019-03-26 17:34:27
举报
文章被收录于专栏:张培跃张培跃
一、什么是浏览器内核

浏览器内核即浏览器底层最核心和最基础的那一部分,它主要负责对网页当中的 htmlcssJavaScript进行解释然后在浏览器当中进行渲染最终呈现给用户,也就是说内核的工作就是渲染,所以我们常常把浏览器内核称为 渲染引擎(Rendering Engine)也称为 布局引擎(Layout Engine)、 排版引擎

另外,由于不同浏览器的渲染内核不同,对 htmlcssJavaScript的语法解释也存在差异(兼容问题),因此我们在开发过程中需要在不同内核的浏览器当中进行网页渲染效果的测试。

二、五大浏览器四大内核

五大主流浏览器分别为:IE,火狐(Firefox),谷歌(Chrome),Safari,Opera

四大内核分别是:Trident,Webkit,Blink,Gecko

对照表:

浏览器

内核

Chrome

Blink

FireFox

Gecko

Safari

Webkit

Opera

Blink

IE

Trident

三、内核是浏览器的进程之一

我想说的是:浏览器内核对页面的渲染,其实就是浏览器的渲染进程即Renderer进程。该进程拥有多个线程,这些线程共同来完成页面的渲染任务。那么都有哪些线程呢,如下:

1、浏览器GUI(Graphical User Interface-----图形用户界面)渲染线程
  • 负责对浏览器界面进行渲染。
  • 当刷新或由于某些操作对界面局部渲染时,该线程会被执行。
  • 注意, GUI渲染线程JavaScript引擎线程是互斥的(不会同时执行的),即当 JavaScript引擎线程执行时 GUI线程会被冻结,GUI更新需要等到 JavaScript引擎线程空闲时,才会执行。
2、JavaScript引擎线程
  • 负责解析、运行 JavaScript脚本。
  • 一个标签页(渲染进程)中只会有一个 JavaScript引擎线程运行 JavaScript脚本。(JS是单线程的)
  • 同样注意,因为 GUI渲染线程JavaScript引擎线程是互斥的,所以如果 JS执行的时间过长,会造成页面的渲染不连贯,甚至渲染加载阻塞。
3、浏览器定时器触发线程(setTimeout、setInterval)
  • setTimeoutsetInterval所在的线程。
  • 由于 JavaScript引擎是单线程的,如果处于阻塞线程状态势必会影响计时的准确性,所以浏览器中的定时器并不是由 JavaScript引擎来计数的。
  • 该线程只是计时,一旦计时完毕后,会将触发的脚本添加到 JavaScript引擎的处理队列中,等待 JavaScript引擎空闲后再执行。
  • 注意, W3CHTML标准中规定,规定要求 setTimeout中低于 4ms的时间间隔算为 4ms
4、浏览器事件触发线程
  • JS脚本的执行不会影响到 html元素事件的触发,由于 JS单线程关系,会将触发后需要执行的 JS脚本添加到 JavaScript引擎的处理队列中,当 JavaScript引擎空闲时才会去执行。
  • 注意,该线程只是触发,触发后要执行的代码依然要放到JS引擎线程中去执行。
5、浏览器http异步请求线程
  • XMLHttpRequest在连接后会通过浏览器新开一个线程请求
  • 当状态发生变化时,如果之前有设置回调,会将这个回调再放入 JavaScript引擎的处理队列中,再由JavaScript引擎执行。
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-03-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 张培跃 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、什么是浏览器内核
  • 二、五大浏览器四大内核
    • 对照表:
    • 三、内核是浏览器的进程之一
      • 1、浏览器GUI(Graphical User Interface-----图形用户界面)渲染线程
        • 2、JavaScript引擎线程
          • 3、浏览器定时器触发线程(setTimeout、setInterval)
            • 4、浏览器事件触发线程
              • 5、浏览器http异步请求线程
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档