WebAPI补充知识

1. window.onload 和 DOMContentLoaded 的区别

window.onload 和 DOMContentLoaded 是 JavaScript 中用于处理页面加载完成事件的两种不同机制，它们之间存在显著的差异。以下是对这两个事件的详细比较：

触发时机
- window.onload：该事件在整个页面（包括所有的 DOM 元素、样式表、脚本、图片、flash 等）都加载完成后才会触发。这意味着，只有当页面的所有资源都完全加载并准备就绪时，window.onload 事件才会执行相关的回调函数。
- DOMContentLoaded：该事件在浏览器解析完 HTML 文档的结构（DOM 树）并可以对其进行操作后立即触发。此时，大部分 HTML 标签已经被解析，并且可以访问到它们的属性和内容。然而，这并不包括所有的外部资源，如样式表、图片等。
使用场景
- window.onload：适用于需要确保页面所有资源都加载完毕后再执行某些操作的场景。例如，当需要在页面加载完成后遍历所有图片元素或统计页面加载时间时，可以使用 window.onload 事件。
- DOMContentLoaded：适用于希望尽早开始操作 DOM，但又不想等待所有外部资源加载完毕的场景。例如，在页面加载早期添加交互效果或初始化某些依赖于 DOM 结构的 JavaScript代码时，可以使用DOMContentLoaded 事件。
用户体验
- window.onload：由于需要等待所有资源加载完毕，因此可能会导致页面响应时间较长，用户体验相对较差。
- DOMContentLoaded：由于只需等待 DOM 结构加载完成，因此可以更早地开始执行 JavaScript 代码，提高页面响应速度和用户体验。
兼容性
- window.onload：作为 JavaScript 中的标准事件，window.onload 在所有现代浏览器中都具有良好的兼容性。
- DOMContentLoaded：虽然 DOMContentLoaded 事件在现代浏览器中得到了广泛支持，但在一些较旧的浏览器中可能需要使用其他方法（如轮询 document.readyState 属性或使用 setTimeout 配合 doScroll 方法等）来模拟实现类似功能。
编写个数与执行
- window.onload：在传统的注册事件方式中，window.onload 只能编写一次。如果有多个 window.onload 方法，只会执行最后一个。如果使用 addEventListener 方法注册 load 事件，则没有此限制，可以添加多个事件监听器，并且它们都会得到执行。
- DOMContentLoaded：可以使用 addEventListener 方法添加多个回调函数，这些回调函数都会被执行。这使得处理多个依赖于 DOM 结构加载完成的操作变得更加简单和直观。

示例代码

javascript

// window.onload
window.onload = function() {
  // 页面所有资源加载完成后执行的代码
  console.log('页面已完全加载');
};

// 注意：如果尝试添加另一个onload事件处理函数，它会覆盖上面的函数
window.onload = function() {
  // 这个函数会覆盖上面的onload事件处理函数
  console.log('另一个页面加载完成的回调');
};

// 另外的写法：事件监听器
window.addEventListener("load", (event) => {
  console.log("page is fully loaded");
});

javascript

// DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
  // DOM结构加载完成后执行的代码
  console.log('DOM已加载');
});

// 可以添加多个DOMContentLoaded事件监听器
document.addEventListener('DOMContentLoaded', function() {
  // 这个回调函数也会被执行
  console.log('另一个DOMContentLoaded回调');
});

2. ajax、fetch、axios 的区别

ajax、fetch 和 axios 是用于进行 HTTP 请求的三种常见方式。它们各有优缺点和适用场景。

ajax (Asynchronous JavaScript and XML)
Ajax 不是一种单一的技术，而是一种使用现有技术集合的方法。它最常见的实现是使用 XMLHttpRequest (XHR) 对象。特点：
- 是最早的异步请求解决方案。
- 可以与服务器交换数据并更新部分网页内容，而无需重新加载整个页面。
- 使用回调函数处理响应。
- 不支持 Promise。
javascript
```
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();
```
1
2
3
4
5
6
7
8
fetch
Fetch 是较新的 API，旨在替代 XMLHttpRequest。它是基于 Promise 的。特点：
- 语法更简洁，使用起来更加直观。
- 基于 Promise，支持 async/await。
- 原生支持，不需要额外的库。
- 不会自动拒绝 HTTP 错误状态。
javascript
```
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
```
1
2
3
4
axios
Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js。特点：
- 支持浏览器和 Node.js。
- 自动转换 JSON 数据。
- 可以拦截请求和响应。
- 可以取消请求。
- 客户端支持防御 XSRF。
- 对于简单的请求，Fetch 可能就足够了。如果需要更多功能和更好的错误处理，Axios 是一个很好的选择。
javascript
```
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
```
1
2
3
4
5
6
7

WebAPI补充知识 ​

1. window.onload 和 DOMContentLoaded 的区别 ​

2. ajax、fetch、axios 的区别 ​

WebAPI补充知识

1. window.onload 和 DOMContentLoaded 的区别

2. ajax、fetch、axios 的区别