同步加载、异步加载、延迟加载、预加载的区别

1. <link rel="preload" href="script1.js" as="script">
   <link rel="preload" href="script2.js" as="script">

   同步加载：浏览器在遇到<script>标签时，会立即停止解析HTML，并执行JavaScript代码，这样会阻塞后续代码的执行。如果页面中存在多个同步加载的脚本，那么后面的脚本需要等待前面的脚本加载和执行完成后才能继续执行。

   <script src="script1.js"></script>
   <script src="script2.js"></script>

   第一个<script>标签加载和执行完script1.js后才会继续加载和执行第二个<script>标签中的script2.js

2. 异步加载：浏览器在遇到带有async属性的<script>标签时，会异步加载JavaScript文件，并继续解析HTML，在JavaScript文件下载完成后才执行。如果同时存在多个async属性的<script>标签，它们的加载和执行顺序是不确定的。

   html
   <script async src="script1.js"></script>
   <script async src="script2.js"></script>

   浏览器会异步加载script1.js和script2.js，不会阻塞后续代码的执行，它们的加载和执行顺序是不确定的。

3. 延迟加载：浏览器在遇到带有defer属性的<script>标签时，会异步加载JavaScript文件，并继续解析HTML，在HTML文档解析完成后再执行JavaScript文件。如果同时存在多个defer属性的<script>标签，它们的加载顺序是按照在文档中出现的顺序依次加载，但不会影响后续的DOM操作。

   <script defer src="script1.js"></script>
   <script defer src="script2.js"></script>

   浏览器会异步加载script1.js和script2.js，并且等到HTML文档解析完成后再依次执行这两个脚本。延迟加载不会阻塞后续代码的执行，但会保持脚本的加载顺序

4. 预加载：浏览器在遇到带有rel="preload"属性的<link>标签或使用JavaScript动态加载资源时，会提前下载指定的资源，在需要使用时直接从缓存中读取，从而提升页面性能和用户体验。

总结来说，同步加载会阻塞后续代码的执行，异步加载不会阻塞后续代码的执行，但是加载和执行顺序不确定，延迟加载会在HTML文档解析完成后再执行JavaScript文件，预加载可以提前加载资源，从而提升页面性能和用户体验。需要根据实际情况选择合适的加载方式。