深入理解现代浏览器 阅读笔记之三

7天前 · 代码 · 41次阅读

书接上文。

在上一篇中,我们介绍了《深入理解现代浏览器》part2中关于一次简单导航的原理。接下来再看看没那么简单的导航是怎么回事。

导航到不同站点

假设现在我们已经完成了一次简单的导航到了一个页面。如果用户这个时候又再次输入了一个不同的url到地址框会发生什么呢?浏览器进程会执行和之前的一次简单导航一样的步骤。但是在那之前,它还需要检查一下当前正在渲染的页面的beforeunload事件。

beforeunload可以在你想要跳出或者关闭当前tab的时候创建出一个提示框(例如:“真的要离开吗QAQ”)。就像之前说的,一个tab标签页中所有的东西包括JS的代码都是由渲染器进程处理的。所以当新的导航跳转请求进来的时候,浏览器需要联合当前该tab页的渲染器进程一起检查。

IPC from the browser process to a renderer process telling it that it's about to navigate to a different site

需要注意的是:

不要加入任何无条件限制的buforeunload处理函数。由于beforeunload处理函数需要在新的导航开始执勤被执行,如果处理函数没有任何限制地运行下去或者执行事件非常长的话,会严重降低运行速度。

所以尽量只在有需要的时候添加beforeunload处理函数,例如当用户离开当前页面可能导致他们的数据丢失的时候。

如果新的导航请求是从渲染器进程中被初始化(例如用户在页面中点击了一个链接或者JS执行了一句window.location = "https://newsite.com"之类的情况,总之不是从地址栏输入了新url)的话,渲染器检查也是需要先检查beforeunload处理函数。接下来,就是和之前介绍的是一个流程了:由浏览器进程来处理这个导航请求(详见读书笔记2)。唯一的区别就是在这种情况下,新的导航请求时从渲染器进程传递到浏览器进程的。

当新的导航请求的目标站点和当前已经渲染好的站点不是同一个的时候,会有一个独立的渲染进程被唤起来处理新的导航请求。与此同时,当前页面的渲染器进程正在忙着处理一些unload一类的事件。更多的细节可以看看 这篇博客

2 IPCs from a browser process to a new renderer process telling to render the page and telling old renderer process to unload

注意一下Service Worker

最近对于整个导航的过程中有一个变化出现了,那就是service worker的引入。Service worker提供了一个能在你的代码中去编写网络代理的能力;让web开发者能够在什么东西该缓存、什么时候应该拉取新数据时有更多的控制权。

需要强调的的是,service worker是在渲染器进程中运行的一段js代码。但是当新的导航请求进入的时候,浏览器进程是如何指导站点是不是有service worker的呢?

the network thread in the browser process looking up service worker scope

当一个service worker被注册的时候,service worker的作用域就会被以一个引用的形式保存起来。当新的导航请求发生,网络线程会去在所有已注册的service worker的作用域中查找该域名,如果存在一个已经注册的service worker的url和该域名相匹配,那么UI线程会寻找一个渲染器进程来执行service worker的代码。Service Worker可能会从缓存中读取数据并取消获取数据的请求,又或者是直接从网络中获取新的资源。

the UI thread in a browser process starting up a renderer process to handle service workers; a worker thread in a renderer process then requests data from the network

导航预加载(Navigation Preload)

你可以发现,浏览器进程与渲染器进程之间的通力合作在service worker最终决定要从网络中获取数据后能在有限的时间后完成。导航预加载是一个用于在server worker启动的同时加速进程加载资源的机制。它将这些请求用一个header标记,以此让服务器来决定对于这些请求返回不同的内容。例如只需要更新数据而不是获取整个文档。

the UI thread in a browser process starting up a renderer process to handle service worker while kicking off network request in parallel

小节

在这一篇的读书笔记中,主要是在前文的基础上拓展了不同的场景以及service worker对于页面导航的邮箱与处理方式。下一章(part3),我们就会到渲染器进程里去看看浏览器是如何执行我们的html/css/js代码来渲染我们的页面的。

👍 3

浏览器 操作系统

最后修改于7天前

评论

贴吧 狗头 原神 小黄脸
收起

贴吧

狗头

原神

小黄脸

  1. 电路 2天前

    对不起 我是智障

    1. 季悠然 2天前

      你的问题解决了吗

      1. 电路 2天前

        顺便一提 大佬真是太强啦!你的主题很好用!

      2. 电路 2天前

        差一点 exsearch重建索引还是会报错

        1. 季悠然 2天前

          你可以试一下这个版本的exsearch,我稍微修改了一下,支持typecho1.2了
          https://github.com/youranreus/Typecho-Plugin-ExSearch/tree/feat-support-typecho-1.2

          1. 电路
            电路 2天前

            那 还有一个问题 为什么点开搜索会显示归档和分类捏

          2. 电路
            电路 2天前

            好了!真是非常感谢!!!

  2. 电路 2天前

    抱歉在这个地方向您询问 右下角的搜索是exsearch吗 为什么我使用g主题启用exsearch插件后无法正常搜索 点击重建索引显示错误
    然后 我想将首页的独立页面改为点击后跳转其他网址 请问如何实现
    最后 我的评论内容无法显示 是一堆白框 请问如何解决
    感谢

  3. linkkk 7天前

    路过,踩踩大佬博客

目录

avatar

季悠然

寻找有趣的灵魂

130

文章数

1977

评论数

3

分类

好热啊

arknights!

末将于禁,愿为曹家世代赴汤蹈火。

301