如今的前端面试，已经形成了一套高度标准化的「能力探测模型」：
- 广度覆盖：从 JavaScript 核心原理，到框架设计思想，再到工程化、性能优化、网络乃至基础算法。
- 深度追问：不再满足于'知道是什么'，而是连续追问'为什么这样设计'与'如何自己实现'。
- 场景串联：将零散的知识点置于一个虚拟的高并发、高性能业务场景中，考察你的系统化思维。
这导致了一个必然结果：依靠碎片化学习和临时记忆，已难以通过中高级岗位的面试。 你需要一份结构化、有深度的知识体系。
八股文涵盖：JavaScript、CSS、HTML、React、Vue、算法、计算机网络、Node.js、TypeScript、性能优化、前端安全、小程序、ES6、编程题、设计模式、工程化
1. JavaScript
1.不会冒泡的事件有哪些？ 2.mouseEnter 和 mouseOver 有什么区别？ 3.MessageChannel 是什么，有什么使用场景？ 4.async、await 实现原理 5.Proxy 能够监听到对象中的对象的引用吗？ 6.如何让 var[a,b]={a: 1, b: 2} 解构赋值成功？ 7.下面代码会输出什么？ 8.描述下列代码的执行结果 9.什么是作用域链？ 10.bind、call、apply 有什么区别？如何实现一个 bind？ 11.common.js 和 es6 中模块引入的区别？ 12.说说 vue3 中的响应式设计原理 13.script 标签放在 header 里和放在 body 底部里有什么区别？ 14.下面代码中，点击"+3"按钮后，age 的值是什么？ 15.Vue 中，created 和 mounted 两个钩子之间调用时间差值受什么影响？ 16.vue 中，推荐在哪个生命周期发起请求？ 17.为什么 Node 在使用 esmodule 时必须加上文件扩展名？ 18.package.json 文件中的 devDependencies 和 dependencies 对象有... 19.React Portals 有什么用？ 20.react 和 react-dom 是什么关系？ 21.MessageChannel 是什么，有什么使用场景？ 22.React 中为什么不直接使用 requestIdleCallback？ 23.为什么 react 需要 fiber 架构，而 Vue 却不需要？ 24.子组件是一个 Portal，发生点击事件能冒泡到父组件吗？ 25.async、await 实现原理
2.CSS
1.css 中的 animation、transition、transform 有什么区别？ 2.怎么做移动端的样式适配？ 3.相邻的两个 inline-block 节点为什么会出现间隔，该如何解决？ 4.grid 网格布局是什么？ 5.CSS3 新增了哪些特性？ 6.怎么使用 CSS3 实现动画？ 7.怎么理解回流跟重绘？什么场景下会触发？ 8.什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？ 9.如果使用 CSS 提高页面性能？ 10.如何实现单行/多行文本溢出的省略样式？ 11.如何使用 css 完成视差滚动效果？ 12.怎么使用 CSS 如何画一个三角形 13.说说对 CSS 工程化的理解 14.怎么触发 BFC，BFC 有什么应用场景？ 15.单行文本怎么实现两端对齐？ 16.说说你对 CSS 模块化的理解 17.CSS 模块化的实现方式 18.怎么让 Chrome 支持小于 12px 的文字？ 19.怎么让 Chrome 支持小于 12px 的文字？ 20.flexbox(弹性盒布局模型）是什么，适用什么场景？ 21.如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？ 22.设备像素、css 像素、设备独立像素、dpr、ppi 之间有什么区别？ 23.说说你对盒子模型的理解 24.怎么实现样式隔离？ 25.flex 布局下，怎么改变元素的顺序？
3.HTML
1.什么是 DOM 和 BOM？ 2.简单描述从输入网址到页面显示的过程 3.一台设备的 dpr，是否是可变的？ 4.前端该如何选择图片的格式？ 5.前端跨页面通信，你知道哪些方法？ 6.说说你对 Dom 树的理解 7.行内元素有哪些？块级元素有哪些？空 (void) 元素有那些？ 8.html 和 css 中的图片加载与渲染规则是什么样的？ 9.title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？ 10.script 标签为什么建议放在 body 标签的底部 (defer、async） 11.说说你对 SSG 的理解 12.什么是 HTML5，以及和 HTML 的区别是什么？ 13.什么是渐进增强和优雅降级？ 14.Node 和 Element 是什么关系？ 15.导致页面加载白屏时间长的原因有哪些，怎么进行优化？ 16.如何控制 input 输入框的输入字数？ 17.渐进式 jpg 有了解过吗？ 18.假设我要上传图片，怎么在选择图片后，通过浏览器预览待上传的... 19.怎么实现'点击回到顶部'的功能？ 20.SPA 应用怎么进行 SEO？ 21.如何实现 SEO 优化 22.SEO 是什么？ 23.SEO 的原理是什么？ 24.DNS 预解析是什么？怎么实现？ 25.HTML5 有哪些 drag 相关的 API？
