HTML5 性能优化需从代码压缩、懒加载、避免强制同步布局、优化 CSS 关键路径及启用现代资源交付五方面入手，每项均含具体可执行技术手段。
如果您在开发 HTML5 页面时发现加载缓慢、渲染卡顿或交互响应迟钝，则可能是由于未对代码体积、资源加载时机及 DOM 重排行为进行有效控制。以下是提升 HTML5 性能的具体操作步骤：
一、压缩 HTML5 源代码
压缩 HTML 代码可减少网络传输体积，加快首屏解析速度，同时降低 浏览器 解析器的处理负担。移除空白符、注释及冗余属性是关键手段。
1、使用在线 工具 如 HTMLMinifier 或通过构建工具（如 Webpack 的html-webpack-plugin 配合 minify 选项）自动压缩 HTML 文件。
2、手动移除 HTML 中所有无意义的空格、制表符和换行，确保标签紧凑排列，例如将
Hello
立即学习 “ 前端免费学习笔记（深入）”；
简化为
Hello
。
3、删除所有 格式的 HTML 注释，除非用于特定构建条件且已确认不会进入生产环境。
4、移除元素上默认值属性，例如 简化为 ， 无需显式声明type（若为默认值）。
二、实施图片与脚本的 懒加载
懒加载推迟非视口内资源的获取与解析，避免初始渲染阶段的带宽争抢与主线程阻塞，从而提升首屏可交互时间。
1、对 loading="lazy" 属性，浏览器原生支持该特性，仅对非关键图片启用，首屏核心图须保持同步加载。
2、对 同样添加loading="lazy"，尤其适用于嵌入地图、视频或第三方组件。
3、对 JavaScript 模块使用 import() 动态导入，在用户触发动作（如点击、滚动至区域）后再加载对应逻辑，避免将全部业务脚本打包进主入口文件。
4、监听IntersectionObserver API 判断元素是否进入视口，当目标元素可见时再执行图片 src 赋值或组件初始化。
三、减少强制同步布局（Forced Synchronous Layout）
强制同步布局会触发浏览器立即计算样式与布局，打断渲染流水线，造成严重重排开销。应避免在读取布局信息后立刻修改样式。
1、将所有读取布局的操作（如 offsetHeight、getBoundingClientRect()）集中于一次批量调用， 禁止在循环中反复读取再写入。
2、使用 requestAnimationFrame() 包裹 DOM 写入操作，确保其在下一次重绘前统一提交，避免在事件回调中直接修改多个元素样式。
3、用 transform 和opacity替代 top、left、width 等触发布局的 CSS 属性实现动画，这些属性由合成器线程处理，不触发重排。
4、对频繁更新的容器设置 contain: layout paint，限制浏览器样式与布局计算范围， 适用于独立内容区块如卡片列表、弹窗等。
四、优化 CSS 关键渲染路径
CSS 是渲染阻塞资源，其解析与计算直接影响首次绘制时间。精简并合理组织 CSS 可显著缩短白屏期。
1、提取首屏所需 CSS（Critical CSS），内联至 中，确保首屏样式无需等待外部文件即可应用。
2、对非首屏 CSS 使用 异步加载 ， 避免 render-blocking，同时保留样式表完整性。
3、避免使用 @import 引入 CSS，因其会引发串行请求，改用多个并行 标签或构建时合并文件。
4、删除未使用的 CSS 规则，借助 Puppeteer 或 Chrome DevTools 的 Coverage 面板识别冗余样式，尤其注意响应式断点中被完全覆盖的选择器。
五、启用现代资源交付机制
利用 HTTP/ 2 多路复用、服务端推送及缓存策略，可大幅降低资源获取延迟，提升重复访问性能。
1、配置服务器支持 HTTP/2，确保 HTML、CSS、JS、字体等静态资源能并行传输，禁用基于域名分片的旧式优化方案。
2、对关键资源（如首屏字体、核心 CSS）启用 HTTP/2 Server Push（若服务端支持），推送必须谨慎，避免推送未命中缓存的资源导致带宽浪费。
3、为静态资源设置强缓存头（Cache-Control: public, max-age=31536000），并采用内容哈希命名（如 main.a1b2c3.js）， 确保版本变更时客户端自动拉取新文件。
4、对 HTML 文档启用协商缓存（ETag 或 Last-Modified），配合 Cache-Control: no-cache， 使服务器可快速返回 304 响应，减少重复传输。
