[!info] related notes

• 所属 MOC: 浏览器 JS MOC, JavaScript MOC
• 上位主题: JavaScript的工程化与运行时
• 相关概念: HTML 中的 JS 脚本, javascript-dom, JavaScript BOM, javascript-events, Window 对象, location-object, history-object, navigator-object, screen-object
• 安全: xss-cross-site-scripting, CSRF 跨站请求伪造
• 性能: debounce-and-throttle
• 并列概念: Node.js 中的 JavaScript

浏览器下的 JavaScript

这篇笔记只回答一个问题：JavaScript 进入浏览器之后，多了哪些宿主能力，以及这些能力该从哪里继续看。

核心边界

• ECMAScript 负责语言本身
• 浏览器额外提供 DOM、BOM、事件系统、渲染、存储、工作线程等宿主能力
• 所以浏览器里的 JavaScript = 语言 + 浏览器宿主 API

推荐阅读顺序

1. HTML 中的 JS 脚本
2. javascript-dom
3. JavaScript BOM
4. Window 对象
5. javascript-events
6. javascript中的进程线程协程
7. browser-web-workers
8. browser-client-storage
9. 浏览器渲染流程

主题分组

页面入口与脚本加载

• HTML 中的 JS 脚本

页面结构与渲染

• javascript-dom
• 浏览器渲染流程

浏览器环境对象

• JavaScript BOM
• Window 对象
• location-object
• history-object
• navigator-object
• screen-object
• 浏览器导航与前端路由

事件与交互

• javascript-events
• this 关键字
• debounce-and-throttle

安全

• xss-cross-site-scripting

并发与后台能力

• javascript中的进程线程协程
• browser-web-workers

浏览器额外存储能力

• browser-client-storage

页面运行时与恢复

• 页面运行时状态
• BFCache 页面级缓存

和 Node.js 的边界

• 浏览器有 DOM、窗口、渲染和用户交互
• Node.js 没有页面，但有文件系统、进程和服务端 I/O

对照阅读：Node.js 中的 JavaScript

如果要按知识地图分组浏览，去 浏览器 JS MOC。

学习检查

不看正文回答：

1. ECMAScript 与 Browser Host API 的边界是什么？
2. DOM、BOM、事件系统、存储、Worker 分别属于语言本体还是浏览器宿主能力？
3. 为什么同一段 JavaScript 在 Browser 与 Node.js 中可用 API 不同？
4. 页面渲染流程为什么不是 ECMAScript 自己完成的？
5. 浏览器主线程、Web Worker 与网络 I/O 的职责怎样区分？
6. 给一个“读取 URL、操作 DOM、发请求、保存数据”的页面流程，指出每一步依赖哪类宿主能力。

Related notes

• 前端工程化MOC
• 前端基础MOC
• CSS MOC
• ECMAScript MOC