1. HTML中引入CSS和JS的基础方式
前端开发中，CSS和JavaScript的引入方式直接影响页面性能和可维护性。作为从业十年的全栈开发者，我见过各种引入方式导致的性能问题和维护难题。下面系统梳理几种经典引入方案及其适用场景。
1.1 传统link和script标签引入
最基础的引入方式是在HTML头部使用<link>引入CSS，在body底部使用<script>引入JS：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- 页面内容 --> <script src="app.js"></script> </body> </html>这种方式的优势在于：
- 结构清晰，符合关注点分离原则
- 浏览器可并行加载CSS和解析HTML
- JS放在body底部避免阻塞渲染
实际项目中需要注意：
- CSS应放在head中确保样式尽早加载
- 非关键JS可以添加async/defer属性
- 生产环境应该使用minified版本文件
1.2 内联样式和脚本
对于小型项目或关键路径资源，可以使用内联方式：
<style> body { margin: 0; } </style> <script> console.log('Inline script'); </script>适用场景：
- 关键CSS（Above the Fold内容样式）
- 小型工具函数或配置
- 需要立即执行的初始化代码
注意事项：
- 会增大HTML文件体积
- 无法被浏览器缓存
- 不利于维护，建议控制在50行以内
2. 现代前端工程化的引入方式
2.1 CSS模块化方案
现代前端框架通常采用CSS模块化方案：
// React中引入CSS模块 import styles from './Component.module.css'; function Component() { return <div className={styles.container}>内容</div>; }优势包括：
- 局部作用域避免样式污染
- 支持Sass/Less等预处理器
- 可与组件文件放在同一目录
2.2 JS模块系统
ES6模块已成为现代前端标准：
// 导出模块 export function util() {} // 导入模块 import { util } from './utils';配套工具链：
- Webpack/Rollup进行打包
- Babel转译新语法
- Tree-shaking消除无用代码
3. 性能优化实践
3.1 资源预加载
使用preload/prefetch优化加载：
<link rel="preload" href="critical.css" as="style"> <link rel="prefetch" href="next-page.js" as="script">3.2 代码分割
动态导入实现按需加载：
import('./module').then(module => { // 使用模块 });4. 常见问题解决方案
4.1 样式冲突
解决方案：
- 使用CSS-in-JS方案
- 采用BEM命名规范
- 添加scoped属性（Vue）
4.2 脚本执行顺序
控制策略：
- 使用defer保持执行顺序
- 动态创建script元素
- 模块系统自动管理依赖
5. 工程化最佳实践
5.1 构建工具配置
推荐配置：
- PostCSS处理浏览器前缀
- Autoprefixer自动补全
- CSS压缩（cssnano）
5.2 调试技巧
Chrome DevTools技巧：
- Coverage面板查看未使用代码
- Performance面板分析加载时序
- Network面板模拟慢速网络
6. 未来趋势
值得关注的技术：
- CSS Container Queries
- Import Maps原生模块
- Web Components样式封装
通过合理选择引入方式，可以显著提升页面性能和开发体验。建议根据项目规模和技术栈选择最适合的方案。
