前端面試：異步加載和延遲加載的理解？
回答：
異步加載和延遲加載是前端優(yōu)化網(wǎng)站性能的兩種方法。
異步加載的方案:
動(dòng)態(tài)插入script標(biāo)簽
通過ajax去獲取js代碼，然后通過eval執(zhí)行
script標(biāo)簽上添加defer或者async屬性創(chuàng)建并插入iframe，讓它異步執(zhí)行js
延遲加載：
有些 js 代碼并不是頁面初始化的時(shí)候就立刻需要的，而稍后的某些情況才需要的。
細(xì)說：
異步加載指的是在頁面加載完成之后，通過JavaScript異步請求數(shù)據(jù)或資源，來避免阻塞頁面的加載。常用的實(shí)現(xiàn)方式是使用XMLHttpRequest對象或fetch API發(fā)起異步請求，然后通過回調(diào)函數(shù)或Promise來處理請求結(jié)果。
異步加載可以提高頁面的響應(yīng)速度和用戶體驗(yàn)，但也可能會(huì)增加頁面的復(fù)雜度和維護(hù)成本。
延遲加載指的是將頁面中不必要的資源（如圖片、音頻、視頻等）的加載推遲到用戶需要訪問它們的時(shí)候再進(jìn)行加載。
常用的實(shí)現(xiàn)方式是使用懶加載技術(shù)，即使用JavaScript來監(jiān)聽頁面滾動(dòng)或用戶操作等事件，然后根據(jù)需要來動(dòng)態(tài)加載資源。延遲加載可以減少頁面的加載時(shí)間和帶寬消耗，提高網(wǎng)站的性能和用戶體驗(yàn)。
需要注意的是，異步加載和延遲加載并不是互斥的關(guān)系，它們可以結(jié)合使用來進(jìn)一步優(yōu)化網(wǎng)站的性能。
例如，在頁面加載時(shí)可以先異步加載必要的腳本和樣式文件，然后在用戶需要訪問資源時(shí)再進(jìn)行延遲加載。
實(shí)例
異步加載：
使用XMLHttpRequest對象或fetch API發(fā)起異步請求，例如：
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);
// 處理請求結(jié)果
} else {
console.error('請求失敗');
}
};
xhr.send();使用Promise來處理異步請求，例如：
fetch('https://example.com/data.json')
.then(response => response.json())
.then(data => {
// 處理請求結(jié)果
})
.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();
// 處理請求結(jié)果
} catch (error) {
console.error('請求失敗', error);
}
}
fetchData();使用Intersection Observer API來監(jiān)聽頁面滾動(dòng)事件，例如：
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const image = entry.target;
image.src = image.dataset.src;
observer.unobserve(image);
}
});
});
images.forEach(image => {
observer.observe(image);
});使用圖片占位符來減少頁面的抖動(dòng)，例如：
<img src="placeholder.jpg" data-src="image.jpg" width="300" height="200">使用懶加載庫來實(shí)現(xiàn)延遲加載，例如：
// 使用jQuery Lazy加載庫
$("img.lazy").lazy({
effect: "fadeIn",
threshold: 200
});以上是異步加載和延遲加載的一些具體實(shí)例，實(shí)際上還有很多其他的實(shí)現(xiàn)方式，需要根據(jù)具體情況來選擇。
