五年前端高级岗到底在考什么这次问题看起来很散CSS 动画、渐变、三角形、新视口单位Fetch、Axios、XMLHttpRequestNginx、Docker、Linux 命令注册流程里是否应该强制用户上传头像CSRF、XSS、点击劫持假进度条算法为什么前端会被问后端和部署。但这些题不是随机的。它们背后对应的是一个五年前端高级工程师的能力地图。能力面试题表象真正考察页面能力CSS 动画、渐变、三角形、视口单位你是否理解 CSS 的渲染、布局和移动端坑点网络能力Fetch、Axios、XHR你是否理解浏览器请求、错误处理、跨域、凭证工程交付Nginx、Docker、Linux你是否能把项目从本地开发送到线上后端协作鉴权、BFF、接口流程你是否理解数据从页面到服务端再回到页面的完整链路安全意识CSRF、XSS、Clickjacking你是否知道前端写法会不会给系统埋雷产品判断注册时强制上传头像你是否能从转化率、体验和业务目标之间做取舍算法建模虚假进度条你是否能把一个体验问题抽象成一个可控模型所以真正的高级前端不是“所有题都背过”而是能在每个问题后面回答三层这个问题的原理是什么真实项目里会怎么落地它有哪些风险、边界和取舍下面就按这个思路重新梳理。1. CSS不是背属性而是理解“浏览器怎么画”CSS 面试题很容易被误解为“考记忆”。比如问动画属性很多人会马上开始背animation-name animation-duration animation-timing-function animation-delay ...这当然要知道但高级一点的回答不能只停在“有哪些属性”。你要把 CSS 看成浏览器绘制页面的语言一个元素从初始样式到最终样式中间怎么插值、怎么铺背景、怎么裁剪、怎么适配移动端视口这些才是核心。1.1 CSS 动画记住一条时间线CSS 动画由两部分组成keyframes定义动画过程中有哪些关键状态animation-*把这段关键帧动画挂到某个元素上并告诉浏览器怎么播放。一个最小例子keyframes slideIn { from { transform: translateX(-24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .toast { animation: slideIn 240ms ease-out both; }这段代码里真正发生的是浏览器看到.toast要播放slideIn动画总时长是240ms速度曲线是ease-out也就是开始快、结束慢both表示动画前后都保留关键帧对样式的影响。可以用一句话记住animation谁动、动多久、怎么动、等多久、动几次、往哪动、结束后留不留、现在跑不跑。对应属性如下属性作用常见值animation-name使用哪个keyframesslideIn、noneanimation-duration一个周期多久200ms、2sanimation-timing-function速度曲线linear、ease、ease-in-out、cubic-bezier()、steps()animation-delay延迟多久开始0s、300msanimation-iteration-count播放次数1、3、infiniteanimation-direction播放方向normal、reverse、alternate、alternate-reverseanimation-fill-mode动画前后是否保留关键帧样式none、forwards、backwards、bothanimation-play-state播放或暂停running、pausedanimation-timeline动画进度由什么时间线驱动auto、scroll()、view()很多旧资料会漏掉animation-timeline。这是近几年 CSS 滚动驱动动画里会遇到的属性。它允许动画不再只跟“时间”走而是跟滚动进度或元素进入视口的进度走。普通时间动画