前端开发面试题—JavaScript执行机制(同步与异步,补充:线程与进程)

简介: 今天分享一下我遇到的一个面试题,是关于JavaScript执行机制——同步与异步的问题,解释一下什么是同步和异步呢?

 今天分享一下我遇到的一个面试题,是关于JavaScript执行机制——同步与异步的问题,解释一下什么是同步和异步呢?


🎯JavaScript单线程

    • JavaScript语言的一大特点就是单线程(Java多线程),也就是说,同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致,即JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的。比如,对某个DOM元素进行添加和删除操作,不能同时进行,那么这个DOM元素究竟是要添加还是删除呢?这会带来很复杂的同步问题,所以应该先进行添加,然后才删除,因此,JavaScript是单线程的。
    • 单线程就意味着,所有任务需要排队进行,前一个任务结束,才会执行后一个任务,这样所导致的问题是,如果JavaScript执行的时间过长,就会导致页面的渲染不连贯,导致页面渲染加载有阻塞的感觉,对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验。

    为了更好理解,他过下面这段代码来演示

    console.log('1')
    setTimeout(function(){
    console.log('2')
    },1000)
    console.log('3')
    image.gif

    上述代码输出为“1,3,2”,在控制台会看到程序先输出1、3,然后等待1秒后才会输出2。当调用setTimeout()方法后,该方法会立即执行完成,然后执行后面的代码,输出3。 但是为setTimeout()传入的函数,会在一秒后才执行(定时器)。像这样的操作称为异步操作,这个异步执行的函数称为回调函数,它的调用时机是由定时器来决定的。

    setTimeout()语法格式:setTimeout(调用的函数,[延迟的毫秒数])

    🎯JavaScript同步(Synchronous, sync)与异步(Asynchronous, async)

    为了更好的利用多核CPU的计算能力,HTML5提出Web Worker标准,运行JavaScript脚本创建多个线程,于是JavaScript出现了同步和异步的概念。

      • 所谓同步和异步:同步就是前一个任务执行完毕,才能继续执行下一个任务,程序的执行顺序与任务的排列顺序一致、同步的。异步是与同步相对的概念,就是在做一件事的同时,可以去处理其他事情。
      • 在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系
        简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高
      • 同步任务都是在主线程上排队执行的任务,会形成一个执行栈,只有前一个任务执行完毕,才能继续执行下一个任务,而异步任务是通过回调函数实现的异步就是从主线程发射一个子线程来完成任务)。


      🎯补充:线程与进程

      ⏬二者联系

        • 线程是操作系统能够进行运算调度的最小单位(不能独立运动,必须依赖于进程)。它被包含在进程之中,是进程中的实际运作单位。一条线程指的是进程中一个单一顺序的控制流,(进程包含线程,每条线程并行执行不同的任务)一个进程中可以并发一个或多个线程,每条线程并行执行不同的任务。(计算机科学中的线程是同时运行多个任务或程序的执行。每个能够执行代码的单元称为线程)
        • 同一个进程中的线程是共享内存资源的,比如全局变量,每一个线程都可以改变其共同进程中的全局变量的数据

        ⏬二者区别

          • 线程是操作系统能够进行运算调度的最小单位(线程是独立调度和分派的基本单位)。进程是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础。
          • 地址空间和其它资源(如打开文件):进程间相互独立,同一进程的各线程间共享。某进程内的线程在其它进程不可见。
          • 通信:进程间通信IPC,线程间可以直接读写进程数据段(如全局变量)来进行通信——需要进程同步和互斥手段的辅助,以保证数据的一致性。
          • 调度和切换:线程上下文切换比进程上下文切换要快得多。
          • 在多线程OS中,进程不是一个可执行的实体。
          • 进程下管理的最底层单位是线程,在等级上,进程明显大于线程。
          • 线程基本不拥有系统资源,它与其他线程共享同一进程所拥有的共同资源。由于线程比进程小,且基本不拥有系统资源,因此对其调度的开销会很小,从而极大的提高了对系统资源的利用率。
          • 当服务器需要响应多个用户请求时,如果创建多个进程,由于进程与进程之间是相互独立的,会过多的占用内存空间,降低服务器的响应速度,但线程是共享同一进程中的资源的,使用线程会提高系统的并发型。

          参考来自

          百度百科线程

          百度百科进程

          JavaScript异步编程

          博客园呆呆菇凉——进程和线程的区别和联系

          目录
          相关文章
          |
          1月前
          |
          资源调度 JavaScript 前端开发
          前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
          本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
          428 23
          |
          5月前
          |
          监控 Java 应用服务中间件
          高级java面试---spring.factories文件的解析源码API机制
          【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
          160 2
          |
          2月前
          |
          前端开发
          【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
          【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
          70 1
          【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
          |
          5月前
          |
          JavaScript 前端开发 Java
          springboot解决js前端跨域问题,javascript跨域问题解决
          本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
          100 3
          springboot解决js前端跨域问题,javascript跨域问题解决
          |
          5月前
          |
          Web App开发 JSON JavaScript
          Node.js 中的中间件机制与 Express 应用
          Node.js 中的中间件机制与 Express 应用
          |
          5月前
          |
          缓存 JavaScript 前端开发
          JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
          本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
          147 5
          |
          5月前
          |
          缓存 前端开发 JavaScript
          JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
          本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
          192 1
          |
          5月前
          |
          JSON 前端开发 JavaScript
          聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
          在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
          106 4
          |
          5月前
          |
          资源调度 前端开发 JavaScript
          vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
          【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
          488 2
          |
          5月前
          |
          JavaScript 安全 中间件
          深入浅出Node.js中间件机制
          【10月更文挑战第36天】在探索Node.js的奥秘之旅中,中间件的概念如同魔法一般,它让复杂的请求处理变得优雅而高效。本文将带你领略这一机制的魅力,从概念到实践,一步步揭示如何利用中间件简化和增强你的应用。

          热门文章

          最新文章