前端基础MOC
前端基础知识索引 - HTML/CSS/浏览器/HTTP
#type / moc
#status / evergreen
#tech / dev / frontend
🌐 前端基础 MOC
前端开发的基础知识：HTML、CSS、浏览器原理、HTTP 协议等。
🎯 快速导航
| 领域 | 入口 | 说明 |
|---|---|---|
| HTML | html | 网页结构语言 |
| 浏览器 | browser | 浏览器工作原理 |
📄 HTML
- html - HTML 基础
- HTML 语义化元素 - 语义化标签与可访问性
- html-fragmented-knowledge-tips - HTML 零散知识
- html-js-scripts - 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 的协作图
- browser-rendering-process - 渲染管线
- 关键渲染路径 - 从 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-chat-and-streaming-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-keyword - this 绑定规则
- debounce-and-throttle - 防抖节流
- 防抖节流封装模式 - VueUse 风格的防抖与节流封装
🔒 安全
- xss-cross-site-scripting - XSS 攻击
- csrf - CSRF 攻击
- cross-origin - 跨域
- same-origin - 同源策略
- 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-and-frontend-networking-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 - 最佳实践
🖥️ 桌面应用
📚 学习路线
- frontend-learning-roadmap - 系统学习指南
- frontend-feature-implementation - 常见功能实现
🔍 相关 MOC
- frontend-interview-high-frequency-moc - 前端高频面试题导航