JS同步、异步、延迟加载是我们在web开发中常遇到的概念。以下是详细讲解它们的方法：
同步和异步的概念
JavaScript是一门单线程语言，即一次只能执行一个任务，当一个任务在执行时，其他的任务得等待。同步和异步就是描述这种等待的机制。
- 同步：即任务必须按照顺序执行，每个任务耗时过长时，会使页面失去响应，页面卡死的问题浮现。例如，使用循环方式计算1到1000的和，如果不是异步的，浏览器在执行时就会一直等待计算完成，用户体验非常不好。
let sum = 0;
for (let i = 0; i <= 1000; i++) {
sum += i;
}
console.log(sum); // 500500
- 异步：可以进行多个操作，不用等待每个操作完成执行下一个操作。相应的代码有回调函数、Promise、async/await等方式。例如下面的示例中，文件读取使用了异步的方式，不会阻塞后续代码的执行。
const fs = require('fs');
fs.readFile('file.txt', 'utf-8', function(err, data) {
if (err) {
console.log(err);
return;
}
console.log(data);
})
console.log('Reading file...');
延迟加载的方式
在我们进行web开发中，我们经常会遇到延迟加载的问题。例如，我们的页面一加载，同时又请求了多张图片资源，这就会导致页面的慢速加载以及用户体验异常。延迟加载的方式可以使页面和资源一同下载。
1. HTML5的defer方式：HTML5中提供了defer属性，可以将js文件的加载放到文档结构构建完成并且执行完成后再进行加载。如下：
<!DOCTYPE html>
<html>
<head>
<script src="demo.js" defer></script>
</head>
<body>
</body>
</html>
- DOMContentLoaded方式：这种方式会在页面DOM结构解析完成后立即执行，而不用等待资源加载。并且不会阻止后续的加载。
document.addEventListener('DOMContentLoaded', function() {
// do something after DOM is loaded
});
以上就是JS同步、异步、延迟加载的完整攻略，希望能够帮到您。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS同步、异步、延迟加载的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 