IIS部署PHP站点部分Chrome设备加载时文本模糊失真问题求助

问题根因 #

1. 服务端性能瓶颈：你部署站点的笔记本性能较低，PHP动态渲染页面时需要先执行SQL查询拉取汇率数据，整个响应过程耗时较长，浏览器会采用渐进式渲染策略，先加载已收到的部分HTML和CSS绘制页面框架，待完整的动态内容返回、布局稳定后才会完成最终渲染，中间阶段就会出现文本模糊的现象。
2. CSS属性触发Chrome渲染机制异常：你给.btntkpb、.btncb两个按钮设置了transform: translateY(50%)属性，Chrome在页面布局还在动态变化的阶段，会对带transform的元素默认采用低精度渲染模式提升重绘效率，等页面内容加载完成、布局不再变化后才切换到高清渲染，这是你看到几秒后模糊自动消失的直接原因。
3. 刷新无异常是因为浏览器已经缓存了CSS、JS等静态资源，同时服务端二次响应速度更快，重绘过程短到无法感知；改为静态HTML硬编码内容后，不需要等待PHP执行和数据库查询，服务器直接返回完整的页面内容，浏览器一次性完成渲染，自然不会出现模糊问题。

解决方案 #

• 优化服务端响应速度：给汇率查询结果增加缓存（比如本地文件缓存、内存缓存），避免每次页面请求都重复查询数据库，大幅降低PHP动态页面的生成耗时。
• 调整CSS避免渲染模式切换：要么去掉按钮的transform属性，改用margin/padding实现位置偏移效果；要么给transform属性追加translateZ(0)，即改为transform: translateY(50%) translateZ(0)，强制元素全程用GPU渲染，避免高低清模式切换导致的模糊。
• 增加页面渲染拦截：在页面头部加入临时样式body { opacity: 0; }，通过JS监听页面加载完成事件后再将body透明度设置为1，直接屏蔽中间的半渲染状态，用户只会看到最终的完整页面。

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