2025年web工程师面试题及答案

2025年web工程师面试题及答案一、HTML相关面试题及答案1.请简述HTML5有哪些新特性？HTML5引入了许多新特性，以下是一些主要的方面：语义化标签：如`<header>`、`<nav>`、`<article>`、`<section>`、`<aside>`、`<footer>`等，这些标签使代码结构更清晰，有利于搜索引擎优化（SEO）和代码的可读性与维护性。例如，`<header>`用于表示页面或区域的头部，`<article>`用于表示独立的内容块。表单增强：新增了一些表单元素和属性，如`<input>`的`type`属性增加了`email`、`url`、`number`、`date`等类型，方便用户输入特定格式的数据，同时浏览器也能进行基本的格式验证。例如，`<inputtype="email">`会自动验证输入是否为有效的电子邮件地址。音频和视频支持：通过`<audio>`和`<video>`标签可以直接在网页中嵌入音频和视频，无需依赖第三方插件（如Flash）。示例代码如下：```html<videowidth="320"height="240"controls><sourcesrc="movie.mp4"type="video/mp4">Yourbrowserdoesnotsupportthevideotag.</video>```Canvas绘图：`<canvas>`元素提供了一个可以使用JavaScript进行2D绘图的区域，可用于创建动画、游戏、数据可视化等。例如：```html<canvasid="myCanvas"width="200"height="100"></canvas><script>varcanvas=document.getElementById('myCanvas');varctx=canvas.getContext('2d');ctx.fillStyle='FF0000';ctx.fillRect(0,0,150,75);</script>```地理定位：HTML5的地理定位API允许网页获取用户的地理位置信息，通过`navigator.geolocation`对象实现。示例代码：```javascriptif(navigator.geolocation){navigator.geolocation.getCurrentPosition(function(position){console.log('Latitude:'+position.coords.latitude+',Longitude:'+position.coords.longitude);});}else{console.log('Geolocationisnotsupportedbythisbrowser.');}```WebStorage：包括`localStorage`和`sessionStorage`，用于在客户端存储数据。`localStorage`存储的数据没有过期时间，除非手动删除；`sessionStorage`存储的数据在会话结束（关闭浏览器窗口）时会被清除。示例：```javascript//存储数据localStorage.setItem('username','John');//获取数据varusername=localStorage.getItem('username');```2.简述HTML中`<script>`标签的`defer`和`async`属性的区别？`defer`属性：当`<script>`标签带有`defer`属性时，脚本会在文档解析完成后、`DOMContentLoaded`事件触发前执行。多个带有`defer`属性的脚本会按照它们在文档中出现的顺序依次执行。`defer`属性只适用于外部脚本（即使用`src`属性引入的脚本）。示例：```html<scriptsrc="script.js"defer></script>````async`属性：`async`属性表示脚本会异步加载，即不会阻塞文档的解析。脚本加载完成后会立即执行，不保证脚本的执行顺序，与它们在文档中出现的顺序无关。`async`属性也只适用于外部脚本。示例：```html<scriptsrc="script.js"async></script>```二、CSS相关面试题及答案1.请解释CSS盒模型？CSS盒模型是一个重要的概念，它描述了元素在页面中所占的空间大小。一个元素的盒模型由内容区（`content`）、内边距（`padding`）、边框（`border`）和外边距（`margin`）组成。内容区（`content`）：是元素实际包含的内容，如文本、图片等。可以通过`width`和`height`属性来设置内容区的宽度和高度。内边距（`padding`）：是内容区与边框之间的距离，可以使用`padding-top`、`padding-right`、`padding-bottom`、`padding-left`分别设置四个方向的内边距，也可以使用`padding`简写属性。例如：```cssdiv{padding:10px;/四个方向内边距均为10px/padding:10px20px;/上下内边距为10px，左右内边距为20px/}```边框（`border`）：围绕在内边距和内容区周围，可以使用`border-width`、`border-style`和`border-color`来设置边框的宽度、样式和颜色，也可以使用`border`简写属性。例如：```cssdiv{border:1pxsolidblack;/边框宽度为1px，样式为实线，颜色为黑色/}```外边距（`margin`）：是元素与其他元素之间的距离，同样可以使用`margin-top`、`margin-right`、`margin-bottom`、`margin-left`分别设置四个方向的外边距，也可以使用`margin`简写属性。例如：```cssdiv{margin:10px;/四个方向外边距均为10px/margin:10pxauto;/上下外边距为10px，左右外边距自动居中/}```元素的总宽度和总高度计算公式如下：总宽度=`width`+`padding-left`+`padding-right`+`border-left-width`+`border-right-width`+`margin-left`+`margin-right`总高度=`height`+`padding-top`+`padding-bottom`+`border-top-width`+`border-bottom-width`+`margin-top`+`margin-bottom`2.如何实现水平和垂直居中一个元素？以下是几种常见的实现水平和垂直居中元素的方法：对于行内元素：可以使用`text-align:center`和`line-height`等于元素高度的方法实现水平和垂直居中。示例：```html<style>.parent{text-align:center;height:200px;line-height:200px;}</style><divclass="parent"><span>Centeredtext</span></div>```对于块级元素：使用Flexbox：Flexbox是一种强大的布局模型，通过设置父元素的`display`为`flex`或`inline-flex`，并结合`justify-content`和`align-items`属性可以轻松实现子元素的水平和垂直居中。示例：```html<style>.parent{display:flex;justify-content:center;align-items:center;height:200px;}.child{width:100px;height:50px;background-color:lightblue;}</style><divclass="parent"><divclass="child"></div></div>```使用绝对定位和负边距：前提是元素的宽度和高度已知。示例：```html<style>.parent{position:relative;height:200px;}.child{position:absolute;top:50%;left:50%;width:100px;height:50px;margin-top:-25px;/高度的一半/margin-left:-50px;/宽度的一半/background-color:lightblue;}</style><divclass="parent"><divclass="child"></div></div>```使用绝对定位和`transform`：不需要知道元素的宽度和高度。示例：```html<style>.parent{position:relative;height:200px;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:lightblue;}</style><divclass="parent"><divclass="child"></div></div>```三、JavaScript相关面试题及答案1.请解释JavaScript中的闭包，并举例说明其应用场景？闭包是指有权访问另一个函数作用域中的变量的函数。即使该函数已经执行完毕，其作用域内的变量也不会被销毁，而是会被闭包所引用。简单来说，闭包就是函数内部的函数。以下是一个简单的闭包示例：```javascriptfunctionouterFunction(){varouterVariable='Hello';functioninnerFunction(){console.log(outerVariable);}returninnerFunction;}varclosure=outerFunction();closure();//输出:Hello```在这个例子中，`innerFunction`就是一个闭包，它可以访问`outerFunction`作用域内的`outerVariable`变量。即使`outerFunction`执行完毕，`outerVariable`也不会被销毁，因为`innerFunction`仍然引用着它。闭包的应用场景有很多，以下是一些常见的场景：实现私有变量和方法：可以通过闭包来模拟类的私有属性和方法。示例：```javascriptfunctionCounter(){varcount=0;this.increment=function(){count++;console.log(count);};this.decrement=function(){count--;console.log(count);};}varcounter=newCounter();counter.increment();//输出:1counter.decrement();//输出:0```在这个例子中，`count`变量是私有的，外部无法直接访问，只能通过`increment`和`decrement`方法来操作。函数柯里化：柯里化是指将一个多参数函数转换为一系列单参数函数的过程。闭包可以用于实现函数柯里化。示例：```javascriptfunctionadd(a,b){returna+b;}varcurriedAdd=function(a){returnfunction(b){returnadd(a,b);};};varadd5=curriedAdd(5);console.log(add5(3));//输出:8```2.简述JavaScript中的事件委托（事件代理）及其原理和优点？事件委托是指将事件处理程序绑定到父元素上，而不是直接绑定到子元素上。当子元素上的事件触发时，事件会冒泡到父元素上，由父元素上的事件处理程序来处理。事件委托的原理基于事件冒泡机制。当一个元素上的事件被触发时，该事件会从该元素开始，依次向上冒泡到它的父元素、祖父元素，直到文档根元素。因此，我们可以将事件处理程序绑定到父元素上，通过判断事件源（即实际触发事件的元素）来处理相应的事件。以下是一个事件委托的示例：```html<ulid="list"><li>Item1</li><li>Item2</li><li>Item3</li></ul><script>varlist=document.getElementById('list');list.addEventListener('click',function(event){if(event.target.tagName==='LI'){console.log('Clickedon:'+event.target.textContent);}});</script>```在这个例子中，我们将`click`事件处理程序绑定到`ul`元素上，当用户点击`li`元素时，事件会冒泡到`ul`元素上，由`ul`元素上的事件处理程序来处理。事件委托的优点主要有：减少事件处理程序的绑定数量：如果有大量的子元素需要绑定相同的事件处理程序，使用事件委托可以只绑定一个事件处理程序到父元素上，减少内存开销。动态添加子元素时无需重新绑定事件：当动态添加新的子元素时，由于事件处理程序是绑定在父元素上的，新的子元素也会自动具有相应的事件处理能力，无需重新绑定事件。四、前端框架相关面试题及答案1.请简述Vue.js的响应式原理？Vue.js的响应式原理基于Object.defineProperty()方法（在Vue3中使用了Proxy）。当一个Vue实例创建时，Vue会遍历`data`选项中的所有属性，使用`Object.defineProperty()`将这些属性转换为`getter/setter`。这样，当这些属性的值发生变化时，Vue会自动更新与之绑定的DOM元素。以下是一个简单的示例来说明响应式原理：```javascriptvarobj={};varvalue=0;Object.defineProperty(obj,'count',{get:function(){console.log('Gettingvalue');returnvalue;},set:function(newValue){console.log('Settingvalueto:'+newValue);value=newValue;//这里可以触发DOM更新操作}});//获取值console.log(obj.count);//输出:Gettingvalue0//设置值obj.count=1;//输出:Settingvalueto:1```在Vue中，当一个组件的`data`属性被访问时，会触发`getter`方法，Vue会记录哪些DOM元素依赖于这个属性。当属性的值发生变化时，会触发`setter`方法，Vue会通知所有依赖于这个属性的DOM元素进行更新。2.简述React中的虚拟DOM及其作用？虚拟DOM（VirtualDOM）是React中的一个重要概念，它是一种轻量级的JavaScript对象，是真实DOM的抽象表示。虚拟DOM是一个树形结构，每个节点对应一个真实的DOM元素。虚拟DOM的作用主要有：提高性能：在传统的Web开发中，直接操作真实DOM的代价是非常高的，因为每次操作都会导致浏览器的重排和重绘。而React使用虚拟DOM来进行比较和更新，通过对比新旧虚拟DOM的差异，只对需要更新的真实DOM部分进行操作，从而减少了对真实DOM的操作次数，提高了性能。跨平台：虚拟DOM是一个纯JavaScript对象，不依赖于具体的平台。因此，React可以使用虚拟DOM来实现跨平台开发，如ReactNative可以使用虚拟DOM来构建移动应用。以下是一个简单的虚拟DOM示例：```javascript//虚拟DOMconstvirtualDOM={type:'div',props:{className:'container'},children:[{type:'h1',props:{},children:['Hello,World!']}]};//将虚拟DOM转换为真实DOMfunctioncreateElement(vnode){if(typeofvnode==='string'){returndocument.createTextNode(vnode);}constelement=document.createElement(vnode.type);for(constpropinps){element.setAttribute(prop,ps[prop]);}vnode.children.forEach(child=>{element.appendChild(createElement(child));});returnelement;}constrealDOM=createElement(virtualDOM);document.body.appendChild(realDOM);```五、网络相关面试题及答案1.请简述HTTP协议的工作原理和常见的HTTP状态码？HTTP（HypertextTransferProtocol）是一种用于传输超文本的协议，它是互联网上应用最为广泛的一种协议。HTTP协议的工作原理基于请求响应模型，具体步骤如下：1.客户端发起请求：客户端（如浏览器）向服务器发送一个HTTP请求，请求中包含请求方法（如`GET`、`POST`等）、请求头和请求体。2.服务器接收请求：服务器接收到客户端的请求后，对请求进行解析和处理。3.服务器返回响应：服务器根据请求的内容提供一个HTTP响应，响应中包含状态码、响应头和响应体。4.客户端接收响应：客户端接收到服务器的响应后，对响应进行解析和处理，将响应内容显示给用户。常见的HTTP状态码有：1xx（信息性状态码）：表示临时响应，如`100Continue`表示客户端可以继续发送请求。2xx（成功状态码）：表示请求成功，如`200OK`表示请求成功，服务器已返回请求的资源；`201Created`表示请求成功并创建了新的资源。3xx（重定向状态码）：表示需要进行进一步的操作以完成请求，如`301MovedP