CSS3 的transform和animation是我个人认为 CSS 体系里最值得花时间玩透的部分。很多人看到旋转、3D 效果第一反应是找 JS 库但纯 CSS 其实已经能搞定绝大多数展示类动效而且性能更好。旋转的基础写法就是transform: rotate(45deg)单位是 deg配合transition就能实现平滑过渡。但如果你想做 3D 相册那种效果光有 rotate 不够必须理解三个前置属性perspective景深、transform-style: preserve-3d保留 3D 空间、rotateX/rotateY/rotateZ三维旋转轴。我直接给一个我常用的 3D 立方体相册核心代码注释都写在里面了你复制到本地就能跑.album { width: 300px; height: 300px; position: relative; margin: 100px auto; /* 景深越大透视变形越小 */ perspective: 1000px; } .cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; /* 动画沿 Y 轴匀速旋转12s 转一圈 */ animation: spin 12s linear infinite; } .face { position: absolute; width: 300px; height: 300px; border: 2px solid #fff; background-size: cover; background-position: center; } /* 六个面分别定位 */ .face:nth-child(1) { transform: translateZ(150px); background-image: url(img/1.jpg); } .face:nth-child(2) { transform: rotateY(180deg) translateZ(150px); background-image: url(img/2.jpg); } .face:nth-child(3) { transform: rotateY(90deg) translateZ(150px); background-image: url(img/3.jpg); } .face:nth-child(4) { transform: rotateY(-90deg) translateZ(150px); background-image: url(img/4.jpg); } .face:nth-child(5) { transform: rotateX(90deg) translateZ(150px); background-image: url(img/5.jpg); } .face:nth-child(6) { transform: rotateX(-90deg) translateZ(150px); background-image: url(img/6.jpg); } keyframes spin { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } }注意一个顺序问题translateZ必须在rotate之后写否则坐标轴会跟着面一起旋转结果全部叠在一个平面上。这是我第一次做相册时踩的坑后面会细说。字体渐变的话推荐两种方式。一种是针对大标题的background-clip: text原理是先给文字区域铺一个渐变背景再裁切成文字的形状兼容性方面 Chrome 和 Safari 都没问题Firefox 新版也支持了.gradient-text { background: linear-gradient(90deg, #ff6b6b, #4ecdc4); -webkit-background-clip: text; background-clip: text; color: transparent; }另一种是用font-face引入可变字体配合font-variation-settings适合需要动态控制字重的场景但在国内项目里用得不多因为字体文件体积大视觉收益也不明显。我建议普通项目直接用第一种压一行 CSS 就能出效果。1.2 删除线、文本位置调整与容器查询删除线就是一个text-decoration: line-through但如果你需要在删除线下方再加一层自定义颜色或大小可以叠加text-decoration-color和text-decoration-thickness。这两个属性对做电商促销价、任务清单的完成态都很有用。不过要注意text-decoration会继承子元素如果想单独控制必须显式覆盖否则容易出现“整块都带线”的问题。文本位置调整这个需求搜索量一直很高。很多人只知道text-align和line-height遇到复杂的垂直居中就抓瞎。我整理了一个判断顺序单行文本垂直居中用line-height等于容器高度块级元素内部多重内容垂直居中用flex绝对定位的居中用top: 50%; left: 50%; transform: translate(-50%, -50%)。不要一上来就乱试先判断场景。再说 CSS 新出的容器查询Container Queries热词里有cqw指的就是容器宽度单位1cqw 容器宽度的 1%。过去做响应式只能依赖视口宽度媒体查询现在可以基于父容器自身尺寸来做适配这对组件化开发是质变级的体验。我最近做卡片组件就在用容器查询外面的容器宽度在 300px 到 800px 之间变化时卡片内部布局可以独立响应代码可维护性高不少。基础用法是给父容器加container-type: inline-size然后子元素就能写container (min-width: 400px) { ... }需要控制浏览器版本如果要上线生产环境建议先查一下目标用户的浏览器占比再决定用不用。1.3 鼠标移入事件与选择器进阶CSS 的鼠标移入事件对应的是:hover伪类这个大家都会但我想提醒一点在移动端没有鼠标:hover在触摸设备上会有粘滞效果轻点一下之后可能一直保持 hover 状态。后来我在跳出层的处理上更倾向于用media (hover: hover)做能力判断只在支持 hover 的设备上启用复杂动效移动端直接展示默认状态这样交互体验一致得多。至于“CSS 除了倒数二个元素”这种需求用:nth-last-child()就能解决。:nth-last-child(n3)表示从倒数第 3 个开始往前选等价于排除最后两个元素。类似的需求还有:not(:last-child)给列表项之间加分隔线以及用:empty隐藏空容器。这些选择器技巧在日常切页面时高频出现建议直接背下来。选一张合适的 CSS 素材网站很提效。我平时固定的几个CSS-Tricks 看原理文章CodePen 搜效果 DemoAnimista 生成过渡动画cubic-bezier.com 调缓动曲线。做 CSS 动效不是从零硬写先在这些站点找相似效果的代码片段再改造成自己的需求效率能翻一倍。2. JavaScript 高频操作、异步模型与前端性能优化2.1 字符串包含判断、数字格式化与精度坑字符串是否包含子串这个需求在搜索里排名很高。ES6 时代直接推荐str.includes(目标)语义清楚返回布尔值。再老一点的indexOf ! -1也能用但可读性差一些。如果需要忽略大小写就先toLowerCase()再判断。注意includes不能传正则传正则会被当成普通字符串处理这一点和String.prototype.search不同。保留两位小数这个需求看起来简单实际坑不少。toFixed(2)是用的四舍五入但1.005.toFixed(2)会返回1.00因为浮点数的二进制精度问题这行代码在浏览器里测一下就会发现。如果你处理的是金额、比分这类要求精确的数据建议这样封装function roundTo(num, decimals 2) { const factor Math.pow(10, decimals); return Math.round((num Number.EPSILON) * factor) / factor; }Number.EPSILON是 ES6 提供的机器精度常量加一个它可以修正大部分浮点误差。另一种更稳的方案是完全避开浮点运算把金额转成分整数来计算只在显示时除以 100。实际项目中我强烈推荐后者尤其在涉及优惠券、凑单、退款这类逻辑里。2.2 宏任务、微任务与事件循环热词里有“js宏”指的就是宏任务。异步任务分为宏任务setTimeout、setInterval、I/O、UI 渲染和微任务Promise.then、MutationObserver、queueMicrotask。执行顺序是当前宏任务 → 所有微任务 → 渲染 → 下一个宏任务。这个顺序背熟前端面试题基本稳了一半。我写段代码你可以在控制台跑一下结果会加深理解console.log(script start); setTimeout(() { console.log(macro task); }, 0); Promise.resolve().then(() { console.log(micro task 1); }).then(() { console.log(micro task 2); }); console.log(script end); // 输出顺序script start → script end → micro task 1 → micro task 2 → macro task我面试过不少人能完整讲出微任务队列会被宏任务之间的渲染阶段“夹住”这个细节的不多。实际项目里如果发现页面渲染卡顿很多时候就是因为一个宏任务里塞了过多计算或过多 DOM 操作解决思路是拆任务把大任务切分到多个setTimeout或requestAnimationFrame中执行给浏览器留出渲染微任务的机会。2.3 JSON.stringify 的性能陷阱与前端优化思路JSON.stringify出现在热词里是因为很多前端新人在做性能优化时喜欢用JSON.parse(JSON.stringify(obj))做深拷贝。这个写法在数据量小的时候完全没问题简洁好用。但对象里如果有undefined、function、symbol、NaN时会被自动忽略或转成null结果并不总是符合预期。更深层的性能问题是JSON.stringify需要完整遍历对象树并构造字符串一个几 MB 的对象拷贝一次就可能让主线程卡顿上百毫秒。我个人的建议是深拷贝用structuredClone现代浏览器内置递归遍历在几十层嵌套以内可以用JSON序列化方案更快再复杂的数据结构直接用lodash.cloneDeep兜底虽然慢一点但可靠。数据处理的核心目标不是“写出最严谨的深拷贝”而是“在合适的场景用合适的工具”。前端性能优化是一个大话题但绝大多数页面瓶颈都在无意义的重复渲染、过大的白屏请求、以及每次交互都直接操作 DOM。我的基本盘是能用 CSS 的不用 JS能用transform/opacity的不用width/left能加debounce/throttle的交互一定加。这不是技巧是习惯。把这三个习惯养成了性能问题会少一多半。2.4 SignalR 前端取数、剪贴板库 vs 纯 CSS 复制SignalR 是微软的实时通信库前端需要通过 WebSocket 接收服务端推送的数据。热词里问“signalr前端应该怎么获取数据”原因是 SignalR 的官方文档主要面向 .NET 后端前端部分经常草草带过。前端正确姿势是先HubConnectionBuilder()创建连接然后on()订阅服务端方法名最后start()启动连接。收到数据后把它 set 进 Vue 的响应式状态里页面会自动更新。千万记得在组件卸载时调用stop()断开连接否则会内存泄漏。剪贴板操作方面有人问clipboardjs和纯 CSS 写的 copy 有什么区别。实际上“纯 CSS 复制”是一个误会复制这个操作必须用 JS。真正对的对比是document.execCommand(copy)和老牌的ClipboardJS库。后者封装了兼容层支持从元素、文本、富文本复制在小部分老浏览器上表现更稳定。现在浏览器navigator.clipboard.writeText已经很成熟了我推荐优先用原生 API这能少引入一个依赖而且支持异步写入配合权限提示更规范。注意navigator.clipboard只在 HTTPS 或 localhost 下可用如果线上页面不是 HTTPS就得回退到execCommand方案。3. Vue 框架深入环境搭建、路由、播放与响应式原理3.1 Vue 安装及环境配置Vue 的热词里“vue安装及环境配置”和“vue安装依赖”高频出现说明很多新手卡在环境这一步。Vue 3 官方现在推荐用 Vite 作为构建工具创建项目只需要一条命令npm create vuelatest my-app这个命令会引导你选择 TypeScript、JSX、Vue Router、Pinia 等选项。如果是纯学习可以先全选 No后续需要再手动装。项目创建后执行npm install安装依赖npm run dev启动开发服务器。整个流程如果顺利三分钟能跑起来。依赖安装慢是国内普遍问题解决办法是换 npm 镜像源我一般用这个命令npm config set registry https://registry.npmmirror.com或者直接用cnpm、pnpm。个人建议新项目直接上pnpm它的依赖管理方式更节省磁盘空间而且天然避免了“幽灵依赖”问题。从 npm 切换到 pnpm 之后安装速度体感能快一倍。3.2 Vue 路由基础配置与动态路由守卫Vue Router 是 Vue 项目的标配路由方案。基础配置其实就三步定义路由表 →createRouter创建实例 → 用router-view挂载出口。我用 Vue Router 4 写一个最小可运行示例import { createRouter, createWebHistory } from vue-router import Home from ../views/Home.vue const routes [ { path: /, name: home, component: Home }, { path: /about, name: about, component: () import(../views/About.vue) }, ] const router createRouter({ history: createWebHistory(), routes, }) // 全局前置守卫做登录校验 router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next({ name: login }) } else { next() } })注意component: () import(...)这种写法会做路由懒加载代码会拆分成独立 chunk首屏只加载当前页面需要的部分。配置路由守卫时我强调一个经验守卫里不要写太多同步逻辑更不要在里面发起渲染级请求否则每次路由跳转都会卡一下。由于实践中beforeEach经常被滥用我的原则是守卫里只做“能一分钟内完成的最小判断”重逻辑放到进入页面后再说。3.3 Vue 播放 m3u8 视频方案“vue播放m3u8”是视频类项目的常见需求。m3u8 是 HLS 直播/点播协议里的播放列表格式浏览器原生video不支持直接播放需要借助hls.js来转封装。我的做法是npm install hls.js然后在组件里动态判断浏览器能力做降级处理template video refvideoRef controls/video /template script setup import { ref, onMounted } from vue import Hls from hls.js const videoRef ref(null) const src https://example.com/live/index.m3u8 onMounted(() { const video videoRef.value if (Hls.isSupported()) { const hls new Hls() hls.loadSource(src) hls.attachMedia(video) hls.on(Hls.Events.MANIFEST_PARSED, () video.play()) } else if (video.canPlayType(application/vnd.apple.mpegurl)) { // Safari 原生支持 HLS video.src src video.play() } }) /script这段代码里MANIFEST_PARSED事件表示视频流索引已加载完成attachMedia是把 hls.js 的处理结果关联到 video 元素上。如果你只是播一个.mp4那就别绕弯子直接video.src url即可。m3u8 的坑主要在后端CORS 头不配上、切片路径写绝对地址、码率切换不设AUTO级别都会导致前端黑屏或者频繁卡顿。前端能做的排查就是打开 DevTools 的 Network 面板看.ts请求是否 206、是否有跨域报错。3.4 从“深入浅出 Vue”看响应式原理“js深入浅出vue”和“vue框架”这两个热词说明很多人想了解 Vue 底层。Vue 3 的响应式系统基于 ES6 的Proxy核心思路是读取数据时收集依赖effect修改数据时触发更新trigger。我很少建议新人直接去看 Vue 源码但一定要理解它的响应式设计理念状态变化是唯一的数据来源视图只是状态的函数。这样在排查问题时就会有方向感——页面不更新先问“我改的是不是响应式状态”。Vue 2 用Object.defineProperty逐属性劫持所以新增属性和数组下标修改是检测不到的Vue 3 用Proxy代理整个对象就不存在这个问题。这也是为什么 Vue 3 抛弃$set的原因。我遇到过一个线上 BugVue 2 项目里直接this.obj.newKey 1后视图不刷新很多人第一反应是“重新赋值一次”实际上如果你用的 Vue 3 根本不会有这个坑。这也是我建议新项目尽量选 Vue 3 的原因之一。3.5 Vue 面试题的常考方向“vue面试题”这个词条说明求职者需要的是考点梳理。我总结下来Vue 面试题几乎 90% 集中在六个方向响应式原理、生命周期、组件通信、路由守卫、Vuex/Pinia 状态管理、性能优化。组件通信的八种方式里最常考的是props/emit、provide/inject、eventBus、Pinia。生命周期则从创建到销毁一条线串起来重点考察onMounted与nextTick的执行顺序。我的建议是把每个知识点都自己手写一遍 Demo而不是死记硬背八股文。比如“父子组件生命周期执行顺序”在浏览器里console.log打印一下就知道父beforeMount→ 子beforeMount→ 子mounted→ 父mounted。自己跑过一次比背一百遍问答都有用。4. 前端学习路线、面试准备与常见问题速查4.1 一套可执行的前端学习路线前端怎么入门、怎么进阶一直有人在问。我给一套自己带新人时用的路线图按周为单位推进不需要报课所有材料都是免费文档和开源项目第一阶段HTML CSS目标是把静态页面还原到位。能独立切一个完整的营销落地页会响应式布局、Flex/Grid、伪类选择器、简单的 CSS 动画。第二阶段是 JavaScript 基础目标是能写交互逻辑。变量、类型、作用域、闭包、原型链、事件、Promise、fetch每个知识点都要边学边写小例子。第三阶段是工程化目标是熟悉现代前端工作流。Node.js 基础、npm/yarn/pnpm、Vite/Webpack 的最小配置、ES Module 规范、Git 协作。第四阶段是框架Vue 或 React 选一个深入。会创建项目、写组件、配路由、做状态管理、对接接口。第五阶段是进阶包括 TypeScript、性能优化、前端安全、浏览器原理、自动化测试。我特别强调一点入门阶段不要同时学两个框架不要看超过三份教程。选定一条主路径把文档首页的教程完整敲一遍然后自己做一个综合项目比如待办事项、博客、商城后台。做完这个项目你才算真正跨过了“纸上谈兵”的阶段。4.2 前端面试实战常见问题与避坑指南热词里“前端面试题”、“前端面试题2026”、“前端八股文”说明大家对面试的关注度持续很高。面试题的整理很多但我更想聊的是面试中的“表达策略”回答代码题时先说结论再给代码最后讲为什么。比如问“CSS 旋转”你可以说“旋转用transform: rotate()配合transition过渡如果是 3D 旋转还要设置perspective因为不设置景深旋转看起来像压缩而不是空间转动”。这样面试官马上就知道你理解到位了。“前端八股文”其实不是贬义词它代表了一套共识性的知识框架。真正的加分项在你把八股文范式和实际项目经验连起来讲提到宏任务微任务时举一个你排查过的定时器延迟问题提到 Vue 响应式原理时举一个视图不更新的实际案例。这种“原理 落地”的表述方式比背一百个面试题都管用。4.3 HTML 转 Markdown、WPS 表格导入与其他常见场景热词里有些前端外围需求比如“html转为md”和“html格式转换wps表格”。这是两个非常实际的工作问题。HTML 转 Markdown可以用现成的库比如turndown前端直接用 npm 安装即可。反过来 Markdown 转 HTML 我用marked。如果你只是偶尔转一次不需要写代码找在线转换工具更快。“html格式转换wps表格”这个比较特殊大概率是想把网页表格导入 Excel/WPS。常见姿势是导出一个.csv文件Excel 和 WPS 都能直接打开。前端导 CSV 的核心代码很短function exportToCsv(filename, rows) { const csvContent rows.map(row row.join(,)).join(\n) const blob new Blob([\ufeff csvContent], { type: text/csv;charsetutf-8; }) const link document.createElement(a) link.href URL.createObjectURL(blob) link.download filename link.click() URL.revokeObjectURL(link.href) }注意前面加的\ufeff那是 BOM 头没有它 Excel 打开中文 CSV 会乱码这是很多人踩过的坑。再回答一个高频问题“html文件无法预览”。很多人下载了一个.html文件双击没反应或者浏览器里打开是一片空白。排查顺序是第一步确认文件本身是不是 UTF-8 编码如果带中文且编码不对浏览器会显示乱码或空白第二步看是否真的用浏览器打开了有时系统默认用文本编辑器打开第三步检查 HTML 结构文件内容里是不是只有 Doctype 声明或包含未闭合标签。建议安装一个 Live ServerVS Code 插件来做本地预览它能热更新页面刷新都不用手工点。4.4 常见报错与排查速查表实际问题排查这块我把这几年遇到的前端高频问题整理成一张速查表留个备份给自己看也方便大家在需要时直接对照现象可能原因排查与解法页面样式错乱CSS 没有加载、类名拼写错误、浏览器缓存打开 Network 看 CSS 请求状态用 DevTools 检查元素确认类有没有命中强制刷新 CtrlF5点击事件没反应元素被遮挡、事件绑定失败、JS 报错中断检查元素z-index看 Console 有没有报错确认选择器是否匹配当前 DOM接口跨域后端未配置 CORS前端用 file:// 协议打开后端加 CORS 头开发阶段配 Vite/Webpack 代理页面必须通过 localhost 访问页面白屏JS 报错、入口文件加载失败、路由配置问题看 Console 和 Network定位具体报错文件和资源状态Vue 数据改了页面不更新在 Vue 2 里给对象新增属性直接操作了非响应式变量用this.$set()或重新赋值检查是否在reactive对象中操作图片不显示路径问题、跨域问题、防盗链检查路径是相对还是绝对Network 看 404/403图片服务器加白名单字体图标显示为方块iconfont 类名不对、字体文件未加载检查字体文件请求与类名确认font-face路径是否正确mobile 端点击有 300ms 延迟老浏览器没有设置 viewport加meta nameviewport contentwidthdevice-width, initial-scale1这些报错大多数情况下不是技术难度高而是没有头绪。记住一个核心思路所有前端问题最终都能在 DevTools 的三个面板里找到线索Element 看结构Console 看报错Network 看请求。把这个工具链用熟了一半问题都能自解。5. 写代码之外的几点建议聊到兴起我基于这些年带人的经验再多说几句。前端入门看起来简单但真正能坚持到上手的比例其实不高。很多人一开始就陷入“看教程-跟着敲-忘掉-再找教程”的循环里根本原因是没有项目牵引。如果你现在还在纠结今天学 HTML 还是 CSS我的建议是别再纠结了先拿一个完整网页照着敲一遍遇到不会的属性再查文档。有了目标学到的每个点才不会变成孤立的碎片。还有一个容易忽略的点是设备测试。前端不是“写完就行”你必须至少覆盖 Chrome、Safari、一部安卓机、一部 iPhone。很多样式只在某个浏览器下异常比如 Safari 对部分 CSS 支持不稳定如果不实测关键时刻很容易翻车。我现在习惯在代码里用supports做特性检测给不支持某些属性的浏览器写降级方案而不是等用户反馈再去修。关于搜索的用法我也想多说一句报错信息直接复制到搜索引擎永远比手工翻译快。Vue 项目的报错在控制台都有明确提示把错误码和关键词放一起搜大概率能找到同款问题。Stack Overflow 和 GitHub Issues 里的讨论质量通常比较高可以优先看。搜索本身也是前端开发 skills 的一部分学会问问题、拆问题等于多了一台外挂电脑。另外平时一定要攒代码片段。我自己有个 snippet 仓库按 HTML/CSS/JS/Vue 分类什么 3D 相册、防抖节流、路由守卫、表格导出全部存成模板。项目里用到时直接复制改参数省掉了重复造轮子的时间。你可以用 VS Code 的用户代码片段功能也可以建一个私有 GitHub 仓库甚至用 Typora 记 Markdown 笔记怎么方便怎么来。最后再分享一个心态上的体会前端更新快是事实但核心的地基一直没有变——HTML 是内容结构CSS 是视觉表现JavaScript 是行为交互Vue 这些框架只是帮我们更高效地表达标这三个东西的工具。地基扎实换什么框架都不慌地基不稳追新框架只会越来越累。 
长河君 · 2026/9/9 14:58:43 · 阅读 1.2k 前端进阶实战：CSS3动效、JavaScript异步与Vue框架核心解析
CSS3 的transform和animation是我个人认为 CSS 体系里最值得花时间玩透的部分。很多人看到旋转、3D 效果第一反应是找 JS 库但纯 CSS 其实已经能搞定绝大多数展示类动效而且性能更好。旋转的基础写法就是transform: rotate(45deg)单位是 deg配合transition就能实现平滑过渡。但如果你想做 3D 相册那种效果光有 rotate 不够必须理解三个前置属性perspective景深、transform-style: preserve-3d保留 3D 空间、rotateX/rotateY/rotateZ三维旋转轴。我直接给一个我常用的 3D 立方体相册核心代码注释都写在里面了你复制到本地就能跑.album { width: 300px; height: 300px; position: relative; margin: 100px auto; /* 景深越大透视变形越小 */ perspective: 1000px; } .cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; /* 动画沿 Y 轴匀速旋转12s 转一圈 */ animation: spin 12s linear infinite; } .face { position: absolute; width: 300px; height: 300px; border: 2px solid #fff; background-size: cover; background-position: center; } /* 六个面分别定位 */ .face:nth-child(1) { transform: translateZ(150px); background-image: url(img/1.jpg); } .face:nth-child(2) { transform: rotateY(180deg) translateZ(150px); background-image: url(img/2.jpg); } .face:nth-child(3) { transform: rotateY(90deg) translateZ(150px); background-image: url(img/3.jpg); } .face:nth-child(4) { transform: rotateY(-90deg) translateZ(150px); background-image: url(img/4.jpg); } .face:nth-child(5) { transform: rotateX(90deg) translateZ(150px); background-image: url(img/5.jpg); } .face:nth-child(6) { transform: rotateX(-90deg) translateZ(150px); background-image: url(img/6.jpg); } keyframes spin { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } }注意一个顺序问题translateZ必须在rotate之后写否则坐标轴会跟着面一起旋转结果全部叠在一个平面上。这是我第一次做相册时踩的坑后面会细说。字体渐变的话推荐两种方式。一种是针对大标题的background-clip: text原理是先给文字区域铺一个渐变背景再裁切成文字的形状兼容性方面 Chrome 和 Safari 都没问题Firefox 新版也支持了.gradient-text { background: linear-gradient(90deg, #ff6b6b, #4ecdc4); -webkit-background-clip: text; background-clip: text; color: transparent; }另一种是用font-face引入可变字体配合font-variation-settings适合需要动态控制字重的场景但在国内项目里用得不多因为字体文件体积大视觉收益也不明显。我建议普通项目直接用第一种压一行 CSS 就能出效果。1.2 删除线、文本位置调整与容器查询删除线就是一个text-decoration: line-through但如果你需要在删除线下方再加一层自定义颜色或大小可以叠加text-decoration-color和text-decoration-thickness。这两个属性对做电商促销价、任务清单的完成态都很有用。不过要注意text-decoration会继承子元素如果想单独控制必须显式覆盖否则容易出现“整块都带线”的问题。文本位置调整这个需求搜索量一直很高。很多人只知道text-align和line-height遇到复杂的垂直居中就抓瞎。我整理了一个判断顺序单行文本垂直居中用line-height等于容器高度块级元素内部多重内容垂直居中用flex绝对定位的居中用top: 50%; left: 50%; transform: translate(-50%, -50%)。不要一上来就乱试先判断场景。再说 CSS 新出的容器查询Container Queries热词里有cqw指的就是容器宽度单位1cqw 容器宽度的 1%。过去做响应式只能依赖视口宽度媒体查询现在可以基于父容器自身尺寸来做适配这对组件化开发是质变级的体验。我最近做卡片组件就在用容器查询外面的容器宽度在 300px 到 800px 之间变化时卡片内部布局可以独立响应代码可维护性高不少。基础用法是给父容器加container-type: inline-size然后子元素就能写container (min-width: 400px) { ... }需要控制浏览器版本如果要上线生产环境建议先查一下目标用户的浏览器占比再决定用不用。1.3 鼠标移入事件与选择器进阶CSS 的鼠标移入事件对应的是:hover伪类这个大家都会但我想提醒一点在移动端没有鼠标:hover在触摸设备上会有粘滞效果轻点一下之后可能一直保持 hover 状态。后来我在跳出层的处理上更倾向于用media (hover: hover)做能力判断只在支持 hover 的设备上启用复杂动效移动端直接展示默认状态这样交互体验一致得多。至于“CSS 除了倒数二个元素”这种需求用:nth-last-child()就能解决。:nth-last-child(n3)表示从倒数第 3 个开始往前选等价于排除最后两个元素。类似的需求还有:not(:last-child)给列表项之间加分隔线以及用:empty隐藏空容器。这些选择器技巧在日常切页面时高频出现建议直接背下来。选一张合适的 CSS 素材网站很提效。我平时固定的几个CSS-Tricks 看原理文章CodePen 搜效果 DemoAnimista 生成过渡动画cubic-bezier.com 调缓动曲线。做 CSS 动效不是从零硬写先在这些站点找相似效果的代码片段再改造成自己的需求效率能翻一倍。2. JavaScript 高频操作、异步模型与前端性能优化2.1 字符串包含判断、数字格式化与精度坑字符串是否包含子串这个需求在搜索里排名很高。ES6 时代直接推荐str.includes(目标)语义清楚返回布尔值。再老一点的indexOf ! -1也能用但可读性差一些。如果需要忽略大小写就先toLowerCase()再判断。注意includes不能传正则传正则会被当成普通字符串处理这一点和String.prototype.search不同。保留两位小数这个需求看起来简单实际坑不少。toFixed(2)是用的四舍五入但1.005.toFixed(2)会返回1.00因为浮点数的二进制精度问题这行代码在浏览器里测一下就会发现。如果你处理的是金额、比分这类要求精确的数据建议这样封装function roundTo(num, decimals 2) { const factor Math.pow(10, decimals); return Math.round((num Number.EPSILON) * factor) / factor; }Number.EPSILON是 ES6 提供的机器精度常量加一个它可以修正大部分浮点误差。另一种更稳的方案是完全避开浮点运算把金额转成分整数来计算只在显示时除以 100。实际项目中我强烈推荐后者尤其在涉及优惠券、凑单、退款这类逻辑里。2.2 宏任务、微任务与事件循环热词里有“js宏”指的就是宏任务。异步任务分为宏任务setTimeout、setInterval、I/O、UI 渲染和微任务Promise.then、MutationObserver、queueMicrotask。执行顺序是当前宏任务 → 所有微任务 → 渲染 → 下一个宏任务。这个顺序背熟前端面试题基本稳了一半。我写段代码你可以在控制台跑一下结果会加深理解console.log(script start); setTimeout(() { console.log(macro task); }, 0); Promise.resolve().then(() { console.log(micro task 1); }).then(() { console.log(micro task 2); }); console.log(script end); // 输出顺序script start → script end → micro task 1 → micro task 2 → macro task我面试过不少人能完整讲出微任务队列会被宏任务之间的渲染阶段“夹住”这个细节的不多。实际项目里如果发现页面渲染卡顿很多时候就是因为一个宏任务里塞了过多计算或过多 DOM 操作解决思路是拆任务把大任务切分到多个setTimeout或requestAnimationFrame中执行给浏览器留出渲染微任务的机会。2.3 JSON.stringify 的性能陷阱与前端优化思路JSON.stringify出现在热词里是因为很多前端新人在做性能优化时喜欢用JSON.parse(JSON.stringify(obj))做深拷贝。这个写法在数据量小的时候完全没问题简洁好用。但对象里如果有undefined、function、symbol、NaN时会被自动忽略或转成null结果并不总是符合预期。更深层的性能问题是JSON.stringify需要完整遍历对象树并构造字符串一个几 MB 的对象拷贝一次就可能让主线程卡顿上百毫秒。我个人的建议是深拷贝用structuredClone现代浏览器内置递归遍历在几十层嵌套以内可以用JSON序列化方案更快再复杂的数据结构直接用lodash.cloneDeep兜底虽然慢一点但可靠。数据处理的核心目标不是“写出最严谨的深拷贝”而是“在合适的场景用合适的工具”。前端性能优化是一个大话题但绝大多数页面瓶颈都在无意义的重复渲染、过大的白屏请求、以及每次交互都直接操作 DOM。我的基本盘是能用 CSS 的不用 JS能用transform/opacity的不用width/left能加debounce/throttle的交互一定加。这不是技巧是习惯。把这三个习惯养成了性能问题会少一多半。2.4 SignalR 前端取数、剪贴板库 vs 纯 CSS 复制SignalR 是微软的实时通信库前端需要通过 WebSocket 接收服务端推送的数据。热词里问“signalr前端应该怎么获取数据”原因是 SignalR 的官方文档主要面向 .NET 后端前端部分经常草草带过。前端正确姿势是先HubConnectionBuilder()创建连接然后on()订阅服务端方法名最后start()启动连接。收到数据后把它 set 进 Vue 的响应式状态里页面会自动更新。千万记得在组件卸载时调用stop()断开连接否则会内存泄漏。剪贴板操作方面有人问clipboardjs和纯 CSS 写的 copy 有什么区别。实际上“纯 CSS 复制”是一个误会复制这个操作必须用 JS。真正对的对比是document.execCommand(copy)和老牌的ClipboardJS库。后者封装了兼容层支持从元素、文本、富文本复制在小部分老浏览器上表现更稳定。现在浏览器navigator.clipboard.writeText已经很成熟了我推荐优先用原生 API这能少引入一个依赖而且支持异步写入配合权限提示更规范。注意navigator.clipboard只在 HTTPS 或 localhost 下可用如果线上页面不是 HTTPS就得回退到execCommand方案。3. Vue 框架深入环境搭建、路由、播放与响应式原理3.1 Vue 安装及环境配置Vue 的热词里“vue安装及环境配置”和“vue安装依赖”高频出现说明很多新手卡在环境这一步。Vue 3 官方现在推荐用 Vite 作为构建工具创建项目只需要一条命令npm create vuelatest my-app这个命令会引导你选择 TypeScript、JSX、Vue Router、Pinia 等选项。如果是纯学习可以先全选 No后续需要再手动装。项目创建后执行npm install安装依赖npm run dev启动开发服务器。整个流程如果顺利三分钟能跑起来。依赖安装慢是国内普遍问题解决办法是换 npm 镜像源我一般用这个命令npm config set registry https://registry.npmmirror.com或者直接用cnpm、pnpm。个人建议新项目直接上pnpm它的依赖管理方式更节省磁盘空间而且天然避免了“幽灵依赖”问题。从 npm 切换到 pnpm 之后安装速度体感能快一倍。3.2 Vue 路由基础配置与动态路由守卫Vue Router 是 Vue 项目的标配路由方案。基础配置其实就三步定义路由表 →createRouter创建实例 → 用router-view挂载出口。我用 Vue Router 4 写一个最小可运行示例import { createRouter, createWebHistory } from vue-router import Home from ../views/Home.vue const routes [ { path: /, name: home, component: Home }, { path: /about, name: about, component: () import(../views/About.vue) }, ] const router createRouter({ history: createWebHistory(), routes, }) // 全局前置守卫做登录校验 router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next({ name: login }) } else { next() } })注意component: () import(...)这种写法会做路由懒加载代码会拆分成独立 chunk首屏只加载当前页面需要的部分。配置路由守卫时我强调一个经验守卫里不要写太多同步逻辑更不要在里面发起渲染级请求否则每次路由跳转都会卡一下。由于实践中beforeEach经常被滥用我的原则是守卫里只做“能一分钟内完成的最小判断”重逻辑放到进入页面后再说。3.3 Vue 播放 m3u8 视频方案“vue播放m3u8”是视频类项目的常见需求。m3u8 是 HLS 直播/点播协议里的播放列表格式浏览器原生video不支持直接播放需要借助hls.js来转封装。我的做法是npm install hls.js然后在组件里动态判断浏览器能力做降级处理template video refvideoRef controls/video /template script setup import { ref, onMounted } from vue import Hls from hls.js const videoRef ref(null) const src https://example.com/live/index.m3u8 onMounted(() { const video videoRef.value if (Hls.isSupported()) { const hls new Hls() hls.loadSource(src) hls.attachMedia(video) hls.on(Hls.Events.MANIFEST_PARSED, () video.play()) } else if (video.canPlayType(application/vnd.apple.mpegurl)) { // Safari 原生支持 HLS video.src src video.play() } }) /script这段代码里MANIFEST_PARSED事件表示视频流索引已加载完成attachMedia是把 hls.js 的处理结果关联到 video 元素上。如果你只是播一个.mp4那就别绕弯子直接video.src url即可。m3u8 的坑主要在后端CORS 头不配上、切片路径写绝对地址、码率切换不设AUTO级别都会导致前端黑屏或者频繁卡顿。前端能做的排查就是打开 DevTools 的 Network 面板看.ts请求是否 206、是否有跨域报错。3.4 从“深入浅出 Vue”看响应式原理“js深入浅出vue”和“vue框架”这两个热词说明很多人想了解 Vue 底层。Vue 3 的响应式系统基于 ES6 的Proxy核心思路是读取数据时收集依赖effect修改数据时触发更新trigger。我很少建议新人直接去看 Vue 源码但一定要理解它的响应式设计理念状态变化是唯一的数据来源视图只是状态的函数。这样在排查问题时就会有方向感——页面不更新先问“我改的是不是响应式状态”。Vue 2 用Object.defineProperty逐属性劫持所以新增属性和数组下标修改是检测不到的Vue 3 用Proxy代理整个对象就不存在这个问题。这也是为什么 Vue 3 抛弃$set的原因。我遇到过一个线上 BugVue 2 项目里直接this.obj.newKey 1后视图不刷新很多人第一反应是“重新赋值一次”实际上如果你用的 Vue 3 根本不会有这个坑。这也是我建议新项目尽量选 Vue 3 的原因之一。3.5 Vue 面试题的常考方向“vue面试题”这个词条说明求职者需要的是考点梳理。我总结下来Vue 面试题几乎 90% 集中在六个方向响应式原理、生命周期、组件通信、路由守卫、Vuex/Pinia 状态管理、性能优化。组件通信的八种方式里最常考的是props/emit、provide/inject、eventBus、Pinia。生命周期则从创建到销毁一条线串起来重点考察onMounted与nextTick的执行顺序。我的建议是把每个知识点都自己手写一遍 Demo而不是死记硬背八股文。比如“父子组件生命周期执行顺序”在浏览器里console.log打印一下就知道父beforeMount→ 子beforeMount→ 子mounted→ 父mounted。自己跑过一次比背一百遍问答都有用。4. 前端学习路线、面试准备与常见问题速查4.1 一套可执行的前端学习路线前端怎么入门、怎么进阶一直有人在问。我给一套自己带新人时用的路线图按周为单位推进不需要报课所有材料都是免费文档和开源项目第一阶段HTML CSS目标是把静态页面还原到位。能独立切一个完整的营销落地页会响应式布局、Flex/Grid、伪类选择器、简单的 CSS 动画。第二阶段是 JavaScript 基础目标是能写交互逻辑。变量、类型、作用域、闭包、原型链、事件、Promise、fetch每个知识点都要边学边写小例子。第三阶段是工程化目标是熟悉现代前端工作流。Node.js 基础、npm/yarn/pnpm、Vite/Webpack 的最小配置、ES Module 规范、Git 协作。第四阶段是框架Vue 或 React 选一个深入。会创建项目、写组件、配路由、做状态管理、对接接口。第五阶段是进阶包括 TypeScript、性能优化、前端安全、浏览器原理、自动化测试。我特别强调一点入门阶段不要同时学两个框架不要看超过三份教程。选定一条主路径把文档首页的教程完整敲一遍然后自己做一个综合项目比如待办事项、博客、商城后台。做完这个项目你才算真正跨过了“纸上谈兵”的阶段。4.2 前端面试实战常见问题与避坑指南热词里“前端面试题”、“前端面试题2026”、“前端八股文”说明大家对面试的关注度持续很高。面试题的整理很多但我更想聊的是面试中的“表达策略”回答代码题时先说结论再给代码最后讲为什么。比如问“CSS 旋转”你可以说“旋转用transform: rotate()配合transition过渡如果是 3D 旋转还要设置perspective因为不设置景深旋转看起来像压缩而不是空间转动”。这样面试官马上就知道你理解到位了。“前端八股文”其实不是贬义词它代表了一套共识性的知识框架。真正的加分项在你把八股文范式和实际项目经验连起来讲提到宏任务微任务时举一个你排查过的定时器延迟问题提到 Vue 响应式原理时举一个视图不更新的实际案例。这种“原理 落地”的表述方式比背一百个面试题都管用。4.3 HTML 转 Markdown、WPS 表格导入与其他常见场景热词里有些前端外围需求比如“html转为md”和“html格式转换wps表格”。这是两个非常实际的工作问题。HTML 转 Markdown可以用现成的库比如turndown前端直接用 npm 安装即可。反过来 Markdown 转 HTML 我用marked。如果你只是偶尔转一次不需要写代码找在线转换工具更快。“html格式转换wps表格”这个比较特殊大概率是想把网页表格导入 Excel/WPS。常见姿势是导出一个.csv文件Excel 和 WPS 都能直接打开。前端导 CSV 的核心代码很短function exportToCsv(filename, rows) { const csvContent rows.map(row row.join(,)).join(\n) const blob new Blob([\ufeff csvContent], { type: text/csv;charsetutf-8; }) const link document.createElement(a) link.href URL.createObjectURL(blob) link.download filename link.click() URL.revokeObjectURL(link.href) }注意前面加的\ufeff那是 BOM 头没有它 Excel 打开中文 CSV 会乱码这是很多人踩过的坑。再回答一个高频问题“html文件无法预览”。很多人下载了一个.html文件双击没反应或者浏览器里打开是一片空白。排查顺序是第一步确认文件本身是不是 UTF-8 编码如果带中文且编码不对浏览器会显示乱码或空白第二步看是否真的用浏览器打开了有时系统默认用文本编辑器打开第三步检查 HTML 结构文件内容里是不是只有 Doctype 声明或包含未闭合标签。建议安装一个 Live ServerVS Code 插件来做本地预览它能热更新页面刷新都不用手工点。4.4 常见报错与排查速查表实际问题排查这块我把这几年遇到的前端高频问题整理成一张速查表留个备份给自己看也方便大家在需要时直接对照现象可能原因排查与解法页面样式错乱CSS 没有加载、类名拼写错误、浏览器缓存打开 Network 看 CSS 请求状态用 DevTools 检查元素确认类有没有命中强制刷新 CtrlF5点击事件没反应元素被遮挡、事件绑定失败、JS 报错中断检查元素z-index看 Console 有没有报错确认选择器是否匹配当前 DOM接口跨域后端未配置 CORS前端用 file:// 协议打开后端加 CORS 头开发阶段配 Vite/Webpack 代理页面必须通过 localhost 访问页面白屏JS 报错、入口文件加载失败、路由配置问题看 Console 和 Network定位具体报错文件和资源状态Vue 数据改了页面不更新在 Vue 2 里给对象新增属性直接操作了非响应式变量用this.$set()或重新赋值检查是否在reactive对象中操作图片不显示路径问题、跨域问题、防盗链检查路径是相对还是绝对Network 看 404/403图片服务器加白名单字体图标显示为方块iconfont 类名不对、字体文件未加载检查字体文件请求与类名确认font-face路径是否正确mobile 端点击有 300ms 延迟老浏览器没有设置 viewport加meta nameviewport contentwidthdevice-width, initial-scale1这些报错大多数情况下不是技术难度高而是没有头绪。记住一个核心思路所有前端问题最终都能在 DevTools 的三个面板里找到线索Element 看结构Console 看报错Network 看请求。把这个工具链用熟了一半问题都能自解。5. 写代码之外的几点建议聊到兴起我基于这些年带人的经验再多说几句。前端入门看起来简单但真正能坚持到上手的比例其实不高。很多人一开始就陷入“看教程-跟着敲-忘掉-再找教程”的循环里根本原因是没有项目牵引。如果你现在还在纠结今天学 HTML 还是 CSS我的建议是别再纠结了先拿一个完整网页照着敲一遍遇到不会的属性再查文档。有了目标学到的每个点才不会变成孤立的碎片。还有一个容易忽略的点是设备测试。前端不是“写完就行”你必须至少覆盖 Chrome、Safari、一部安卓机、一部 iPhone。很多样式只在某个浏览器下异常比如 Safari 对部分 CSS 支持不稳定如果不实测关键时刻很容易翻车。我现在习惯在代码里用supports做特性检测给不支持某些属性的浏览器写降级方案而不是等用户反馈再去修。关于搜索的用法我也想多说一句报错信息直接复制到搜索引擎永远比手工翻译快。Vue 项目的报错在控制台都有明确提示把错误码和关键词放一起搜大概率能找到同款问题。Stack Overflow 和 GitHub Issues 里的讨论质量通常比较高可以优先看。搜索本身也是前端开发 skills 的一部分学会问问题、拆问题等于多了一台外挂电脑。另外平时一定要攒代码片段。我自己有个 snippet 仓库按 HTML/CSS/JS/Vue 分类什么 3D 相册、防抖节流、路由守卫、表格导出全部存成模板。项目里用到时直接复制改参数省掉了重复造轮子的时间。你可以用 VS Code 的用户代码片段功能也可以建一个私有 GitHub 仓库甚至用 Typora 记 Markdown 笔记怎么方便怎么来。最后再分享一个心态上的体会前端更新快是事实但核心的地基一直没有变——HTML 是内容结构CSS 是视觉表现JavaScript 是行为交互Vue 这些框架只是帮我们更高效地表达标这三个东西的工具。地基扎实换什么框架都不慌地基不稳追新框架只会越来越累。