应根据硬件特性匹配HTML函数工具：一、CPU弱时用getElementById、DocumentFragment、textContent；二、GPU强时用will-change、playsinline、translateZ(0)；三、内存小用事件委托与手动移除；四、高PPI用srcset、picture、media查询；五、触控设备用inputmode、keydown拦截、ontouch事件。
如果您刚接触HTML开发，面对不同硬件设备时不确定该使用哪些HTML函数工具来优化页面表现，则可能是由于缺乏对硬件特性与HTML功能匹配关系的基本认知。以下是针对不同硬件场景选择HTML函数工具的具体步骤：
一、根据CPU性能选择DOM操作函数
CPU主频较低或核心数较少的设备（如入门级平板、旧款笔记本）处理复杂DOM操作时容易出现卡顿，应优先选用轻量、同步、低开销的原生方法，避免依赖高计算成本的封装函数。
1、使用 document.getElementById() 替代 document.querySelector() 进行单元素获取。
2、批量更新DOM前，先用 document.createDocumentFragment() 构建离线节点树，再一次性挂载。
立即学习“前端免费学习笔记（深入）”；
3、禁用频繁触发的 innerHTML 赋值，改用 textContent 修改纯文本内容。
二、依据GPU支持情况选择CSS合成相关HTML属性
具备独立显卡或集成显卡支持硬件加速的设备可安全启用CSS 3D变换与合成层，此时HTML中需配合使用特定属性触发GPU渲染，而无GPU加速能力的设备则应规避此类属性以防止回退至软件渲染引发掉帧。
1、在需要动画的容器元素上添加 style="will-change: transform;" 属性，仅限GPU可用设备启用。
2、为视频播放区域设置 playsinline 和 webkit-playsinline 属性，确保iOS设备启用内联播放并启用GPU解码路径。
3、检测到 CSS.supports('transform', 'translateZ(0)') 返回 true 时，才向元素注入 style="transform: translateZ(0);" 强制创建合成层。
三、按内存容量限制选择事件监听策略
内存小于2GB的设备（如部分Chromebook、低端Android手机）无法长期维持大量事件监听器，需采用委托机制与手动销毁策略，防止内存泄漏和响应延迟。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
1、将点击事件统一绑定在 document.body 上，利用事件冒泡配合 event.target.matches('.btn-save') 判断目标元素。
2、在页面卸载前调用 element.removeEventListener('scroll', handler) 显式移除长列表滚动监听器。
3、对动态生成的表单项，使用 自定义属性标记，由统一初始化函数按需绑定事件，避免重复注册。
四、依屏幕像素密度选择图像加载函数
高PPI屏幕（如Retina、QHD+以上）需提供更高分辨率图像资源，否则会出现模糊；而低密度屏幕加载高清图会浪费带宽与内存，应通过HTML原生响应式属性实现精准适配。
1、使用 <img src="icon-1x.png" srcset="icon-2x.png 2x, icon-3x.png 3x"> 按设备像素比自动选取资源。
2、对背景图，改用 CSS @media (-webkit-min-device-pixel-ratio: 2) 配合 background-image 切换，不依赖JavaScript判断。
3、在 <picture> 标签中嵌套多个 <source>，分别指定 media="(min-resolution: 2dppx)" 与 type="image/webp" 条件。
五、按输入方式差异选择表单交互函数
触控设备（如iPad、Android平板）与物理键盘设备（如台式机、笔记本）在焦点管理、输入反馈、快捷键响应等方面行为差异显著，HTML层面需通过属性与事件组合实现输入路径适配。
1、在触摸优先的输入框中添加 inputmode="decimal" 或 inputmode="search"，唤起对应软键盘布局。
2、对桌面端常用快捷键（如Ctrl+S），在 document.addEventListener('keydown', e => { if (e.ctrlKey && e.key === 's') {...} }) 中拦截并阻止默认保存行为。
3、为触控按钮添加 ontouchstart="this.style.opacity='0.7'" 与 ontouchend="this.style.opacity='1'" 实现即时视觉反馈，不依赖CSS伪类。
