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

线程与进程

• 进程:

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

  • 可以通过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 //解决方法