[!info] related notes

• 父 MOC: JavaScript MOC
• 子主题总览: 浏览器中的 JavaScript
• 并列子主题: Node.js MOC

JavaScript in Browser MOC

知识总览

filters:
  and:
    - 'file.ext == "md"'
    - 'file.inFolder("z")'
    - 'this.file.links.contains(file)'
    - 'file.path != this.file.path'
formulas:
  knowledge: 'file.asLink(title)'
properties:
  formula.knowledge:
    displayName: 知识
  note.description:
    displayName: Description
  note.mastery:
    displayName: Mastery
views:
  - type: table
    name: 知识总览
    order:
      - formula.knowledge
      - note.description
      - note.mastery
    columnSize:
      formula.knowledge: 280
      note.description: 760
      note.mastery: 56

这张地图覆盖什么

这张地图覆盖浏览器作为 JavaScript 宿主环境时的核心知识簇，包括脚本加载、DOM/BOM、事件、页面状态、并发与浏览器特有能力。

从这里开始

1. 浏览器中的 JavaScript - 先建立“语言本体 vs 浏览器宿主能力”的边界
2. HTML 中的 JS 脚本 - 进入脚本加载与模块脚本
3. javascript-dom / JavaScript BOM - 进入页面结构与浏览器环境对象

页面入口与脚本加载

• HTML 中的 JS 脚本
• 浏览器导航与前端路由

页面结构与环境对象

• javascript-dom
• JavaScript BOM
• Window 对象
• location-object
• history-object
• navigator-object
• screen-object

事件与页面交互

• javascript-events
• add-event-listener
• frontend-event-propagation
• frontend-event-bubbling
• debounce-and-throttle

页面状态、存储与缓存

• browser-client-storage
• 页面运行时状态
• cookie-vs-localstorage
• BFCache 页面级缓存

并发、渲染与后台能力

• 浏览器渲染流程
• javascript中的进程线程协程
• browser-web-workers

浏览器自动化与用户脚本

• 浏览器脚本自动化与行为模拟
• LINUX DO 论坛安全自动阅读脚本

安全与网络边界

• cross-origin
• CSRF 跨站请求伪造
• xss-cross-site-scripting

相关 MOC

• JavaScript MOC
• 前端基础 MOC