当日目标
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的人，机会不多的
完成一个需求不要上来就是两三个星期
薪资除了看实力：不能否认完整或超常的表达发挥，自信，公司的招聘预算，职位的契合度，面试官的喜欢度，是否是人才储备，外包还是产品自研，奖金还是薪资划出部分绩效都会影响最终薪资，没什么担心的，正常面试就行
网友评论