• js 线程机制与事件处理机制


    线程与进程

    • 进程:
      • 程序的一次执行, 它占有一片独有的内存空间
      • 可以通过windows任务管理器查看进程
    • 线程:
      • 是进程内的一个独立执行单元
      • 是程序执行的一个完整流程
      • 是CPU的最小的调度单元
    • 关系
      • 一个进程至少有一个线程(主)
      • 程序是在某个进程中的某个线程执行的
    • 浏览器内核
      • Chrome, Safari : webkit
      • firefox : Gecko
      • IE : Trident
      • 360,搜狗等国内浏览器: Trident + webkit

    浏览器内核模块组成

    • 主线程
      • js引擎模块 : 负责js程序的编译与运行
      • html,css文档解析模块 : 负责页面文本的解析
      • DOM/CSS模块 : 负责dom/css在内存中的相关处理
      • 布局和渲染模块 : 负责页面的布局和效果的绘制(内存中的对象)
    • 分线程
      • 定时器模块 : 负责定时器的管理
      • DOM事件模块 : 负责事件的管理
      • 网络请求模块 : 负责Ajax请求

    js线程

    • js是单线程执行的(回调函数也是在主线程)
    • H5提出了实现多线程的方案: Web Workers
    • 只能是主线程更新界面

    定时器问题:

    • 定时器并不真正完全定时
    • 如果在主线程执行了一个长时间的操作, 可能导致延时才处理

    事件处理机制(图)

    • 代码分类
      • 初始化执行代码: 包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码
      • 回调执行代码: 处理回调逻辑
    • js引擎执行代码的基本流程:
      • 初始化代码===>回调代码
    • 模型的2个重要组成部分:
      • 事件管理模块
      • 回调队列
    • 模型的运转流程
      • 执行初始化代码, 将事件回调函数交给对应模块管理
      • 当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中
      • 只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行

    事件循环模型

    image-20210607181724608

    H5 Web Workers

    • 可以让js在分线程执行

    • Worker

      var worker = new Worker('worker.js');
      worker.onMessage = function(event){event.data} : 用来接收另一个线程发送过来的数据的回调
      worker.postMessage(data1) : 向另一个线程发送数据
      
    • 问题:

      • worker内代码不能操作DOM更新UI
      • 不是每个浏览器都支持这个新特性
      • 不能跨域加载JS
    • svn版本控制

    • svn server

  • 相关阅读:
    【GoLang】转载:我为什么放弃Go语言,哈哈
    【GoLang】golang runtime 调度原理
    【GoLang】golang 微服务框架 介绍
    Redis缓存与springboot集成
    Redis分布式锁
    springboot配置文件的配置
    分布式事务之学习
    快速学习
    CAP定理为什么只能同时满足两个
    requestMapping之地址映射
  • 原文地址:https://www.cnblogs.com/Liwker/p/14400994.html
Copyright © 2020-2023  润新知