zoukankan      html  css  js  c++  java
  • 283 线程机制与事件机制:线程与进程,浏览器内核模块组成,js线程,定时器问题

    一、线程与进程

    • 进程:
      • 程序的一次执行, 它占有一片独有的内存空间 【独有】
      • 可以通过windows任务管理器查看进程
    • 线程:
      • 是进程内的一个独立执行单元
      • 是程序执行的一个完整流程
      • 是CPU的最小的调度单元
    • 关系
      • 一个进程至少有一个线程(主)
      • 程序是在某个进程中的某个线程执行的
    1. 进程:程序的一次执行, 它占有一片独有的内存空间
    2. 线程: CPU的基本调度单位, 是程序执行的一个完整流程
    3. 进程与线程
      * 一个进程中一般至少有一个运行的线程: 主线程
      * 一个进程中也可以同时运行多个线程, 我们会说程序是多线程运行的
      * 一个进程内的数据可以供其中的多个线程直接共享
      * 多个进程之间的数据是不能直接共享的
    4. 浏览器运行是单进程还是多进程?
      * 有的是单进程
        * firefox
        * 老版IE
      * 有的是多进程
        * chrome
        * 新版IE
    5. 如何查看浏览器是否是多进程运行的呢?
      * 任务管理器==>进程
    6. 浏览器运行是单线程还是多线程?
      * 都是多线程运行的
    

    二、浏览器内核模块组成

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

    三、js线程

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

    四、定时器问题

    • 定时器并不真正完全定时
    • 如果在主线程执行了一个长时间的操作, 可能导致延时才处理
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>03_定时器引发的思考</title>
    </head>
    
    <body>
    
        <button id="btn">启动定时器</button>
    
        <!--
    1. 定时器真是定时执行的吗?
      * 定时器并不能保证真正定时执行
      * 一般会延迟一丁点(可以接受), 也有可能延迟很长时间(不能接受)
    2. 定时器回调函数是在分线程执行的吗?
      * 在主线程执行的, js是单线程的
    3. 定时器是如何实现的?
      * 事件循环模型(后面讲)
    -->
        <script type="text/javascript">
            document.getElementById('btn').onclick = function() {
                var start = Date.now()
                console.log('启动定时器前...')
                setTimeout(function() {
                    console.log('定时器执行了', Date.now() - start) // 697
                }, 200)
                console.log('启动定时器后...')
    
                // 做一个长时间的工作
                for (var i = 0; i < 1000000000; i++) {
    
                }
            }
        </script>
    </body>
    
    </html>
    
  • 相关阅读:
    组合继承
    包装明星——封装
    多种添加公用方法的方式
    专有扩展
    插入标记
    mac 命令操作
    php(apache)切换版本
    SqlServer索引+约束篇章
    sqlserver 常用语法
    C# 通用数据访问类
  • 原文地址:https://www.cnblogs.com/jianjie/p/12255586.html
Copyright © 2011-2022 走看看