[暑假]Js执行机制

最新推荐文章于 2024-07-18 10:24:18 发布

卓律涤

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量157

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/IDApprentice/article/details/125719606

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1. JS是单线程

JavaScript语言的一大特点就是单线程, 也就是说, 同一个时间只能做一件事. 这是因为 JavaScript这门脚本语言的创造时候的初衷导致的==> 因为JavaScript是为了处理页面中用户的交互, 以及操作DOM而诞生的. 比如我们对某个DOM元素进行添加和删除操作, 不能同时进行. 应该先进行添加, 之后再删除.

进一步解释单线程:

单线程就意味着, 所有任务都需要排队, 前一个任务结束, 后一个才会执行. 这样会导致的问题: 如果JS执行时间过长, 这样就会造成页面渲染不连贯, 导致页面渲染加载阻塞的感觉.

2.为了解决单线程的弊端:

利用多喝CPU的计算能力, HTML5提出了 Web Worker标准, 允许JavaScript脚本创建多个线程. ==> 所有 JS中出现了同步和异步

进一步解释什么是同步?什么是异步?

同步: 前一个任务结束后再执行下一个任务, 程序的执行顺序与任务的排列顺序是一致的, 同步的.

异步: 当我们在执行一个任务的时候,这个任务会花费很长时间, 所以在做这件事的同时, 我们还可以去处理其他的任务.

3. 解释什么是同步任务和异步任务:

同步任务:

同步任务都是在主线程上执行, 形成一个执行栈

异步任务:

JS的异步是通过回调函数实现的.

一般异步任务分为三种类型:

1).普通事件. 比如click, resize等等

2) 资源加载, 如 load,error等等

3) 定时器, 包括 setInterval, setTimeout等等

异步任务相关回调函数添加到任务队列中 (任务队列也可以称为消息队列)

例子:

其中首先执行同步任务任何执行异步任务

↓ ↓ ↓ 中的代码

console.log(1);

setTimeout(fn, 0);

console.log(2); 这三个为同步任务

function() { console.log(3)}; 为异步任务

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(1);

        setTimeout(function () {
            console.log(3);
        }, 0);

        console.log(2);

    </script>
    
</body>
</html>