首页 > 其他分享 >深入事件循环

深入事件循环

时间:2023-08-15 11:22:25浏览次数:27  
标签:浏览器 渲染 js 循环 线程 事件 进程 深入 文本

浏览器进程模型:

进程: 程序运行都要有自己的内存空间,程序在分配的内存空间的执行过程就叫进程。

每个应用至少有一个进程,进城之间相互独立,需要通信时,须要双方都同意!!!

线程:一个进程至少有一个线程,进程开启的过程会自动创建一个线程来执行程序代码,称之为主线程,如果程序需要同时执行多段代码,那么就会存在一个进程中存在多个线程。

 

浏览器中的进程和线程:

浏览器是一个多进程多线程的复杂应用程序 。

多进程是为了避免模块间的互相影响,减少连环崩溃的几率。 比如网络进程出错了,不会影响到渲染进程(一个标签页就是一个渲染进程)和浏览器进程。

 

 

 

为什么渲染进程不适用于多个线程来处理上述事情?

  任务调度:

 

 

 

异步:

 

  

 

 

如何理解js的异步:

js的执行(会阻碍渲染)会影响页面的绘制:

 比如这段代码,首先渲染主进程,通知交互线程,监听btn的click事件,当用户点击,修改文本,修改h1的文本是会触发页面的绘制事件的, 这个绘制事件会到任务队列里面排队,然后渲染主进程在执行delay,此时由于dealy里面是一个死循环函数,会阻塞主进程,所以要等3s后,文本的重新渲染才会生效,其实内存中文本早就改了,但是页面上看到需要等绘制事件被执行。

 

js任务的优先级?

之前任务分为宏任务和微任务,最新w3c解释是:

 

    

 

标签:浏览器,渲染,js,循环,线程,事件,进程,深入,文本
From: https://www.cnblogs.com/Hijacku/p/17628203.html

相关文章

  • while读取文件 Shell中while循环的陷阱, 变量实效, 无法赋值变量
     在写while循环的时候,发现了一个问题,在while循环内部对变量赋值、定义变量、数组定义等等环境,在循环外面失效。一个简单的测试脚本如下:#!/bin/bashecho"abcxyz"|whilereadlinedonew_var=$linedoneechonew_varisnull:$new_var? 执行结果证明,$new_v......
  • 第7章 用户输入和while循环
    7.1函数input()的工作原理1.input()函数让程序暂停等待用户的输入2.输入完成需要回车让程序知道你输入完成7.1.1编写清晰的程序1.x+=y相等于x=x+y7.1.2使用int()来获取数值输入1.我们可以使用int()函数把str转为int7.1.3求模运算符1.求模符号(%),是把两个数的余数......
  • 深入浅出node.js游戏服务器开发——Pomelo框架的设计动机与架构介绍
    一、Pomelo的定义和组成以下是Pomelo官网给出的最初定义:Pomelo是基于node.js的高性能,分布式游戏服务器框架。它包括基础的开发框架和相关的扩展组件(库和工具包),可以帮助你省去游戏开发枯燥中的重复劳动和底层逻辑的开发。Pomelo最初的设计初衷是为了游戏服务器,不过我们在设计、开......
  • elementUi table表格 标头自定义,给表头加点击事件
    <el-table-columnlabel="">  <el-table-columnprop="column":render-header="renderHeader"width="160">    <templateslot-scope="scope">      <span>{{scope.row.column[......
  • 循环队列
    为了避免当只有一个元素时,队头和队尾重合使得处理变得麻烦,所以引入两个指针front和rear。front即队头指针指向队头元素,rear即队尾指针指向队尾元素的下一个元素。这样当front等于rear是,不是队列中有一个元素,而是表示空队列。假设数组长度为5,空队列即初始状态如图所示,front和rear都......
  • 深入解析Spring的IOC与AOP及其在项目中的应用
    推荐阅读「java、python面试题」来自UC网盘app分享,打开手机app,额外获得1T空间https://drive.uc.cn/s/2aeb6c2dcedd4AIGC资料包https://drive.uc.cn/s/6077fc42116d4https://pan.xunlei.com/s/VN_qC7kwpKFgKLto4KgP4Do_A1?pwd=7kbv#https://yv4kfv1n3j.feishu.cn/docx/MRyxdaq......
  • vue-router动态路由无限循环
    //isLogined用来判断用户是否已登录router.beforeEach((to,from,next)=>{if(isLogined){next()}else{console.log('测试')next('login')}})next()表示放行,直接进入to路由,不会再次调用router.beforeEach()next(path:...to,replace:true)拦截......
  • 深入思考 Next.js App Directory 架构
    写在前面:新的App目录架构一直是最近Next.js发布的主要亮点,这一点引发了许多讨论。在这篇文章中,AtilaFassina探讨了这种新策略的优势和风险,并反思了您是否应该立即在生产环境中使用它。自从Next.js13release发布以来,关于其描述的新功能的稳定性引发了一些争议。我们在“W......
  • 深入浅出SseEmitter
    SseEmitter详解在现代的Web应用程序中,实时数据是非常重要的。为了实现这一点,许多框架和技术被开发出来,其中包括SseEmitter。SseEmitter是一个Spring框架中的类,它允许服务器向客户端发送实时数据。SseEmitter是Spring框架中的一个类,用于实现服务器向客户端推送消息的功能。SSE代表S......
  • 循环语句
    循环语句For循环基本语法for(循环变量初始值;循环条件;循环变量迭代){​ 代码块;}执行流程注意事项for循环的初始化变量,循环迭代值,可以放在其他地方。但是分号不能省略。例:for(;循环判断条件;)初始值可以定义在循环体之前,迭代值可以写在循环体之内。for(;;)死循环循环......