href和src发送的什么请求

GET 请求：获取数据，不会改变服务器状态，安全性较高。

HEAD 请求：与GET请求几乎一致，不同之处在于收到响应时，不会返回响应体（response body）。

从上述发送请求的方式可以得知，href属性的主要作用是链接其他资源。

2.2 href 属性的优化

href属性会阻塞浏览器渲染流程，会产生性能影响。为了减少阻塞渲染流程的时间，可以采用如下办法进行优化。

异步加载资源，可以将页面渲染的过程和HTTP请求的过程分开，从而实现并行处理，提高了并发性。

defer属性：defer属性指示脚本在文档解析和渲染完成后再执行。这可以显著提高渲染性能。

async属性： async属性意味着该脚本不会阻塞页面的渲染，而是会在下载完成后立即执行。但是，async没有顺序保证，因此如果多个JS文件之间有依赖关系，则不应该使用async。

3. src属性

3.1 src 发送的请求类型

src主要用于寻找外部文件并在HTML文档中嵌入。在HTML中，主要是指嵌入其他资源文件，如图片、音频、视频、JS等。

    <img src="/example/image.png">
    <script src="/example/script.js"></script>

与属性不同，src属性的请求方式大部分情况下都是GET请求。但也可以发送一些不同于GET请求类型的请求，比如POST请求、JSONP请求等。

POST请求：与GET请求的区别在于POST请求可以通过请求体的方式提交数据。

JSONP请求：JSONP是JSON with Padding的缩写，原理是利用了script标签可以跨域请求的特性，以及浏览器解析JS文件没有跨域限制的特点，可以在不同源之间进行数据传递，从而实现跨域。

其他请求：iframe中的src属性可以发出GET、POST请求；audio和video标签中的src属性可以发送流媒体数据请求。

3.2 src属性的优化

src属性对页面解析和渲染流程有一定的阻塞效果，为了减少页面的阻塞时间，可以通过以下方式进行优化。

让JS脚本异步加载，可以使用defer和async属性。

静态文件添加Expires或Cache-Control报头，浏览器会对静态资源进行缓存，减少频繁地发送请求。

使用CDN服务可以改善静态文件的加载速度并减少网络延迟。

4. href和src的比较

虽然两者都可以用于引入外部资源，但其本质差异还是比较明显的。主要体现在以下几个方面。

href是用来建立当前元素和文档之间的联系，当浏览器发现它时，会并联下载资源，如果是HTML资源，则生成并行解析DOM树。因此，HTML文档的导入外部CSS可以使用href，而不是src。

src是用来替换当前元素的资源，当浏览器发现它时，会阻塞其他资源的处理和处理当前文档，直到该资源被下载、解析并复制到生成的DOM节点后才会继续运算其他的内容。因此，使用[xss_clean]标签时需要使用src属性而不是href属性。

5. 总结

本文介绍了在Web开发中，两个发起请求的常用属性href和src。我们了解到，href主要用于链接外部资源或者内部锚点等，它主要发起GET请求和HEAD 请求等 。src主要用于寻找外部文件并在HTML文档中嵌入，主要发起GET、POST等请求。在使用这两者时，也应该注意其使用方法，如何进行优化等。