前端资源加载性能规范书.docVIP

前端资源加载性能规范书

一、资源分类与加载优先级

（一）核心资源

核心资源是指直接影响页面首次渲染（FirstContentfulPaint,FCP）和用户首次交互（FirstInputDelay,FID）的资源，必须优先加载。

HTML文档：作为页面的骨架，是所有资源加载的基础。服务器应配置合理的缓存策略，同时通过Gzip或Brotli压缩减少传输体积。对于动态生成的HTML，可采用服务端渲染（SSR）或静态站点生成（SSG）方式，确保首屏内容快速呈现。

关键CSS：负责页面核心样式的渲染，需内联在HTML的head标签中，避免因外部CSS加载延迟导致的页面闪烁（FlashofUnstyledContent,FOIT）。对于非关键CSS，可通过媒体查询（如media=print）标记为非阻塞资源，或使用rel=preload预加载但不立即执行。

核心JavaScript：实现页面交互逻辑的基础代码，如事件绑定、状态管理等。应采用代码分割（CodeSplitting）技术，将核心逻辑与非核心逻辑分离，核心JS优先加载并执行。对于使用框架开发的项目，可通过TreeShaking移除未使用的代码，减少文件体积。

（二）重要资源

重要资源对页面功能完整性和用户体验有重要影响，但不直接阻碍首屏渲染，应在核心资源加载完成后尽快加载。

字体文件：影响页面文本显示效果，可