前端性能优化教程——理解关键路径
内容提要
文章讲解浏览器关键渲染路径：浏览器先构建DOM和CSSOM，再合成渲染树、布局并绘制像素。CSS默认阻塞渲染，同步JavaScript阻塞解析。优化重点是减少阻塞资源、缩短首字节时间，并关注最大内容绘制等指标，以加快首次渲染和核心内容呈现。
延伸解读
理解渐进式渲染的权衡
文章指出浏览器采用渐进式渲染，在获取部分资源后即开始渲染，以避免空白屏幕。但过早渲染可能导致页面破碎，等待过久又让用户无谓等待。关键渲染路径正是浏览器决定等待哪些必要资源的机制。理解这一点有助于开发者平衡首次渲染速度与视觉稳定性，避免因过早或过晚渲染而损害用户体验。
CSS与JavaScript的阻塞差异
CSS默认阻塞渲染，但浏览器仍会继续解析HTML；同步JavaScript则阻塞解析，进而延迟后续内容处理。文章提到，位于<head>中的阻塞资源会阻塞整个页面渲染，而现代浏览器可能仅阻塞资源下方内容。开发者应区分渲染阻塞与解析器阻塞，优先优化<head>中的关键资源，并利用async或defer减少解析阻塞。
从首次渲染到内容渲染的视角转变
传统关键渲染路径关注首次绘制，但文章提出应更重视最大内容绘制（LCP）等指标，即核心内容呈现的时刻。这意味着一些传统上不阻塞首次渲染的资源（如字体、图片）也可能影响内容渲染。开发者需借助Lighthouse等工具识别LCP元素及其阶段，将优化重点从“尽快显示任何内容”转向“尽快显示有意义的内容”。
Q&A
什么是关键渲染路径？
关键渲染路径是指网页在浏览器中开始显示前必须经历的一系列步骤，包括构建DOM、CSSOM、执行JavaScript、创建渲染树、布局、绘制和合成像素，最终将内容显示到屏幕上。
为什么CSS和JavaScript会阻塞渲染？
CSS默认阻塞渲染，因为浏览器需要先下载并处理CSS才能渲染页面；同步JavaScript阻塞解析，因为它可能修改DOM或CSSOM，浏览器必须等待其执行完毕才能继续解析HTML。
如何优化关键渲染路径？
优化关键渲染路径的目标是减少加载HTML的时间（通过TTFB衡量）并减轻渲染阻塞资源的影响。具体方法包括减少阻塞资源、缩短首字节时间，并关注最大内容绘制等指标。
关键渲染路径中哪些资源是必须等待的？
必须等待的资源包括：部分HTML代码、位于<head>中的阻塞渲染的CSS、位于<head>中的阻塞渲染的JavaScript。浏览器通常不等待整个HTML、字体、图片、非阻塞JavaScript和非阻塞CSS。
什么是渐进式渲染？
渐进式渲染是浏览器逐步渲染页面的能力，它会在获取到足够资源后立即开始渲染，而不是等待所有资源加载完毕，以平衡渲染速度和页面完整性。
如何识别阻塞渲染的资源？
可以使用性能评估工具如WebPageTest和Lighthouse来识别阻塞渲染的资源。WebPageTest用橙色圆形标记，Lighthouse仅在资源真正导致渲染延迟时发出警告。
