html的加载 & 图片，视频和js的加载方式1. DOMContentLoaded 加载和 onload加载的区别 2

1. DOMContentLoaded 加载和 onload加载的区别

jQuery的_ready_事件：
- ready 事件是 jQuery 提供的一种文档加载完成后执行 JavaScript 代码的方式。
- 它类似于原生 JavaScript 中的 DOMContentLoaded 事件，会在文档的 DOM 结构构建完毕后触发，但在所有外部资源（如图片、视频）加载完毕之前。
- 这使得可以在不等待所有资源加载完成的情况下执行 JavaScript 代码，提高了页面的响应速度。
_onload_事件：

onload 事件是原生 JavaScript 的事件，它在整个页面以及所有外部资源（包括图片、视频）加载完成后触发。
这意味着它需要等待所有资源都加载完成，然后执行 JavaScript 代码。
onload 事件通常用于确保所有页面内容都已完全加载，包括外部资源。

2. 图片和视频的加载

图片的懒加载和响应式图片

响应式图片(picture元素)： 使用 srcset 和 sizes 属性，以及 <picture> 元素，可以根据不同屏幕尺寸和分辨率提供不同的图像资源，以优化页面性能。
```
<picture>
    <source srcset="image-large.jpg" media="(min-width: 768px)">
    <source srcset="image-small.jpg">
    <img src="image-small.jpg" alt="图片描述">
</picture>
```
图片的懒加载：
通过元素距html顶部的距离计算元素是否再视口内
_**getBoundingClientRect()**_方法来获取元素的大小以及位置
IntersectionObserver api
以上三个方法的具体解释链接： segmentfault.com/a/119000001…
vue-lazyload 等插件
loading属性：developer.mozilla.org/zh-CN/docs/…

2.视频的预加载（懒加载类似图片，原理还是监听滚动事件）

视频的预加载可以通过在 <head> 部分添加 <link> 元素，或者在 <video> 元素中使用 **_preload_** 属性来实现：

<!-- 通过 <link> 元素预加载视频 -->
<link rel="preload" href="video.mp4" as="video">

<!-- 或者在 <video> 元素中使用 preload 属性 -->
<video preload="auto" controls>
    <source src="video.mp4" type="video/mp4">
</video>

预加载通常适用于那些一开始就需要显示的媒体资源，以确保用户在需要时能够立即看到它们。

视频的加载可以通过video也可以使用iframe嵌入youtube等外部视频，例如：

3. js的几种常用加载方式

内联方式（Inline）： 将 JavaScript 代码直接嵌入到HTML文件中，通常放置在 <script> 标签内，可以放在 <head> 或 <body> 部分。这种方式最简单，但不适用于大型脚本或需要在多个页面中重复使用的脚本。
```
<script>
    // JavaScript 代码在这里
</script>
```
外部脚本文件（External Script）： 将 JavaScript 代码保存在单独的外部文件中，然后通过 <script> 标签的 src 属性引入文件。这种方式适用于复杂的脚本，可以在多个页面中重复使用，并有助于分离 HTML 结构和 JavaScript 代码。
```
<script src="script.js"></script>
```
异步加载（Async）： 使用 async 属性来异步加载外部脚本文件，允许页面继续加载，而不必等待脚本下载和执行完成。这对于不影响页面渲染的脚本很有用。
```
<script src="script.js" async></script>
```
延迟加载（Defer）： 使用 defer 属性来推迟脚本的执行，直到整个文档解析完成后才执行。这有助于确保脚本在文档完全加载后执行，通常放置在 <head> 中。
```
<script src="script.js" defer></script>
```
通过模块引入（ES6 Modules）： 在现代浏览器中，您可以使用 JavaScript 模块，通过 import 和 export 语句将代码模块化，以便更好地管理和组织代码。这种方式通常用于开发大型应用程序。
```
javascriptCopy code// script.js
export function myFunction() {
    // 模块中的函数
}


javascriptCopy code// 在另一个文件中引入模块
import { myFunction } from './script.js';
```

选择适当的加载方式取决于您的项目需求和性能要求。内联脚本适用于小型脚本或需要在页面加载期间执行的脚本，而外部文件适用于大型脚本和可重复使用的模块。异步和延迟加载可以优化页面性能，而模块化开发则有助于管理复杂的应用程序。