2026年100道前端测试题及答案

2026年100道前端测试题及答案

一、单项选择题（总共10题，每题2分）1.以下哪个是HTML5的语义化标签？（）A.<div>B.<section>C.<span>D.<table>2.CSS盒模型中，设置box-sizing:border-box时，元素宽度包含的部分是？（）A.内容+内边距B.内容+内边距+边框C.内容D.内边距+边框3.JS中，全局作用域下var声明的变量会挂载到哪个对象？（）A.windowB.documentC.globalD.this4.DOM事件流的正确顺序是？（）A.捕获→目标→冒泡B.冒泡→目标→捕获C.目标→捕获→冒泡D.捕获→冒泡→目标5.Vue组件的created生命周期钩子中，正确的描述是？（）A.可以访问DOM元素B.可以访问propsC.数据未初始化D.组件未挂载6.React中函数组件与类组件的主要区别是？（）A.函数组件没有stateB.函数组件不能用propsC.函数组件默认无状态（旧版）D.函数组件不能用生命周期7.以下哪个是会话级存储方式？（）A.localStorageB.sessionStorageC.cookieD.indexDB8.HTTP状态码401表示？（）A.未找到资源B.服务器错误C.权限不足D.需要认证9.前端性能指标FCP指的是？（）A.首次内容绘制B.首次有效绘制C.最大内容绘制D.交互时间10.ES6模块化中导出单个命名变量的方式是？（）A.exportconstname='test'B.exportdefaultnameC.module.exports=nameD.require('./module')二、填空题（总共10题，每题2分）1.CSS选择器优先级从高到低依次是：!important、______、类/伪类/属性选择器、元素/伪元素选择器。2.JS原型链的顶端是______。3.DOMContentLoaded事件触发的条件是______。4.Vue双向数据绑定的核心原理是______和观察者模式。5.React虚拟DOM的主要作用是______。6.浏览器同源策略的三要素是：协议、______、端口。7.HTTP缓存分为强缓存和______。8.ES6模块中导入默认导出的模块用______关键字。9.事件委托的原理是利用______。10.Webpack中入口配置项是______。三、判断题（总共10题，每题2分）1.HTML5的新标签（如<header>）在IE8及以下浏览器中无法使用。2.CSS中inline元素（如<span>）可以设置width和height属性。3.JS中var声明的变量是块级作用域。4.Vue组件中的data必须是函数，否则会导致数据共享。5.React中的setState方法是同步执行的。6.localStorage中的数据可以跨域访问。7.HTTP2支持多路复用，允许同时发送多个请求。8.ES6箭头函数中的this指向定义时的上下文。9.事件冒泡是从目标元素向父元素传播。10.Webpack不能打包图片、字体等非JS资源。四、简答题（总共4题，每题5分）1.请解释前端性能优化中的“懒加载”及其实现原理。2.请说明Vue组件间的常见通信方式。3.简述JS闭包的用途及注意事项。4.请解释HTTP协商缓存的过程。五、讨论题（总共4题，每题5分）1.请比较React和Vue的diff算法差异。2.请讨论前端模块化的发展历程及各阶段的优缺点。3.请分析前端跨域解决方案的适用场景。4.请探讨SPA（单页应用）的优缺点及优化方向。答案一、单项选择题1.B2.B3.A4.A5.B6.C7.B8.D9.A10.A二、填空题1.行内样式（内联样式）2.null3.HTML文档解析完成（不等待样式表、图片等资源）4.数据劫持（Object.defineProperty）5.减少真实DOM操作，提高性能6.域名（主机名）7.协商缓存（对比缓存）8.import9.事件冒泡10.entry三、判断题1.对2.错3.错4.对5.错6.错7.对8.对9.对10.错四、简答题1.懒加载是延迟加载非首屏资源，当用户滚动到可视区域再加载。原理：将资源真实地址存于自定义属性（如data-src），监听滚动事件或用IntersectionObserver判断元素是否进入可视区域，触发时将data-src赋给src加载资源。可减少首屏加载时间，节省带宽。2.Vue组件通信方式：①父子组件：props（父传子）、$emit（子传父）；②兄弟组件：EventBus（Vue实例中转）、父组件中转；③跨层级组件：provide/inject（祖先提供、后代注入）、Vuex（全局状态管理）；④非关系组件：Vuex或EventBus。3.闭包用途：①实现数据私有化（如模块模式，隐藏内部变量）；②保存变量状态（如计数器）；③延迟执行（如定时器中的变量）。注意事项：闭包会引用外部变量，导致其无法被垃圾回收，可能造成内存泄漏，需避免不必要的闭包或手动释放变量。4.协商缓存过程：①首次请求：服务器返回资源及Last-Modified（最后修改时间）或ETag（资源唯一标识）；②再次请求：浏览器携带If-Modified-Since（对应Last-Modified）或If-None-Match（对应ETag）；③服务器对比：未修改返回304（使用缓存），已修改返回200和新资源。减少重复资源下载，节省带宽。五、讨论题1.React与Vuediff算法差异：①比较范围：React自顶向下全树比较（依赖key优化），Vue分层比较（按组件树层级）；②key作用：均用key标识节点唯一性，React依赖key避免错误复用，Vue的key强调节点稳定性；③优化策略：React与Fiber结合支持增量更新，Vue针对列表渲染优化（如移动节点检测）；④框架特性：React更通用，Vue更轻量。两者均最小化真实DOM操作，React灵活，Vue高效。2.前端模块化历程：①原始阶段：<script>引入，变量污染，依赖混乱；②传统规范：CommonJS（Node.js，同步，服务端适用，浏览器需打包）；AMD（RequireJS，异步，浏览器适用，语法繁琐）；③ES6模块：原生支持，静态分析，语法简洁，支持TreeShaking，旧浏览器需转译。各阶段：原始简单但混乱，CommonJS适合服务端，AMD解决浏览器异步，ES6是标准趋势。3.跨域解决方案适用场景：①CORS：后端设置响应头，适用现代浏览器（需后端配合）；②JSONP：<script>标签GET请求，适用旧浏览器或简单数据获取；③代理服务器：WebpackDevServerproxy，开发环境（避免浏览器限制）；④document.domain：同主域子域，适用主域相同场景；⑤postMessage：跨窗口/iframe，适用不同源页面通信；⑥WebSocket：全双工，适用实时通信（聊天、推送）。4.SPA优缺点及优化：优点：用户体验好（无刷新）、前后端分离、路由灵活；缺点：首屏