纬创资通昆山2020前端开发岗面试题库及答案

纬创资通昆山2020前端开发岗面试题库及答案

一、单项选择题(10题，每题2分)1.以下哪个HTML标签用于定义文档的导航链接区域？()A.`<nav>`B.`<header>`C.`<section>`D.`<aside>`2.在CSS中，哪个属性用于设置元素的外边距？()A.`padding`B.`border`C.`margin`D.`spacing`3.以下JavaScript代码的输出结果是什么？`console.log(1+"2"+3+4);`()A.`10`B.`1234`C.`"1234"`D.`19`4.哪个CSS选择器用于选择所有具有特定类名的元素？()A.`id`B.`.class`C.`element`D.``5.在JavaScript中，以下哪个方法用于向数组的末尾添加一个或多个元素？()A.`push()`B.`pop()`C.`shift()`D.`unshift()`6.哪个HTML5API允许网页在用户的设备上存储数据，且数据在浏览器关闭后仍然存在？()A.`sessionStorage`B.`cookies`C.`localStorage`D.`IndexedDB`7.在ES6中，用于声明一个块级作用域的变量的关键字是？()A.`var`B.`let`C.`const`D.`function`8.以下关于HTTP状态码的描述，哪个是正确的？()A.`200`表示请求的资源未找到B.`301`表示永久重定向C.`404`表示服务器内部错误D.`500`表示请求被服务器拒绝9.在Vue.js中，用于在父组件和子组件之间进行双向数据绑定的指令/属性是？()A.`v-bind`B.`v-model`C.`v-on`D.`props`10.React中，哪个生命周期方法在组件第一次渲染完成（插入DOM树中）后立即调用？()A.`constructor()`B.`render()`C.`componentDidMount()`D.`componentWillUnmount()`二、填空题(10题，每题2分)1.在HTML中，用于创建超链接的标签是`<______>`。2.CSS3中，用于创建圆角的属性是`border-______`。3.JavaScript中，`typeofnull`返回的结果是`______`。4.用于解决浏览器默认样式差异的常见CSS技术是`______`。5.JavaScript事件传播的三个阶段是：捕获阶段、______阶段、冒泡阶段。6.在HTTP协议中，`GET`和`______`是两种最常用的请求方法。7.ES6中，使用`______`关键字可以定义一个箭头函数。8.在响应式Web设计中，核心的CSS技术是`______`。9.Vue.js的核心库主要关注______层。10.在React中，用于描述UI的语法扩展叫做`______`。三、判断题(10题，每题2分)1.`<div>`是一个行内元素。()2.CSS中，`z-index`属性只对定位元素（position属性值为relative,absolute,fixed或sticky）有效。()3.JavaScript中，`==`运算符在比较时会进行类型转换，`===`运算符则不会。()4.`setTimeout`函数是JavaScript语言本身提供的，不是WebAPI。()5.`localStorage`存储的数据在同源的不同浏览器标签页之间是共享的。()6.ES6中的`class`关键字只是JavaScript原型继承的语法糖。()7.`display:none;`和`visibility:hidden;`的效果完全相同，都会隐藏元素且不占据空间。()8.`XMLHttpRequest`和`FetchAPI`都是浏览器提供的用于发起网络请求的API。()9.在Vue中，`v-if`和`v-show`都可以用来条件性地渲染元素，且它们的工作机制完全相同。()10.React组件中，`state`的更新一定是异步的。()四、简答题(4题，每题5分)1.简述CSS盒模型，并说明标准盒模型（content-box）和IE盒模型（border-box）的主要区别。2.解释JavaScript中的闭包（Closure）是什么，并简述其一个常见应用场景。3.什么是跨域请求（Cross-OriginRequest）？列举至少两种常见的解决跨域问题的前端技术方案。4.简述Vue.js中的计算属性（ComputedProperties）和侦听器（Watchers）的主要区别以及各自适用的场景。五、讨论题(4题，每题5分)1.谈谈你对前端性能优化的理解，列举至少三种常见的性能优化手段并简要说明其原理或目的。2.比较单页面应用（SPA）和多页面应用（MPA）的优缺点，并说明在什么场景下更适合使用SPA。3.阐述虚拟DOM（VirtualDOM）的概念及其在框架（如React,Vue）中的作用和带来的主要优势。4.随着前端技术的发展，模块化（如CommonJS,ES6Modules）和打包工具（如Webpack,Rollup）变得非常重要。请讨论它们解决了前端开发中的哪些核心问题？---答案与解析一、单项选择题1.A.`<nav>`(解析：`<nav>`标签专门用于定义包含导航链接的部分。)2.C.`margin`(解析：`margin`属性设置元素的外边距，即元素边框外的空间。)3.B.`1234`(解析：`1+"2"`结果为字符串`"12"`，`"12"+3`结果为`"123"`，`"123"+4`结果为`"1234"`。)4.B.`.class`(解析：类选择器使用`.`前缀，如`.myClass`选择所有`class="myClass"`的元素。)5.A.`push()`(解析：`push()`方法向数组末尾添加新元素，并返回新长度。)6.C.`localStorage`(解析：`localStorage`存储的数据没有过期时间，关闭浏览器后依然存在。`sessionStorage`在会话结束时清除。)7.B.`let`(解析：`let`和`const`都声明块级作用域变量，`const`声明常量。`var`声明函数作用域或全局作用域变量。)8.B.`301`表示永久重定向(解析：200OK；301MovedPermanently；404NotFound；500InternalServerError。)9.B.`v-model`(解析：`v-model`在表单输入元素或组件上创建双向数据绑定。`v-bind`是单向绑定，`props`用于父向子传值。)10.C.`componentDidMount()`(解析：`componentDidMount()`在组件挂载（插入DOM树）后立即调用，是执行DOM操作、网络请求的常见位置。)二、填空题1.a(解析：`<a>`标签定义超链接，`href`属性指定目标URL。)2.radius(解析：`border-radius`属性用于设置元素边框的圆角。)3.object(解析：这是一个历史遗留的JavaScript设计错误，`typeofnull`返回`"object"`。)4.reset(或normalize)(解析：CSSReset或Normalize.css用于消除不同浏览器默认样式的差异，提供一个一致的起点。)5.目标(target)(解析：事件传播三阶段：捕获阶段（从window到目标）、目标阶段（在目标元素上触发）、冒泡阶段（从目标到window）。)6.POST(解析：`GET`用于请求数据，`POST`用于提交数据。其他常见方法有PUT,DELETE,HEAD等。)7.=>(解析：箭头函数使用`=>`语法定义，例如`constfunc=()=>{...};`。)8.媒体查询(mediaqueries)(解析：`@media`规则允许根据设备特性（如视口宽度）应用不同的CSS样式，是响应式设计的基石。)9.视图(view)(解析：Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统，专注于视图层。)10.JSX(解析：JSX是JavaScript的语法扩展，允许在JavaScript代码中编写类似HTML的结构，用于React中描述UI。)三、判断题1.错(解析：`<div>`是块级元素（block-levelelement），默认占据一整行。)2.对(解析：`z-index`属性控制定位元素的堆叠顺序，对非定位元素（static）无效。)3.对(解析：`==`会进行类型转换（如`1=='1'`为true），`===`严格比较值和类型（`1==='1'`为false）。)4.错(解析：`setTimeout`和`setInterval`是浏览器提供的WebAPI（属于定时器API），不是ECMAScript语言规范的一部分。)5.对(解析：`localStorage`的数据在同源（协议、域名、端口相同）的所有窗口和标签页之间是共享的。)6.对(解析：ES6的`class`提供了一种更清晰、更面向对象的方式来创建对象和处理继承，但其底层实现仍然是基于原型链的。)7.错(解析：`display:none;`隐藏元素且不占据文档流空间。`visibility:hidden;`隐藏元素但元素仍占据其原有空间。)8.对(解析：`XMLHttpRequest`(XHR)是较旧的API，`FetchAPI`是更现代、基于Promise的替代方案，两者都用于从服务器获取资源。)9.错(解析：`v-if`是“真正”的条件渲染，元素在条件为假时会被销毁并从DOM中移除。`v-show`只是简单地切换元素的`display`CSS属性，元素始终存在于DOM中。)10.对(解析：在React中，出于性能考虑，`setState()`的更新可能是异步的。React可能会将多个`setState()`调用合并成一次更新。不能依赖当前的`state`值来计算下一个`state`。)四、简答题1.CSS盒模型：每个HTML元素都被视为一个矩形盒子，由内到外包含：内容(content)、内边距(padding)、边框(border)、外边距(margin)。标准盒模型(content-box)：元素的`width`和`height`属性仅定义内容区域的宽高。增加`padding`或`border`会增加盒子的总宽高。IE盒模型(border-box)：元素的`width`和`height`属性定义了内容(content)、内边距(padding)和边框(border)的总宽高。增加`padding`或`border`会挤压内容区域的空间，但盒子的总宽高不变。使用`box-sizing:content-box;`（默认）或`box-sizing:border-box;`可设置盒模型类型。2.闭包：闭包是指一个函数能够记住并访问其词法作用域（定义时所在的作用域），即使该函数在其词法作用域之外执行。常见应用场景：创建私有变量。通过在一个外部函数内定义变量和内部函数，内部函数可以访问这些变量，而外部无法直接访问，从而模拟私有性。例如，在模块模式中用于封装数据和功能。3.跨域请求：当浏览器运行的脚本（如JavaScript）尝试向与当前页面（源：协议+域名+端口）不同的源（协议、域名或端口任一不同）发起HTTP请求时，即发生跨域。浏览器出于安全考虑（同源策略），默认会阻止此类请求的响应。解决方案：CORS(跨域资源共享)：服务器在响应头中设置`Access-Control-Allow-Origin`等字段，明确告诉浏览器允许哪些源进行跨域访问。这是最标准、最安全的解决方案。代理(Proxy)：前端请求同源服务器上的一个代理接口，该代理接口再将请求转发到目标跨域服务器，并将响应返回给前端。因为服务器间通信不受同源策略限制。4.计算属性vs侦听器：计算属性：用于基于响应式依赖进行复杂计算并缓存结果。只有当其依赖的响应式数据发生变化时，才会重新计算。适合用于模板中需要复杂逻辑或派生数据的场景（如格式化、过滤、组合数据）。侦听器：用于观察和响应数据的变化，执行异步操作或开销较大的操作。当需要在数据变化时执行副作用（如请求数据、操作DOM）时使用侦听器更合适。侦听器提供变化前后的值，适合处理需要知道旧值或执行非幂等操作的情况。核心区别：计算属性是声明式、基于依赖的缓存计算；侦听器是命令式、响应变化的副作用处理。五、讨论题1.前端性能优化：目标是提升页面加载速度、交互流畅度和用户体验。手段：资源压缩与最小化：压缩HTML、CSS、JS文件（移除空格注释等），压缩图片（使用WebP格式，适当尺寸）。减少传输体积，加快加载。代码分割与懒加载：利用打包工具（如Webpack）将代码拆分成小块，按需加载（如路由懒加载、组件懒加载）。减少初始加载时间，提升首屏速度。利用浏览器缓存：设置合理的HTTP缓存头（如Cache-Control,ETag），利用ServiceWorker实现离线缓存。减少重复请求，提升重复访问速度。优化关键渲染路径：内联关键CSS，延迟加载非关键CSS/JS，优化DOM结构，减少重排重绘。加速用户看到首屏内容的时间。2.SPAvsMPA：SPA优点：用户体验流畅，接近原生应用；前后端分离清晰，利于协作开发；减轻服务器负担（主要提供API）。SPA缺点：首屏加载可能较慢（需加载框架等）；SEO优化相对复杂（需SSR或预渲染）；内存管理要求高，长时间使用可能导致性能下降。MPA优点：首屏加载快（服务器渲染完整页面）；SEO友好；架构相对简单。MPA缺点：页面切换需要整页刷新，体验较差；前后端耦合度可能更高；服务器压力相对较大。适用SPA场景：交互复杂、用户体验要求高的应用（如Web邮箱、管理后台、社交应用）；需要离线功能的应用；团队具备较强前端工程化能力。3.虚拟DOM：概念：虚拟DOM是一个轻量级的JavaScript对象，它是对真实DOM结构的抽象描述。框架（如React