前端性能优化教程——理解关键路径
内容提要
关键渲染路径是浏览器在显示网页前必须经历的一系列步骤，包括构建DOM和CSSOM、执行JavaScript代码、创建渲染树、样式和布局处理、生成像素点等。优化关键渲染路径可减少HTML加载时间和渲染阻塞资源的影响。最大内容绘制是关键内容渲染路径的重点。
延伸解读
理解渐进式渲染的权衡
文章指出，浏览器采用渐进式渲染以平衡渲染时机：过早渲染会导致页面破碎，过晚则让用户无谓等待。关键渲染路径正是浏览器决定首次渲染前必须等待哪些资源的机制。这提醒开发者，优化不是盲目移除资源，而是识别对首次渲染至关重要的资源，避免不必要的延迟，同时确保页面基本可用。
渲染阻塞与解析器阻塞的区别
CSS 是渲染阻塞资源，会暂停页面渲染，但浏览器仍可继续解析 HTML 并执行其他任务；JavaScript 默认是解析器阻塞资源，会阻止 HTML 解析，进而影响后续内容渲染。文章强调，位于 <head> 中的阻塞资源会阻塞整个页面渲染，因此优化 <head> 内容是提升性能的核心。理解两者差异有助于针对性优化。
从首次渲染到内容渲染的焦点转移
传统关键渲染路径关注首次绘制，但文章提到，随着用户体验指标发展，关注点正转向最大内容绘制（LCP）和首次内容绘制（FCP）。这意味着一些传统上不阻塞首次渲染的资源（如字体、图片）可能对核心内容呈现至关重要。开发者需平衡首次渲染速度与主要内容呈现，利用 Lighthouse 等工具识别 LCP 元素及依赖链。
Q&A
什么是关键渲染路径？
关键渲染路径是指网页在浏览器中开始显示前必须经历的一系列步骤，包括构建DOM和CSSOM、执行JavaScript、创建渲染树、样式和布局处理、生成像素点等。
关键渲染路径包括哪些具体步骤？
关键渲染路径包括：根据HTML构建DOM，根据CSS构建CSSOM，执行可能修改DOM或CSSOM的JavaScript，结合DOM和CSSOM创建渲染树，进行样式和布局处理，在内存中生成像素点，进行像素合成，最后将像素绘制到屏幕上。
哪些资源会阻塞渲染？
阻塞渲染的资源包括：网页的一部分HTML代码、位于<head>元素中的阻塞渲染的CSS、位于<head>元素中的阻塞渲染的JavaScript。
如何优化关键渲染路径？
优化关键渲染路径的目标是减少加载HTML的时间（通过首字节到达时间TTFB衡量）并减轻渲染阻塞资源的影响。核心步骤是优化<head>元素内的内容。
什么是解析器阻塞资源？
解析器阻塞资源会阻止浏览器同时执行其他任务（这些任务需要继续对HTML进行解析）。默认情况下，JavaScript就是解析器阻塞资源（除非被标记为异步或延迟加载），因为它执行时可能会修改DOM或CSSOM。
关键内容渲染路径与关键渲染路径有何不同？
关键渲染路径传统上关注页面的首次加载，而关键内容渲染路径则更注重最大内容绘制（LCP）或首次内容绘制（FCP）所需的时间，可能涉及一些传统上不被视为阻塞的资源，但这些资源对于实现丰富的内容绘制是必不可少的。
