共 5 篇相关文章
这篇讲的是如何优化前端性能中一个关键却容易被忽视的环节：样式计算。作者从DOM操作引发样式重算的现象出发，直接点明性能瓶颈。 文章核心给出了两个优化方向。第一是降低CSS选择器的复杂度。它对比了简单的类选择器（如`.title`）与复杂的复合选择器（如`.box:nth-last-child(-n+1).title`），后者会让浏览器花费大量时间去确认父子关系和次序，严重拖慢渲染。作者提倡采用BEM这类基于class的方法论来简化规则。第二，也是更重要的，是减少需要执行样式计算的元素范围。文章解释了最坏情况下计算量与元素和规则数量的乘积关系，并介绍了现代浏览器通过为每个元素维护样式规则集合来优化计算范围的机制。 此外，文章还介绍了如何使用Chrome DevTools的Timeline功能来实际评估样式计算的成本。通过分析帧率图表和紫色的样式计算耗时事件，开发者可以准确定位卡顿原因。整体而言，这是一篇非常实用的性能优化指南，给出了具体可操作的方法和诊断工具。
页面加载时内容会“跳动”，这篇技术博客解释了其中一个常见原因：图片尺寸未被提前声明。文章指出，浏览器需要下载并解析图片才能确定其尺寸，这个过程会导致反复的布局计算和重绘，严重影响渲染效率。
核心解决方案其实很简单：为所有 标签显式指定 width 和 height 属性。这样浏览器能在下载图片前就为其预留出空间，从而消除不必要的回流（reflow），让页面渲染更流畅。文章详细对比了指定尺寸与不指定尺寸的区别：前者能让浏览器在下载图片前就渲染页面，消除布局偏移；后者则会导致浏览器反复计算布局，拖慢速度。
作者也提到了使用该属性可能带来的小问题——禁用图片时可能出现空框，但整体上仍强烈推荐使用，因为性能提升的收益远大于此。此外，文章给出了两个关键实践建议：一是不要用 HTML 或 CSS 强行缩放图片（比如把 60x60 的图强制显示为 30x30），应该在图像处理软件中预先调整好尺寸；二是建议为图片本身或其直接父容器指定尺寸，这样才能有效生效。
尽管存在显示上的小权衡，但养成在代码中为图片预定义尺寸的习惯，是前端性能优化中一项非常值得投入的基础工作。
这篇讲的是前端性能优化中的关键概念：页面重绘与回流。作者从浏览器渲染页面的流程切入，清晰解释了DOM树、样式结构与渲染树（Render Tree）的构建关系，并指出渲染树不包含 `display:none` 等隐藏节点这一重要细节。 文章的核心是区分回流与重绘：当元素的几何属性（如尺寸、位置）改变时触发回流，浏览器需要重新构建部分渲染树；而仅改变外观属性（如背景色）则只触发重绘。作者强调“回流必将引起重绘”，并列举了六种常见触发回流的场景，如DOM增删、窗口尺寸变化等。 为说明性能影响，文章通过一段JS代码演示了连续样式修改如何导致多次不必要的回流。同时，作者揭示了浏览器内部的优化机制——通过维护操作队列来合并回流操作，并提醒开发者某些属性访问（如 `offsetWidth`）会强制刷新该队列。 最后，文章给出了具体的优化策略：批量修改样式（如使用 `className` 或 `cssText`）、采用离线操作（如 `DocumentFragment`）、缓存布局信息，以及让动画元素脱离文档流。这些方法能有效减少渲染树的重构规模，提升页面性能。
浏览器渲染页面时，repaint（重绘）和reflow（回流）是影响性能的两大关键环节。简单来说，当元素的外观改变但不影响布局时会触发重绘，而当几何属性或页面结构发生变化导致布局重新计算时则会触发回流，后者开销往往更大。 这篇文章聚焦于这两者，深入剖析了它们产生的具体场景及其对页面流畅度的影响。作者从浏览器渲染流水线的底层机制出发，拆解了诸如频繁操作DOM、复杂的CSS选择器、多次读取布局属性值等常见行为是如何一步步引发不必要的重绘和回流的。 文章不仅点明了问题，更提供了大量实用的优化策略。例如，通过合并多次DOM操作、利用CSS transform代替位置属性来触发动画、使用DocumentFragment进行批量更新，以及如何合理使用will-change属性来告知浏览器元素的变化意图等。这些技巧旨在减少浏览器的计算量，让交互和动画保持丝滑。对于前端开发者来说，理解这些原理并应用这些策略，是提升Web应用性能不可或缺的一课。
这篇讲的是浏览器渲染流程中那个耗时的操作——Reflow（重排）。文章从CSS规范中“渲染对象”这一底层概念讲起，说明了浏览器如何将DOM节点转化为可视化盒子（Box）来进行布局计算。具体到Mozilla内核，它通过一个名为`frame`的对象来操控这个盒子，并介绍了`frame`的三个核心动作。这为我们理解布局引擎的工作机制提供了一个清晰的微观视角。 Reflow常被笼统地称为“性能杀手”，但作者没有停留在泛泛而谈。通过剖析这些底层对象的操作，文章解释了Reflow为何必然涉及复杂的几何计算：当一个元素的尺寸、位置发生变化，或者插入、删除一个元素时，浏览器可能需要递归地重新计算受影响的整个区域，乃至整棵树的布局。这有助于开发者从原理上理解为何频繁修改样式或DOM会拖慢页面。 对于前端开发者而言，了解这些内部机制，并非为了直接操作它们，而是为了更深刻地认识到写出高性能CSS与DOM操作代码的重要性。知道“锅”是怎么造的，才能更明白该如何“用好”它。
