前端开发：优化关键渲染路径

前端开发：优化关键渲染路径

引用

CSDN

1.

https://blog.csdn.net/weixin_33750452/article/details/89073105

浏览器渲染性能是前端开发中一个重要的优化方向。本文将深入探讨浏览器渲染原理以及CSS、JS、Font、img等资源对渲染的影响，帮助开发者更好地优化关键渲染路径，提升网页加载速度和用户体验。

浏览器渲染原理

浏览器渲染过程主要包括以下几个步骤：

1. DOM（文档对象模型）构建：解析HTML代码，构建DOM树。
2. CSSOM（CSS对象模型）构建：解析CSS代码，构建CSSOM树。
3. RenderTree（渲染树）构建：结合DOM和CSSOM，生成渲染树。需要注意的是，CSS选择器越详细，匹配工作越多，匹配节点越慢。
4. Layout（布局）：计算渲染树节点的位置和大小。在移动端，如果不设置viewport宽度为理想视口，viewport宽度通常为980px，这会导致文字很小，需要手动放大阅读。
5. Paint（绘制）：根据背景、边框、阴影等样式，将布局生成的区域填充为最终将显示在屏幕上的像素。

资源对渲染的影响

CSS

CSS的加载和解析对初次渲染有重要影响：

• 通过<style>标签或<link rel="stylesheet">引入的CSS会阻塞初次渲染。
• 使用media query可以避免非关键CSS资源阻塞初次渲染。
• preload方式不会阻塞渲染，但会提前加载资源。

JavaScript

JavaScript的加载和执行对HTML解析器有重要影响：

• 内联JS和外部JS都会阻塞HTML解析器。
• 使用defer属性可以将脚本推迟到整个HTML文档解析完后执行。
• 使用async属性可以让脚本异步加载，不会阻塞HTML解析器。

Font

字体资源的加载对内容渲染有重要影响：

• 浏览器为了避免FOUT（未样式化文本闪烁），会尽量等待字体加载完成后才显示应用了该字体的内容。
• 这可能导致FOIT（内容不可见闪烁）问题，即内容无法尽快展示，导致空白。

img

图片资源不会阻塞首次渲染，但会影响页面的整体加载速度。

通过理解这些渲染原理和资源加载方式，开发者可以更好地优化关键渲染路径，提升网页加载速度和用户体验。