HTML中引入外部样式表和脚本应分离结构、样式与行为，提升维护性、加载速度与协作效率：CSS用置于中并避免@import；JS推荐放前或加defer；可配合media实现响应式加载；基础优化包括合并压缩、关键CSS内联、preload预加载及正确Content-Type设置。
HTML中引入外部样式表和脚本文件，核心是用和<script>标签把结构、样式、行为彻底分开。这样做不是为了“看起来规范”，而是让页面更易维护、加载更快、协作更顺畅。</script>
用link引入CSS：放在head里，写对路径
外部CSS必须通过引入，且一定要放在
中。浏览器遇到这个标签就会立即请求CSS文件，并阻塞后续HTML解析，直到样式加载完成——这是为了防止“无样式闪现”（FOUC）。- 路径建议用相对路径，比如css/main.css、../assets/style.css，注意大小写和斜杠方向
- 避免使用@import，它会串行加载、无法并行，拖慢渲染
- 多个样式表按依赖顺序排列，比如重置样式 → 基础组件 → 主题覆盖
用script引入JS：优先放body底部或加defer
普通<script src="xxx.js"></script>默认是同步阻塞的，会暂停HTML解析。推荐两种稳妥方式：
- 把script标签放在之前，确保DOM已就绪，脚本可直接操作元素
- 若必须放在head里，加上defer属性：<script src="app.js" defer></script>，它会并行下载、等HTML解析完再执行，且保持顺序
- async适合独立、无依赖的脚本（如统计代码），但不保证执行时机和顺序
配合media做响应式加载
不是所有CSS都要一上来就加载。可以用media属性按需引入：
- ：只在打印时生效
- ：小屏设备才加载
- 搭配onload切换media值，还能实现非关键CSS的延迟加载
基础优化要点：小改动，大效果
不用复杂工具，几个基础动作就能明显提升性能和可维护性：
- CSS文件合并压缩，减少HTTP请求数；JS同理，但注意模块依赖关系
- 关键CSS（如首屏排版、字体、按钮样式）可内联到head中，避免白屏等待
- 为link加preload提示浏览器提前获取重要资源：
- 检查服务器是否返回正确的Content-Type：text/css（CSS）和application/javascript（JS）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
