现代浏览器内部揭秘（第一部分） #4419

Colafornia · 2018-09-08T16:21:19Z

译文翻译完成，resolve #4409

注：

原文后来有更新，md 文件中的图片源有更改，原文也多了一段关于沙箱的内容
文中有一个表格，以 markdown 表格书后行数对不上，先以空行占位，校对完成后删去空行

CoderMing · 2018-09-09T06:39:46Z

校对认领

fanyijihua · 2018-09-09T06:39:48Z

@CoderMing 好的呢 🍺

CoderMing · 2018-09-09T06:48:57Z

TODO1/inside-look-at-modern-web-browser-part1.md


-In this 4-part blog series, we’ll look inside the Chrome browser from high-level architecture to the specifics of the rendering pipeline. If you ever wondered how the browser turns your code into a functional website, or you are unsure why a specific technique is suggested for performance improvements, this series is for you.
+这一博客系列由四部分组成，将从高级体系结构到渲染管道的细节来窥探 Chrome 浏览器的内部。如果你曾对浏览器是如何将代码转化为功能性网站，或者你并不确定为何建议使用某一技术来提升性能，那么本系列就是为你准备的。


渲染管道 -> 渲染流程
功能性网站 -> 具有功能的网站。功能性网站涉及的面有点窄

CoderMing · 2018-09-09T06:52:24Z

TODO1/inside-look-at-modern-web-browser-part1.md


-Figure 2: Many GPU cores with wrench suggesting they handle a limited task
+图 2：许多带扳手的 GPU 内核意味着它们只能处理有限任务


许多带扳手的 GPU -> 许多带特定扳手的 GPU 这样更易理解

CoderMing · 2018-09-09T06:53:11Z

TODO1/inside-look-at-modern-web-browser-part1.md


-**G**raphics **P**rocessing **U**nit - or **GPU** is another part of the computer. Unlike CPU, GPU is good at handling simple tasks but across multiple cores at the same time. As the name suggests, it was first developed to handle graphics. This is why in the context of graphics "using GPU" or "GPU-backed" is associated with fast rendering and smooth interaction. In recent years, with GPU-accelerated computing, more and more computation is becoming possible on GPU alone.
+**图形处理器**（**Graphics Processing Unit**）简称为 **GPU** 是计算机的另一部件。与 CPU 不同，GPU 擅长同时处理跨内核的简单任务。顾名思义，它最初是为解决图形而开发的。这就是为什么在图形环境中“使用 GPU” 或“GPU 支持”都与快速渲染和顺滑交互有关。近年来随着 GPU 加速计算，仅靠 GPU 一己之力也使得越来越多的计算成为可能。


（Graphics Processing Unit）简称为 GPU -> （Graphics Processing Unit，简称为 GPU）

顺滑交互 -> 流畅交互

GPU 加速计算 -> GPU 加速计算的普及。这里如果不加普及的话有点语病

CoderMing · 2018-09-09T07:20:24Z

TODO1/inside-look-at-modern-web-browser-part1.md


-So how is a web browser built using processes and threads? Well, it could be one process with many different threads or many different processes with a few threads communicating over IPC.
+那么如何通过进程和线程构建 web 浏览器呢？它可能由一个拥有很多线程的进程，或是具有许多通过 IPC 通信的不同进程。


或是具有许多通过 IPC 通信的不同进程。 -> 或是一些通过 IPC 通信的不同线程的进程。

CoderMing · 2018-09-09T07:23:39Z

TODO1/inside-look-at-modern-web-browser-part1.md


