为什么要把ref="/tag/137/" style="color:#C468A7;font-weight:bold;">JavaScript代码放到外部文件
在做网页开发时，经常会用到JavaScript来实现一些交互功能，比如轮播图、表单验证、动态加载内容等。刚开始可能习惯把JS代码直接写在HTML页面里，但随着项目变大，维护起来就变得麻烦。这时候，把JavaScript代码单独放在一个外部文件中，再通过HTML引用进来，会更清晰也更容易管理。
就像做饭时把调料分瓶装好，用的时候按需取用，比所有调料混在一个碗里要方便得多。
如何引用外部JavaScript文件
引用外部JS文件其实很简单，只需要在HTML中使用<script>标签，并设置src属性指向你的JS文件即可。例如，你有一个叫main.js的文件，放在js文件夹下：
<script src="js/main.js"></script>这个标签通常放在<head>里或者页面底部<body>结束前。放在底部的好处是避免阻塞页面渲染，让用户更快看到内容。
注意路径问题
文件路径写错是最常见的问题之一。如果JS文件和HTML在同一目录，直接写文件名就行：
<script src="script.js"></script>如果文件在子目录里，比如js文件夹，就要带上路径：
<script src="js/script.js"></script>如果是上级目录中的文件，用../回到上一级：
<script src="../scripts/app.js"></script>浏览器打不开控制台一看，经常就是404报错，多半是路径不对。
多个文件的加载顺序
有时候一个页面需要引入多个JS文件，比如先加载jQuery，再加载基于jQuery写的插件。这时候顺序就很重要。必须先把依赖的库加载进来，再加载使用它的代码：
<script src="js/jquery.min.js"></script>
<script src="js/plugin.js"></script>反过来写，plugin.js就会因为找不到jQuery而报错。
异步和延迟加载
对于不影响页面主功能的脚本，可以加上async或defer属性，让它们不阻碍页面显示。async是下载完就执行，适合独立脚本，比如统计代码；defer是等到文档解析完再执行，适合有依赖关系的脚本。
<script src="analytics.js" async></script>
<script src="init.js" defer></script>加了这些属性后，页面加载会更流畅，用户体验更好。
缓存带来的好处
外部JS文件能被浏览器缓存。用户第一次访问时下载一次，之后再打开其他页面只要引用的是同一个文件，就不需要重新下载。这能明显减少流量消耗，加快页面响应速度。尤其是公共组件或框架，全站共用一个文件，优势更明显。