Google 图解 Chrome

最新推荐文章于 2022-06-13 19:53:45 发布

王烨潇

最新推荐文章于 2022-06-13 19:53:45 发布

阅读量372

点赞数

分类专栏：工具文章标签： Chrome

本文链接：https://blog.youkuaiyun.com/qq_33426311/article/details/84063264

版权

工具专栏收录该内容

9 篇文章

订阅专栏

前端时间读了公众号：承香墨影 翻译的关于谷歌浏览器的文章。

文章中自带的动画加深了我对文章的理解

做个整理

Chrome 算是程序员的标配了，从全球的市场份额来看，它在全球市场的份额已经超过 60%。

在 Chrome 10 周年之际，官方发布了一个系列文章，用图解的方式，很清晰的讲解了现代浏览器的运行原理。

一个翻译了四篇文章：

读后感：

1 想明白了为啥chrome 占那么多内存，多进程处理机制

我的Chrome 开了五个选项卡现在有14个进程。

多进程好处：

假设你打开了 3 个选项卡，每个选项卡都拥有独立的渲染器进程。如果一个选项卡没有响应，则可以关闭无响应的选项卡，并继续使用，同时保持其他选项卡处于活动状态。如果所有选项卡，都在一个进程上运行，则当一个选项卡无响应时，所有选项卡都不会响应。这就很尴尬了。

将浏览器的工作，分成多个进程的另一个好处是安全性和沙盒。由于操作系统提供了限制进程权限的方法，因此浏览器可以从某些功能中，对某些进程进行沙箱处理。例如，Chrome 浏览器可以对处理用户输入（如渲染器）的进程，限制其文件访问的权限。

每个选项卡有一个独立的渲染器进程，它允许跨站点 iframe 在单个渲染器进程中运行，并在不同站点之间共享内存空间。在同一个渲染器进程中运行 a.com和 b.com 似乎没问题。

该同源策略是网络的核心安全模型，它确保一个站点在未经同意的情况下无法访问其他站点的数据，绕过此策略是安全攻击的主要目标。

JS 加载：

当 HTML 解析器遇到 <script> 标签的时候，它会暂停解析 HTML 文档，然后对这个 JS 脚本进行加载、解析和执行。是因为 JS 可以使用类似 document.write() 方法来改变 DOM 的结构。这就是 HTML 解析器在重新解析 HTML 之前，必须等待 JS 脚本执行的原因。

你可以在 script 标签中添加 async 或 defer 标记，然后浏览器会异步加载和运行此 JS 脚本，不会阻断解析。如果需要，也可以使用 JavaScript Modules，还可以通过 <link rel="preload"> 标签向浏览器明确标记此为重要的资源，将在页面加载完成之后被立刻使用，对于这类资源，它会在页面加载生命周期的早期，被优先加载。

布局树和DOM

布局树是一个与 DOM 树类似的结构，但是它仅仅包含了页面上可见内容相关的信息。

如果某个元素设置了 display:none，则该元素将不会出现在布局树中，但是它会出现在 DOM 树中，而如果该元素被设置为 visibility:hidden 则它会存在于布局树中。类似的例子还有 p::before{content:"Hi!"} 这样的伪类，它会存在于布局树中，而不会存在于 DOM 树中。

用户点击事件