工程笔记
写给真正
交付技术栈的人
关于 React、Node.js、TypeScript 与 AI 的文章。有译文正文时显示译文。没有时显示英文，并注明这一点。
标签：Browser Rendering
使用 content-visibility 和 contain-intrinsic-size 跳过屏幕外渲染
了解内容可见性功能如何通过自动裁剪来降低长页面的服务器渲染成本，为何必须使用“包含内在尺寸”选项，以及它与虚拟化技术的区别。
阅读约 12 分钟以“失效”视角思考：一种关于浏览器如何渲染页面的实用模型
通过思考每项变更会使哪些内容失效，来学习理解浏览器的渲染机制，这些方面包括布局重排、绘制开销以及合成、水合和流式渲染等。
阅读约 11 分钟从样式表到屏幕：CSS在浏览器处理流程中的位置
从下载到像素：深入理解CSS——DOM、CSSOM与渲染树的构建方式，样式级联的运行过程，以及哪些样式来源会为每个元素竞争优先权。
阅读约 8 分钟从66％到185像素：浏览器在布局前如何解析CSS值
追踪 CSS 值从声明、层叠、指定、计算、使用到实际应用的各个阶段，了解为何相对单位以及 rem 转换技巧会呈现那样的行为。
阅读约 8 分钟级联如何选出胜出者：重要性、具体性与来源顺序
了解浏览器如何处理相互冲突的CSS声明，如何将特异性视为四部分对比来理解，以及为何悬停规则和!important常常会让人感到意外。
阅读约 11 分钟当设置为“无”时CSS值从何而来：继承机制是如何工作的
了解浏览器如何判断属性是否继承、子元素为何会获得父元素的计算值，以及 inherit 和 initial 如何让您实现精确控制。
阅读约 10 分钟重排、重绘、合成：每项CSS更改会给浏览器带来多少负担
跟随HTML与CSS的流程，了解DOM、CSSOM、布局、绘制及合成过程，掌握为何宽度变化比颜色变化更耗资源，以及如何避免布局抖动。
阅读约 16 分钟实时DOM集合、布局抖动以及属性缺失问题解析
DOM是一棵实时更新的树结构。为何JavaScript在遍历实时集合时会跳过某些元素，读写操作如何导致布局频繁重排，以及何时需要使用getAttribute方法。
阅读约 6 分钟React 渲染详解：状态更新与屏幕像素的关系
React的渲染、协调与提交阶段如何与浏览器的渲染过程——包括布局、绘制和合成——相连接，从而实现从状态更新到实际屏幕像素的呈现。
阅读约 17 分钟
常见问题
关于这些文章
是。每篇都是为本站准备的英文原创改写。结构与代码跟随来源；正文重写并做过重合检查。
英文是来源。只有存在该语言的正文译文时才显示其他语言。缺失或空白的译文仍是英文，包括在本地化网址上。
草稿经编辑后进入发布队列。站点导入只收录新的或有变更的 slug，不会重复添加。
示例仅供说明。上线前请核对技术栈与许可。若需交付，请发来简报。