0

0

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

幻影之瞳

幻影之瞳

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

|

499人浏览过

|

来源于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)。

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

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

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

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

通吃客零食网整站 for Shopex
通吃客零食网整站 for Shopex

第一步】:将安装包中所有的文件夹和文件用ftp工具以二进制方式上传至服务器空间;(如果您不知如何设置ftp工具的二进制方式,可以查看:(http://www.shopex.cn/support/qa/setup.help.717.html)【第二步】:在浏览器中输入 http://您的商店域名/install 进行安装界面进行安装即可。【第二步】:登录后台,工具箱里恢复数据管理后台是url/sho

下载

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

JavaScript 是单线程的,但浏览器是多线程的。JS 引擎只管执行同步代码,而 Web API(如 setTimeoutfetch、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 中频繁读写 offsetHeightgetComputedStyle 等会强制触发回流(reflow),如果在长循环中调用,性能雪崩。现代做法是用 requestAnimationFrame 批量读写,或改用 ResizeObserverIntersectionObserver

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

561

2023.09.20

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

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

441

2023.07.18

堆和栈区别
堆和栈区别

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

603

2023.08.10

length函数用法
length函数用法

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

953

2023.09.19

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

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

764

2023.08.10

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

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

376

2025.12.24

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

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

28

2026.01.21

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

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

29

2026.01.21

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

4

2026.03.10

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号