知之为知之，不知为不知

CSSOM会阻塞渲染，只有当CSSOM构建完毕后才会进入下一个阶段构建渲染树。通常情况下DOM和CSSOM是并行构建的，但是当浏览器遇到一个script标签时，DOM构建将暂停，直至脚本完成执行。但由于JavaScript可以修改CSSOM，所以需要等CSSOM构建完毕后再执行JS。

Web Performance API 允许网页访问某些函数来测量网页和 Web 应用程序的性能

HTTP 缓存策略分为两种： 强缓存 和 协商缓存 ，这两种缓存策略都是服务端设置 HTTP Header 来实现的

200：请求成功；301：资源（网页等）被永久转移到其它URL；404：请求的资源（网页等）不存在；500：内部服务器错误；

部分css3的动画效果是在合成线程上实现的，不需要主线程介入，所以省去了重拍和重绘的过程，这就大大提升了渲染效率。JavaScript都是在在主线程上执行的，所以JavaScript的动画需要主线程的参与，所以效率会大打折扣！...

浏览器安全主要划分为三大块内容：页面安全、系统安全和网络安全。前面我们用四篇文章介绍了页面安全和系统安全，也聊了浏览器和 Web 开发者是如何应对各种类型的攻击，本文是我们专栏的最后一篇，我们就接着来聊聊网络安全协议 HTTPS。我们先从 HTTP 的明文传输的特性讲起，在上一个模块的三篇文章中我们分析过，起初设计 HTTP 协议的目的很单纯，就是为了传输超文本文件，那时候也没有太强的加密传输的数据需求，所以 HTTP 一直保持着明文传输数据的特征。但这样的话，在传输过程中的每一个环节，数据都有可能被窃

前面两篇文章我们分析了 HTTP/1 和 HTTP/2，在 HTTP/2 出现之前，开发者需要采取很多变通的方式来解决 HTTP/1 所存在的问题，不过 HTTP/2 在 2018 年就开始得到了大规模的应用，HTTP/1 中存在的一大堆缺陷都得到了解决。HTTP/2 的一个核心特性是使用了多路复用技术，因此它可以通过一个 TCP 连接来发送多个 URL 请求。多路复用技术能充分利用带宽，最大限度规避了 TCP 的慢启动所带来的问题，同时还实现了头部压缩、服务器推送等功能，使得页面资源的传输速度得到了大

上一篇文章我们聊了 HTTP/1.1 的发展史，虽然 HTTP/1.1 已经做了大量的优化，但是依然存在很多性能瓶颈，依然不能满足我们日益变化的新需求，所以就有了我们今天要聊的 HTTP/2。本文我们依然从需求的层面来谈，先分析 HTTP/1.1 存在哪些问题，然后再来分析 HTTP/2 是如何解决这些问题的。我们知道 HTTP/1.1 为网络效率做了大量的优化，最核心的有如下三种方式： 增加了持久连接； 浏览器为每个域名最多同时维护 6 个 TCP 持久连接； 使用 CD

谈及浏览器中的网络，就避不开 HTTP。我们知道 HTTP 是浏览器中最重要且使用最多的协议，是浏览器和服务器之间的通信语言，也是互联网的基石。而随着浏览器的发展，HTTP 为了能适应新的形式也在持续进化，我认为学习 HTTP 的最佳途径就是了解其发展史，所以在接下来的三篇文章中，我会从浏览器发展的视角来和你聊聊 HTTP 演进。这三篇分别是即将完成使命的 HTTP/1、正在向我们走来的 HTTP/2，以及未来的 HTTP/3。本文主要介绍的是 HTTP/1.1，我们先讲解 HTTP/1.1 的进化史，

我们结合一个真实的关于 CSRF 攻击的典型案例来分析下，在 2007 年的某一天，David 无意间打开了 Gmail 邮箱中的一份邮件，并点击了该邮件中的一个链接。过了几天，David 就发现他的域名被盗了。不过几经周折，David 还是要回了他的域名，也弄清楚了他的域名之所以被盗，就是因为无意间点击的那个链接。那 David 的域名是怎么被盗的呢？我们结合下图来分析下 David 域名的被盗流程：David 域名被盗流程 先 David 发起登录 Gmail 邮箱请求，然后 Gma

支持页面中的第三方资源引用和 CORS 也带来了很多安全问题，其中最典型的就是 XSS 攻击。什么是 XSS 攻击XSS 全称是 Cross Site Scripting，为了与“CSS”区分开来，故简称 XSS，翻译过来就是“跨站脚本”。XSS 攻击是指黑客往 HTML 文件中或者 DOM 中注入恶意脚本，从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段。最开始的时候，这种攻击是通过跨域来实现的，所以叫“跨域脚本”。但是发展到现在，往 HTML 文件中注入恶意代码的方式越来越多了

什么是同源策略如果两个 URL 的协议、域名和端口都相同，我们就称这两个 URL 同源。比如下面这两个 URL，它们具有相同的协议 HTTPS、相同的域名 time.geekbang.org，以及相同的端口 443，所以我们就说这两个 URL 是同源的。https://time.geekbang.org/?category=1https://time.geekbang.org/?category=0浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。两个不同的源之间若想要相互访问

