SuperAPI AI 工具集

frontend-core-architecture

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:为前端项目提供统一的平台模型,作为其他前端技能的基础。它把 Web 平台分为四层:标记(WHATWG HTML Living Standard,产出 DOM 树)、样式(W3C CSS,产出 CSSOM 与渲染树)、行为(ECMAScript、WHATWG DOM 与 Web API,产生 DOM/CSSOM 变更)、动画/时间线(CSS 动画、View Transitions API、滚动驱动动画,产出合成层)。目标基线为 evergreen-2026(Chrome、Firefox、Safari、Edge 当前稳定版);Baseline 2024 特性必须无需 polyfill 即可工作,Baseline 2025 特性必须通过 @supports 或运行时特性检测进行门控。

主要能力:规定规范查阅顺序(HTML/DOM 行为查 WHATWG Living Standard,CSS 特性查 W3C TR,应用问题查 MDN,Chrome 团队指导查 web.dev;MDN 与规范冲突时以规范为准)。给出渲染管线各阶段(解析 HTML、解析 CSS、样式、布局、绘制、合成)及其触发条件,并说明仅合成属性(transform、opacity、filter)可跳过布局与绘制。提供决策树:是否需要构建步骤、需求属于哪一层、动画是否安全达到 60fps。

使用方式:按决策树判断项目是否需要构建步骤(TypeScript、非预打包 ESM 的 npm 依赖、超过 20 个源模块、PostCSS 插件为必要条件之一才需要);将需求放入尽可能低的层,只有低层无法表达时才提升;动画优先使用仅合成属性,避免动画 width、height、margin、padding 或定位 inset。

适用场景:启动前端项目、选择技术栈、决定功能归属、诊断页面缓慢或卡顿。

限制:资料未提供具体安装命令、收费信息或平台支持细节;部分引用文件(references/methods.md、references/examples.md)内容未在资料中展开。