码迷,mamicode.com
首页 > 编程语言 > 详细

283 JavaScript 事件处理机制,事件循环模型

时间:2020-02-03 15:55:22      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:lang   执行   i++   浏览器内核   布局   code   meta   循环   ajax   

一、线程与进程

  • 进程:
    • 程序的一次执行, 它占有一片独有的内存空间 【独有】
    • 可以通过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>

283 JavaScript 事件处理机制,事件循环模型

标签:lang   执行   i++   浏览器内核   布局   code   meta   循环   ajax   

原文地址:https://www.cnblogs.com/jianjie/p/12255586.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!