ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript高级(04_线程机制和事件机制)

2020-09-19 15:35:23  阅读:151  来源: 互联网

标签:04 JavaScript js 线程 内存 模块 var 机制 回调


线程与进程

  • 进程:

    • 程序的一次执行, 它占有一片独有的内存空间

    • 可以通过windows任务管理器查看进程

  • 线程:

    • 是进程内的一个独立执行单元

    • 是程序执行的一个完整流程

    • 是CPU的最小的调度单元

  • 关系

    • 一个进程至少有一个线程(主)

    • 程序是在某个进程中的某个线程执行的

浏览器内核模块组成

  • 主线程

    • js引擎模块 : 负责js程序的编译与运行

    • html,css文档解析模块 : 负责页面文本的解析

    • DOM/CSS模块 : 负责dom/css在内存中的相关处理

    • 布局和渲染模块 : 负责页面的布局和效果的绘制(内存中的对象)

  • 分线程

    • 定时器模块 : 负责定时器的管理

    • DOM事件模块 : 负责事件的管理

    • 网络请求模块 : 负责Ajax请求

js线程

  • js是单线程执行的(回调函数也是在主线程)

  • H5提出了实现多线程的方案: Web Workers

  • 只能是主线程更新界面

定时器问题:

  • 定时器并不真正完全定时

  • 如果在主线程执行了一个长时间的操作, 可能导致延时才处理

事件处理机制(图)

  • 代码分类

    • 初始化执行代码: 包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码

    • 回调执行代码: 处理回调逻辑

  • js引擎执行代码的基本流程:

    • 初始化代码===>回调代码

  • 模型的2个重要组成部分:

    • 事件管理模块

    • 回调队列

  • 模型的运转流程

    • 执行初始化代码, 将事件回调函数交给对应模块管理

    • 当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中

    • 只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行

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

分号问题

  1. 一条js语句的后面可以不加分号

  2. 在下面2种情况下不加分号会有问题

    • 小括号开头的前一条语句

    • 中方括号开头的前一条语句

    • 解决办法: 在行首加分号

内存溢出与内存泄露

  1. 内存溢出

    • 一种程序运行出现的错误

    • 当程序运行需要的内存超过了剩余的内存时, 就出抛出内存溢出的错误

    var obj = {}
      for (var i = 0; i < 10000; i++) {
        obj[i] = new Array(10000000)
        console.log('-----')
    }
  2. 内存泄露

    • 占用的内存没有及时释放

    • 内存泄露积累多了就容易导致内存溢出

    • 常见的内存泄露:

      • 意外的全局变量

        function fn() {
          a = new Array(10000000)
          console.log(a)
        }
        fn()
      • 没有及时清理的计时器或回调函数

        var intervalId = setInterval(function () { //启动循环定时器后不清理
            console.log('----')
          }, 1000)
        //clearInterval(intervalId) //解决方法
      • 闭包

        function fn1() {
          var a = 4
          function fn2() {
            console.log(++a)
          }
          return fn2
        }
        var f = fn1()
        f()
        ​
        // f = null //解决方法

标签:04,JavaScript,js,线程,内存,模块,var,机制,回调
来源: https://www.cnblogs.com/lich1x/p/13696384.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有