Web前端工程师面试题及答案.docxVIP

Web前端工程师面试题及答案

一、基础核心题

问：说说你对HTML语义化的理解，实际项目中怎么用？

答：语义化就是让标签有“含义”，不是全用div。比如头部用header、导航用nav、文章主体用article，好处是SEO友好（有哪些信誉好的足球投注网站引擎能识别内容结构），也方便屏幕阅读器（无障碍），后期维护看标签就知道这块是啥功能。

实际项目里，比如做博客详情页，标题用h1（一个页面只一个），作者信息用address，段落用p，列表类的相关推荐用ul，不用div套span硬凑结构。

问：CSS盒模型有两种，实际开发中怎么区分和控制？

答：两种是标准盒模型和IE盒模型，区别在width/height包含的范围。标准盒模型（默认）的宽高只算内容区（content），padding和border会撑大盒子；IE盒模型的宽高包含content+padding+border。

控制用box-sizing属性：content-box是标准，border-box是IE。实际开发中写样式重置时，一般会全局设*{box-sizing:border-box;}，比如做表单输入框，设了宽高后加padding不会变形，不用再算减去padding的数值，省事儿。

问：JS里Promise的三种状态是什么？实际用的时候怎么处理异步错误？

答：三种状态是pending（等待）、fulfilled（成功）、rejected（失败），状态一旦变了就改不了。比如调接口拿数据，发起请求时是pending，拿到数据变fulfilled，接口报错变rejected。

处理错误常用两种方式：一是在.then()后面跟.catch()，所有异步错误（比如接口404、数据解析错）都会进catch；二是用async/await时，包在try-catch里，比如：

asyncfunctiongetList(){

try{

constres=awaitaxios.get(/api/list);

returnres.data;

}catch(err){

console.log(请求错了：,err);//这里处理错误，比如提示用户

}

}

实际项目里，catch里不能只打印日志，还要给用户反馈，比如弹个“加载失败，请重试”的提示。

二、框架应用题（React/Vue）

问：React的useEffect钩子，依赖项空数组和不写依赖项有啥区别？实际用的时候踩过坑吗？

答：区别大了。依赖项空数组[]时，effect只在组件挂载时执行一次，卸载时执行return里的清理函数，类似class组件的componentDidMount；不写依赖项的话，组件每次渲染（比如props、state变了）都会重新执行effect，容易出性能问题。

踩过坑，比如之前做定时器，依赖项没写定时器ID，导致组件更新时重复创建定时器，页面卡了。后来加上依赖项，并且在return里清定时器，就好了：

useEffect(()={

consttimer=setInterval(()={/*逻辑*/},1000);

return()=clearInterval(timer);//卸载时清定时器

},[]);//空数组，只执行一次

问：Vue2和Vue3的响应式原理有啥区别？实际项目中选哪个版本？

答：Vue2用的是Object.defineProperty，只能监听对象的属性，数组的话要重写push、pop这些方法才能监听；Vue3用的是Proxy，能直接监听整个对象/数组，不用重写数组方法，还能监听新增属性、删除属性。

新项目肯定选Vue3，比如用CompositionAPI封装复用逻辑比Vue2的mixins干净，不会有命名冲突。老项目如果要升级，得考虑第三方组件兼容性，比如有些UI库还没完全适配Vue3，就先维持Vue2。

三、工程化与性能题

问：webpack里loader和plugin的区别？实际项目中常用哪些？

答：loader是处理文件转换的，比如把ES6转ES5用babel-loader，把SCSS转CSS用sass-loader+css-loader；plugin是做更上层的功能，比如生成HTML文件用HtmlWebpackPlugin，压缩代码用TerserPlugin。

常用的loader：babel-loader（JS兼容）、style-loader（把CSS插入DOM）、file-loader（处理