一个网站的性能，可以分为两个方面，一个叫Loading Performance（加载性能）。一个叫Rendering Performance（渲染性能）。
我们通常需要获取几十个甚至是几百个不同的资源，所有这些资源加起来的数据量可能非常庞大，并且必须在短短几百毫秒内汇聚起来，以实现我们想要达到的即时网络体验。在满足上述要求的前提下实现即时网络体验绝非易事，优化内容效率的关键在于：避免不必要的下载、通过各种压缩技术优化每个资源的传送编码以及尽可能利用缓存来避免多余的下载。 优化内容效率的主要措施：
避免不必要的下载优化资源编码和大小图像优化，使用正确的格式，懒加载模式网页字体优化合理利用HTTP缓存JavaScript 启动优化包括几点：
防止内存泄漏减少DOM操作预加载关键资源使用代码拆分减少JavaScript负载延迟加载资源，使用Intersection Observer API渲染，是浏览器识别我们的代码，加以解析再重新糅合成机器所认识的规则，最后展示给用户看的过程。现在的网络用户都希望他们访问的页面具有交互性并且运行顺畅，页面不仅要快速加载，而且要顺畅地运行，动画和交互应如丝绸般顺滑。
要编写高性能的网站和应用，就需要了解浏览器如何处理 HTML、JavaScript 和 CSS，并确保我们所编写的代码尽可能高效地运行。 我们在工作时需要了解并注意五个主要区域。 这些是我们拥有最大控制权的部分，也是像素至屏幕管道中的关键点：
JavaScript。一般来说，我们会使用 JavaScript 来实现一些视觉变化的效果。比如用 jQuery 的 animate 函数做一个动画、对一个数据集进行排序或者往页面里添加一些 DOM 元素等。当然，除了 JavaScript，还有其他一些常用方法也可以实现视觉变化效果，比如：CSS Animations、Transitions 和 Web Animation API。样式计算。此过程是根据匹配选择器（例如 .headline 或 .nav > .nav__item）计算出哪些元素应用哪些 CSS 规则的过程。从中知道规则之后，将应用规则并计算每个元素的最终样式。布局。在知道对一个元素应用哪些规则之后，浏览器即可开始计算它要占据的空间大小及其在屏幕的位置。网页的布局模式意味着一个元素可能影响其他元素，例如 元素的宽度一般会影响其子元素的宽度以及树中各处的节点，因此对于浏览器来说，布局过程是经常发生的。绘制。绘制是填充像素的过程。它涉及绘出文本、颜色、图像、边框和阴影，基本上包括元素的每个可视部分。绘制一般是在多个表面（通常称为层）上完成的。有时您可能听到与绘制一起使用的术语“栅格化”。这是因为绘制实际上分为两个任务： 1. 创建绘图调用的列表，2. 填充像素，后者称为“栅格化”。合成。由于页面的各部分可能被绘制到多层，由此它们需要按正确顺序绘制到屏幕上，以便正确渲染页面。对于与另一元素重叠的元素来说，这点特别重要，因为一个错误可能使一个元素错误地出现在另一个元素的上层。不一定每帧都总是会经过管道每个部分的处理。实际上，不管是使用 JavaScript、CSS 还是网络动画，在实现视觉变化时，管道针对指定帧的运行通常有三种方式：
1. JS / CSS > 样式 > 布局 > 绘制 > 合成 如果您修改元素的“layout”属性，也就是改变了元素的几何属性（例如宽度、高度、左侧或顶部位置等），那么浏览器将必须检查所有其他元素，然后“自动重排”页面。任何受影响的部分都需要重新绘制，而且最终绘制的元素需进行合成。
2. JS / CSS > 样式 > 绘制 > 合成 如果您修改“paint only”属性（例如背景图片、文字颜色或阴影等），即不会影响页面布局的属性，则浏览器会跳过布局，但仍将执行绘制。
3. JS / CSS > 样式 > 合成 如果您更改一个既不要布局也不要绘制的属性，则浏览器将跳到只执行合成。这个版本开销最小，最适合于应用生命周期中的高压力点，例如动画或滚动。
绘制是填充像素的过程，像素最终合成到用户的屏幕上。 它往往是管道中运行时间最长的任务，应尽可能避免此任务，除 transform 或 opacity 属性之外，更改任何属性始终都会触发绘制。通过层的提升和动画的编排来减少绘制区域。
合成是将页面的已绘制部分放在一起以在屏幕上显示的过程。此方面有两个关键因素影响页面的性能：需要管理的合成器层数量，以及您用于动画的属性。
尽量使用 transform 和 opacity 属性更改来实现动画。合理使用 will-change 或 translateZ 提升移动的元素。避免过度使用提升规则；各层都需要内存和管理开销。管理层并避免层数激增以上是google工程师写的关于浏览器性能的文章，原文地址是这里 。整理出来多看看，以后也会用到。
