在软件开发和网页设计的领域中，"src"是一个常见的术语，它通常出现在HTML标签中，用于指定外部资源的位置，这个属性告诉浏览器去哪里加载图像、脚本或其他资源文件，在<img>标签中，src属性指向图片的URL；而在<script>标签中，src则指向JavaScript文件的路径，了解如何使用src以及它的工作原理对于任何希望建立有效且高效网站的开发者来说都是至关重要的。
什么是src？
src是“source”的缩写，意味着“来源”，在HTML文档中，当您想要从服务器上的另一个位置引用资源时，就会用到这个属性，通过设置正确的src值，您可以确保页面能够正确地显示图片、执行脚本或播放媒体内容。
`src`在不同标签中的应用
1.<img> 标签中的src
这是最直观也是最常见的用法之一。<img> 标签用于嵌入图像到网页中，而src 属性则指定了该图像文件所在的完整URL或者相对路径。
<img src="images/logo.png" alt="Company Logo">
这里，src="images/logo.png" 表示当前目录下有一个名为images 的文件夹，里面存放着名为logo.png 的图片文件。
2.<script> 标签中的src
除了图像之外，src 也经常被用来加载外部JavaScript库或框架，这样做的好处是可以保持HTML结构清晰，并且使得代码更加模块化，示例如下：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
这行代码将在页面上引入jQuery库，从而使开发者可以利用其提供的各种功能来增强用户体验。
3.<link> 标签中的src
虽然严格意义上讲，在CSS样式表链接（<link>）里并没有直接使用src 这个属性名，但类似地我们会看到href 属性扮演着相同角色——即指向外部样式表的位置。
<link rel="stylesheet" href="styles/main.css">
此例中，href="styles/main.css" 表明存在一个叫做styles 的目录，其中包含了名为main.css 的样式定义文件。
如何优化带有 `src` 的资源加载
为了提高网站性能并减少加载时间，有几点建议值得考虑：
压缩文件：对图片进行无损压缩可以显著减小其大小而不牺牲质量；同样地，对于文本类型的资源如JS和CSS，也可以使用工具如UglifyJS等来进行混淆与压缩处理。
利用缓存：通过设置适当的HTTP头部信息（如Cache-Control），可以让浏览器存储已下载过的资源副本，在后续访问时直接从本地读取而无需再次请求服务器。
延迟加载非关键资源：对于那些不影响首屏渲染的内容（比如某些第三方插件），可以通过异步方式加载它们，从而加快初次访问速度。
表格示例：不同类型资源及其对应的src 属性
| 资源类型 | HTML标签 | src 属性示例 |
| 图片 | | src="images/logo.png" |
| JavaScript |
|