在EJS文件中直接使用script和style标签是否会引发运行异常？

CSS相关影响 #

• 首先HTML5规范本身允许style标签出现在body内，所以这种写法不会直接触发语法错误。但存在两个明确的问题：
  • 样式覆盖风险：多个style标签的样式优先级遵循“后出现优先级更高”的规则，不同组件如果定义了同名类名，很容易出现非预期的样式覆盖，排查成本极高
  • 渲染性能损耗：浏览器每解析到一个新的style标签，都需要重新计算样式树、触发页面重绘，组件数量多的场景下会明显拖慢首屏渲染速度

JS相关影响 #

• 变量提升（hoisting）的作用范围仅限单个script标签内部，多个script标签是按在HTML中出现的顺序同步阻塞执行的，不存在跨标签的提升机制，也不会出现默认的异步执行问题：
  • 如果后出现的script依赖前一个script定义的全局变量/方法，只要标签顺序符合依赖顺序，就可以正常运行
  • 如果给script加了async/defer属性，才会出现异步加载执行的顺序问题，普通script标签不会有这类问题
• 这种写法容易触发的隐性问题：
  • 全局污染：所有组件的JS代码都运行在全局作用域，变量、函数重名时会直接覆盖，出问题很难定位
  • 重复执行：如果同一个组件被多次渲染引入，对应的script标签也会被插入多次，代码重复执行很容易引发事件绑定多次、变量被重复赋值等bug
  • 工程化能力缺失：零散分布的JS、CSS无法做统一的压缩、合并、缓存处理，页面加载体积更大，资源复用性也很低

优化建议 #

如果想保留组件拆分的开发模式，建议做简单的工程化改造：

• 样式层面给每个组件的类名加唯一前缀，或者用构建工具把所有组件的CSS统一打包后放到head标签内引入
• JS层面把每个组件的逻辑封装到IIFE（立即执行函数）或者ES Module中，避免全局变量污染，所有JS代码统一打包后放到body底部加载

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