讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript如何工作_浏览器是如何执行javascript代码的?

星浩君_2322

星浩君_2322

发布时间:2026-01-10 19:35:03

|

519人浏览过

|

来源于php中文网

原创

JavaScript引擎通过解析、编译、执行三步处理代码,V8采用Ignition解释字节码+TurboFan对热点函数JIT编译;JS执行会阻塞DOM解析与渲染,async脚本下载后立即执行,defer则延迟至DOM解析完成前按序执行。

javascript如何工作_浏览器是如何执行javascript代码的?

JavaScript 引擎如何解析和执行代码

浏览器不直接运行你写的 script 文本,而是交给 JavaScript 引擎(如 V8、SpiderMonkey)处理。这个过程分三步:解析(Parsing)、编译(Compilation)、执行(Execution)。V8 现在用的是“解释 + 即时编译(JIT)”混合策略:先用 Ignition 解释器快速生成字节码,再把热点函数交给 TurboFan 编译成高效机器码。

这意味着:写法相似的代码,执行速度可能差异很大——比如循环里反复读取 arr.length 而不是缓存它,V8 未必总能量化优化;而 for (let i = 0; i 在某些版本中会被优化,但换成 <code>for (const item of arr) 可能触发不同路径。

执行上下文与调用栈怎么影响代码行为

每次函数调用都会创建一个执行上下文(Execution Context),压入调用栈(Call Stack)。全局代码对应全局上下文,函数调用对应函数上下文。变量提升(Hoisting)的本质,就是声明阶段(Creation Phase)把 var 声明和函数声明提前注册进当前上下文的词法环境,但赋值仍留在执行阶段(Execution Phase)。

常见误解是“let 和 const 不提升”,其实它们也提升,只是被放入“暂时性死区(TDZ)”,访问会抛出 ReferenceError:

立即学习“Java免费学习笔记(深入)”;

console.log(a); // ReferenceError
let a = 1;

注意:typeof undefinedVariable 不报错,但 typeof undeclaredVariable 也不报错——因为未声明变量在全局作用域下是 ReferenceError,但在 typeof 中被特殊处理为 "undefined"。

Wechat Article Html
Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

事件循环(Event Loop)如何协调 JS 的单线程与异步

JavaScript 是单线程的,但浏览器是多线程的。JS 引擎只管执行同步代码,而 Web API(如 setTimeout、fetch、DOM 事件)由浏览器其他线程处理。它们完成任务后,把回调函数推入任务队列(Task Queue),等调用栈为空时,Event Loop 才把队列里的回调拉出来执行。

关键点:

  • Promise.then() 回调属于 microtask,优先于 setTimeout 这类 macrotask 执行
  • queueMicrotask() 可手动插入 microtask,比 Promise.resolve().then() 更轻量
  • 一个宏任务执行完,会清空全部当前 microtask 队列,再取下一个宏任务

这解释了为什么下面代码输出顺序是 1 → 3 → 2:

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));

DOM 渲染与 JS 执行如何互相阻塞

JS 执行会阻塞 DOM 解析和渲染。浏览器遇到 <script></script> 标签,默认会暂停 HTML 解析,下载、编译、执行脚本,再继续。这就是为什么把大脚本放 底部,或加 async/defer 属性。

区别:

  • async:下载不阻塞 HTML,但下载完立即执行(可能打断渲染)
  • defer:下载不阻塞 HTML,执行延迟到 DOM 解析完成、DOMContentLoaded 触发前,且按顺序执行
  • 动态创建的 script 元素默认表现类似 async

更隐蔽的问题:在 JS 中频繁读写 offsetHeight、getComputedStyle 等会强制触发回流(reflow),如果在长循环中调用,性能雪崩。现代做法是用 requestAnimationFrame 批量读写,或改用 ResizeObserver、IntersectionObserver。

热门AI工具

更多
讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2298

2023.09.20

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

6247

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

2628

2023.08.10

length函数用法
length函数用法

length函数用于返回指定字符串的字符数或字节数。可以用于计算字符串的长度,以便在查询和处理字符串数据时进行操作和判断。 需要注意的是length函数计算的是字符串的字符数,而不是字节数。对于多字节字符集,一个字符可能由多个字节组成。因此,length函数在计算字符串长度时会将多字节字符作为一个字符来计算。更多关于length函数的用法,大家可以阅读本专题下面的文章。

1907

2023.09.19

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

4438

2023.08.10

Python 多线程与异步编程实战
Python 多线程与异步编程实战

本专题系统讲解 Python 多线程与异步编程的核心概念与实战技巧,包括 threading 模块基础、线程同步机制、GIL 原理、asyncio 异步任务管理、协程与事件循环、任务调度与异常处理。通过实战示例,帮助学习者掌握 如何构建高性能、多任务并发的 Python 应用。

1229

2025.12.24

java多线程相关教程合集
java多线程相关教程合集

本专题整合了java多线程相关教程,阅读专题下面的文章了解更多详细内容。

423

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

579

2026.01.21

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

40

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn