学会与浏览器做朋友

2019目标获得1000个关注，目前还差720。看来我还得多输出点干货。

这是之前写给小白的入门文章

————————————————————

极客时间上李兵老师的《浏览器工作原理与实践》，目前有5700+人学习。下面我来介绍一下专栏所有的内容，以及我的一些感悟。

• 宏观视角下的浏览器（6讲）
• 浏览器中的JavaScript执行机制（5讲）
• V8工作原理（3讲）
• 浏览器中的页面循环系统（6讲）
• 浏览器中的页面（8讲）
• 浏览器中的网络（3讲）
• 浏览器安全（5讲）

宏观视角下的浏览器

说浏览器，离不开chrome，全球用户群体最多的浏览器，是革命性创新。

先介绍Chrome架构：打开一个页面，为什么会启动4个进程？分别是主进程，网络进程，渲染进程（当前页面的进程），GPU进程。当然开启了插件之后，还有插件进程，主要是为了隔离与安全。

又介绍了页面文件如何被完整的送达浏览器，本质是数据包的传输，从广义上即OSI七层模型。从浏览器的层面理解，就是http协议传输数据。

第三讲，HTTP请求流程：为什么站点第二次打开速度很快，主要是缓存，无论是浏览器，还是服务端。

第四讲是，从URL到页面展示发生了什么？这应该不用介绍内容，这是一个前端工程师必备知识。

本章最后说的是渲染流程，HTML等资源如何变成页面。总结为创建DOM树，创建CSSOM树，创建布局树，对布局分层，生成分层树，绘制，光栅化，浏览器进程生成页面，最终显示。

浏览器中的JavaScript执行机制

从五个角度解析，变量提升，调用栈，块级作用域，作用域链和闭包，this。其中闭包和this是JS中非常重要的概念。

V8工作原理

这一章内容偏少，因为V8是前端每天都在接触，但是黑盒子的东西，所以理解V8架构和原理，有助于理解前端API 设计和性能调优。章节分为3讲，

栈空间和堆空间：数据是如何存储的？分别是从JS的内存管理机制，原始类型的数据值保存在“栈”中的，引用类型的值存放在“堆”中。

垃圾回收：垃圾数据是如何自动回收的？垃圾回收机制，使用Scanvenge算法，老生代采用标记清除（Mark-Sweep），标记整理（Mark-compact），惰性清理。即JS会定时清理内容，但是这个清理的过程会占用主线程。

编译器和解释器：V8是如何执行一段JavaScript代码的？V8的架构中编译器（TurbonFan），也有解释器（Ignition），理论上编译器会运行很快，因为它在本地就编译好了，而解释器需要边运行边解释代码。所以V8架构通过提前编译部分代码即加快了代码的运行时速度，又保证了JS的灵活性。

浏览器中的页面循环系统

消息队列和事件循环：页面是怎么“活”起来的？为了执行JS中的事件机制，引入消息队列和事件循环。这一讲主要 说chrome设计事件机制的架构。JS中事件有：渲染事件（如解析 DOM、计算布局、绘制）；用户交互事件（如鼠标点击、滚动页面、放大缩小等）；JavaScript 脚本执行事件；网络请求完成、文件读写完成事件。

WebAPI：setTimeout是如何实现的？WebAPI：XMLHttpRequest是怎么实现的？主要是V8中如何实现这两个API，setTimeout是将每次的内容放到主线程的队尾执行。而XMLHttpRequest基于http协议实现。

宏任务和微任务，Promise，async和await。渲染进程内部会维护多个消息队列，而主线程通过事件循环执行宏任务，宏任务包含很多微任务，然后执行每一个微任务，如果微任务中有新的宏任务就排到这一个宏任务之后，而微任务如果有新的微任务，直接插入当前宏任务的队尾。Promise是微任务，async和await是为了让代码写起来向同步的API，实现基于生成器（generator）。

浏览器中的页面

Chrome开发者工具：利用网络面板做性能分析

DOM树：JavaScript是如何影响DOM树构建的？

渲染流水线：CSS如何影响首次加载时的白屏时间？

分层和合成机制：为什么CSS动画比JavaScript高效？

页面性能：如何系统地优化页面？

虚拟DOM：虚拟DOM和实际的DOM有何不同？

渐进式网页应用（PWA）：它究竟解决了Web应用的哪些问题？

WebComponent：像搭积木一样构建Web应用

这一章是对上面渲染流程的一个详细介绍。DOM树，CSSOM，分层和合成机制。又介绍了虚拟DOM，即JS维护一份真实DOM的映射关系，PWA，向本地应用的一次迈进。WebComponent，愿景很美好。JS中性能优化就是页面优化，而页面优化最重要的指标就是首屏优化，粗略可以直接看资源加载和页面加载的时间，细节可以通过Chrome控制版performance做性能分析。

浏览器中的网络

直接对比HTTP的三个版本，HTTP/1，HTTP/2，HTTP/3。其实1和2之间还有一个重要的1.1，它也是一个重要的改版。从新版本的设计可以看出老版本的问题。HTTP/3采用UDP，为了兼容硬件设备，同时减少TCP连接的耗时，以及传输过程中的队头阻塞问题。HTTP/2，解决HTTP1.1启动多个TCP问题，多路复用，每一个传输都有一个标记，实现并行传输和接收内容。

浏览器安全

跨域，跨站脚本攻击（XSS），CSRF攻击，安全沙箱，浏览器页面与操作系统的隔离，HTTPS，引入CA校验，拒绝中间人攻击。

下面我们来总结一下这篇文章。本文总7个角度带大家认识了浏览器，分别是宏观视角下我们看到的浏览器，在浏览器中JS是如何执行的，V8的工作原理有助于我们理解前端API的设计以及性能调优，浏览器中的循环系统由消息队列和事件循环系统组成，页面的渲染过程与原理，了解到DOM和CSSOM，重绘重排合成光栅化等过程，最后从我们平时天天接触而又停留在概念上的内容入手，带我们理解http的演进，宏观架构的调整，以及现在最最重视的安全问题。

这篇专栏就像内功修炼，每一个概念都是进阶者需要掌握的。而小白其实关心浏览器中的页面这一章就行。道阻且长，行则将至，行动起来。