CSS加载早于HTML、网站CLS过高相关技术问题咨询

CSS加载早于HTML渲染是否正常 #

完全属于浏览器的正常行为。
浏览器的资源加载和解析本身就是并行流水线模式：

• 拿到HTML首字节后就会逐行解析，遇到<link rel="stylesheet"标签会立刻发起CSS资源请求，不会等待整个HTML文档下载完成再加载其他资源
• 该机制是为了减少首屏等待时间，避免HTML加载完成后还要额外等待CSS下载，反而拉长白屏时长

你之前认知的「先加载完HTML再加载其他资源」是错误的，浏览器不会串行处理不同类型的页面资源。

HTML还在加载就开始渲染是否正常 #

这是浏览器的默认渐进式渲染机制，属于正常行为：

• 浏览器不会等整个HTML完全下载、解析完成才开始渲染，只要已经解析出的DOM节点匹配到了对应的CSSOM规则，就会先把这部分内容绘制到页面上
• 开启网络和CPU限流后这个现象会被放大，因为HTML下载速度变慢，浏览器会分多次把已经拿到的内容渲染出来

是否和Smarty技术栈有关 #

和Smarty没有直接关联。
Smarty是服务端模板渲染引擎，只负责在服务端把动态数据拼接成HTML字符串返回给浏览器，只要返回的HTML结构、资源引入顺序没有问题，浏览器的渲染行为就和服务端所用的模板引擎无关。

你的CLS问题根源与修复方案 #

你目前的高CLS大概率就是你提到的DOM排布逻辑导致的：
你把页脚DOM放在内容DOM前面，同时给页脚加了fixed定位，在页面加载早期阶段：

1. 浏览器先解析到头部、页脚DOM，此时内容DOM还未下载解析完成
2. 浏览器会先把还没应用fixed定位的页脚渲染到内容本该存在的位置
3. 等CSS加载完成、或者内容DOM解析完成后，页脚被fixed定位挪到页面底部，原本被页脚占住的位置突然释放，后续加载的内容整体上移，直接导致CLS升高

修复方案：

• 调整DOM顺序，把页脚DOM放到内容DOM后面，符合正常文档流排布逻辑
• 如果必须保留当前DOM顺序，可以给页脚的父容器提前设置和页脚高度一致的min-height占位，同时把position: fixed相关的样式写在HTML头部的内联CSS中，避免样式晚应用导致的布局偏移
• 所有动态插入的DOM元素都提前声明宽高占位，避免加载完成后挤压已有内容

内容的提问来源于stack exchange，提问作者prk_001