2021 web高频面试题新人可看

当日目标

1 常见面试题分布情况？

2 高频面试题

1 常见面试题分布情况

公司面试题一般分为js，vue，小程序部分的题型。

其中涉及到工作中常见的问题：深拷贝浅拷贝问题，去重，递归，promise语法等

或是考验知识点掌握的基本能力：作用域，console输出

少部分算法题：冒泡排序等

1.5k往上就必须知道js的很多底层原理，以及常见面试造火箭的那些题不多赘叙
以下只是，面向自学或培训等初步入web的新人朋友

2 高频面试题

属于去往公司，只要涉及到知识点区域基本必问的。以下必须得真正理解掌握。

2.1 vue

vue中，页面路由的router传参

分为prams和query传参，前者类似post后者类似get

前者刷新丢失，因为地址栏不存在body中，配合name。

后者地址栏存在，刷新自然不会丢失，配合path传参。

还有一种:id的动态传参。

route是获取

vue中，组件如何父子通信

组件通信分为父传子和子传父，还有挂载vue.$bus上兄弟传参。

最后的应用场景：类似于在个人中心修改头像，一般是刷新页面重置header的头像，但是也可以不刷新通知。

vue中如何动态的给obj添加属性

不动态添加，就会造成修改了数据consle.log可以，但是页面就不会更新。也就是没实时更新。

所以$set(this.list[0],flag，false)

指向谁，什么属性名，什么数值

给list[0]添加flag标签为false

computed和watch监听的区别

计算属性存在缓存和依赖，后者为监听

之所以这样问，新手会搞混两者使用，因为watch可以完成computed无非是分别监听a和b再计算。

区别的唯一是，想一下自己是否需要返回return新的属性名。

vue组件的单项数据流听过没？

在子组件中直接修改会报错，方法this.$parent.list=xx，这即为单项数据流。

vue提倡组件只做展示，逻辑操作放在父页面。

所以设计组件时要是出现修改了传进来的数据，会被没误解为没理解这个。

vue中用过$nextTrick没?

一般是配合原生dom操作，比如swiper或echarts等等想要，渲染数据后立即查找操作。

最为精简的理解：点击button，显示原本隐藏的input，但是想要foucs聚焦时就是不行。

vue的生命周期？

每个人的理解不同。

new vue 初始化实例，可以认为常规的js内存中开辟新的堆和栈空间（都学过的），挂载el对象。

created 把写的methods，请求data合并，编译成``字符模板一样的html结构。

没有真实结构，此刻是vue内部的虚拟dom树。

因为速度最快，一般请求数据，比如接口，获取路由参数等。

beforeMount 虚拟dom和真实dom结合，不记。

mounted 浏览器才是真正生成dom结构，因为速度慢于created所以接口从不写这（非要杠也没办法），而是查找操作。

（引入的涉及插件原生操作都是这初始化，一般还配合$nextrick）

updated更新都知道的

befroeDestroy和destroyed 销毁 清除定时器，移除绑定的元素的事件都是这处理

echarts作为组件通信，子组件prop接收，实际页面上画图有时刷新有，有时刷新无怎么解决？

子组件prop接收数据时，直接drawLine，不知道是1s还是0.1s究竟什么时候会有，所以会这样。

watch监听到有值后在画就行，一般是好心把图表也拆分成组件时会碰到。

vue中element-ui的.native修饰符有什么用？

触发饿了么ui封装一层组件的原生事件时候碰到，比如说el-input 输入框组件@keyup.enter时没触发，换成@keyup.enter.native有奇效。

很好记，click等一堆事件触发不了时，名字也对方法也写，那就加个.native。

vuex的存储逻辑？其中的getter和setter区别？

分为sotr仓库，mutation异步，action同步提交，getter和settet修饰后包装对外暴露属性名方法

mapMutaiton，MapStare一堆计算取出的方法

dispath和commit修改的提交方式

最重要的vue只是解决不同页面通信的方式，类似于$bus；没说刷新不会丢失肯定没写过那就踩雷了。

一般放入session中页面生命周期，因为完美契合只在当前页面需要的需求。

跨域是什么？同源策略又是什么？

不要以为放在最后一个不重要，相当重要基本都会问。

同源策略是浏览器的保护行为，浏览器发起的跟后台一点关系都没。可以发现network中存在数据，但是js就是打印不了，也就造成了跨域。特征为corss header类似错误（不是所有的报的跨域错误就是跨域造成的，拼错了参数，拼错了url都会这样）

开发时：

jq axja的jsonp很经典

vue中proxytbale代理，其中涉及overwrite

后端设置cross允许h5跨域头

有的公司，后端直接配置好nginx，前端不用管

线上：

nginx主流代理，每台服务器都有，跟web没半毛钱关系

vue的vue-cli3，4和vue-cli2区别

注意是脚手架的版本不是vue的版本。

