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

书接上文。

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

导航到不同站点

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

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

需要注意的是：

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

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

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

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

注意一下Service Worker

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

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

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

导航预加载（Navigation Preload）

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

小节

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