Prompts-MCP 686 skills · ai / design / design-pattern / framework / fundamentals / habit / lang / tech-selection
/mcp/sse
fundamentals fundamentals/frontend/index.md medium

fundamentals-frontend-index

前端内功维度（写成规约+决策，非八股）— 浏览器渲染 / 事件循环 / HTTP 缓存 / 跨域 / 防抖节流 / 模块化 / 构建 / 状态管理思想。Use when 排查渲染卡顿 / 异步执行顺序 / 缓存不更新 / 跨域 / 打包体积 / 选状态管理方案时。

子项索引

子项 一句话
fundamentals-frontend-rendering-pipeline skill 浏览器渲染管线的三档代价（重排 reflow / 重绘 repaint / 合成 composite）与改样式的决策
fundamentals-frontend-event-loop skill 事件循环宏任务微任务的执行顺序与调度决策 — 同步栈清空后先排空全部微任务再取一个宏任务
fundamentals-frontend-http-caching skill HTTP 强缓存（Cache-Control 命中不发请求）vs 协商缓存（ETag / Last-Modified 拿 304）的资源分级配置决策
fundamentals-frontend-cors-same-origin skill 同源策略与 CORS 的前端决策 — 同源=协议+域名+端口全同，跨域是响应被浏览器拦而非请求没发
fundamentals-frontend-debounce-throttle skill 防抖 debounce 与节流 throttle 的选型与封装 — 按场景选哪个 + 给多少时延 + React 里怎么固定函数引用
fundamentals-frontend-module-systems skill 模块化体系 CJS/ESM/UMD 的工程选型与互操作 — 新代码用 ESM，CJS 仅遗留 Node 工具，UMD 仅浏览器 script 库
fundamentals-frontend-build-tooling skill 构建打包与 Tree-shaking 体积治理决策 — Vite 开发走 esbuild+原生 ESM、生产走 Rollup 打包，摇树靠 ESM 静态分析删未用导出
fundamentals-frontend-state-management-thinking skill 状态管理思想 — 单向数据流(props down / events up)、不可变更新、状态归属与单一数据源(决策视角)

Fundamentals · 前端内功维度

这里是「前端内功」，但一律写成规约 + 工程决策视角——回答「该怎么选 / 该怎么配 / 卡了怎么定位」，而非原理八股。 与 framework/react/、lang/typescript/ 的「用法」互补：那边讲怎么写组件，这边讲为什么卡、异步为何乱序、缓存为何不更新、体积为何大。 性能/量级数字为业界参考，落地需自测。

本层包含

名称 类型 一句话
rendering-pipeline skill 重排 / 重绘 / 合成层 — reflow 触发点与避坑
event-loop skill 宏任务 / 微任务执行顺序与排序
http-caching skill 强缓存 vs 协商缓存怎么配
cors-same-origin skill 同源策略 / CORS 预检 / 跨域报错定位
debounce-throttle skill 防抖 vs 节流何时用哪个
module-systems skill CJS / ESM / UMD 差异与互操作
build-tooling skill 打包 / tree-shaking / bundle 体积治理
state-management-thinking skill 单向数据流 / 不可变 / 状态归属

何时下钻

你在做什么 进哪个
页面卡顿 / 掉帧 / 滚动不顺，想知道哪步触发重排重绘、怎么提合成层 rendering-pipeline
看不懂 Promise / setTimeout / await 谁先执行、微任务为何插队 event-loop
改了文件浏览器不更新、或想配 Cache-Control / ETag 缓存策略 http-caching
接口报 CORS 错、预检失败、带 cookie 跨域不通 cors-same-origin
搜索框 / resize / scroll 触发太频繁，要降频 debounce-throttle
require 与 import 混用、循环依赖、库既要 CJS 又要 ESM module-systems
bundle 体积过大、tree-shaking 没生效、想拆 chunk build-tooling
状态该放组件内还是全局、要不要上 Redux/Zustand、为何要不可变 state-management-thinking

链接