差异重要是文件结构不同，新脚手架没有conifg配置文件，而是需要新建的vue.config.js。一眼就可以看出版本了。

而vue2.x版本用的原因是，尤雨溪也在做3.0移植到2.x上，除语法外就是内部原理实现不同。非初中阶web了解部分。

2.2 js

js中什么是基本数据，什么是复杂数据？

string，number，undefined等等

复杂：obj，arr，（fn是obj一种）

复制复杂数据时为什么，会影响原有的，栈和堆又是什么？

只是复制了表层的引用地址（没有真正的引用值）

image-20210816095200515.png

js的闭包什么？解决内存泄露的方式？

函数内存引用外部变量。

let name='张三'
fn show(tip) {
    console.log(name+tip)
}
show('法外狂徒')
fn调用时就，内部就形成了闭包，会常驻内存。
解决复制null

函数的防抖和节流？

输入框做一个监听输入一个值，实时请求搜索，要搜12345但是输完12345678又删除678，那么是否浪费？

防抖就是，debounce，让不立即执行一直打断。自定义30ms后请求数据，但是一直有操作进来，原定的被打断步骤所以叫防抖。

事件一直往后延，不符合条件延时，setTimeout

节流最好记。

页面onresize，onmouseouver，onscorll，大量触发，少个一两次，是否不影响，？

