Web 中 的重排和重绘是 Web 渲染中常见的问题，即 Relayout（重排）和 Repaint（重绘）。其中重排（Relayout）也常被称为回流（Reflow）。另外在 Web 中聊渲染相关的话题，除了 Repaint、Reflow、Relayout之外，还有 Restyle（重写样式）和 Rendering（渲染）。这五个带有 R 开头的单词简称 5R ，对于 Web 性能的优化有着决定性的影响。如果要提高页面的渲染性能就需要深究造成 Repaint 和 Reflow 的相关原因。

在 Web 页面渲染过程中，有些资源文件（比如 HTML、CSS 和 JavaScript）会阻塞页面的渲染。当浏览器遇到渲染阻塞资源时，它就会停止下载其余的资源，直到这些关键文件得到处理（关键资源）。在此期间，整个渲染过程被搁置。另一方面，非渲染阻塞资源并不会延迟页面的渲染。浏览器可以在最初的页面渲染之后在后台安全地下载它们。然则，并不是所有被浏览器视为阻塞渲染的资源都是首屏渲染所必需的；这完全取决于页面的特征。你可以使用一些技术手段（最佳实践），将这些非关键的渲染阻塞资源变成非渲染的阻塞资源。此外，你也可以减少那些仍然关键的，无法消除的阻塞渲染的资源数量或大小。了解阻塞渲染资源将使你能够解决常见的 Web 性能问题。

在介绍Web页面解析时曾提到过：DOM树和CSSOM树结合在一起会构建出 Render Tree（渲染树），渲染树结合 Layout 绘制在屏幕上，从而展现出来。常常把这个过程称为 关键渲染路径（Critical Rendering Path）简称 CRP。也就是说，CRP 所用的时间直接决定了页面首次渲染页面的时间。即，通过优化关键渲染路径，可以显著缩短首次渲染页面的时间。如果我们要优化一个 Web 页面性能，那就必须对关键渲染路径中每一步中发生了什么，只有优化了关键路径才能彻底优化渲染性能。通过优化关键渲染路径，我们可以显著缩短首次渲染页面的时间。此外，了解关键渲染路径还可以构建高性能交互式应用打下基础。

最近一直在探索 Web 渲染性能相关技术，这也是自己一直比较弱的地方。虽然和渲染中的 Style 常打交到，但并未触及浏览器和渲染底层相关的知识。最近饿补了一下这方面的知识。整理了一些有关于 CSS 渲染引擎相关的文章。文章内容较长，图也多。但主要分为三个部分：浏览器理论基础、Web页面解析 和 CSS 渲染引擎。

CSS 中的伪元素能做什么，其实在《伪元素能帮助我们做些什么》一文中就和大家探讨过。我们知道伪元素可以帮助我们 清除浮动、制作Icon图标、分割线、CSS Tooltips、CSS计数器 等事情。其实除了这些常见的事情之外，CSS 伪元素还可以帮助我们做一些非常有趣的事情，这些有趣的事情也称得上是 CSS 方面的小技巧吧。接下来，和大家聊聊这方面的话题。

CSS Grid 模块的出现以及浏览器对其支持，为 Web 布局提供了前所未有的可能性。我们可以用更少的元素（更简洁的 HTML 结构）构建更复杂的设计。这比我们一直认为非常强大的 Flexbox 要更强很多。但是，当你想到 CSS Grid 时，你一般会想到是我们平时习以为常的方块布局，对吗？@Andy Barefoot 在他的个人网站 和 Codepen 上提供了很多有创意的响应式布局效果，让你会对 Web 布局有一种焕然一新的感觉，感觉与你的经典 Web 设计（规规矩矩方块布局），而且他使用了 CSS Grid 布局来做到这一点。

我们花了很长的一段时间和多篇文章的篇幅和大家一起探讨了 CSS 网格布局模块的特性。从前面这些内容，不难发现网格布局的复杂性，灵活性。我想大家也意识到了，CSS Grid到来之后，Web中设计布局的方法也已经改变了。我们可以在纸上绘制布局草图，思考布局设计的全部内容。当你开始敲击代码的时候，就已经知道布局会是什么样子。正因为CSS Grid布局的复杂性，再加上网格容器上定义的网格是不可见的。为此我们不得不考虑，如何更轻易的使用网格，或者碰到网格布局相关的 Bug，又应如何来调试。熟悉 Web 开发的同学都知道，在调试布局或CSS相关的问题时，喜欢在元素上添加一个边框。在网格布局中，虽然可以使用类似的方法在网格容器和网格项目中添加边框，帮助我们快速的定位；但是我们没法给网格线添加边框。不过庆幸的是，目前主流的浏览器，比如 Chrome、Firefox、Safari 和 Microsoft Edge 浏览器的开发者工具（DevTools）都提供了网格布局审查器。有了这些工具之后，可以快速的帮助我们使用网格，调试使用网格碰到的问题。

自从多列布局、Flexbox布局和Grid布局得到浏览器支持之后，就可以使用这些特性来实现 瀑布流的布局 ，但这些技术实现的瀑布流布局都或多或少存有一定的缺陷。不过，值得庆幸的是，CSS 网格布局的第3级（CSS Grid Layout Module Level 3） 将真正的瀑布流布局纳入了 W3C 规范中，称得上真正的瀑布流布局。不过遗憾的是，支持该规范草案的主流浏览器并不多，只有Firefox 和 Firefox Nightly。虽然这个功能还不能用于实际生产中，但你的试用以及使用之后的反馈是很有价值的，这有助于确保它满足你对这种布局的要求。

subgrid 进入 CSS Grid 布局模块的 Level 2 规范之前，嵌套网格、subgrid 和 display: contents 就有深度的讨论，最终 subgrid 得到更多的支持，也最终成为规范中的一部分。也就是说，嵌套网格 和 display: contents 都可以实现类似 subgrid 的布局。那这一节中，和大家来探讨 display: contents 和 subgrid 有何差异？

当 CSS Grid 布局在 2017 年最初发布时，设计师和开发人员为二维布局和优化布局系统而设计时感到非常兴奋。 通过前面的学习，我们也领略到了网格布局的魅力，CSS 网格让我们可以轻松地做许多以前做不到的事情。其中一个较大的限制是，嵌套的网格不能参与其父网格的大小调整。这也是一个从一开始就被认为很重要的功能，然而，由于其复杂性，一度曾被废弃的子网格被推迟到 CSS Grid布局模块的 Level 2 中。一段时间以来，关于subgrid的使用情况、如何实现它的问题有很多讨论，甚至还有一些关于是否需要它的辩论。很多讨论都是围绕着另外两种可以处理许多与subgrid相同问题的方法：嵌套网格 和 display: contents。接下来，我们将花一些篇幅来阐述嵌套网格和subgrid，即我们将了解哪些是相似的，哪些是subgrid与嵌套网格区别？以及阐述在一些非常有效的情况下，子网格是真正需要的，而在另一些情况下，它并不是严格需要的，但会带来一个更简洁的解决方案。那我们先从嵌套网格开始。