HTML性能优化核心是避免解析阻塞和优化加载顺序:script应放body底部或用async/defer属性;关键CSS需内联,非关键CSS延迟加载;preload仅用于立即需要的资源;图片懒加载必须设width/height防布局偏移。
HTML 本身不慢,慢的是它触发的阻塞和加载顺序。优化不是压缩几个空格,而是让浏览器在解析 HTML 的每一毫秒都干对的事。
script 标签放哪儿、加什么属性才不白屏
浏览器遇到
会立刻暂停 HTML 解析,等 JS 下载并执行完才继续——首屏白屏就从这儿开始。
:适合无依赖脚本(如
),下载不阻塞,但执行时机不可控,可能早于 DOM 就绪
:更适合业务逻辑 JS,下载不阻塞,执行在 DOM 解析完成后、
前,且严格按书写顺序
别把
放在
里又不加属性——这是最常见白屏原因
禁用
:现代浏览器已废弃,执行即清空文档流,本地测试尤其敏感
关键 CSS 怎么内联、非关键 CSS 怎么延迟
外部
默认渲染阻塞:浏览器必须构建完 CSSOM 才能画第一帧。首屏样式若全靠
,FCP 必然延迟。
把首屏必需的 CSS 提取出来,内联进
,控制在 2–3KB 内;别塞 base64 大图
非首屏 CSS 用
延迟加载
或直接用
属性做条件加载,比如
绝对别在 CSS 文件里写
引入关键样式——它串行加载,实测拖慢 FCP 300ms+
preload 该加在哪、怎么写才真正加速
不是“越多越好”,它是高优先级提示,写错反而抢带宽、挤掉 HTML 或关键 CSS。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
立即学习
“
前端免费学习笔记(深入)
”;
只对当前导航「立刻要用」的资源用:
(
必加,否则字体不生效)
首屏 Hero 图可 preload,但别对所有
都加——浏览器可能先加载
,再触发懒加载,造成重复请求
别用 preload 加 JS 入口文件(如
)——它本身已被
覆盖,再 preload 属于冗余调度
验证是否生效:Chrome DevTools → Network 面板,看预加载资源的
是否为
loading="lazy" 对图片和 iframe 的兼容性陷阱
原生
看似简单,但只对
和
生效,且有明确限制。
必须显式设置
和
属性,否则懒加载会引发布局偏移(CLS),Core Web Vitals 直接扣分
Safari 15.4+ 才支持
对
的支持,旧版需回退到
+ JS 方案
不支持背景图、
、CSS
中的字体——这些还得靠
手动实现
首屏大图千万别加
,它可能被当成“非关键资源”延迟加载,导致首屏空白
最容易被忽略的点:HTML 解析本身是单线程的,任何同步行为(比如没加
的脚本、含复杂选择器的内联
、甚至一个错位的
)都会卡住整个流程。别只盯着体积,先看 Network 面板的 waterfall 时间线——哪里停住了,那里就是瓶颈。
asyncanalytics.jsdeferDOMContentLoadeddocument.write()main.cssmediamedia="(min-width: 768px)"@importcrossoriginsrcmain.jsdeferPriorityhighloading="lazy"widthheightloading="lazy"data-srcimage-set()@font-faceIntersectionObserverloading="lazy"defer@import