Web前端真实企业笔试题库（含答案解析）

Web前端真实企业笔试题库（含答案解析）说明：本题库贴合互联网企业真实笔试出题风格，无套路化话术，覆盖初级、中级前端核心考点，包含HTML、CSS、JavaScript、浏览器原理、网络协议、前端工程化、兼容性等模块，题型分为选择题、填空题、简答题、编程题，所有题目均配套标准答案与详细解析。一、HTML模块（选择题+简答题）选择题（单选）1.以下不属于HTML5新增语义化标签的是（）A.headerB.footerC.divD.article答案：C解析：div是HTML传统通用块级标签，无语义；header、footer、article均为HTML5新增语义化标签，分别代表头部、底部、文章主体区域。2.关于HTML表单标签，说法错误的是（）A.input标签的type属性可设置为email、number、tel等类型B.label标签可以绑定表单元素，提升点击体验C.textarea标签支持单行文本输入D.select搭配option可实现下拉选择框答案：C解析：textarea为多行文本输入标签，单行文本输入使用input[type="text"]。简答题1.简述语义化标签的作用？答案解析：1.代码可读性更强，开发者可通过标签名直观判断页面区域功能，便于团队维护；2.有利于搜索引擎优化，爬虫可精准识别页面结构与核心内容；3.适配屏幕阅读器等辅助设备，提升网页无障碍访问体验；4.结构与样式分离，减少无意义嵌套标签，代码更简洁。2.简述HTML中块级元素和行内元素的区别？答案解析：1.排列方式：块级元素独占一行，行内元素横向排列，多个元素共处一行；2.宽高设置：块级元素可设置width、height、margin、padding；行内元素仅水平方向margin、padding生效，宽高无法自定义；3.嵌套规则：块级元素可嵌套块级、行内元素；行内元素只能嵌套行内元素，不可嵌套块级元素；4.常见标签：块级（div、p、h1-h6、ul）、行内（span、a、i、em）。二、CSS模块（选择+填空+简答）选择题（单选）1.CSS中，以下选择器优先级最高的是（）A.类选择器B.ID选择器C.标签选择器D.通配符选择器答案：B解析：优先级排序：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式。2.关于flex布局，说法正确的是（）A.flex布局无法实现元素垂直居中B.设置display:flex后，子元素默认横向排列C.flex子元素默认会独占一行D.flex布局不能自适应屏幕宽度答案：B解析：flex容器默认主轴为水平方向，子元素横向排列；通过justify-content、align-items可轻松实现水平垂直居中；flex子元素默认不独占一行，且具备极强的自适应能力。填空题1.CSS清除浮动最常用的两种方法是______、______。答案：伪元素清除浮动、开启BFC（或给父元素设置overflow:hidden）2.实现元素水平垂直居中，已知元素宽高固定，可使用的定位方式是：父元素______，子元素______。答案：position:relative；position:absolute;top:50%;left:50%;margin:负的宽高一半3.CSS3中，实现圆角属性是______，阴影属性是______。答案：border-radius；box-shadow简答题1.简述BFC的概念和触发条件？答案解析：BFC即块级格式化上下文，是页面独立的渲染区域，区域内元素布局不会影响外部元素，外部元素也不会干扰内部。常见触发条件：1.根元素html；2.元素设置overflow不为visible（hidden、auto、scroll）；3.元素设置float不为none；4.元素设置position为absolute、fixed；5.元素设置display为inline-block、flex、grid等。作用：清除浮动、解决外边距塌陷、实现自适应布局。2.简述px、em、rem、vw的区别？答案解析：1.px：像素，固定单位，不受父级、根元素影响，适配性差；2.em：相对父元素字体大小的单位，继承父级属性，嵌套层级多会出现数值混乱；3.rem：相对根元素html字体大小的单位，全局统一，适配移动端首选；4.vw：视口宽度单位，1vw等于视口宽度的1%，纯视口适配，无需依赖字体大小。三、JavaScript核心模块（选择+填空+简答+编程）选择题（单选）1.以下不属于JS基本数据类型的是（）A.undefinedB.nullC.arrayD.boolean答案：C解析：JS基本数据类型：String、Number、Boolean、Undefined、Null、Symbol、BigInt；Array属于引用数据类型。2.关于var、let、const说法错误的是（）A.var存在变量提升，无块级作用域B.let和const有块级作用域，不存在变量提升C.const声明的变量不可修改D.let声明的变量可重复声明答案：D解析：let、const禁止同一作用域内重复声明变量；var允许重复声明。const声明的基本类型值不可修改，引用类型的属性可修改。3.以下代码输出结果为？

