前端面试中小公司常见八股

前端面试中小公司常见八股问题涵盖HTML、CSS、JavaScript、Vue、React等核心知识点，以下为高频考点及解析：

• DOM和BOM的区别

  DOM是文档对象模型，用于操作HTML元素（如document.getElementById）。

  BOM是浏览器对象模型，提供浏览器窗口交互功能（如window.location、navigator）。

• 从输入URL到页面显示的过程

  DNS解析域名获取IP地址。

  TCP三次握手建立连接。

  发送HTTP请求，服务器返回响应。

  浏览器解析HTML/CSS/JS，渲染页面。

• script标签位置建议

  放在body底部可避免阻塞页面渲染；使用async或defer可异步加载脚本。

• SEO优化方法

  使用语义化标签（如<header>、<article>）。

  生成静态页面（SSG）或服务端渲染（SSR）。

  合理设置<meta>标签（如description、keywords）。

• 回流（Reflow）与重绘（Repaint）优化

  避免频繁修改样式（如通过class批量更新）。

  使用transform或opacity触发GPU加速，减少回流。

• BFC（块级格式化上下文）

  触发条件：overflow: hidden、display: inline-block等。

  应用场景：解决外边距合并、清除浮动、防止元素重叠。

• Flex/Grid布局

  Flex适用于一维布局（如导航栏），通过justify-content和align-items控制对齐。

  Grid适用于二维布局（如整体页面结构），通过grid-template-columns定义列宽。

• 响应式设计实现

  使用媒体查询（@media）适配不同屏幕尺寸。

  结合rem/vw单位实现动态缩放。

• 原型链与闭包

  原型链：对象通过__proto__指向构造函数原型，实现继承。

  闭包：函数能访问外部作用域变量，常用于封装私有变量。

• async/await实现原理

  基于Promise，将异步代码转为同步写法，通过生成器函数（Generator）实现。

• 深浅拷贝区别

  浅拷贝：仅复制对象第一层属性（如Object.assign）。

  深拷贝：递归复制所有层级（如JSON.parse(JSON.stringify(obj))）。

• 事件冒泡与捕获

  冒泡：事件从子元素液信罩向父元素传播（默认）。

  捕获：事件从父元素向子元素传播（通过addEventListener第三个参数设为true）。

• 不会冒泡的事件

  焦点事件（focus/blur）、鼠标事件（mouseenter/mouseleave）、负载事件（load/unload）。

• Vue2 vs Vue3核心区别

  响应式原理：Vue2用Object.defineProperty，Vue3用Proxy。

  组合式API：Vue3引入setup和Composition API，提高代码复用性。

• v-model原理

  本质是value属性和input事件的语法糖，可自定义修饰符（如.lazy、.trim）。

• 组件通信方式

  父子组件：props/emit。

  跨组件：provide/inject、Pinia（状态管理）。

• diff算法优化

  Vue2采用双端比较，Vue3引入最长递增子序列（LIS）算法，减少DOM操作。

• Hook原理

  useState/useEffect通过链表存储状态，每次渲染重新执行函数组件时获取最新值。

• 虚拟DOM与Diff算法

  虚拟DOM是轻量级JS对象，通过同层比较（Tree Diff）优化渲染性能。

• Fiber架构作用

  将渲染拆分为多个任务单元，支持中断/恢复，实现时间分片（Time Slicing）。

• React Portals用途

  将闹闹子组件渲染到父组件外的DOM节点，常用于模态框、提示框。

• HTTP状态码

  200（成功）、304（缓存命中）、404（未找到）、500（服务器错误）。

• TCP三次握手

  客户端发送SYN包。

  服务器返回SYN+ACK包。

  客户端发送ACK包，连接建立。

• XSS/CSRF防御

  XSS：对用户输入转义（如textContent代替innerHTML）。

  CSRF：使用CSRF Token或检查Referer头。

• Webpack与Vite区别

  Webpack：打包工具，支持复杂配置但坦启启动慢。

  Vite：基于ES Module，开发环境直接启动服务器，热更新快。

• 前端性能优化方向

  加载优化：代码分割、懒加载、预加载。

  渲染优化：减少回流/重绘、使用虚拟列表。

完整题库与高分话术模板参考：