经常看到一些有关浏览器工作原理啊、渲染流程啊、内存垃圾回收之类的面试八股文，但是多数都是互相抄来抄去，其中内容也很多似是而非或者不太准确的地方。不过我们可以根据这些八股文脑海中大体有个概念，然后到官网找到一些验证。下面简单整理了一下几个前端相关的官网以及几篇比较好的八股文相关的官方文档。不过大部分链接需要VPN。
一：部分官网以及简介
- www.chromium.org/Home/： chromium的官方网站。里面含有如何参与chromium的开发，如何下载、打包编译一个chromium的客户端，chroium各种版本的发布日志，历史版本如何安装，各类设计文档，浏览器的多进程架构，线程相关，blink渲染引擎的工作流程，GPU相关信息等等。
2.web.dev/?hl=zh-cn：chrome开发者团队维护，意在帮助用户构建一个美观、快速、安全的网站。里面有各种性能指标（Core Web Vitals）的介绍，比如fp、fcp、lcp、inp等等各种性能指标，还有对这些指标的优化手段。比如我们对于网站首屏的优化、longtask的优化、recaluate style耗时过长的优化等，可以看一下这个网站性能相关的部分。
3.source.chromium.org/chromium ： chromium源码的在线网站，可以在线对源码进行搜索、查看。源码中除了代码之外，也有各种Readme文件，对部分模块实现的设计初衷、工作原理等。blink、v8的源码都在其中。
4.v8.dev/blog ：v8的官网。里面的blog部分总计145篇，除了发版介绍外，还有几十篇v8的工作原理相关的文档，比如常见八股文之内存管理、垃圾回收，解释器、编译器工作流程，编译缓存(字节码缓存)等。除去带"release"标签的几十篇完全可以简略看完。
5.[www.memorymanagement.org/glossary/in…] 各种内存管理模式的相关名词、概念解释。从v8内存管理部分的blog中链接而进入的。内存管理的模式有很多种比如v8使用的分代管理等。
6.developer.chrome.com/?hl=en
Chrom for develpoer ，跟web.dev类似，两者之间的文档也是各种互相引用、链接。其中doc部分里面有devTools、lightHouse、puppeteer等工具的使用文档，也有性能部分的文档（感觉不如web.dev性能相关部分的好）。blog部分完全是流水账式的日志，也没个分类，想筛选出想找的文档，只能通过search进行搜索（这部分感觉也不如web.dev）。
7.developer.mozilla.org/en-US/ MDN 相当于于我们日常使用的手册了。
8.whatwg.org/ web标准规范制定小组的官网。MDN很多api介绍文档的最下面都会有此api相关的标准文档的链接。
二：部分优秀文档链接
1.v8.dev/blog/code-c… Code caching for JavaScript developers。 v8官网关于编译缓存部分的解释。里面介绍了，冷运行、温运行、热运行的三种状态，介绍了哪些代码会进行编译缓存，哪部分不会进行编译缓存。最后面介绍了怎么tracing v8的执行过程，以及如何确定哪部分js代码得到了缓存。公司项目微前端框架更换，其中重要的一点就是编译缓存这部分。使用ifram作为沙箱，通过script标签引入子应用js来代替以前的使用eval来执行子应用的js。
2.docs.google.com/document/d/… How Blink works。这是从chromium官网blink部分，提供的google文档链接。 里面简单介绍了下blink是干嘛的，如何进行内存管理、任务调度、如何嵌入v8、渲染的简单流程等，并提供了渲染流程每一步的详解文档链接，还有一篇整体详细介绍blick渲染流程的ppt链接。然后v8部分也提到了blink自身的c++dom对象，跟v8里经过包装的dom对象的引用关系，并提供了一个内存泄漏(detached dom)的小demo。
3.docs.google.com/presentatio… Life of a Pixel。 这是上面 How Blink works 文档中提到的详解介绍blink渲染流程的ppt链接，共80页。里面详细介绍了浏览器将一堆Html字符串是如何经过parse、dom、style、layout等等一系列步骤最终变成显示器像素的。
4.web.dev/articles/re… Reduce the scope and complexity of style calculations。
本文跟其兄弟篇(减少dom数量)介绍了，在优化INP(Interaction to Next Paint)性能指标，render部分的优化手段之一：降低css选择器的复杂度。如果css选择器过于复杂比如文中的举例:.box:nth-last-child(-n+1) .title {/* styles */}，再叠加上dom数量比较多，就会造成 recalculate Style 耗时过长。对于这个案例我们经历过，im工作台在打开服务记录->历史轨迹后，由于引入一段复杂的css选择器导致后续各种操作都会造成recalculate Style耗时近1000ms的恐怖情况，直接卡到客服无法正常工作。 然后里面有一篇介绍Style Invalidation in Blink的链接。
5.docs.google.com/document/d/… Style Invalidation in Blink。 本文是上文提到的Style Invalidation in Blink文档。此文档详细介绍了，当dom或者css发生变化时候，如何计算出哪些dom节点需要重新进行recaluate Style。同上文一样，这篇文档也是对当时我们某一个工作台，加载了一段复杂选择器css之后工作台突然变得无比卡顿的“官方解释”。
6.v8.dev/blog/free-g… Getting garbage collection for free。 v8的垃圾回收。八股文常见面试题之一。里面简单介绍了v8如何进行内存管理、垃圾回收的。包括分代管理，年轻代、老生代不同的回收策略等。
7.developer.chrome.com/blog/inside… Inside look at modern web browser (part 3) 现代浏览器的工作原理渲染部分，这是一个系列，part3介绍的是渲染部分。跟上面那个渲染流程的ppt类似，可以互相参照、印证来看。
8.www.chromium.org/developers/… GPU Accelerated Compositing in Chrome GPU是如何加速的。
9.www.chromium.org/developers/… Multi-process Architecture chromium的多进程架构的简单介绍。
10.web.dev/articles/ef… Efficiently load third-party JavaScript 介绍了scrpit是如何加载的，async defer 之间的区别。
11.www.chromium.org/getting-inv… 如何下载chromium各种版本。里面提供了2种途径，一种是使用@puppeteer/browsers，不过只能下载部分版本(112版本以后)并提供了一个可供下载版本的json列表。另一种是找到版本发布页面，找到版本的basePoint然后到一个集合各种版本的网站去找到并下载，比较麻烦。
12.chromium.googlesource.com/chromium/sr… Checking out and building Chromium for Mac Mac下如何下载并构建一个chromium。源代码带上--no-history大约十几个G，我是苹果m2芯片，全程cpu使用率接近打满编译了三个多小时。
三：如何找到这些文档
- 将这几个官方网站记住，有时间就看浏览一下目录、分类等。尤其是chromium官网，目录、分类极其多。
- 注意一些在使用一些工具比如devTools、lighthouse、performance insights等，很多指标其实都有部分简单的解释然后有一个"learn more"的链接。