console.log(1+'2'+3)A.6B.123C.15D.33答案：B解析：JS中字符串与数字相加会触发隐式类型转换，数字转为字符串拼接，1+'2'='12'，再+3最终为'123'。填空题1.JS中判断数组的两种常用方法是______、______。答案：Array.isArray()、Ototype.toString.call()2.异步JS的三种常用解决方案：回调函数、______、______。答案：Promise、async/await3.阻止事件冒泡的方法是______，阻止默认事件的方法是______。答案：e.stopPropagation()；e.preventDefault()简答题1.简述原型和原型链的概念？答案解析：每个JS对象都有一个隐式原型__proto__，指向其构造函数的prototype（显式原型），原型上可挂载公共方法和属性，实现属性和方法的复用。原型链：对象查找属性/方法时，先在自身查找，找不到则沿着__proto__向上查找，直至Ototype，最终指向null，这条查找链路就是原型链。2.简述闭包的概念、作用及优缺点？答案解析：闭包：函数嵌套函数，内层函数访问外层函数的变量，外层函数执行结束后，内层函数依然可以保留外层变量的作用域，形成闭包。作用：保留私有变量、实现函数柯里化、避免全局变量污染。优点：变量私有化、延长变量生命周期；缺点：容易造成内存泄漏，过多使用会影响页面性能。3.简述JS的宏任务和微任务，以及事件循环执行顺序？答案解析：宏任务：耗时较长的异步任务，包括script整体代码、setTimeout、setInterval、AJAX请求、UI渲染；微任务：优先级更高的异步任务，包括Promise.then/catch/finally、async/await、queueMicrotask；执行顺序：先执行同步代码→执行所有微任务→执行一轮宏任务→重复循环（事件循环）。编程题1.手写防抖函数（基础版）参考答案：javascript

//防抖：触发事件后，延迟n秒执行，期间再次触发则重置计时

functiondebounce(fn,delay){

lettimer=null;

returnfunction(...args){

if(timer)clearTimeout(timer);

timer=setTimeout(()=>{

fn.apply(this,args);

timer=null;

},delay);

}

}2.数组去重（写出两种常用方法）参考答案：javascript

//方法1：Set去重（ES6最简）

functionunique1(arr){

return[...newSet(arr)];

}

//方法2：遍历判断去重（兼容低版本）

