阅读 82

浏览器渲染原理

原文链接: github.com

让我们了解一些浏览器的工作原理,一探究竟。一旦我们了解了浏览器是如何工作的,我们就可以更好的去驾驭它。 现代浏览器通常拥有两个重要的执行线程,这两个线程相互配合来渲染出页面:

  • 主线程
  • 排版线程

通常情况下,主线程主要负责以下工作:

  • 运行JavaScript
  • 计算HTML元素的CSS样式
  • 布局页面
  • 把页面元素绘制成一个或多个位图
  • 把这些位图移交给排版线程

通常情况下,排版线程主要负责以下工作:

  • 通过GPU渲染位图,并显示在屏幕上
  • 向主线程请求更新位图的可见部分或即将可见的部分
  • 判断出当前页面处于可见的部分
  • 判断出即将通过页面滚动而可见的部分
  • 随着用户滚动页面来移动这些部分(译者注:可见部分的和即将可见的部分)

当长时间运行JavaScript或渲染一个很多的元素时,主线程会一直处于忙碌状态。在这期间它不会对用户的输入做出任何反应。

在另一方面,排版线程对用户输入保持着非常快的响应。当页面变化时,排版线程尝试以每秒60帧的速度去重绘页面,即便这时页面还不完整。

举例来说,当用户滚动页面时,排版线程向主线程请求更新页面新显示部分的位图,但是,如果此时主线程并不能迅速响应请求,排版线程并不会去等待响应,它会用它目前所拥有的这部分页面的内容去渲染页面,由于对应的内容还没有,所以会以白板的形式渲染出来。

文章分类
前端