前端面试：异步加载和延迟加载的理解？
回答：
异步加载和延迟加载是前端优化网站性能的两种方法。
异步加载的方案:
动态插入script标签
通过ajax去获取js代码，然后通过eval执行
script标签上添加defer或者async属性创建并插入iframe，让它异步执行js
延迟加载：
有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。
细说：
异步加载指的是在页面加载完成之后，通过JavaScript异步请求数据或资源，来避免阻塞页面的加载。常用的实现方式是使用XMLHttpRequest对象或fetch API发起异步请求，然后通过回调函数或Promise来处理请求结果。
异步加载可以提高页面的响应速度和用户体验，但也可能会增加页面的复杂度和维护成本。
延迟加载指的是将页面中不必要的资源（如图片、音频、视频等）的加载推迟到用户需要访问它们的时候再进行加载。
常用的实现方式是使用懒加载技术，即使用JavaScript来监听页面滚动或用户操作等事件，然后根据需要来动态加载资源。延迟加载可以减少页面的加载时间和带宽消耗，提高网站的性能和用户体验。
需要注意的是，异步加载和延迟加载并不是互斥的关系，它们可以结合使用来进一步优化网站的性能。
例如，在页面加载时可以先异步加载必要的脚本和样式文件，然后在用户需要访问资源时再进行延迟加载。
实例
异步加载：
使用XMLHttpRequest对象或fetch API发起异步请求，例如：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json');
xhr.onload = function() {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
// 处理请求结果
} else {
console.error('请求失败');
}
};
xhr.send();使用Promise来处理异步请求，例如：
fetch('https://example.com/data.json')
.then(response => response.json())
.then(data => {
// 处理请求结果
})
.catch(error => {
console.error('请求失败', error);
});使用async/await来处理异步请求，例如：
async function fetchData() {
try {
const response = await fetch('https://example.com/data.json');
const data = await response.json();
// 处理请求结果
} catch (error) {
console.error('请求失败', error);
}
}
fetchData();使用Intersection Observer API来监听页面滚动事件，例如：
const images = document.querySelectorAll('img[data-class="lazy" data-src]');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const image = entry.target;
image.class="lazy" data-src = image.dataset.class="lazy" data-src;
observer.unobserve(image);
}
});
});
images.forEach(image => {
observer.observe(image);
});使用图片占位符来减少页面的抖动，例如：
使用懒加载库来实现延迟加载，例如：
// 使用jQuery Lazy加载库
$("img.lazy").lazy({
effect: "fadeIn",
threshold: 200
});以上是异步加载和延迟加载的一些具体实例，实际上还有很多其他的实现方式，需要根据具体情况来选择。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