setInterval(fn,30ms）

短时间内大量触发事件，稀释触发频率

真正理解换成自己的语言

深拷贝解决递归的方式或JSON.parse(JSON.stringify())有什么缺陷没？

为undeifne的数值会丢失，99%没影响。因为丢失就是false，判断时Boolean(undefined)===Boolean(false)

loadash插件也好，递归判断类似，开辟新空间也好，就是备用的方法。

es6数组的新方法：map，filter，concat，splice，set？

不赘叙。

映射，过滤，拼接，删除或替换，去重

set数据结构和map数据结构了解没？

不是数组的方法，是es7后新增的数据结构，分别类似array和obj

前者伪数组，有size没有length方法；具有唯一特性。所以去重可以互相转。

Array.from(new Set(arr)) 同等于 [...new Set(arr)]

异步和同步，微任务和宏任务？

js代码按步骤执行，但是分为常规的同步和setTimeout，ajax，promise的异步。

执行为碰到异步代码丢入事件队列中，一个个丢进入，然后先进入的执行完所有的同步代码后再执行事件队列中。

而事件队列中promise，async和await又分为了微任务，比常规的宏任务优先级更高。

场景：

1 需要从两个接口分别等待完成后再做根据res，res2操作，可以写在success回调函数（callback）中，嵌套。

但是没法就限制了谁先谁后，以及碰到了回调函数。

用promise.all就可以解决

2 异步和同步

for循环配合setTimeout，输出的i永远为最后就是这个原因。

promise看代码，初学者一般都不太理解。

promise异步和async和await？

// 抽离的api下login.js
export function login(params) {
    return new Promsie((resolve)=>{
        $.ajax({
            ...
            resolve(res
            )
        })
    })
}

// 页面a
improt {login} from './api.js' 
...
methods:{
    async doLogin() {
        //async和await一直都是配合用  async修饰函数  await等待返回结果
        //好处是把异步变为同步写，多配合解构
        let {code,msg,data}=await login()
    }，
    twoDemo() {
        let a=new Promise((resolve)=>{
            resolve(1)
        }) 
        let b=new Promise((resolve)=>{
            resolve(2)
        }) 
        Promise.all([a,b]).then((res)=>{
          // [1,2]
          console.log(res)
        })
    }
}

2.3 css

浏览器从输入url到渲染页面的过程？

解析url，涉及先找本电脑的host，没有去外网查找。

这个涉及如果京东内部员工也想方位jd.com，改完host后直接输入url就可以看到内部版的。相当于劫持。配置host相关一般需求后台会帮，或者运营也好，不管

浏览器和服务器交流

header发送请求，带token一堆head中信息和接口参数。

后台收到，如果是post还返回多一层option确认信息，然后浏览器才真正开始请求数据。

解析完成后，服务器返数据，俗称报文。

黑客截取，刷单软件，爬虫拔取多涉及这部分，跟web唯一相关就是调试接口

浏览器渲染

要知道浏览器分为css，html，js三个解析编译器，v8渲染内核。

先html，然后css渲染，最后js挂载上去。

以上和一下详情参考：https://www.cnblogs.com/qing-5/p/11126524.html

三次握手的协议？

样式的重绘和回流？

dom查找删除，位置，大小改变触发回流；其余css样式条只会重绘；属于项目优化需要了解的。

具体影响为平时css能完成的，少用js去完成。用js完成的样式少写行内写个class优先好于。

一般多为极致项目优化了解平时应用工作中去的，顺带一提前端一顿操作猛如虎把该做的昨晚后（大概最多能提升1-2s）很厉害了，还不如后端做点优化。

移动端页面兼容的处理，rem，em的区别？

em基于向上最近的父元素，rem基于body上font-size，rpx为小程序，npx同等。

以前rem做兼容移动，现在vue中px2rem和一堆跨平台这个反倒必须知道没以前高了。

边框的塌陷和合并？

相邻的div容器会合并最大的距离，塌陷为浮动时内部不能撑起。clear：both和overflow可以解决这种不详谈。

bfc独立渲染区域是？

主要解决上面的根本原因，是让浏览器形成的独立渲染区域，就是bfc。概念清楚就没了。

2.4 工作中经验杂项的问题

设计稿标注/蓝湖之类的/设计师怎么交接，像素大厨/psd之类用过没？

设计师以前给psd，让web自行切图。所以有的web会切图，简单ps，前端能做的不多时，切图仔这么来的😊。

再以后线上标注蓝湖，墨刀出现，线下像素大厨等等，改为线上实时标注了。

像素大厨，蓝湖自行去试验，不去看一定不会。

设计师给图，讲解下要实现的交互需求；完成后也是先给设计师过，没问题后再是产品经理。当然非固定，忙的公司可能直接测试，产品，设计一起过了。所以去闲的时多的公司挺好的。

如何完成页面的优化，或平时写代码注重什么？

懒加载，页面组件化指vue，小程序等等mvc框架；图片压缩，打包时map映射。从js，css，html以及打包分别去说吧，挺多。

标签语义化，js名命规范，每个公司有自行的代码标准或没有。很早很早前有个叫雅虎军规的代码规范❓--没必要看。百度到处都是。非常重要，因为一个平时注重代码习惯的洁癖的人，水平一般都不会差。

顺带一提，要是同事中真的碰到每天到公司和同事满脸热情讨论代码，越说越兴奋每天回去后还写demo的确不多；算上同事的同事只碰到过2个，嗯果然不出意外的，以大专水平进大厂了

之前搭配的后端同事语言是，技术团队怎么协作？

后端接口可以是php，java，python等等；但是和前端一毛钱关系都没，最后都是个url地址。

后端给api文档线上或线下，人少做产品时间充足的公司一般直接qq传接口，转个椅子直接回身问，不用奇怪。

完成一个项目需求一般要多久？

做产品迭代，一般一个星期小的需求。可能是某个活动页，版本改版，新需求页面等。写三天，再加一天测试一天修改，周五或周末上线。完不成周末来加班调试。

做项目外包接别人的，都是一星期，完成几个常规小功能。2-3天一个，复杂点4天样子，纯粹是页面功能复杂的话一星期算正常。

反正不要说一个需求两三个星期就行，换你你不感兴趣，什么样的大功能需要这么久？

vue项目打包上线的流程，以及自动化接触过没？

常规给dist文件，改baseurl完事。自动化都是后端配置，线上直接切换分支，点下构建，可以实现前端，以及所有人都可以自行更新测试，线上的功能。省去运维的每次发布。也许公司没运维。

运维一般负责公司网站部署，服务器，域名；各种流程证书处理，测试环境和线上环境部署找那。比实施工程师听起来强不少，不了解不多说

一般怎样从需求讨论，到怎样完成一个版本的更新迭代？

小组三人会议，产品经理说下需求原型，设计师发表点意见。web和后端从可实施方面给意见。这种比较轻松。

还有的产品经离已经定型好了，只是通知一下意思；产品经理玩不转的话，有时会两面不是人的。是挺辛苦的。

产品经理问能不能完成很天马行空需求时，就算实现不了，也要去装作试了以后再去说，不要上来就完成不了，两者不一样的

如果碰到开发时碰到背锅，扯皮等棘手的事情，怎么处理的？

一般公司内部的确存在这种情况才会和你说，一般也只会是技术负责人会和你说，其实这种主管还是比较好沟通的。

内有外患的话，技术部也会挺团对外的，而且主管也只是说说，平时都是自己抗下的。

你说之前公司没碰到过也可以，也可以说平时自己都是沟通为主也行，没标准。

缘由

以上属于第一印象，以及身边经常面试时群里经常问到的题目。

当然面试题全点的可能上百道，但常用的也就3-40道，每次去面试记录下不会的也很快能面上。

加油了，各位!!!

面试的时候不要一直反问面试官，是说的什么意思？是指哪个吗？不会就干脆点，业务可能没涉及过，看下就行，不要犯常规错误：

比如说vant是vue的移动端，ant是react的框架，不要也把ant写进去或写上？

明明可能只是会点sql，却说熟悉php，java等等，前后端都会都往全栈架构师转了，干嘛还来面前端；而web很熟悉php的人，机会不多的

完成一个需求不要上来就是两三个星期

薪资除了看实力：不能否认完整或超常的表达发挥，自信，公司的招聘预算，职位的契合度，面试官的喜欢度，是否是人才储备，外包还是产品自研，奖金还是薪资划出部分绩效都会影响最终薪资，没什么担心的，正常面试就行