Angular inlineCriticalCss 和内部函数 walkStyleRules 介绍
有一个客户启用了 Angular Server Side Rendering，并且启用了 inlineCriticalCss，后来发现在 Dynatrace 的 hotspot 里的 vendor.js 文件有个名叫 walkStyleRules 的函数，耗时比较多。如下图所示：
Angular 服务器端渲染（Server Side Rendering）
Angular的服务器端渲染是一种技术，允许在服务器上预渲染Angular应用的部分或全部内容，然后将其发送到客户端。这有助于改善首次加载性能，特别是对于搜索引擎爬虫和缓慢的网络连接。SSR生成HTML内容，使其在浏览器加载JavaScript之前就可用，从而提高了页面渲染速度。
inlineCriticalCss 选项
inlineCriticalCss是Angular中的一个配置选项，它允许将关键的CSS样式直接嵌入到HTML文档中。这些样式是在首次加载时必需的，以避免首次渲染时出现页面内容的不正确样式（闪烁问题）。通过将关键样式嵌入HTML，可以减少浏览器需要请求的外部CSS文件的数量，从而提高加载性能。
walkStyleRules 函数
现在，让我们来详细了解walkStyleRules函数以及它在vendor.js中的作用。
walkStyleRules函数是Angular的内部函数，它主要用于处理嵌入的关键CSS样式。具体而言，它的作用如下：
分析CSS规则：
walkStyleRules函数会遍历解析嵌入的CSS规则。这些规则定义了在首次加载时应用于页面的样式。应用样式：一旦分析了CSS规则，
walkStyleRules函数会根据这些规则将相应的样式应用到HTML文档的元素上。这确保了页面在首次加载时具有正确的样式，而不会出现页面内容的不正确渲染。优化样式处理：
walkStyleRules函数经过优化，以尽量减少处理时间和资源消耗。在SSR过程中，性能优化尤为重要，因为服务器需要在短时间内处理多个请求。
例子
为了更好地理解walkStyleRules函数的作用，让我们考虑一个示例：
假设您的Angular应用包含以下HTML和CSS代码：
<!DOCTYPE html>
<html>
<head>
<style>
/* 嵌入的关键CSS规则 */
.important-style {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<div class="important-style">这是一个重要的文本</div>
</body>
</html>
在这个示例中，walkStyleRules函数将会：
- 遍历
<style>标签中的CSS规则。 - 分析
.important-style规则，了解它设置了font-weight和color属性。 - 将这些样式应用到页面中具有
important-style类的元素，例如<div class="important-style">。
这样，当页面在浏览器中首次渲染时，文本将以粗体和红色显示，而不需要等待外部CSS文件的加载。
Dynatrace 中的 Hotspot
您提到Dynatrace中的Hotspot，指出walkStyleRules函数的耗时比较多。在性能分析工具中，Hotspot通常表示在某个函数中花费了大量时间的地方。如果walkStyleRules函数出现在Hotspot中，这可能意味着它在服务器端渲染过程中成为性能瓶颈。
为了解决这个问题，可以考虑以下几种方法：
优化CSS规则：检查嵌入的CSS规则，确保它们没有不必要的复杂性或冗余。简化CSS规则可以降低
walkStyleRules函数的处理时间。使用CDN或缓存：如果CSS样式是外部引用的，确保它们在CDN上托管，并启用浏览器缓存，以减少对CSS文件的请求次数。
升级服务器性能：如果
walkStyleRules函数的耗时问题仍然存在，考虑升级服务器硬件或使用负载均衡来分散请求，以提高性能。查看Angular版本：确保您正在使用最新版本的Angular，因为每个新版本通常都会包含性能改进。
综上所述，walkStyleRules函数在Angular的SSR中起着关键作用，用于处理嵌入的关键CSS规则以确保首次加载时的正确渲染。如果它在性能分析中成为Hotspot，需要通过优化CSS规则和服务器性能来解决性能问题。这样可以确保Angular应用在SSR时具有出色的性能和用户体验。
- 点赞
- 收藏
- 关注作者
评论（0）