美文网首页
单线程/异步/事件轮询(event-loop)

单线程/异步/事件轮询(event-loop)

作者: 风雪之隅_b6f7 | 来源:发表于2019-04-12 17:04 被阅读0次

1.单线程

只有一个线程,同一时间只能做一个事情,JS代码需要一行行执行,不是多行执行  --------单线程

只有一个线程是为了避免dom渲染的冲突

- 浏览器渲染dom

-js可以修改DOM

同时修改会有冲突,js执行的时候,浏览器DOM渲染就停止,所以必须一个线程,和浏览器公用一个线程。

-webworker支持多线程,但不能访问dom

那如何解决单线程问题:异步方式

2.解决方案:异步

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=p, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <p>ansyc test</p>

</body>

<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>

<script>

  console.log(100)

    $.ajax({

        url:'./data.json',

        success:function(result){

            console.log(result)

        }

    })

    console.log(300)

    console.log(400)

</script>

</html>

data.json文件

{"a":100,"b":200}

执行上面的JS逻辑得到

输出结果 

100

300

400

{"a":100,"b":200}

异步解决了单线程的弊端问题,提高了线程的运行代码效率问题,但也有一个缺点就是执行输出的结果不是按照顺序出来了,第二个AJAX执行的内容输出后是最后一个了不是第二个,对于渲染顺序不一致。

3.实现方式:事件轮询event -loop

针对之前未按照顺序执行出来,如下执行过程

首先JS代码看到同步和异步代码会先执行同步代码在主进程中,再将异步代码有结果的时候放入异步队列,等同步代码执行后,再进入异步列队查看是否有需要执行的异步代码,然后将异步代码执行完后的结果放入主进程中执行,这就是事件轮询机制

解决异步方式

:1.jquery-defered

2.promise

3.async/await

4.generator

相关文章

  • 单线程/异步/事件轮询(event-loop)

    1.单线程 只有一个线程,同一时间只能做一个事情,JS代码需要一行行执行,不是多行执行 --------单线程 只...

  • 回调函数

    浏览器的事件轮询 首先js是单线程的,js异步是浏览器事件轮询的结果。事件轮询的字面意思就是事件循环。事件轮询的步...

  • 16.3 JavaScript的执行机制

    浏览器事件轮询机制 js执行为单线程 网络请求、setTimeout、addEventListener属于异步事件...

  • js event loop、promise、async/awai

    event loop 事件循环/事件轮询 首先,js是单线程运行的,异步要基于回调来实现。event loop就是...

  • JS异步方案

    JS异步方案 单线程和event-loop callback jquery的deferred promise as...

  • 异步的那些事(一)

    单线程,event-loop,异步,promise,async await 这些名词在js中经常被提及。然而他们之...

  • 整理一些遇到的问题

    常见的IO模型 单线程阻塞 多线程阻塞 多进程阻塞 非阻塞轮询 事件驱动IO 信号驱动式IO 异步IO(指的是使用...

  • nodejs单线程异步和事件轮询

    首先解释一下单线程这个概念,顾名思义就是在一条线上运行。也就是说引擎对于 js 文件从头到尾依次执行,通常所说的同...

  • 浅析 event-loop 事件轮询

    原文出自:https://www.pandashen.com 浏览器中的事件轮询 JavaScript 是一门单线...

  • event-loop 【js】

    单线程 单线程:同一时间只能做一件事 原因:避免DOM渲染冲突 解决方案:异步 实现方式:event-loop e...

网友评论

      本文标题:单线程/异步/事件轮询(event-loop)

      本文链接:https://www.haomeiwen.com/subject/mkzcwqtx.html