正在绘制的屏幕并不神奇
当我第一次开始前端开发（Vue.js）时，我认为浏览器只是一个“显示代码的框架”。很自然，如果您使用 但是，当我在实践中遇到动画卡顿或滚动时屏幕抖动（卡顿）时，我的想法发生了变化。 “为什么相同的代码在 Chrome 中运行顺利，但在 Internet Explorer (IE) 中崩溃？” “为什么当我用 JavaScript 稍微改变一下样式时，我的 CPU 就会飙升？” 事实证明，浏览器不仅仅是一个图片框架。浏览器是一个巨大的“画家”和“建筑师”，它解释我们发送的文本（HTML/CSS），以数学方式计算每个像素，并将其打印出来。 上次我们通过崎岖的网络道路安全地传递了数据。这次我们打开到达的数据盒（数据包），看看浏览器是如何绘制出一张称为屏幕的图片的。这是回复：启动 CS 基础知识系列的最后一个故事。 在我们的“数字物流中心”世界观中，产品（HTML 文件）现已到达客户家中（浏览器）。不过，送来的并不是成品，而是一本‘组装手册’。称为浏览器引擎（渲染引擎）的工作团队阅读本手册并立即开始组装。这个过程称为渲染管道。 读取首先到达的 HTML 文本并创建“骨架”。 然后，读取 CSS 文件并创建“样式规则”。 现在我们将骨架（DOM）和设计（CSSOM）结合起来。这里重要的一点是，仅选择“实际出现在屏幕上的内容”。 现在是非常重要的一步。性能优化的关键就在这里。创建渲染树后，浏览器将执行两项繁重的任务。 让我们感受一下代码的成本差异。 分析： 在实践中，大多数“动画卡顿”的情况都是由于实时触摸 我在大学的时候并不知道这一点，所以我随机地用 JavaScript 操作了 DOM。通过执行 确保性能的提示： 通过本文，[回复：启动]CS 基础知识系列结束了。 我们一起踏上了漫长的旅程。 一开始，我只是为了找工作而背一些知识。然而，在实践中遇到错误并重新审视之后，CS（计算机工程）并不是一纸空文，而是支撑我的代码的坚实的基础。 基础工作现已完成。是时候在坚实的土地上建造自己的城堡了。在下一个系列【Monolith Builder】中，我将介绍使用我在实践中经历过的 Spring Boot 和 Vue.js 构建 Web 应用程序。请期待“理论”转化为“实践”的过程。color: red，它就会变成红色。
货物到达，组装开始
第 1 步：蓝图分析（解析和 DOM 树）
第 2 步：室内设计（CSSOM 树）
第 3 步：创建工单（渲染树）
[代码验证]回流和重绘
const box = document.getElementById('box');
// Case 1: 觸發 Reflow 的程式碼（昂貴！）
// 改變大小或位置時，連帶周圍元素的位置也必須重新計算。
box.style.width = '200px';
box.style.height = '200px';
box.style.margin = '20px';
// Case 2: 只觸發 Repaint 的程式碼（相對便宜）
// 位置不變，只改顏色。不需重新計算，只要重新繪製即可。
box.style.backgroundColor = 'blue';
box.style.color = 'white';
box.style.visibility = 'hidden';
width、left 和 top 等布局属性而发生的。在这种情况下，需要一种技术来通过使用诸如 transform 之类的属性来跳过布局计算。实用建议：不要欺负你的浏览器
for 语句，我更改了每个元素的大小和样式。从浏览器的角度来看，这就像每秒数十次摧毁和重建建筑物的折磨。
系列 1 总结：我的 CS 重新启动