前端工程师面试题及答案（贴近实战版）.docxVIP

前端工程师面试题及答案（贴近实战版）

一、基础语法与核心概念

1.为什么有时候写了CSS样式却不生效？可能有哪些原因？

答案：实际开发中遇到过不少次，常见原因有这几种：

优先级问题：比如写了.box样式，但元素同时有内联样式style=，或者有更具体的选择器（如#box.content）覆盖了；另外如果样式加了!important且冲突，也会影响生效。

选择器匹配问题：比如类名写错（比如.box写成.bxo）、标签名对应错（比如用div选择器但元素是span），或者后代选择器层级不对（比如nav.link但link不在nav里面）。

样式本身无效：比如给行内元素（如span）设置width/height却没加display:inline-block；或者属性值写错（比如color:re而不是red）。

作用域问题：如果用了Vue/React这类框架，样式加了scoped，但想修改子组件样式却没加::v-deep（Vue）或:global（React），导致样式被隔离。

2.说说你对JavaScript原型链的理解？实际项目中怎么用它优化代码？

答案：原型链本质是JS实现继承的机制——每个对象都有__proto__（隐式原型），指向它的构造函数的prototype（显式原型），当访问对象属性时，找不到就会顺着原型链往上找，直到Ototype。

实际项目里很少直接改原型（容易全局污染），但会用它的特性优化：

复用方法：比如写工具类时，把公共方法挂在构造函数的prototype上，而不是每次实例化都创建新方法。比如做表格组件时，Ttotype.formatDate只定义一次，所有表格实例都能复用，减少内存占用。

理解框架原理：比如Vue2的实例方法（$emit、$on）就是挂在Vtotype上的，所以每个组件实例都能调用；React的Component类也是基于原型链，子类组件继承后能用到setState这些方法。

注意避坑：比如不要直接修改Atotype加方法（比如Atotype.myPush），会影响所有数组，包括第三方库的数组，容易出bug。

3.异步请求中，Promise和async/await怎么用？如果多个请求需要并行处理，出错了该怎么处理？

答案：日常接口请求基本都用这俩，比回调地狱清爽多了。

基础用法：比如调一个列表接口，用Promise是axios.get(/list).then(res={}).catch(err={})；用async/await就是先写asyncfunctiongetList(){try{constres=awaitaxios.get(/list)}catch(err){}}，后者代码更像同步，读起来方便。

并行处理：如果多个请求互不依赖（比如同时获取用户信息和商品列表），用Promise.all，比如Promise.all([axios.get(/user),axios.get(/goods)]).then(([userRes,goodsRes])={})。但要注意：Promise.all只要有一个请求失败，整个就会进catch，实际项目中如果想“某个请求失败不影响其他”，就用Promise.allSettled，然后遍历结果判断每个请求的status是fulfilled还是rejected，比如：

constresults=awaitPromise.allSettled([getUser(),getGoods()])

results.forEach(result={

if(result.status===fulfilled){

console.log(成功数据：,result.value)

}else{

console.log(失败原因：,result.reason)//单独处理失败，不阻断其他

}

})

二、工程化与工具链

1.webpack打包体积太大，怎么优化？说几个你实际用过的方案

答案：之前做管理系统时，打包后vendor.js有2.3M，优化后降到500K左右，主要用了这些方法：

代码分割：用splitChunks把第三方库（vue、axios、echarts）和业务代码拆分开，比如把echarts单独拆成一个chunk，因为不是所有页面都用图表，这样首屏不用加载它；另外路由懒加载（constHome=()=import(./Home.vue)），每个路由对应一个chunk