HTML页面加载是流式解析与多线程协作过程:DOM和CSSOM必须同时就绪才能构建渲染树;script(无async/defer)会阻塞HTML解析,CSS不阻塞解析但阻塞渲染和DOMContentLoaded。
HTML 页面加载不是“下载完就渲染”,而是解析、构建、协作的多线程过程;
和
必须都就绪,浏览器才能生成渲染树——缺一不可。
HTML 解析是流式、非阻塞的,但 script 会打断它
浏览器一边接收 HTML 字节流,一边逐行解析并构建
树。遇到
或
,会发起 CSS 请求,但**不暂停 HTML 解析**;而遇到
(无
或
)时,解析立刻暂停,直到 JS 下载、执行完毕才继续。
常见错误现象:把
放在
顶部,导致后续 HTML 元素迟迟无法进入 DOM,首屏白屏时间拉长
真实场景:SPA 中常依赖 JS 初始化路由或数据,但不应牺牲 HTML 结构的早期可构建性
参数差异:
脚本下载不阻塞解析,但执行时机不确定;
等待 HTML 解析完成后再按顺序执行,更可控
CSS 加载不阻塞 HTML 解析,但会阻塞渲染和 DOMContentLoaded
构建必须完成,浏览器才敢开始布局(Layout)和绘制(Paint)。即使 DOM 已解析完毕,只要关键 CSS(如
在
中)还没解析完,
就不会触发,页面也不会真正渲染。
容易踩的坑:用
在 CSS 文件中引入其他样式表——它会串行加载,且延迟
构建,比多个
更慢
性能影响:外部 CSS 文件体积大、RTT 高时,用户看到空白时间显著增加;内联关键 CSS 可缓解首屏阻塞
兼容性注意:
属性值如
或
的
不会阻塞初始渲染,浏览器知道它不参与当前视口样式计算
DOM 和 CSSOM 协作生成渲染树(Render Tree),不是简单叠加
渲染树 ≠ DOM 树 + CSSOM 树。浏览器会过滤掉
的节点、伪元素(除非显式创建)、
中的不可见元素,并合并匹配的样式规则。这个过程发生在内存中,不暴露给 JS。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
立即学习
“
前端免费学习笔记(深入)
”;
常见错误现象:JS 修改了某个元素的
,但页面没重绘——可能因为对应 CSS 规则未加载/解析,
还没更新
使用场景:服务端渲染(SSR)需确保 HTML 输出时,关键样式已内联或预加载,否则客户端首次渲染仍会闪烁
调试建议:Chrome DevTools 的
面板开启 “Paint Flashing” 可观察重绘区域;
面板查看哪些节点被提升为合成层——这和渲染树结构强相关
最易被忽略的一点:CSS 文件哪怕只差一个字节没收全,
就算未完成,整个渲染流程就会卡住;而 HTML 解析哪怕中断(如网络断开),已解析的部分 DOM 仍存在——但用户看不到,因为没有样式支撑的 DOM 是不可见的。
DOMCSSOMDOMasyncdeferasyncdeferCSSOMDOMContentLoaded@importCSSOMmediaprint(max-width: 768px)display: noneheadclassNameCSSOMRenderingLayersCSSOM