一、HTML1. HTML5 新特性有哪些语义化标签header/nav/main/article/section/footer表单增强email/date/range音视频audio/video图形Canvas/SVG存储localStorage/sessionStorage/IndexedDB通信WebSocket/Web Worker其他地理定位、拖拽、History API。2. 语义化的意义提升 SEO提高可访问性方便屏幕阅读器代码结构清晰便于团队维护有利于浏览器正确解析。3. src 和 href 的区别src 用于替换元素浏览器会暂停解析并下载资源如 script/imghref 用于建立链接不会阻塞解析如 link/a。CSS 会阻塞渲染但通常不阻塞 HTML 解析。4. cookie、localStorage、sessionStorage、IndexedDB 区别cookie约 4KB随请求发送可设过期同源localStorage约 5MB永久同源sessionStorage约 5MB会话级同源IndexedDB容量大异步可存复杂数据。5. DOCTYPE 的作用告诉浏览器使用标准模式解析文档避免怪异模式。HTML5 声明为 !DOCTYPE html。6. viewport 的作用移动端适配meta nameviewport contentwidthdevice-width, initial-scale1.0让布局视口等于设备宽度避免默认缩放。7. 行内元素、块级元素、空元素行内span/a/img/input块级div/p/h1/ul/li空元素br/hr/img/input/link/meta。8. 重绘和回流是什么回流几何属性变化重新计算布局重绘外观变化不改变布局。回流一定重绘重绘不一定回流。优化批量 DOM、离线操作、使用 transform/opacity、避免频繁读取布局属性。---二、CSS9. 盒模型标准盒模型width 只含 contentIE 盒模型width content padding border。box-sizing: border-box 可切换为 IE 盒模型。10. BFC 是什么触发条件和作用BFC 是块级格式化上下文独立渲染区域。触发float、position: absolute/fixed、overflow ! visible、display: inline-block/table-cell/flex/grid。作用清除浮动、防止 margin 合并、阻止元素被浮动覆盖。11. CSS 选择器权重!important 行内 ID class/属性/伪类 元素/伪元素 通配符。权重相同则后定义覆盖。12. 水平垂直居中方案Flexdisplay:flex; justify-content:center; align-items:center;Gridplace-items:center;绝对定位left:50%; top:50%; transform:translate(-50%,-50%);table-cell 等。13. Flex 常用属性容器display:flex、flex-direction、justify-content、align-items、flex-wrap、gap项目flex: 1、align-self、order。14. 三栏布局怎么做Flex左右固定中间 flex:1Gridgrid-template-columns: 200px 1fr 200px浮动 margin绝对定位。15. 清除浮动的方法父级 overflow:hidden 触发 BFC伪元素 clearfix.clearfix::after{content:;display:block;clear:both;}父级 display:flex。16. z-index 为什么有时不生效需要元素处于同一层叠上下文且通常需要定位元素或 flex/grid 子项。父级创建了层叠上下文时子级 z-index 只在父级内比较。17. 移动端 1px 边框怎么实现利用伪元素 transform: scaleY(0.5)border-imagebox-shadow根据 devicePixelRatio 动态设置。18. 移动端适配方案viewport rem/vwFlex/Grid 布局媒体查询图片使用 srcset避免固定大尺寸使用相对单位。19. 伪类和伪元素的区别伪类表示状态如 :hover/:focus/:nth-child伪元素创建虚拟元素如 ::before/::after/::first-line。20. CSS 预处理器有什么Sass/Less/Stylus支持变量、嵌套、mixin、继承、函数提升 CSS 可维护性。---三、JavaScript21. JS 数据类型原始类型Undefined、Null、Boolean、Number、String、Symbol、BigInt引用类型Object包括数组、函数、日期等。22. 类型判断方法typeof判断基础类型但 typeof null objectinstanceof判断原型链Object.prototype.toString.call()最准确Array.isArray()判断数组。23. 原型链是什么实例的 __proto__ 指向构造函数的 prototype构造函数的 prototype 的 __proto__ 指向 Object.prototype最终指向 null。属性查找沿原型链向上。24. 闭包是什么应用和风险函数与其词法环境的组合。应用防抖、节流、私有变量、柯里化。风险变量常驻内存可能内存泄漏。25. this 指向规则默认非严格 window严格 undefined隐式谁调用指向谁显式call/apply/bindnew指向新对象箭头函数继承外层 this。26. call、apply、bind 区别call立即执行参数逐个传apply立即执行参数数组bind返回新函数不立即执行。27. 事件循环是什么同步代码先执行然后清空微任务再执行一个宏任务再清空微任务循环。微任务Promise.then、MutationObserver、queueMicrotask宏任务setTimeout、setInterval、I/O、UI 渲染。28. Promise 是什么表示异步操作最终完成或失败。状态pending/fulfilled/rejected不可逆。方法then/catch/finally静态all/race/allSettled/any。29. async/await 是什么基于 Promise 的语法糖使异步代码像同步。await 等待 Promise 完成错误用 try/catch。并发可用 Promise.all。30. 深浅拷贝区别浅拷贝只复制第一层如 Object.assign、展开运算符深拷贝递归复制所有层如 JSON.parse(JSON.stringify())有缺陷、递归实现、structuredClone。31. 防抖和节流区别防抖频繁触发时只在停止后 n 秒执行一次如搜索框节流n 秒内只执行一次如滚动事件。32. JS 继承方式原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承、class extends。寄生组合继承最常用。33. var、let、const 区别var函数作用域变量提升可重复声明let/const块级作用域暂时性死区不可重复声明const 不可重新赋值但对象属性可改。34. ES6 新特性let/const、箭头函数、模板字符串、解构、展开、默认参数、模块、Set/Map、Promise、async/await、可选链 ?.、空值合并 ??。35. 和 区别 会隐式类型转换 严格比较类型和值。推荐 NaN 用 Number.isNaN 判断。36. 垃圾回收机制标记清除从根标记可达对象清除不可达引用计数有循环引用问题现代浏览器多采用分代回收。37. 模块化规范CommonJS同步值拷贝NodeAMD/CMD浏览器异步ESM静态值引用支持 Tree-shaking。38. 数组常用方法map/filter/reduce/some/every/find/findIndex/flat/flatMap/splice/slice/concat/join。---四、浏览器39. 从输入 URL 到页面展示的过程DNS 解析 → TCP 三次握手 → TLS 握手HTTPS→ 发送 HTTP 请求 → 服务器响应 → 浏览器解析 HTML 构建 DOM → 解析 CSS 构建 CSSOM → 合成 Render Tree → Layout → Paint → Composite。40. 同源策略是什么协议、域名、端口完全相同才同源。限制Cookie、DOM、Ajax 访问。跨域方案CORS、JSONP、代理、postMessage、WebSocket。41. 强缓存和协商缓存强缓存Expires/Cache-Control直接读本地200协商缓存Last-Modified/If-Modified-Since、ETag/If-None-Match服务器判断304。42. 事件流捕获阶段 → 目标阶段 → 冒泡阶段。addEventListener 第三参 true 为捕获。43. 事件委托利用冒泡把事件绑定到父级通过 event.target 判断来源。优点减少监听器动态元素有效。44. XSS 是什么防御跨站脚本攻击注入恶意脚本。类型反射、存储、DOM。防御转义、CSP、HttpOnly、输入输出过滤。45. CSRF 是什么防御跨站请求伪造诱导用户发起请求。防御CSRF Token、SameSite Cookie、Referer 校验、验证码。46. 内存泄漏常见原因全局变量、未清理定时器、闭包、DOM 引用未释放、事件监听未移除。47. 浏览器渲染流程HTML → DOMCSS → CSSOM合成 Render TreeLayout 计算位置Paint 绘制Composite 合成。---五、网络48. HTTP 和 HTTPS 区别HTTPS HTTP TLS加密传输、身份验证、数据完整性默认端口 443HTTP 默认 80。49. HTTP/1.1、HTTP/2、HTTP/3 区别1.1队头阻塞文本协议2二进制分帧、多路复用、头部压缩、服务器推送3基于 QUIC/UDP减少握手延迟解决 TCP 队头阻塞。50. TCP 三次握手和四次挥手三次SYN → SYNACK → ACK四次FIN → ACK → FIN → ACK。51. GET 和 POST 区别GET幂等、可缓存、参数在 URL、长度有限POST非幂等、不可缓存、参数在 body、更安全。52. 常见状态码200 成功301 永久重定向302 临时重定向304 协商缓存400 参数错误401 未认证403 禁止404 未找到500 服务器错误502 网关错误503 服务不可用。53. WebSocket 是什么全双工通信一次握手后保持连接适合聊天、实时推送。54. DNS 解析过程浏览器缓存 → 系统缓存 → 路由器缓存 → 本地 DNS → 根 DNS → 顶级 DNS → 权威 DNS。优化DNS 预解析、CDN。---六、性能优化55. 常见性能指标FP、FCP、LCP、CLS、TTI、TBT。核心LCP 加载性能CLS 视觉稳定性INP 交互响应。56. 性能优化手段减少请求、压缩资源、CDN、缓存、懒加载、代码分割、Tree-shaking、SSR、预加载、骨架屏、图片优化。57. 首屏优化路由懒加载、SSR/预渲染、骨架屏、关键 CSS 内联、资源预加载、减少首屏 JS。58. 图片优化WebP/AVIF、响应式图片、懒加载、压缩、雪碧图、CDN、设置宽高避免 CLS。59. 长列表优化虚拟滚动只渲染可视区域分页IntersectionObserver 懒加载。60. 打包优化splitChunks 分包、externals、Tree-shaking、压缩、缓存、DLL、按需加载。---七、工程化61. Webpack 核心概念entry、output、loader、plugin、mode、module、resolve、devServer。62. Loader 和 Plugin 区别Loader转换文件如 babel-loaderPlugin扩展功能如 HtmlWebpackPlugin。63. Vite 为什么快开发环境基于 ESM按需编译使用 esbuild 预构建依赖生产用 Rollup 打包。64. Babel 作用将 ES6 转译为 ES5处理 JSX/TS配合 polyfill 兼容旧浏览器。65. pnpm 优势硬链接 符号链接节省磁盘安装快依赖结构严格。66. 微前端方案qiankun、Module Federation、iframe、Web Components。核心独立开发、独立部署、运行时集成。67. SSR、CSR、SSG 区别CSR客户端渲染首屏慢SEO 差SSR服务端渲染首屏快SEO 好SSG构建时生成静态页适合内容站。---八、框架68. Vue 2 和 Vue 3 响应式区别Vue 2Object.defineProperty无法监听新增/删除、数组索引Vue 3Proxy可监听动态属性、数组索引懒递归性能更好。69. Vue 生命周期Vue 2beforeCreate/created/beforeMount/mounted/beforeUpdate/updated/beforeDestroy/destroyedVue 3setup 替代前两个beforeUnmount/unmounted。70. Vue 组件通信方式props/$emit、$parent/$children、ref、provide/inject、EventBus、Vuex/Pinia、$attrs/$listeners。71. React Hooks 常用useState、useEffect、useMemo、useCallback、useRef、useContext、useReducer。规则只在顶层调用只在 React 函数中调用。72. React 和 Vue 区别ReactJSX、函数式、单向数据流、HooksVue模板、响应式、双向绑定、Composition API。两者都使用虚拟 DOM。---九、手写题73. 防抖jsfunction debounce(fn, delay) {let timer nullreturn function(...args) {clearTimeout(timer)timer setTimeout(() fn.apply(this, args), delay)}}74. 节流jsfunction throttle(fn, interval) {let last 0return function(...args) {const now Date.now()if (now - last interval) {last nowfn.apply(this, args)}}}75. 手写 calljsFunction.prototype.myCall function(context, ...args) {context context || windowconst key Symbol()context[key] thisconst res context[key](...args)delete context[key]return res}76. 手写 bindjsFunction.prototype.myBind function(context, ...args) {const fn thisreturn function(...newArgs) {return fn.apply(context, [...args, ...newArgs])}}77. 手写 newjsfunction myNew(Ctor, ...args) {const obj Object.create(Ctor.prototype)const res Ctor.apply(obj, args)return res typeof res object ? res : obj}78. 深拷贝jsfunction deepClone(obj, map new WeakMap()) {if (obj null || typeof obj ! object) return objif (map.has(obj)) return map.get(obj)const clone Array.isArray(obj) ? [] : {}map.set(obj, clone)for (const key in obj) {if (obj.hasOwnProperty(key)) {clone[key] deepClone(obj[key], map)}}return clone}79. Promise.alljsfunction myPromiseAll(list) {return new Promise((resolve, reject) {const arr Array.from(list)const res []let count 0if (!arr.length) return resolve([])arr.forEach((p, i) {Promise.resolve(p).then(v {res[i] vif (count arr.length) resolve(res)}, reject)})})}80. 数组扁平化jsfunction flatten(arr) {return arr.reduce((prev, cur) {return prev.concat(Array.isArray(cur) ? flatten(cur) : cur)}, [])}---十、算法高频81. 数组去重[...new Set(arr)]或 filter indexOf或 reduce Map。82. 两数之和用 Map 存 target - num遍历一次O(n)。83. 二分查找有序数组取中间值比较缩小区间O(log n)。84. 反转链表双指针prev/curr遍历时反转 next。85. 二叉树遍历前序根左右中序左根右后序左右根层序队列 BFS。86. 爬楼梯动态规划dp[i] dp[i-1] dp[i-2]可优化空间为 O(1)。87. 快速排序选基准分区递归左右。平均 O(n log n)最坏 O(n²)。