functionunique2(arr){

letres=[];

arr.forEach(item=>{

if(!res.includes(item)){

res.push(item);

}

})

returnres;

}四、浏览器原理模块简答题1.简述页面从输入URL到页面渲染完成的全过程？答案解析：1.DNS解析：将域名转换为服务器IP地址；2.TCP三次握手：与服务器建立可靠传输连接；3.发送HTTP请求：客户端向服务器请求资源；4.服务器响应：返回HTML、CSS、JS、图片等资源；5.解析HTML：生成DOM树；解析CSS：生成CSSOM树；6.合成渲染树：DOM树与CSSOM树结合，生成Render树；7.布局（回流）：计算元素大小、位置；8.绘制（重绘）：将元素绘制到屏幕；9.JS执行：解析执行页面JS代码，完成页面交互。2.简述回流和重绘的区别，如何优化？答案解析：重绘：元素样式改变（颜色、背景），不改变布局大小位置，仅重新绘制页面，开销较小；回流（重布局）：元素宽高、位置、布局改变，需要重新计算整个页面布局，开销极大，会触发重绘；优化方案：1.批量修改DOM样式，避免频繁操作；2.使用class统一修改样式，不单独修改style属性；3.开启硬件加速，使用transform、opacity实现动画（不触发回流）；4.脱离文档流处理动画元素。3.简述Cookie、localStorage、sessionStorage的区别？答案解析：1.存储大小：Cookie最大4KB，localStorage、sessionStorage最大5MB；2.有效期：Cookie可设置过期时间，默认会话结束失效；localStorage永久存储，手动清除才会失效；sessionStorage仅当前会话有效，页面关闭即清空；3.传输特性：Cookie会随每次HTTP请求携带到服务器，后两者仅本地存储，不参与请求；4.作用域：Cookie可跨子域名共享；localStorage同域名共享；sessionStorage仅当前页面标签有效。五、网络协议模块简答题1.HTTP1.0、HTTP1.1、HTTP2.0的区别？答案解析：1.HTTP1.0：短连接，每次请求都需建立TCP连接，请求完成立即断开，无缓存机制，效率低；2.HTTP1.1：默认长连接，支持管线化请求，新增缓存策略（强缓存、协商缓存），支持断点续传，解决域名劫持问题；3.HTTP2.0：二进制传输，多路复用（单连接多请求），头部压缩，服务器主动推送资源，大幅提升传输效率。2.简述HTTP强缓存和协商缓存机制？答案解析：1.强缓存：优先级最高，无需请求服务器，直接使用本地缓存。通过Cache-Control（max-age）、Expires控制，缓存未过期直接读取；2.协商缓存：强缓存失效后触发，客户端携带缓存标识向服务器验证。通过Last-Modified/If-Modified-Since、ETag/If-None-Match校验；3.校验结果：资源未更新，返回304状态码，使用本地缓存；资源已更新，返回200状态码，返回新资源并更新缓存。3.简述HTTPS和HTTP的区别？答案解析：1.安全性：HTTP明文传输，无加密，易被窃听、篡改；HTTPS基于SSL/TLS加密传输，数据安全；2.端口不同：HTTP默认80端口，HTTPS默认443端口；3.证书要求：HTTPS需要CA机构颁发的安全证书，HTTP无需证书；4.性能：HTTPS需要加密解密、证书校验，请求速度略慢于HTTP；5.排名权重：HTTPS更利于搜索引擎收录和网站安全评级。六、前端工程化&框架基础（Vue/React通用）简答题1.简述Vue双向数据绑定原理？答案解析：Vue2核心：数据劫持+发布订阅模式。通过Object.defineProperty()劫持数据的getter和setter，数据读取时收集依赖，数据修改时触发订阅更新视图；结合v-model指令，实现表单视图与数据的双向同步。Vue3核心：使用Proxy替代Object.defineProperty，可监听数组、新增属性、删除属性，解决了Vue2数据劫持的局限性，响应式能力更强。2.简述虚拟DOM和diff算法的作用？答案解析：虚拟DOM：用JS对象模拟真实DOM结构，不直接操作真实DOM，减少DOM操作开销；diff算法：数据更新时，对比新旧虚拟DOM的差异，精准找到需要修改的节点，只更新差异部分的真实DOM，而非全量渲染，大幅提升页面渲染性能。3.简述webpack的核心作用？答案解析：webpack是前端模块化打包工具，核心作用：1.模块化打包：将JS、CSS、图片、字体等各类资源统一打包，支持ES6、CommonJS模块化语法；2.代码转换：通过loader解析编译各类文件（如less转css、ES6转ES5）；3.资源优化：压缩代码、拆分chunk、按需加载，减少打包体积；4.工程化赋能：配合插件实现热更新、自动打包、环境区分等功能，适配项目开发与部署。七、综合面试高频手写题1.手写call方法javascript

Ftotype.myCall=function(context,...args){

//处理null/undefined，指向window

context=context||window;

//挂载当前函数到上下文

context.fn=this;

//执行函数

constres=context.fn(...args);

//删除临时属性

delete