本地正常网站上线后卡preloader循环、CSS加载异常求助

• 优先排查资源路径的大小写匹配问题：本地Windows开发环境默认不区分文件路径大小写，上传到类Linux架构的托管服务器后，路径大小写不匹配会直接返回404，哪怕肉眼核对路径完全一致也可能触发加载失败，比如目录名大写写成Assets和实际的小写assets不匹配就会导致资源找不到
• 检查预加载的触发逻辑：绝大多数站点的预加载组件会等待所有资源加载完成（即window.onload事件触发）后才隐藏加载动画，只要存在任意一个加载失败、持续pending状态的资源，预加载动画就会一直卡在界面上
• 排查跨域资源阻塞问题：页面head标签里引入的外部字体资源，如果托管服务器所在网络无法正常访问对应外部服务，会直接造成资源请求挂起，阻塞整个页面的加载流程，是最容易被忽略的异常点
• 核查托管环境的MIME类型配置：如果服务器对.css、.js等静态资源返回的Content-Type响应头不符合规范，浏览器会直接拦截资源解析，哪怕资源能正常下载也不会生效
• 现有代码存在重复引入theme.css的问题：连续两次加载同一个样式文件，说明上传文件时没有做版本校验，很容易出现文件漏传、传错旧版本的问题

快速验证方法：在页面底部临时添加一段兜底脚本 setTimeout(() => document.querySelector('.preloader').remove(), 3000)，如果等待3秒后页面能正常展示，就可以确认是资源加载异常导致的预加载卡滞，而非业务代码本身的逻辑错误

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