前端基础MOC

前端基础知识索引 - HTML/CSS/浏览器/HTTP

#moc #evergreen #frontend

🌐 前端基础 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

系统学习路线

前端开发的基础知识：HTML、CSS、浏览器原理、HTTP 协议等。

🎯 快速导航

领域	入口	说明
HTML	html	网页结构语言
浏览器	browser	浏览器工作原理

📄 HTML

html - HTML 基础
HTML 语义化元素 - 语义化标签与可访问性
html-fragmented-knowledge-tips - HTML 零散知识
HTML 中的 JS 脚本 - script 标签使用
src-and-href - src 与 href 的语义差异

🎨 CSS

核心概念

flex - Flex 一维布局
inline-flex - 行内弹性容器
grid - Grid 二维布局
CSS 居中布局 - 居中布局的常见场景与方案选择
rem-em-px - 常见长度单位对比
css-position - 定位方式

布局系统

进阶技巧

display-none-visibility-hidden-opacity-zero - 三种隐藏方式对比

🌍 浏览器

工作原理

browser - 浏览器概述
浏览器开发者工具 MOC - DevTools 面板、排障路径与学习顺序
浏览器开发者工具 - 浏览器调试与排障入口
浏览器导航与前端路由 - URL 变化、会话历史、SPA 接管与服务端 fallback 的协作图
浏览器渲染流程 - 渲染管线
关键渲染路径 - 从 HTML 到像素的完整路径
浏览器时间切片与协作式调度 - 长任务、帧预算与任务分片
what-happens-after-entering-url - 从 URL 到页面
路由 - Hash 路由、History 路由与 SPA 页面切换基础
页面运行时状态 - 整页导航时真正容易丢的页面内存与 DOM 现场
virtual-dom - 虚拟 DOM
jsx - React / 前端框架里的 UI 表达层
lazy-loading - 懒加载
virtual-list - 虚拟列表
海量数据渲染 - 大列表渲染优化
web-first-screen-load-optimization - 首屏加载优化
客户端渲染（CSR） - 浏览器生成主要页面内容
服务端渲染（SSR） - 请求时服务端直出 HTML
静态站点生成（SSG） - 构建期预生成页面
csr-ssr-ssg - 三种渲染模式的对比与选型
SPA vs MPA - 单页应用与多页应用对比
SSR vs CSR - SSR 与 CSR 的简写桥接页
Hydration 水合 - SSR/SSG 的客户端接管过程
first-paint-vs-time-to-interactive - 首次可见与可交互时间的区别
INP 交互到下次绘制 - 核心网页指标：交互响应度
frontend-streaming-response-patterns - SSE、Streams 与 WebSocket 的流式响应模式
AI 聊天与流式 UI - AI 对话与流式界面
resource-hints - 资源提示与加载提示

框架桥接

React 状态模型 vs Vue3 响应式模型 - React state snapshot 与 Vue 依赖追踪对照

缓存

浏览器缓存体系 - 总入口
浏览器缓存分类与 304 / memory cache / disk cache - 分类总览
BFCache 页面级缓存
强缓存
协商缓存
[[http-cache-storage|浏览器内部缓存存储]]
Service Worker 与 Cache API
browser-web-workers - Web Worker
browser-audio-autoplay-policy - 音频策略

通信与交互

frontend-event-propagation - 事件传播与事件委托
add-event-listener - DOM 事件监听 API 与 capture/once/passive
cross-tab-communication-in-browser - 跨标签通信
frontend-event-bubbling - 事件机制
长轮询 - Long-Polling 通信方式
this 关键字 - this 绑定规则
debounce-and-throttle - 防抖节流
防抖节流封装模式 - VueUse 风格的防抖与节流封装

🔒 安全

xss-cross-site-scripting - XSS 攻击
CSRF 跨站请求伪造 - CSRF 攻击
XSS vs CSRF - 两类攻击边界与防御差异
Same-Origin - Origin 判定与同源安全边界
CORS - 受控跨源 HTTP 放行机制
跨域 - Same-Origin Policy 与 CORS 的关系
HttpOnly Cookie - Cookie 禁止脚本读取的安全属性
same-site - SameSite Cookie 属性与自动携带边界
cookie-vs-localstorage - Cookie 与 LocalStorage
cookie-session-token - Cookie、Session、Token
jwt - JWT 认证凭证格式

安全响应头

CSP 内容安全策略 - 防御 XSS 的核心机制
HSTS 严格传输安全 - 强制 HTTPS
x-content-type-options - 防 MIME 嗅探
x-frame-options - 防点击劫持
referrer-policy - Referer 信息控制
permissions-policy - 浏览器能力控制
COOP/COEP/CORP 跨源隔离

🔗 HTTP 与网络

HTTP 与前端网络请求 MOC - HTTP 与前端网络请求（总入口）
前端交互状态统一处理 - loading、空态、失败态、超时与重复提交
前端列表页状态处理 - 列表页里的首次加载、刷新、空态、错误与分页
前端表单提交状态处理 - 表单校验、提交中、防重与失败恢复
http-get-and-post - GET 与 POST
http-cache-strong - 强缓存
http-cache-negotiated - 协商缓存
http-status-codes - 状态码（参考表）
frontend-http-status-code-handling - 状态码处理
frontend-streaming-data-handling - 流式数据
large-file-download-range-request - 大文件下载与 Range 请求

⚡ 前端工程化

frontend-engineering-1 - 工程化概述
frontend-engineering-performance-optimization - 性能优化
frontend-project-structure - 项目结构
frontend-optimization - 优化技巧
frontend-elegant-implementation-guide - 最佳实践

前端基础MOC

🌐 前端基础 MOC

知识总览

系统学习路线

🎯 快速导航

📄 HTML

🎨 CSS

核心概念

布局系统

进阶技巧

🌍 浏览器

工作原理

框架桥接

缓存

通信与交互

🔒 安全

安全响应头

🔗 HTTP 与网络

⚡ 前端工程化

🖥️ 桌面应用

📚 学习路线

🔍 相关 MOC

键盘导航

🌐 前端基础 MOC

知识总览

系统学习路线

🎯 快速导航

📄 HTML

🎨 CSS

核心概念

布局系统

进阶技巧

🌍 浏览器

工作原理

框架桥接

缓存

通信与交互

🔒 安全

安全响应头

🔗 HTTP 与网络

⚡ 前端工程化

🖥️ 桌面应用

📚 学习路线

🔍 相关 MOC

Related notes