现代浏览器工作原理

翻译自:adobe博客

Modern browsers typically have two important threads of execution. These threads work together to render a web page:
现代浏览器渲染网页的两个重要线程:主线程和合成线程

The main thread
The compositor thread
Typically, the main thread is responsible for:
主线程主要负责:

Running your JavaScript.
执行js脚本
Calculating your HTML elements’ CSS styles.
计算页内元素样式
Laying out your page.
装载网页
Painting your elements into one or more bitmaps.
把元素画进一个或多个位图
Handing these bitmaps over to the compositor thread.
把这些位图移交给合成线程
Typically, the compositor thread is responsible for:
合成线程主要负责:

Drawing bitmaps to the screen via the GPU.
用GPU把位图渲染到屏幕
Asking the main thread to update bitmaps for visible or soon-to-be-visible parts of the page.
通知主线程更新可见位图,或者准备位图
Figuring out which parts of the page are visible.
画出位图的可见部分
Figuring out which parts are soon-to-be-visible when you’re scrolling.
准备即将可见的位图部分
Moving parts of the page when you scroll.
屏幕滚动式,渲染对应部分到屏幕
The main thread can be busy for long periods of time running your JavaScript or painting a large element.
这个时候主线程可能忙得不亦乐乎,由于你调用js脚本,或者渲染大型页内元素
While it’s busy, it’s not responsive to user input.
所以,对用户的事件毫无响应

On the other hand, the compositor thread tries to stay extremely responsive to user input.
另一方面,合成线程却对用户的事件有求必应
The compositor tries to redraw the page 60 times per second when the page is changing, even if the page is incomplete.
当网页发生变化时,合成线程尽力做到每秒渲染页面60次,甚至在页面还没有被准备好时。

For example, when the user scrolls a page, the compositor thread asks the main thread to update the bitmaps for newly visible parts of the page.
例如:用户滑动网页,合成线程就会要求主线程为新的页面生成新的位图
However, if the main thread doesn’t respond quickly enough, the compositor doesn’t wait.
然而,主线程并不能立即响应,合成线程也不会等下去
The compositor draws the parts of the page it has so far and draws white elsewhere.
合成线程依然把页面画出来,没有完成的页面部分就被填充成白色(常见这种情况google chrome)

The GPU
I mentioned the compositor thread draws bitmaps to the screen using the GPU. Let’s quickly go over the GPU.
下面讲讲GPU的处理部分

The GPU is a chip found in most phones, tablets, and computers today. It’s extremely specialized,
现代手机、平板已经完全支持GPU芯片
meaning it’s really good at certain things, and it’s not that great at others.
它非常擅长做一些事

GPUs are really fast at:
它的强项有:

Drawing to the screen.
画图到屏幕
Drawing the same bitmap over and over again.
不断的重复画图
Drawing the same bitmap in a different position, rotation, or scale.
根据不同位置、旋转度、缩放画同一幅图

GPUs are relatively slow at:
当然,它也有不擅长

Loading bitmaps into their memory.
把位图装载进内存。