Vanson's Eternal Blog

JavaScript夯实基础

Web javascript.png
Published on
/11 mins read/---

JS单线程语言

单线程设计的好处

  • 简单和直观

    • 好处:JavaScript 的单线程模型使得语言本身更加简单和直观。开发者不需要关心多线程之间的竞态条件、死锁等复杂的并发问题,这简化了编程模型和语言的学习曲线。
    • 示例:对于初学者来说,理解单线程的执行顺序比理解多线程的并发执行更容易。
  • 易于控制

    • 好处:由于单线程,JavaScript 可以更容易地管理和控制代码的执行顺序和状态变化。所有的操作都是顺序执行的,没有并发执行带来的不确定性,这有助于避免意外的副作用和错误。
    • 示例:在单线程中,变量的值变化是可预测的,因为不会出现多个线程同时修改同一个变量的情况。
  • 节省内存资源

    • 好处:在浏览器中,每个标签页或窗口都是一个单独的进程或线程。如果 JavaScript 是多线程的,每个标签页可能需要额外的内存来管理多个线程,而单线程模型可以节省内存资源。
    • 示例:单线程模型减少了内存占用,使得浏览器可以同时打开更多标签页而不会过度消耗系统资源。
  • 避免同步问题

    • 好处:在多线程编程中,需要处理同步问题(如竞态条件、死锁、数据一致性等),这对于开发者来说是一个复杂和容易出错的部分。单线程模型避免了这些问题,因为不需要考虑多个线程同时访问和修改共享状态的情况。
    • 示例:在单线程中,开发者不需要使用锁或其他同步机制来保护共享数据。
  • 更好的响应性

    • 好处:JavaScript 在浏览器中通常用于处理用户交互和响应用户操作。单线程模型确保所有的事件和操作都按照其发生的顺序进行处理,这样可以保证 UI 的响应性和一致性。
    • 示例:用户点击按钮后,事件处理函数会立即执行,不会被其他线程打断,从而保证了用户体验的流畅性。

设计成单线程的原因

  • 适应应用场景
    • 原因:JavaScript 最初被设计成单线程主要是为了适应其主要的应用场景:浏览器中的交互式网页。在浏览器中,JavaScript 负责处理用户交互、DOM 操作和网络请求等任务,这些任务不需要多线程并发执行,而是按照事件驱动的方式处理即可。
    • 示例:网页中的大多数任务(如点击按钮、输入文本、发送网络请求)都是顺序执行的,不需要并发处理。
  • 简化实现和优化性能
    • 原因:JavaScript 的单线程模型有助于避免因为多线程带来的复杂性和性能开销,特别是在早期浏览器性能较弱的情况下,单线程可以简化实现和优化执行效率。
    • 示例:早期浏览器的 JavaScript 引擎性能有限,单线程模型减少了实现复杂度,使得引擎可以更高效地执行代码。

怎么解决单线程问题

异步编程

  • 回调函数:通过回调函数处理异步操作,避免阻塞主线程。
  • Promise:提供更优雅的异步编程方式,支持链式调用和错误处理。
  • async/await:使异步代码看起来像同步代码,提高可读性和易用性。

事件循环和任务队列

  • 事件循环:JavaScript 的事件循环机制确保了即使在单线程环境下,也可以处理多个异步任务。
  • 宏任务和微任务队列:通过任务队列管理异步任务,确保任务按顺序执行。

Web Workers

  • Web Workers:允许在后台线程中运行 JavaScript 代码,从而实现真正的多线程处理。虽然 Web Workers 仍然运行在独立的线程中,但它们可以与主线程通信,从而实现复杂的并发任务。

js运行需要什么

JavaScript 引擎

JavaScript 引擎是解释和执行 JavaScript 代码的核心组件。不同的浏览器和运行环境有不同的 JavaScript 引擎实现,其中最常见的包括:

  • V8:由 Google 开发,用于 Chrome 浏览器和 Node.js。
  • SpiderMonkey:由 Mozilla 开发,用于 Firefox 浏览器。
  • JavaScriptCore:由苹果开发,用于 Safari 浏览器和 WebKit。 这些引擎负责将 JavaScript 代码解析、编译成可执行代码,并执行代码逻辑。

宿主环境(Host Environment)

JavaScript 是一种脚本语言,它依赖于宿主环境提供的运行时环境和各种 API。常见的宿主环境包括:

  • 浏览器环境:在浏览器中运行的 JavaScript 可以访问浏览器提供的 DOM、BOM、Fetch API 等 Web API。
  • Node.js 环境:在服务器端运行的 JavaScript,可以访问操作系统的文件系统、网络等功能,还能使用 Node.js 提供的内置模块和第三方模块。

Web API

在浏览器环境中,JavaScript 可以通过 Web API 访问浏览器提供的各种功能和服务,例如:

  • DOM API:用于操作和修改 HTML 文档结构。
  • XHR / Fetch API:用于进行网络请求和获取数据。
  • Canvas 和 WebGL:用于绘制图形和实现复杂的图形渲染。
  • Local Storage 和 Session Storage:用于在客户端持久化存储数据等。

运行时

JavaScript 运行时指的是 JavaScript 引擎与宿主环境和其他 API 的整体集合。它提供了一个完整的环境,使得 JavaScript 能够与外部环境进行交互和操作,从而实现丰富的应用程序功能

浏览器下, JS 的进程和线程

进程

  • 浏览器主进程(Browser Process)

    • 作用:这是浏览器的核心进程,负责管理浏览器的界面(如标签页、地址栏、书签栏等),并协调其他进程的工作。
    • 示例:控制浏览器窗口的显示和关闭。
  • 渲染进程(Rendering Process)

    • 作用:每个标签页通常都有一个独立的渲染进程,负责解析和执行 HTML、CSS 和 JavaScript,以及渲染页面内容。
    • 示例:加载网页内容并显示给用户。
  • 插件进程(Plugin Process)

    • 作用:负责运行浏览器插件,如 Flash 等。
    • 示例:运行网页中的 Flash 动画

线程

  • 主线程(Main Thread)

    • 作用:在渲染进程中,主线程负责解析 HTML、执行 JavaScript 代码,管理 DOM 和 CSSOM,并处理用户交互事件(如点击、滚动等)。
    • 示例:执行页面中的 JavaScript 脚本,更新页面的 DOM 结构。
  • 事件线程(Event Thread)

    • 作用:事件线程负责处理异步事件,例如处理鼠标点击、键盘输入、网络请求的回调等。在浏览器中,事件线程通常由 Event Loop 来管理。
    • 示例:当用户点击按钮时,事件线程会将事件放入事件队列,等待主线程处理。
  • 定时器线程(Timer Thread)

    • 作用:负责管理定时器(如 setTimeout、setInterval)的计时和触发。
    • 示例:设置一个 setTimeout,定时器线程会在指定时间后将回调函数放入事件队列。
  • 网络线程(Network Thread)

    • 作用:负责处理网络请求和响应。
    • 示例:当页面发起一个 HTTP 请求时,网络线程会处理请求和接收响应。

JavaScript 执行的核心位置

总体来说,JavaScript 代码的执行主要发生在浏览器的渲染进程中的主线程中。这个线程负责执行 JavaScript 代码、更新 DOM、处理用户输入等。事件循环(Event Loop)则是负责管理异步操作和事件的执行顺序,确保 JavaScript 在单线程的执行环境下能够处理并发的事件和任务。

← Previous postPython中的Closure闭包
Next post →React夯实基础