从输入URL到页面展示完整流程示意图用户输入URL并回车，地址栏会判断输入的关键字是搜索内容，还是请求的 URL； 如果是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的 URL； 如果判断输入内容符合 URL 规则，那么地址栏会根据规则，把这段内容加上协议，合成为完整的 URL。 浏览器构建请求行信息； 浏览器进程会通过进程间通信（IPC）把 URL 请求发送至网络进程。 网络进程接收到url请求后检查本地缓存是否缓存了该请求资源，如果有则将该资...

站在 JavaScript 引擎 V8 的视角，来分析 JavaScript 代码是如何被执行的。前端工具和框架的自身更新速度非常块，而且还不断有新的出现。要想追赶上前端工具和框架的更新速度，你就需要抓住那些本质的知识，然后才能更加轻松地理解这些上层应用。比如我们接下来要介绍的 V8 执行机制，能帮助你从底层了解 JavaScript，也能帮助你深入理解语言转换器 Babel、语法检查工具 ESLint、前端框架 Vue 和 React 的一些底层实现机制。因此，了解 V8 的编译流程能让你对语言以及相

JavaScript 数据是存储在栈和堆两种内存空间中的，接下来分别介绍“栈中的垃圾数据”和“堆中的垃圾数据”是如何回收的。

我们知道 JavaScript 中有很多函数，经常会出现在一个函数中调用另外一个函数的情况，调用栈就是用来管理函数调用关系的一种数据结构。因此要讲清楚调用栈，你还要先弄明白函数调用和栈结构。

目录JavaScript 代码的执行流程1. 编译阶段2. 执行阶段代码中出现相同的变量或者函数怎么办？总结执行上下文是什么呢？它重要吗？可以这么说，只有理解了 JavaScrip 的执行上下文，我们才能更好地理解 JavaScript 语言本身，比如变量提升、作用域和闭包等。不仅如此，理解执行上下文和调用栈的概念还能助你成为一名更合格的前端开发者。JavaScript 代码的执行流程变量和函数声明在代码里的位置是不会改变的，而且是在编译阶段被 JavaScript 引擎放入

1. 更新了元素的几何属性（重排）更新元素的几何属性从上图可以看出，如果你通过 JavaScript 或者 CSS 修改元素的几何位置属性，例如改变元素的宽度、高度等，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫重排。无疑，重排需要更新完整的渲染流水线，所以开销也是最大的。2. 更新元素的绘制属性（重绘）接下来，我们再来看看重绘，比如通过 JavaScript 更改某些元素的背景颜色，渲染流水线会怎样调整呢？你可以参考下图：更新元素背景从图中可以看出，如果修改了

完整的渲染流水线示意图结合上图，一个完整的渲染流程大致可总结为如下：渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。 渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。 创建布局树，并计算元素的布局信息。 对布局树进行分层，并生成分层树。 为每个图层生成绘制列表，并将其提交到合成线程。 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。 合成线程发送绘制图块命令 DrawQuad 给浏览器进程。 浏览器进程根据.

目录从输入 URL 到页面展示1. 用户输入2. URL 请求过程3. 准备渲染进程4. 提交文档5. 渲染阶段总结从输入 URL 到页面展示完整流程示意图先来快速回顾下浏览器进程、渲染进程和网络进程的主要职责：浏览器进程主要负责用户交互、子进程管理和文件储存等功能。 网络进程是面向渲染进程和浏览器进程等提供网络下载功能。 渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。因为渲染进程所有的内容都.

最新的 Chrome 进程架构图从图中可以看出，最新的 Chrome 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程。 浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。 渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每.

目录浏览器端发起 HTTP 请求流程1. 构建请求2. 查找缓存3. 准备 IP 地址和端口4. 等待 TCP 队列5. 建立 TCP 连接6. 发送 HTTP 请求服务器端处理 HTTP 请求流程1. 返回请求2. 断开连接3. 重定向总结浏览器中的 HTTP 请求从发起到结束一共经历了如下八个阶段：构建请求、查找缓存、准备 IP 和端口、等待 TCP 队列、建立 TCP 连接、发起 HTTP 请求、服务器处理请求、服务器返回请求和断开连接。...

1,互联网中的数据是通过数据包来传输的，数据包在传输过程中容易丢失或出错。2,IP 负责把数据包送达目的主机。3,UDP 负责把数据包送达具体应用。4,而 TCP 保证了数据完整地传输，它的连接可分为三个阶段：建立连接、传输数据和断开连接。

目录1. 为什么很多站点第二次打开速度会很快？2. 登录状态是如何保持的？当你解了 HTTP 的请求流程，我们来看下面两个问题为什么很多站点第二次打开速度会很快？ 登录状态是如何保持的？1. 为什么很多站点第二次打开速度会很快？如果第二次页面打开很快，主要原因是第一次加载页面过程中，缓存了一些耗时的数据。那么，哪些数据会被缓存呢？从上面介绍的核心请求路径可以发现，DNS 缓存和页面资源缓存这两块数据是会被浏览器缓存的。其中，DNS 缓存比较简单，它主要就是在浏览器本地把对应的 I