线程机制与事件机制

1. 进程与线程

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

  • 线程： 进程内的一个独立单元，CPU的基本调度单位, 是程序执行的一个完整流程

  • 进程与线程

    • 一个进程中一般至少有一个运行的线程: 主线程

    • 一个进程中也可以同时运行多个线程, 我们会说程序是多线程运行的

    • 一个进程内的数据可以供其中的多个线程直接共享

    • 多个进程之间的数据是不能直接共享的

    • 比较单线程与多线程

      • 多线程

        • 优点：

          能有效提升CPU的利用率

        • 缺点

          创建多线程开销

          线程间切换开销

          死锁与状态同步问题

      • 单线程

        • 优点：顺序编程简单易懂
        • 缺点：效率低

      • JS是单线程还是多线程?

        • js是单线程运行的
        • 但使用H5中的 Web Workers可以多线程运行

      • 浏览器都是多线程

  • 浏览器运行是单进程还是多进程?

    • 有的是单进程

      • firefox
      • 老版IE

    • 有的是多进程

      • chrome
      • 新版IE

2. 浏览器内核

  • 支撑浏览器运行的最核心的程序
  • 不同的浏览器可能不一样
    • Chrome, Safari : webkit
    • firefox : Gecko
    • IE : Trident
    • 360,搜狗等国内浏览器: Trident + webkit
  • 内核由很多模块组成
    • 主线程
      • js引擎模块 : 负责js程序的编译与运行
      • html,css文档解析模块 : 负责页面文本的解析
      • DOM/CSS模块 : 负责dom/css在内存中的相关处理
      • 布局和渲染模块 : 负责页面的布局和效果的绘制(内存中的对象)
    • 分线程
      • 定时器模块 : 负责定时器的管理
      • DOM事件响应模块 : 负责事件的管理
      • 网络请求模块 : 负责ajax请求

3. 浏览器引发的思考

  • 定时器真是定时执行的吗?

    • 定时器并不能保证真正定时执行
    • 一般会延迟一丁点(可以接受), 也有可能延迟很长时间(不能接受)

  • 定时器回调函数是在分线程执行的吗?

    • 在主线程执行的, js是单线程的

  • 定时器是如何实现的?

    • 事件循环模型(后面讲)
document.getElementById('btn').onclick = function () {
    var start = Date.now()
    console.log('启动定时器')
    setTimeout(function () {
        console.log('定时器执行了: ', Date.now()-start)
    }, 100)

    //定时器启动之后做一个长时间的工作
    for (var i = 0; i < 1000000000; i++) {

    }
    console.log('完成长时间工作', Date.now()-start)
}

4. 事件循环模型（事件轮询机制）

  • 所有代码分类

    • 初始化执行代码(同步代码): 包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码
    • 回调执行代码(异步代码): 处理回调逻辑

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

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

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

    • 事件管理模块
    • 回调队列

  • 模型的运转流程

    • 执行初始化代码, 将事件回调函数交给对应模块管理
    • 当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中
    • 只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行

function fn1() {
    console.log('fn1()')
}
fn1()

document.getElementById('btn').onclick = function () {
    console.log('处理点击事件')
}

setTimeout(function () {
    console.log('到点了')
}, 0)

function fn2() {
    console.log('fn2()')
}
fn2()

5. H5多线程

  • H5规范提供了js分线程的实现, 取名为: Web Workers

  • 相关API

    • Worker: 构造函数, 加载分线程执行的js文件
    • Worker.prototype.onmessage: 用于接收另一个线程的回调函数
    • Worker.prototype.postMessage: 向另一个线程发送消息

  • 不足

    • worker内代码不能操作DOM(更新UI)
    • 不能跨域加载JS
    • 不是每个浏览器都支持这个新特性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn1">主线程运算计算</button>
<button id="btn2">worker计算</button>
<button>我是否假死</button>
<script>
    btn1.onclick=function () {
        var num=0;
        for (var i=0;i<999999999;i++){
            num+=i;
            num+=Math.sqrt(num);
        }
        alert(num);
    }

    btn2.onclick=function () {
        // 1.创建一个worker
        var wk=new Worker("worker1.js");
        //2.把需要计算的数据传递到worker
        wk.postMessage(9999999);

        // 主线程也要书写一个事件，当子线程传输回来数据的时候，会直接出发message事件
        wk.onmessage=function (e) {
            alert(e.data);
            wk.terminate();
        }

    }
</script>
</body>
</html>
//在worker中用this调用message事件
//在event事件对象中，它的data就是postmessage传输过来的值
this.onmessage=function (e) {
    var num=0;
    for (var i=0;i<e.data;i++){
        num+=i;
        num+=Math.sqrt(num);
    }
    // 在worker中，可以直接使用postmessage把得到数据传送回主线程
    postMessage(num);
    close();
}
posted @ 2023-01-13 22:29  z_bky  阅读(29)  评论(0)    收藏  举报