-At the top is the browser process coordinating with other processes that take care of different parts of the application. For the renderer process, multiple processes are created and assigned to each tab. Until very recently, Chrome gave each tab a process when it could; now it tries to give each site its own process, including iframes (see [Site Isolation](#site-isolation)).
+顶部是浏览器线程，它与处理应用其它模块任务的进程进行协调。对于渲染进程来说，创建了多个渲染进程并分配给了每个标签页。直到最近，Chrome 在可能的情况下给每个标签页分配一个进程。现在它试图给每个站点分配一个进程，包括 iframe（参见[站点隔离](#每个-iframe-的渲染进程--站点隔离)）。


现在它试图给每个站点分配一个进程 -> 而现在它试图给每个站点分配一个进程。这处的意思是最近才有所改变，加个衔接词更易理解

Colafornia · 2018-09-11T02:25:05Z

@CoderMing 感谢宝贵意见，已修改

sakila1012 · 2018-09-12T07:06:21Z

校对认领

fanyijihua · 2018-09-12T07:06:23Z

@sakila1012 妥妥哒 🍻

sakila1012 · 2018-09-13T01:22:14Z

TODO1/inside-look-at-modern-web-browser-part1.md


-First is the **C**entral **P**rocessing **U**nit - or **CPU**. The CPU can be considered your computer’s brain. A CPU core, pictured here as an office worker, can handle many different tasks one by one as they come in. It can handle everything from math to art while knowing how to reply to a customer call. In the past most CPUs were a single chip. A core is like another CPU living in the same chip. In modern hardware, you often get more than one core, giving more computing power to your phones and laptops.
+第一个需要了解的计算机部件是 **中央处理器（Central Processing Unit）**，或简称为 **CPU**。CPU 可以看作是计算机的大脑。一个 CPU 核心如图中的办公人员，可以逐一解决很多不同任务。解决从数学到艺术一切任务的同时还知道如何响应客户要求。过去 CPU 大多是单芯片的，一个核心就像存在于同芯片的另一个 CPU。随着现代硬件发展，你经常会有不止一个内核，给你的手机和笔记本提供更多的计算能力。


解决从数学到艺术一切任务的同时还知道如何响应客户要求。 ->它可以在解决从数学到艺术一切任务的同时还知道如何响应客户要求。

sakila1012 · 2018-09-13T01:26:09Z

TODO1/inside-look-at-modern-web-browser-part1.md


-First is the **C**entral **P**rocessing **U**nit - or **CPU**. The CPU can be considered your computer’s brain. A CPU core, pictured here as an office worker, can handle many different tasks one by one as they come in. It can handle everything from math to art while knowing how to reply to a customer call. In the past most CPUs were a single chip. A core is like another CPU living in the same chip. In modern hardware, you often get more than one core, giving more computing power to your phones and laptops.
+第一个需要了解的计算机部件是 **中央处理器（Central Processing Unit）**，或简称为 **CPU**。CPU 可以看作是计算机的大脑。一个 CPU 核心如图中的办公人员，可以逐一解决很多不同任务。解决从数学到艺术一切任务的同时还知道如何响应客户要求。过去 CPU 大多是单芯片的，一个核心就像存在于同芯片的另一个 CPU。随着现代硬件发展，你经常会有不止一个内核，给你的手机和笔记本提供更多的计算能力。


随着现代硬件发展，你经常会有不止一个内核，给你的手机和笔记本提供更多的计算能力。 -> 随着现代硬件发展，你经常会有不止一个内核，为你的手机和笔记本电脑提供更多的计算能力。

sakila1012 · 2018-09-13T02:20:07Z

TODO1/inside-look-at-modern-web-browser-part1.md

-Handles GPU tasks in isolation from other processes. It is separated into different process because GPUs handles requests from multiple apps and draw them in the same surface.
+| 进程 | 控制 |
+| -----|-----|
+| 浏览器 | 控制应用中的 “Chrome” 部分，包括地址栏，书签，回退与前进按钮。以及处理不可见的特权部分，如网络请求与文件访问。 |


以及处理 web 浏览器不可见的特权部分

sakila1012 · 2018-09-13T02:24:27Z

TODO1/inside-look-at-modern-web-browser-part1.md


-There are even more processes like the Extension process and utility processes. If you want to see how many processes are running in your Chrome, click the options menu icon more_vert at the top right corner, select More Tools, then select Task Manager. This opens up a window with a list of processes that are currently running and how much CPU/Memory they are using.
+还有更多进程如扩展进程与应用进程。如果你想要了解有多少进行运行在你的 Chrome 浏览器中，可以点击右上角的选项菜单图标，选择更多工具，然后选择任务管理器。然后会打开一个窗口，其中列出了当前正在运行的进程以及它们当前的 CPU/内存使用量。


如果你想要了解有多少进行运行在你的 Chrome 浏览器中 -> 如果你想要了解有多少进程运行在你的 Chrome 浏览器中

sakila1012 · 2018-09-13T02:27:55Z

TODO1/inside-look-at-modern-web-browser-part1.md


-Earlier, I mentioned Chrome uses multiple renderer process. In the most simple case, you can imagine each tab has its own renderer process. Let’s say you have 3 tabs open and each tab is run by an independent renderer process. If one tab becomes unresponsive, then you can close the unresponsive tab and move on while keeping other tabs alive. If all tabs are running on one process, when one tab becomes unresponsive, all the tabs are unresponsive. That’s sad.
+前文中提到了 Chrome 使用多个渲染进程。最简单的情况下，你可以想象每个标签页都有自己的渲染进程。假设你打开了三个标签页，每个标签页都拥有自己独立的渲染进程。如果某个标签页失去响应，你可以关掉这个标签页，此时其它标签页依然运行着，可以正常使用。如果所有标签页都运行在同一进程上，那么当某个失去响应，所有标签页都会失去响应。真是个悲伤的故事。


真是个悲伤的故事。 -> 这样体验很差

sakila1012 · 2018-09-13T02:34:43Z

TODO1/inside-look-at-modern-web-browser-part1.md


-Because processes have their own private memory space, they often contain copies of common infrastructure (like V8 which is a Chrome's JavaScript engine). This means more memory usage as they can't be shared the way they would be if they were threads inside the same process. In order to save memory, Chrome puts a limit on how many processes it can spin up. The limit varies depending on how much memory and CPU power your device has, but when Chrome hits the limit, it starts to run multiple tabs from the same site in one process.


从此段开始翻译不对应，译主调整下位置

sakila1012 · 2018-09-13T02:38:03Z

TODO1/inside-look-at-modern-web-browser-part1.md


-General idea is that when Chrome is running on powerful hardware, it may split each service into different processes giving more stability, but if it is on a resource-constraint device, Chrome consolidates services into one process saving memory footprint. Similar approach of consolidating processes for less memory usage have been used on platform like Android before this change.
+同样的方法也适用于浏览器进程。Chrome 正在经历架构变革，它转变为将浏览器程序的每一模块作为一个服务来运行，从而可以轻松实现进程的拆解和聚合。


从而可以轻松实现进程的拆解和聚合 - >从而可以轻松实现进程的拆解或聚合

sakila1012 · 2018-09-13T02:48:04Z

TODO1/inside-look-at-modern-web-browser-part1.md


-![site isolation](https://developers.google.com/web/updates/images/inside-browser/isolation.png)
+[同源策略](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) 是 web 的核心安全模型。同源策略确保站点不能在未得到其它站点许可的情况下获取其数据。安全攻击的一个主要目标就是绕过同源策略。进程隔离是分离站点的最高效的手段。随着 [Meltdown and Spectre](https://developers.google.com/web/updates/2018/02/meltdown-spectre) 的出现，使用进程来分离站点愈发势在必行。Chrome 67 版本后，桌面版 Chrome 都默认开启了站点隔离，每个标签页的 iframe 都有一个单独的渲染进程。


同源策略确保站点不能在未得到其它站点许可的情况下获取其数据。 -> 同源策略确保站点在未得到其它站点许可的情况下不能获取其数据。

Colafornia · 2018-09-13T05:54:47Z

@sakila1012 感谢细心校对，已修改
@leviding 修改完成

leviding · 2018-09-13T06:11:11Z

@Colafornia 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

Colafornia · 2018-09-14T01:06:21Z

已发布 https://juejin.im/post/5b9b0932e51d450e9059c16a
@CoderMing @sakila1012 @leviding

Colafornia added 2 commits September 8, 2018 23:56

100%

7d25719

self check

1a58f3f

fanyijihua added the 校对认领 label Sep 8, 2018

leviding mentioned this pull request Sep 9, 2018

现代浏览器内部揭秘（第一部分） #4409

Closed

leviding added the 前端 label Sep 9, 2018

fanyijihua added the 正在校对 label Sep 9, 2018

CoderMing reviewed Sep 9, 2018

View reviewed changes

按校对意见进行修改

72a4079

leviding added the 标注待管理员 Review label Sep 12, 2018

fanyijihua removed the 校对认领 label Sep 12, 2018

Update inside-look-at-modern-web-browser-part1.md

d6d6a96

leviding removed the 标注待管理员 Review label Sep 12, 2018

sakila1012 reviewed Sep 13, 2018

View reviewed changes

按校对意见进行修改，删去占位用的空行

bf38cba

leviding added the 标注待管理员 Review label Sep 13, 2018

leviding approved these changes Sep 13, 2018

View reviewed changes

leviding merged commit 1579759 into xitu:master Sep 13, 2018

leviding added 翻译完成 and removed 标注待管理员 Review 正在校对 labels Sep 13, 2018

Colafornia deleted the translation/inside-look-at-modern-web-browser branch September 13, 2018 06:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

现代浏览器内部揭秘（第一部分） #4419

现代浏览器内部揭秘（第一部分） #4419

Colafornia commented Sep 8, 2018

CoderMing commented Sep 9, 2018

fanyijihua commented Sep 9, 2018

CoderMing Sep 9, 2018

CoderMing Sep 9, 2018

CoderMing Sep 9, 2018

CoderMing Sep 9, 2018

CoderMing Sep 9, 2018

CoderMing Sep 9, 2018

CoderMing Sep 9, 2018

Colafornia commented Sep 11, 2018

sakila1012 commented Sep 12, 2018

fanyijihua commented Sep 12, 2018

sakila1012 Sep 13, 2018

sakila1012 Sep 13, 2018

sakila1012 Sep 13, 2018

sakila1012 Sep 13, 2018

sakila1012 Sep 13, 2018

sakila1012 Sep 13, 2018

sakila1012 Sep 13, 2018

sakila1012 Sep 13, 2018

Colafornia commented Sep 13, 2018

leviding commented Sep 13, 2018

Colafornia commented Sep 14, 2018


		In this 4-part blog series, we’ll look inside the Chrome browser from high-level architecture to the specifics of the rendering pipeline. If you ever wondered how the browser turns your code into a functional website, or you are unsure why a specific technique is suggested for performance improvements, this series is for you.
		这一博客系列由四部分组成，将从高级体系结构到渲染管道的细节来窥探 Chrome 浏览器的内部。如果你曾对浏览器是如何将代码转化为功能性网站，或者你并不确定为何建议使用某一技术来提升性能，那么本系列就是为你准备的。


		Figure 2: Many GPU cores with wrench suggesting they handle a limited task
		图 2：许多带扳手的 GPU 内核意味着它们只能处理有限任务


		Graphics Processing Unit - or GPU is another part of the computer. Unlike CPU, GPU is good at handling simple tasks but across multiple cores at the same time. As the name suggests, it was first developed to handle graphics. This is why in the context of graphics "using GPU" or "GPU-backed" is associated with fast rendering and smooth interaction. In recent years, with GPU-accelerated computing, more and more computation is becoming possible on GPU alone.
		图形处理器（Graphics Processing Unit）简称为 GPU 是计算机的另一部件。与 CPU 不同，GPU 擅长同时处理跨内核的简单任务。顾名思义，它最初是为解决图形而开发的。这就是为什么在图形环境中“使用 GPU” 或“GPU 支持”都与快速渲染和顺滑交互有关。近年来随着 GPU 加速计算，仅靠 GPU 一己之力也使得越来越多的计算成为可能。


		So how is a web browser built using processes and threads? Well, it could be one process with many different threads or many different processes with a few threads communicating over IPC.
		那么如何通过进程和线程构建 web 浏览器呢？它可能由一个拥有很多线程的进程，或是具有许多通过 IPC 通信的不同进程。


		At the top is the browser process coordinating with other processes that take care of different parts of the application. For the renderer process, multiple processes are created and assigned to each tab. Until very recently, Chrome gave each tab a process when it could; now it tries to give each site its own process, including iframes (see [Site Isolation](#site-isolation)).
		顶部是浏览器线程，它与处理应用其它模块任务的进程进行协调。对于渲染进程来说，创建了多个渲染进程并分配给了每个标签页。直到最近，Chrome 在可能的情况下给每个标签页分配一个进程。现在它试图给每个站点分配一个进程，包括 iframe（参见[站点隔离](#每个-iframe-的渲染进程--站点隔离)）。


		First is the Central Processing Unit - or CPU. The CPU can be considered your computer’s brain. A CPU core, pictured here as an office worker, can handle many different tasks one by one as they come in. It can handle everything from math to art while knowing how to reply to a customer call. In the past most CPUs were a single chip. A core is like another CPU living in the same chip. In modern hardware, you often get more than one core, giving more computing power to your phones and laptops.
		第一个需要了解的计算机部件是中央处理器（Central Processing Unit），或简称为 CPU。CPU 可以看作是计算机的大脑。一个 CPU 核心如图中的办公人员，可以逐一解决很多不同任务。解决从数学到艺术一切任务的同时还知道如何响应客户要求。过去 CPU 大多是单芯片的，一个核心就像存在于同芯片的另一个 CPU。随着现代硬件发展，你经常会有不止一个内核，给你的手机和笔记本提供更多的计算能力。


		There are even more processes like the Extension process and utility processes. If you want to see how many processes are running in your Chrome, click the options menu icon more_vert at the top right corner, select More Tools, then select Task Manager. This opens up a window with a list of processes that are currently running and how much CPU/Memory they are using.
		还有更多进程如扩展进程与应用进程。如果你想要了解有多少进行运行在你的 Chrome 浏览器中，可以点击右上角的选项菜单图标，选择更多工具，然后选择任务管理器。然后会打开一个窗口，其中列出了当前正在运行的进程以及它们当前的 CPU/内存使用量。


		Earlier, I mentioned Chrome uses multiple renderer process. In the most simple case, you can imagine each tab has its own renderer process. Let’s say you have 3 tabs open and each tab is run by an independent renderer process. If one tab becomes unresponsive, then you can close the unresponsive tab and move on while keeping other tabs alive. If all tabs are running on one process, when one tab becomes unresponsive, all the tabs are unresponsive. That’s sad.
		前文中提到了 Chrome 使用多个渲染进程。最简单的情况下，你可以想象每个标签页都有自己的渲染进程。假设你打开了三个标签页，每个标签页都拥有自己独立的渲染进程。如果某个标签页失去响应，你可以关掉这个标签页，此时其它标签页依然运行着，可以正常使用。如果所有标签页都运行在同一进程上，那么当某个失去响应，所有标签页都会失去响应。真是个悲伤的故事。


		Because processes have their own private memory space, they often contain copies of common infrastructure (like V8 which is a Chrome's JavaScript engine). This means more memory usage as they can't be shared the way they would be if they were threads inside the same process. In order to save memory, Chrome puts a limit on how many processes it can spin up. The limit varies depending on how much memory and CPU power your device has, but when Chrome hits the limit, it starts to run multiple tabs from the same site in one process.


		General idea is that when Chrome is running on powerful hardware, it may split each service into different processes giving more stability, but if it is on a resource-constraint device, Chrome consolidates services into one process saving memory footprint. Similar approach of consolidating processes for less memory usage have been used on platform like Android before this change.
		同样的方法也适用于浏览器进程。Chrome 正在经历架构变革，它转变为将浏览器程序的每一模块作为一个服务来运行，从而可以轻松实现进程的拆解和聚合。


		![site isolation](https://developers.google.com/web/updates/images/inside-browser/isolation.png)
		[同源策略](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) 是 web 的核心安全模型。同源策略确保站点不能在未得到其它站点许可的情况下获取其数据。安全攻击的一个主要目标就是绕过同源策略。进程隔离是分离站点的最高效的手段。随着 [Meltdown and Spectre](https://developers.google.com/web/updates/2018/02/meltdown-spectre) 的出现，使用进程来分离站点愈发势在必行。Chrome 67 版本后，桌面版 Chrome 都默认开启了站点隔离，每个标签页的 iframe 都有一个单独的渲染进程。

现代浏览器内部揭秘（第一部分） #4419

现代浏览器内部揭秘（第一部分） #4419

Conversation

Colafornia commented Sep 8, 2018

CoderMing commented Sep 9, 2018

fanyijihua commented Sep 9, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Colafornia commented Sep 11, 2018

sakila1012 commented Sep 12, 2018

fanyijihua commented Sep 12, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Colafornia commented Sep 13, 2018

leviding commented Sep 13, 2018

Colafornia commented Sep 14, 2018