网页应用性能最佳实践
拥有一款高性能应用对于构建客户喜欢使用的内容至关重要。在整个开发过程中监控性能。延迟有两个关键指标：第一帧时间 (TTFF) 和准备就绪时间 (RTU)，也称为完全绘制时间 (TTFD)。以下是一些提高应用性能的常见最佳实践。
使用Native SplashScreen API。
应用启动性能会影响客户体验。当启动应用时，客户希望几乎能立即在屏幕上看到一些东西。达成该目的所需的时间就是TTFF（第一帧时间）。Vega Script的原生SplashScreen功能提供使用图像资产显示应用特定启动画面的能力，因此用户将在您的应用启动时立即看到启动画面。然后，应用可以专注处理内容加载和网络调用，而无需浪费时间来渲染基于JavaScript的启动画面。可以在启动画面的一系列动画图像中加入动画效果。
此KPI的计算依据是从启动manifest.toml文件中主组件到在屏幕上渲染第一帧所花费的时间。
SplashScreenManager使您能够为屏幕生成静态或动画图形，直到进入应用的下一个屏幕为止。SplashScreen资产在打包应用时捆绑在一起，并在应用启动期间由设备使用。SplashScreen消除了应用启动时的一些启动复杂性，因此启动画面将一直显示，直到应用准备好显示第一帧时将其删除。
实现TTFD（完全绘制时间）标记
Vega应用应当在应用生命周期的各个阶段满足特定的性能标记要求。一个标记是TTFD（参见上图），一旦应用成功加载并准备好进行客户交互，应用应当满足该标记要求。这适用于应用进程尚不存在时的冷启动，以及应用进程已经存在时的热启动。当网页应用内容完全加载后，网页应用应在onLoad回调中实现此标记。
在网页应用启动和加载后，调用useReportFullyDrawn() 方法。包装器有一个onLoad事件，该事件将在应用启动并准备就绪时触发。另外，在reportFullyDrawn() 方法于热启动期间从后台移动到前台时调用该方法。
此示例代码调用useReportFullyDrawn() 来处理冷启动 (onLoad) 和warmStart (keplerAppState)。
import { useReportFullyDrawn } from '@amazon-devices/kepler-performance-api';
import React, { useEffect, useState, useRef } from 'react';
import {VegaAppStateChange, useAddVegaAppStateListenerCallback, useGetCurrentVegaAppStateCallback} from '@amazon-devices/react-native-kepler';
...
...
export const App = () => {
const reportFullyDrawnCallback = useReportFullyDrawn();
const getCurrentVegaAppStateCallback = useGetCurrentVegaAppStateCallback();
const addVegaAppStateListenerCallback = useAddVegaAppStateListenerCallback();
const [appState, setAppState] = useState(getCurrentVegaAppStateCallback);
// 使用useEffect挂钩，在首次呈现后以及
// 状态更改为前台时执行完全绘制报告
// 如果应用执行额外的异步处理，
// 并在完全绘制之前需要完成这些处理，
// 则在依赖项数组中传递完成状态，
// 并检查挂钩内部的状态。
useEffect(() => {
const changeSubscription = addVegaAppStateListenerCallback(
'change',
handleAppStateChange
);
}, [reportFullyDrawnCallback]);
const handleAppStateChange = (nextAppState: any) => {
if (
appState.match(/inactive|background/) &&
nextAppState === 'active'
) {
reportFullyDrawnCallback();
}
setAppState(nextAppState);
};
...
...
return (
<View style={styles.sectionContainer}>
<WebView
.
.
.
onLoad={(event) => {
console.log("onLoad url: ", event.nativeEvent.url)
// 隐藏启动画面并呈现内容
SplashScreenManager.hideAsync(your.package.name).catch((e) => {
console.error("隐藏启动画面时出错：" , e) });
// 仅当实际页面加载时才报告完全绘制
if("https://mywebapp.com/home" === event.nativeEvent.url)
{
reportFullyDrawnCallback();
}
}}
/>
</View>
);
};
有关更多详细信息，请参阅如何为Webview应用实现reportFullyDrawn标记（仅提供英文版）。
优化网络请求
要提升网页应用启动性能，必须优化网络请求。做到这点的一种方法是尽可能地组合CSS和JavaScript文件，使用图像合并并减少外部第三方依赖项的数量，从而大幅减少HTTP请求。使用Gzip或Brotli启用资产压缩可显著减小HTML、CSS和JavaScript等基于文本的资源的有效负载大小。需要注意，图像文件通常已经压缩，因此它们无法通过这点受益。
<!-- 效率低下，可能并非所有情况下都需要 -->
<script src="utils.js"></script>
<script src="api.js"></script>
<scriptsrc="main.js"></script>
<!-- 优化 - 只要可以在逻辑上对其组合 -->
<script src="app.bundle.js" defer></script>
利用HTTP/2或HTTP/3等现代HTTP协议也有益处，因为它们支持多路复用，并允许通过单个连接并行发送多个请求，从而最大限度地减少开销。减少客户端重定向还有助于消除不必要的延迟，因为每次重定向都会增加额外的往返行程，从而延迟页面加载。
缩短服务器响应时间
优化服务器响应时间对于提供响应迅速的用户体验至关重要。最有效的策略之一是使用内容分发网络 (CDN)，该网络从地理位置离用户更近的边缘位置提供静态资产，例如图像、JavaScript和CSS文件，从而减少延迟。通过优化后端处理（例如改进数据库查询、减少中间件开销和优化服务器逻辑）来缩短第一字节时间 (TTFB) 可以大幅提高性能。
API效率也会产生影响。尽量减少API调用的数量，在适当时将其合并，并避免冗余请求，这样可以减少网络开销。为了更快地交付内容，可以考虑使用服务器端渲染 (SSR) 或静态站点生成 (SSG)，二者可以在服务器上预渲染HTML，从而加快页面加载速度并改进首次内容绘制 (FCP)。FCP是浏览器渲染第一段内容所需的时间。您还可以通过使用延迟加载技术来延迟加载非关键数据或次要数据，优先处理最重要的内容。
优化渲染和JavaScript执行
优化渲染和JavaScript执行，以实现响应迅速的网页应用。一种关键做法是避免在页面加载期间使用繁重计算或不必要的逻辑而阻塞主JavaScript线程。当主线程被阻塞时，它可能会因延迟渲染而丢帧，从而对用户体验产生负面影响。
为了缓解这种情况，请保持JavaScript的轻量化，并在初始加载期间仅执行基本代码。这也适用于输入事件处理。输入处理程序可能会导致应用流畅度之类的性能问题出现，因为它们会阻碍帧完成，并导致额外和不必要的布局工作。对处理程序进行去抖动，这意味着存储事件值并在下一次requestAnimationFrame回调中处理样式变化。
使用async或defer属性异步加载并非马上需要的脚本，以防它们阻碍页面渲染。这减少了妨碍渲染的JavaScript的影响。
// 异步加载JavaScript
<script src="analytics.js" defer></script>
// 在需要时动态导入数据/JavaScript
import('./data.js').then(initData);
利用代码拆分可以动态加载JavaScript模块，因此每个页面或特性仅加载所需的脚本。通过CSS属性（如transform和will-change）启用加速，以实现更流畅的动画和更好的视觉性能。通过CSS进行GPU加速有助于将渲染工作转移到GPU上。这些策略增强了网页应用的感知和实际性能。
工作线程是另一种优化JavaScript的方法，允许它在后台运行。有关更多信息，请参阅网页应用的工作线程最佳实践。
缓存资源
缓存可增强网页应用的性能和响应能力。客户端缓存涉及为JavaScript文件、CSS样式表、数据和图像等资源设置适当的Cache-Control标头。这允许网页应用存储和重复使用这些资产，而不是重复下载它们。利用CDN缓存还可以通过从离用户较近的边缘站点提供静态内容来大幅缩短加载时间。通过结合客户端和CDN缓存，开发者可以减少服务器负载、减少延迟，并为最终用户提供更流畅的体验。
提高滚动性能
要提高应用的滚动性能，需要考虑几个方面。首先，避免在滚动事件处理程序中频繁访问或更改布局属性，例如offsetTop和scrollHeight。进行这些更改会影响性能，因为每次都必须重新计算布局。您还可以使用限制或防抖机制来限制滚动事件处理的频率。最好避免在滚动侦听器内同步读取或写入布局，以防止强制重排。
仅渲染可见或必要的元素，而不是页面上的所有内容或整个可滚动列表。使用诸如transform之类GPU加速的CSS属性来实现平滑滚动也是不错的办法，而不要使用top、left或 width之类大量占用CPU的属性。
Chrome DevTools中的Rendering（渲染）选项卡提供视觉提示，可突出显示滚动时绘制缓慢或冗余的图层。使用此工具来识别性能瓶颈并优化您的滚动行为。
衡量网页应用的KPI
Vega提供了Vega应用KPI可视化工具，用于总体衡量关键绩效指标。可使用此工具来衡量第一帧时间 (TTFF)、完全绘制时间 (TTFD)、滚动流畅度和视频流畅度指标。有关更多详细信息，请参阅衡量应用KPI。
要查看网页应用性能更详细、更具体的方面，Chrome Dev Tool (CDT) 将向您显示具体的网络应用性能方面。相关的一些Chrome工具包括Performance（性能）选项卡、Network（网络）选项卡和Lighthouse，用于审核基准测试，识别网页应用热点 (HTML/JS/CSS/图像)，从而提高应用的性能。LightHouse目前无法在Vega中运行，因此您可以直接在桌面版Chrome中加载网页应用，并通过适当的网络和CPU限制进行调试。
相关主题
Last updated: 2025年10月7日
