3年前端面试题及详细答案（2026年新版）

3年前端面试题及详细答案（2026年最新版）说明：本套试题贴合2026年前端面试实际场景，涵盖HTML/CSS、JavaScript、框架（Vue3+React）、工程化、浏览器、网络、实战手写、场景题8大核心模块，3套试题难度梯度适中（基础+进阶+综合），答案详细易懂，完全贴合实际开发，不堆砌晦涩理论，适配3年前端岗位招聘需求。第一套试题（基础侧重，适配入门到3年过渡）一、HTML基础（10分）1.请说明HTML5的新特性（至少5个），并说明实际开发中你用到过哪些？（5分）答案：HTML5的核心新特性的如下，结合实际开发场景说明，避免纯理论：1.语义化标签：如<header>（页头）、<nav>（导航）、<main>（主体）、<section>（区块）、<footer>（页脚），替代传统的<div>，提升代码可读性和SEO优化，实际开发中做页面布局时必用，比如首页导航用<nav>，页脚用<footer>，方便后期维护和搜索引擎抓取。2.本地存储：localStorage（持久化存储，关闭浏览器数据不丢失）和sessionStorage（会话级存储，关闭浏览器数据丢失），实际开发中用于存储用户偏好设置（如主题色）、临时表单数据，避免频繁请求后端，比如登录后存储用户昵称，页面刷新后无需重新请求。3.Canvas画布：用于绘制图形、动画，实际开发中可用于简单的图表展示（如简易折线图）、验证码生成，比如后台管理系统的简单数据可视化，无需引入第三方图表库时使用。4.多媒体标签：<video>（视频）、<audio>（音频），无需依赖第三方插件即可播放音视频，实际开发中用于产品介绍视频、音频播放功能，比如官网的产品演示视频播放。5.表单新类型：如email（邮箱验证）、tel（电话验证）、number（数字输入）、date（日期选择），自带基础验证功能，实际开发中用于表单输入，减少手动写验证逻辑的工作量，比如注册页的邮箱输入框用<inputtype="email">，自动校验邮箱格式。6.其他特性：如WebSocket（实现前后端实时通信）、地理定位（getCurrentPosition），实际开发中做实时聊天、定位相关功能时用到，比如客服实时聊天功能用WebSocket。2.什么是HTML语义化？为什么要做语义化？（5分）答案：定义：HTML语义化就是用合适的标签（如上述语义化标签）来表示页面内容的含义，让标签本身就能够清晰地表达内容的用途，而不是单纯用<div>+class来区分。核心原因（实际开发角度，不堆砌话术）：1.提升可读性和可维护性：团队协作时，语义化标签能让其他开发者快速理解页面结构，比如看到<nav>就知道是导航，比<divclass="nav">更直观，后期修改维护更高效。2.优化SEO：搜索引擎（如百度、谷歌）会根据语义化标签抓取页面核心内容，语义化越好，页面排名越容易提升，比如<main>标签会被优先抓取，有利于网站曝光。3.提升无障碍访问：屏幕阅读器会根据语义化标签解读页面内容，帮助视障用户更好地浏览页面，比如读屏软件会识别<button>标签为可点击按钮，提升页面兼容性。二、CSS基础（15分）1.请解释CSS盒模型，以及标准盒模型和怪异盒模型的区别，实际开发中你常用哪种？（5分）答案：CSS盒模型：所有HTML元素都可以看作一个“盒子”，由4部分组成，从内到外依次是：内容区（content）、内边距（padding）、边框（border）、外边距（margin），核心用于控制元素的布局和尺寸。两者核心区别（重点，实际开发必遇）：关键在于“元素的width/height是否包含padding和border”，用大白话讲清楚，不搞复杂术语：1.标准盒模型（W3C标准，默认值）：box-sizing:content-box;元素的width/height只包含内容区（content），padding和border会“撑大”元素的实际尺寸。比如一个div设置width:100px、padding:10px、border:1px，实际宽度是100+10*2+1*2=122px，开发时需要手动计算，容易出错。2.怪异盒模型（IE旧标准，现在常用）：box-sizing:border-box;元素的width/height包含内容区（content）、padding和border，元素实际尺寸固定，不会被padding和border撑大。还是上面的div，设置box-sizing:border-box后，实际宽度依然是100px，padding和border会从内容区“挤空间”，开发起来更省心，不用手动计算。实际开发常用：怪异盒模型（border-box），几乎所有项目都会全局设置*{box-sizing:border-box;}，避免布局错乱，尤其是复杂布局（如栅格、卡片），能大幅提升开发效率。2.如何实现元素水平+垂直居中？请说出3种常用方法（适配2026年主流开发场景）（5分）答案：重点说3种主流、实用的方法，分场景说明，体现实战经验，不写冷门方法：方法1：Flex布局（最常用，现代项目首选）——适合大部分场景，简单高效核心代码：父元素设置display:flex;justify-content:center;align-items:center;，子元素直接实现居中，无需设置其他属性。优势：兼容性好（IE10以上支持），不用算子元素尺寸，不管子元素是固定宽高还是自适应，都能完美居中，比如卡片内容、弹窗内容的居中，实际开发中用得最多。方法2：Grid布局（最简洁，现代项目推荐）——适合单个元素居中场景核心代码：父元素设置display:grid;place-items:center;，一行代码搞定，比Flex更简洁。优势：语法简洁，适配现代浏览器（Chrome、Edge等），适合新项目、不需要兼容旧浏览器的场景，比如官网首页的核心模块居中。方法3：绝对定位+transform（兼容老浏览器）——适合需要兼容IE9及以上的场景核心代码：父元素设置position:relative;，子元素设置position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);优势：兼容性拉满，能适配老项目，缺点是子元素会脱离文档流，需要注意不影响其他元素布局，比如维护老项目时常用。3.请解释BFC是什么，以及它的实际作用（5分）答案：用大白话解释，结合实际开发中的问题，避免纯概念堆砌：BFC：块级格式化上下文，简单理解就是一个“独立的渲染小房间”，这个房间里的元素怎么布局、间距多少，都不会影响外面的元素，外面的元素也不会干扰到房间里的元素，相当于给元素做了“隔离”。触发BFC的常用条件（满足一个即可，记常用的，不用记全）：1.根元素（html本身就是BFC）；2.元素设置float:left/right（不是none）；3.元素设置position:absolute/fixed；4.元素设置overflow:hidden/auto/scroll（不是visible）；5.元素设置display:flex/grid/inline-block。实际作用（面试重点，结合开发中的问题）：1.解决浮动塌陷：父元素包含浮动子元素时，父元素高度会变成0（塌陷），给父元素触发BFC（比如设置overflow:hidden），就能让父元素包裹住浮动子元素，比如导航栏包含浮动的菜单按钮时，避免导航栏高度塌陷。2.解决外边距重叠：两个相邻的块级元素，上下margin会“叠在一起”（取最大的那个），给其中一个元素触发BFC，就能避免重叠，比如两个卡片之间的margin，避免出现间距不符合预期的问题。3.清除浮动影响：避免浮动元素覆盖其他元素，比如左侧浮动的图片，不会盖过右侧的文字，触发BFC后，右侧文字会自动环绕，不被覆盖。三、JavaScript基础（25分）1.请说出var、let、const的区别，实际开发中你如何选择使用？（6分）答案：核心区别围绕“作用域、变量提升、重复声明、修改值”，结合实际开发习惯，不搞晦涩理论：1.作用域（最核心区别）：-var：函数级作用域，只有函数能限制它的作用范围，if、for、while的{}无法限制，比如在for循环里用var声明的变量，循环结束后依然能访问。-let、const：块级作用域，{}（if、for、函数等）内声明的变量，只能在{}内访问，外部无法访问，比如for循环里用let声明的变量，循环结束后外部无法访问，避免变量污染。2.变量提升：-var：存在变量提升，会把变量声明提升到作用域顶部，赋值不会提升，比如console.log(a);vara=1;不会报错，输出undefined。-let、const：不存在变量提升，必须先声明再使用，比如console.log(b);letb=1;会报错（ReferenceError），更规范。3.重复声明：-var：可以重复声明同一个变量，后面的会覆盖前面的，比如vara=1;vara=2;不会报错，a最终是2，容易出错。-let、const：不能重复声明同一个变量，比如letb=1;letb=2;会报错（SyntaxError），避免误操作。4.修改值：-var、let：可以修改声明的变量值，比如vara=1;a=2;letb=3;b=4;都可以。-const：声明的变量不能修改值（注意：如果是对象/数组，对象/数组内部的属性可以修改，只是不能重新赋值整个对象/数组），比如constc={name:'test'};='abc';可以；c={};会报错。实际开发选择：-优先用const：声明不需要修改的值（如常量、固定配置、DOM元素），比如constBASE_URL='';constbtn=document.querySelector('button');-其次用let：声明需要修改的值（如循环变量、临时变量），比如for(leti=0;i<10;i++){};letcount=0;count++;-不用var：避免变量污染、作用域混乱，现在项目中几乎不再使用var。2.请解释闭包的概念，以及实际开发中的应用场景（5分）答案：用大白话解释，结合实际应用，避免纯理论，重点说“是什么+用在哪”：闭包概念：简单说，就是一个函数能访问并操作它“外部函数”的变量，即使外部函数已经执行完毕，这个变量依然能被内部函数访问到。核心是“函数嵌套函数，内部函数引用外部函数的变量，并且内部函数被返回/使用”。举个简单例子（可直接运行，贴合实际）：functionouter(){letnum=10;//外部函数的变量functioninner(){console.log(num);//内部函数访问外部函数的变量}returninner;//返回内部函数}constfn=outer();//执行外部函数，得到内部函数fn();//输出10，此时外部函数已经执行完毕，但num依然能被访问实际应用场景（开发中常用，不写冷门场景）：1.防抖节流函数：比如搜索框输入防抖、滚动事件节流，利用闭包保存定时器ID，避免重复创建定时器，比如防抖函数中，用闭包保存timer，每次触发时清除上一个定时器。2.模块化封装：在ES6模块出现之前，用闭包实现私有变量，避免全局变量污染，比如封装一个工具函数，只暴露需要的方法，内部变量无法被外部访问。3.函数柯里化：比如实现一个add(1)(2)(3)=6的函数，利用闭包保存每次传入的参数，直到触发计算。注意：闭包会导致变量无法被垃圾回收，过度使用会导致内存泄漏，实际开发中要避免不必要的闭包，使用完后及时释放变量（如赋值为null）。3.请解释JavaScript中的异步编程，以及常见的异步方式（6分）答案：结合实际开发中的场景，解释清楚“为什么需要异步”“常用异步方式”，避免晦涩：什么是异步编程：JavaScript是单线程语言（同一时间只能执行一段代码），如果执行耗时操作（如网络请求、定时器、读取文件），会阻塞后续代码执行，导致页面卡顿。异步编程就是让耗时操作“后台执行”，不阻塞后续代码，等耗时操作完成后，再执行对应的回调逻辑，提升页面流畅度。常见的异步方式（按开发中使用频率排序，结合场景说明）：1.定时器（setTimeout、setInterval）：最基础的异步方式，用于延迟执行代码，比如3秒后提示用户操作成功，setTimeout(()=>{alert('操作成功');},3000);2.Promise：解决回调地狱（嵌套回调过多，代码混乱），用于处理异步操作的成功/失败，比如接口请求，实际开发中配合axios使用（axios本身返回Promise）。示例：axios.get('/api/user').then(res=>{console.log('请求成功',res.data);})//成功回调.catch(err=>{console.log('请求失败',err);});//失败回调3.async/await：Promise的语法糖，让异步代码看起来像同步代码，更简洁易读，是2026年开发中最常用的异步方式，比如接口请求：asyncfunctiongetUser(){try{constres=awaitaxios.get('/api/user');//等待请求完成console.log('请求成功',res.data);}catch(err){console.log('请求失败',err);}}getUser();4.其他异步方式：如WebSocket（实时通信，如客服聊天）、事件监听（如点击事件、加载事件），本质也是异步逻辑。4.请说出this关键字的指向规则，结合示例说明（8分）答案：this指向的核心是“谁调用它，this就指向谁”，分4种常见场景，结合实际示例，不搞复杂理论，覆盖开发中90%的情况：场景1：全局作用域中，this指向全局对象（浏览器中是window，Node环境中是global）示例：console.log(this);//浏览器中输出window场景2：普通函数调用（直接调用函数），this指向window（严格模式下是undefined）示例：functionfn(){console.log(this);}fn();//输出window（非严格模式）场景3：对象方法调用（对象.方法()），this指向调用方法的对象示例：constobj={name:'test',sayName:function(){console.log();}}obj.sayName();//输出test，this指向obj场景4：构造函数调用（new关键字），this指向新创建的实例对象示例：functionPerson(name){=name;//this指向new出来的实例}constp=newPerson('张三');console.log();//输出张三，this指向p补充（开发中常用）：改变this指向的3种方法：1.call()：直接调用函数，第一个参数是this指向，后面跟参数列表，比如fn.call(obj,1,2);2.apply()：和call类似，第一个参数是this指向，后面跟数组形式的参数，比如fn.apply(obj,[1,2]);3.bind()：返回一个新函数，this指向固定，不会被改变，比如constnewFn=fn.bind(obj);newFn();注意：箭头函数没有自己的this，它的this指向外层作用域的this，比如obj.sayName=()=>{console.log(this);}，此时this指向window，不是obj，开发中要注意避免在对象方法中使用箭头函数。四、框架基础（Vue3为主，20分）1.请说明Vue3和Vue2的核心区别（至少5点）（6分）答案：结合2026年开发实际，重点说常用的区别，不写冷门特性，贴合项目开发：1.核心响应式原理不同：Vue2用Object.defineProperty，只能监听对象的属性变化，无法监听数组索引变化、对象新增属性；Vue3用Proxy，能直接监听整个对象（包括数组、对象新增属性），响应式更全面，且性能更好。2.组件编写方式不同：Vue2主要用OptionsAPI（选项式API），将data、methods、computed等分开写；Vue3推荐用CompositionAPI（组合式API），可以将相关逻辑（如数据、方法）聚合在一起，更适合复杂组件，后期维护更高效，同时也支持OptionsAPI，兼容Vue2代码。3.生命周期变化：Vue3保留了大部分Vue2的生命周期，但名称有调整，比如beforeCreate和created合并为setup()，beforeMount→onBeforeMount，mounted→onMounted，同时新增了onRenderTracked、onRenderTriggered等生命周期钩子，用于调试响应式。4.模板语法优化：Vue3支持多根节点模板（Vue2只能有一个根节点），比如模板中可以直接写两个div，不用嵌套在一个div里；同时支持Teleport（瞬移组件），可以将组件渲染到页面任意位置（如弹窗渲染到body下）。5.性能优化：Vue3的虚拟DOM进行了重写，Diff算法更高效，减少了渲染开销；同时支持Tree-Shaking（摇树优化），能移除未使用的代码，减小打包体积；还支持片段（Fragment），减少不必要的DOM节点。6.新增特性：Vue3新增了Pinia（替代Vuex，状态管理更简洁）、CompositionAPI相关的钩子（如ref、reactive、watch、computed）、Suspense（异步组件加载）等，提升开发效率。2.请解释Vue3中ref和reactive的区别，实际开发中如何选择？（7分）答案：核心区别围绕“适用类型、使用方式、响应式原理”，结合实际开发场景，不搞晦涩理论：1.适用类型不同（最核心）：-ref：主要用于声明基本类型数据（string、number、boolean等），也可以声明对象/数组，但声明对象/数组时，本质是内部调用了reactive。示例：constcount=ref(0);//基本类型constuser=ref({name:'张三'});//对象类型-reactive：主要用于声明对象/数组类型数据，不能用于声明基本类型（声明基本类型会报错或失去响应式）。示例：constuser=reactive({name:'张三',age:20});//正确constcount=reactive(0);//错误，基本类型不能用reactive2.使用方式不同：-ref：访问/修改数据时，需要加.value（模板中不用加，Vue会自动解析）。示例：count.value++;//修改数据console.log(count.value);//访问数据模板中：<div>{{count}}</div>//不用加.value-reactive：访问/修改数据时，直接通过对象属性操作，不用加.value。示例：='李四';//修改数据console.log(user.age);//访问数据3.响应式原理不同：-ref：对于基本类型，通过封装成对象，利用Object.defineProperty的get/set实现响应式；对于对象/数组，内部调用reactive，利用Proxy实现响应式。-reactive：直接利用Proxy实现响应式，监听对象/数组的所有变化（包括新增属性、数组索引变化）。实际开发选择：-声明基本类型（如count、isShow、title）：优先用ref，简单直观。-声明对象/数组（如user、list、formData）：优先用reactive，操作更方便，不用加.value。-注意：如果用ref声明对象/数组，修改对象/数组内部属性时，不用重新赋值（如='李四'），但如果要替换整个对象/数组，需要重新赋值（如user.value={name:'王五'}）。3.请说明Vue3中computed和watch的区别，以及各自的使用场景（7分）答案：结合实际开发场景，说清“核心作用、触发方式、使用场景”，避免纯理论：一、computed（计算属性）核心作用：根据依赖的响应式数据，计算出一个新的值，并且会缓存结果，只有依赖的数据发生变化时，才会重新计算。特点：1.有缓存：依赖的数据不变时，多次访问computed，不会重新计算，直接返回缓存的结果，提升性能。2.不能修改计算结果：computed是“只读”的，只能根据依赖计算结果，不能直接修改computed的值（修改会报错）。使用场景：需要根据已有数据计算新值，且新值会被多次使用的场景，比如：-计算购物车总价（依赖购物车列表的单价和数量）；-过滤列表（依赖原始列表和筛选条件）；-拼接字符串（如用户姓名+年龄）。示例：consttotal=computed(()=>{returncartList.value.reduce((sum,item)=>sum+item.price*item.quantity,0);});二、watch（监听器）核心作用：监听一个或多个响应式数据的变化，当数据变化时，执行自定义的回调函数，可以做一些副作用操作（如接口请求、修改其他数据、提示信息等）。特点：1.无缓存：数据变化时，一定会执行回调函数，不管回调结果是否被使用。2.可以修改其他数据：回调函数中可以做任意操作，包括修改响应式数据、发起接口请求等。使用场景：需要监听数据变化，执行副作用操作的场景，比如：-监听搜索框输入，实时发起搜索接口；-监听路由变化，执行页面初始化操作；-监听表单数据变化，提示用户保存。示例：watch(searchValue,(newVal,oldVal)=>{//监听搜索框输入变化，发起搜索接口getSearchList(newVal);},{immediate:true});//immediate:true表示初始渲染时就执行一次回调核心区别总结：1.用途不同：computed用于“计算新值”，watch用于“监听变化，执行副作用”；2.缓存不同：computed有缓存，watch无缓存；3.可修改性：computed只读，watch可修改其他数据。五、工程化与工具（15分）1.请说明webpack的核心作用，以及常用的loader和plugin（5分）答案：结合实际开发，不搞复杂配置，重点说“作用+常用loader/plugin”：webpack核心作用：一个静态模块打包工具，将项目中的所有资源（JS、CSS、图片、字体等）都视为模块，通过loader处理不同类型的资源，通过plugin实现额外功能（如打包优化、环境区分），最终将所有资源打包成几个静态文件（如bundle.js、style.css），供浏览器加载。常用loader（用于处理不同类型的文件，将非JS文件转换为JS模块）：1.babel-loader：将ES6及以上的JS语法（如箭头函数、let、const、async/await）转换为ES5语法，兼容老浏览器。2.css-loader：解析CSS文件，将CSS转换为JS模块，让webpack能识别CSS。3.style-loader：将css-loader处理后的CSS，注入到HTML的style标签中，让样式生效。4.file-loader：处理图片、字体等静态资源，将其复制到打包目录，并返回资源的路径。5.url-loader：和file-loader类似，区别是当资源体积小于指定值（如8KB）时，会将资源转换为base64字符串，嵌入到JS中，减少请求次数。常用plugin（用于扩展webpack功能，不处理文件，只做额外操作）：1.HtmlWebpackPlugin：自动生成HTML文件，并将打包后的JS、CSS文件自动引入到HTML中，不用手动修改HTML的引入路径。2.MiniCssExtractPlugin：将CSS从JS中提取出来，单独打包成CSS文件（替代style-loader），适合生产环境，便于缓存和优化。3.CleanWebpackPlugin：每次打包前，清除上一次打包的目录（如dist目录），避免旧文件残留。4.DefinePlugin：定义环境变量，如区分开发环境（development）和生产环境（production），比如process.env.NODE_ENV='production'。2.请说明开发环境和生产环境的区别，以及webpack如何区分这两个环境（5分）答案：结合实际开发流程，说清“环境区别+webpack配置方式”，贴合项目实际：一、开发环境（development）vs生产环境（production）核心区别：1.用途不同：-开发环境：用于开发阶段，方便开发者调试代码，注重开发效率，不需要优化打包体积和性能。-生产环境：用于上线部署，面向用户，注重性能和用户体验，需要对打包产物进行压缩、优化，减小体积，提升加载速度。2.核心差异：|特性|开发环境|生产环境||----|----|----||源代码映射|开启source-map，方便调试（能定位到原始代码的错误位置）|关闭或使用简洁的source-map（避免暴露原始代码）||代码压缩|不压缩（压缩会影响调试）|压缩JS、CSS、HTML（减小体积）||缓存|不开启（避免缓存影响开发）|开启（给静态资源加哈希值，如bundle.[hash].js，实现缓存优化）||插件|不使用MiniCssExtractPlugin（用style-loader更方便调试）|使用MiniCssExtractPlugin（提取CSS单独打包）、CleanWebpackPlugin（清除旧文件）|二、webpack区分两个环境的方式（实际开发常用）：1.方式一：使用webpack的mode配置（最常用），在webpack.config.js中设置mode属性：-mode:'development'：自动开启开发环境配置（如开启source-map、不压缩代码）；-mode:'production'：自动开启生产环境配置（如压缩代码、优化打包、关闭详细日志）。2.方式二：分配置文件（适合复杂项目），创建3个配置文件：-mon.js：公共配置（如入口、出口、loader配置）；-webpack.dev.js：开发环境配置（继承common，添加devServer、source-map等）；-d.js：生产环境配置（继承common，添加压缩、提取CSS、清除旧文件等）。3.方式三：通过环境变量区分，使用DefinePlugin定义NODE_ENV，在代码中通过process.env.NODE_ENV判断环境，执行不同逻辑（如开发环境打印日志，生产环境不打印）。3.请说明npm和yarn的区别，实际开发中你常用哪种？（5分）答案：结合实际开发体验，说清核心区别，不搞复杂理论：npm和yarn都是Node.js的包管理工具，用于下载、安装、管理项目依赖（如vue、axios、webpack等），核心区别如下：1.安装速度：yarn安装依赖时是并行下载，速度比npm快（npm早期是串行下载，现在也支持并行，但整体还是yarn更快）；同时yarn会缓存下载过的依赖，再次安装时不用重新下载，提升速度。2.依赖一致性：yarn会生成yarn.lock文件，锁定依赖的版本和依赖树，确保不同开发者、不同环境安装的依赖版本完全一致，避免因依赖版本不一致导致的项目报错；npm也会生成package-lock.json文件（后续版本新增），功能和yarn.lock类似，但早期npm没有这个功能，导致依赖一致性问题。3.命令差异：常用命令略有不同，比如：|功能|npm|yarn||----|----|----||初始化项目|npminit|yarninit||安装依赖|npminstall|yarninstall（或yarn）||安装单个依赖|npminstall包名|yarnadd包名||卸载依赖|npmuninstall包名|yarnremove包名|4.其他特性：yarn支持离线安装（缓存过的依赖，无网络也能安装）、更清晰的安装日志；npm功能更全面，生态更完善，支持更多的命令和插件。实际开发选择：-个人项目：两种都可以，看个人习惯，yarn速度更快，npm更通用。-团队项目：建议统一使用一种，避免lock文件冲突，现在大部分团队会选择yarn，因为依赖一致性更好，安装速度更快；如果项目是老项目，一直用npm，也可以继续使用，确保团队统一即可。六、浏览器与网络（10分）1.请说明从输入URL到页面显示，经历了哪些步骤？（5分）答案：按实际流程拆解，不堆砌术语，贴合实际，覆盖核心步骤：1.输入URL：用户在浏览器地址栏输入URL（如），按下回车键。2.DNS解析：浏览器通过DNS服务器，将域名（）解析为对应的IP地址（如8），因为浏览器无法直接识别域名，只能识别IP地址。3.建立TCP连接：浏览器通过IP地址，与目标服务器建立TCP连接，采用“三次握手”（确保连接可靠），连接建立成功后，才能进行数据传输。4.发起HTTP请求：浏览器向服务器发起HTTP请求（如GET请求），请求中包含请求头（如浏览器信息、请求类型）、请求体（如POST请求的参数），请求服务器返回页面相关资源（HTML、CSS、JS、图片等）。5.服务器处理请求并返回响应：服务器接收HTTP请求，解析请求内容，根据请求路径返回对应的资源（如HTML文件），响应中包含响应头（如状态码、内容类型）、响应体（资源内容）。6.关闭TCP连接：服务器返回响应后，通过“四次挥手”关闭TCP连接（避免资源浪费），如果开启了HTTP长连接（Keep-Alive），则连接会保持一段时间，方便后续请求复用。7.浏览器解析并渲染页面：浏览器接收服务器返回的资源，按以下步骤渲染：（1）解析HTML，生成DOM树（文档对象模型）；（2）解析CSS，生成CSSOM树（CSS对象模型）；（3）将DOM树和CSSOM树合并，生成渲染树（RenderTree）；（4）布局（Layout）：计算渲染树中每个元素的位置和尺寸；（5）绘制（Paint）：将渲染树绘制到浏览器窗口，显示页面。8.执行JS代码：页面渲染过程中，遇到JS代码会暂停渲染（JS会阻塞DOM和CSSOM解析），执行JS代码，执行完成后继续渲染页面。2.请说明HTTP状态码的分类，以及常用的状态码含义（5分）答案：按分类说明，重点记常用状态码，贴合实际开发中遇到的场景：HTTP状态码用于表示服务器对HTTP请求的处理结果，分为5大类（以第一位数字区分）：1.1xx（信息性状态码）：表示服务器已接收请求，正在处理，很少用到，比如100（继续）。2.2xx（成功状态码）：表示请求成功，服务器正常返回资源，常用：-200OK：请求成功，最常用，比如GET请求获取资源成功、POST请求提交数据成功。-204NoContent：请求成功，但服务器没有返回响应体（如DELETE请求删除数据成功）。3.3xx（重定向状态码）：表示请求需要进一步操作，浏览器会自动跳转，常用：-301MovedPermanently：永久重定向，比如域名更换后，访问旧域名会自动跳转到新域名，搜索引擎会更新索引。-302Found：临时重定向，比如登录后跳转到首页，临时跳转，搜索