一直以来，体验都是得物技术部的关键词之一。本文从本次交易后台性能优化实践出发，同时介绍应用整体架构和设计，希望可以给参与网站性能建设的同学提供一定的学习和参考价值。

1. 回流 通过下图方式打开Rendering选项卡：Rendering选项卡，顾名思义是做一些渲染相关的事。 Paint flashing 高亮页面重绘区域。 Layout Shift Regions 高亮布局变动区域（重排）。 Layer borders 高亮合成层边框，对…

为什么小小的css对页面性能有如此大提升？编写动画和JS时我们该如何避免造成性能浪费？如何利用DevTools寻找性能问题并定位代码。

构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree；构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树

本文会提到如何确认白屏及首屏时间。以及影响这些时间的因素有哪些。 先说结论 简单优化方面： css放在头，js放在尾（前面），js想放在头要加defer。 确认时间方面： 简单应用计算白屏时间就行。

在开始介绍今天的主角 _CSS Containment_ 之前，我们需要了解一些前置知识回流和重绘，方便我们理解以及应用的场景

渲染阶段中还没过时的基本优化思路和编码规范，并结合了优化方向给出了基本的案例，更多复杂案例可以看参考文件