前端面试题（待完善）

前端面试题总结：

1、淘宝放大镜怎么实现
2、一个地图上想要标记五百个点，一次性不卡顿，怎么实现
3、Http协议，http组成部门，http和https了解，https为啥需要花钱，CA证书
4、Vuex是单向数据流还是双向数据流和Vuex的理解
5、props和data优先级谁高 ： props ===> methods ===> data ===> computed ===>watch
6、Vue中如何做样式穿透：（1）stylus样式穿透使用：>>>（2）sass和less使用：/deep/（3）通用使用： :v-deep
7、路由周期，next方法：
7.1、beforeEach（全局前置钩子）意思是在每次每一个路由改变的时候都要执行一遍。
应用场景：
1、进行一些页面跳转前的处理，例如跳转到的页面需要进行登录才可以访问时，就会做登录的跳转。
2、进入页面登录判断、管理员权限判断、浏览器判断。
7.2、afterEach（全局后置钩子）beforeEach是在页面加载之前的，而afterEach是在页面加载之后的，所以这些钩子是不会接受next函数， 也不会改变导航本身。
7.3、单个路由内的钩子函数：beforeEnter：可以直接在路由配置上直接定义beforeEnter，这些守卫与全局前置守卫的方法参数是一样的。
7.4、组件内的路由钩子函数：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。
应用场景：
1、清除组件中的定时器。
2、当页面有未关闭的窗口，或未保存的内容时，阻止页面跳转。
3、保存相关内容到Vuex和Session中。
8、为啥有深浅拷贝，说一些深浅拷贝有哪些：（1）浅拷贝。（2）深拷贝：JSON对象的转换、lodash。
9、虚拟dom diff
10、伪类伪元素区别
11、webpack插件用过啥，对webpack的了解
12、父子组件传参
13、offsetHeight获取的是哪里的高度： 当前的高度，加border。
14、做权限判断时候路由咋用的： 路由前守卫（beforeEach）。
15、盒模型，es6，promise怎么用
16、父组件使用子组件的时候他们的生命周期执行顺序是啥：
父 beforecreate created beforemount 子 beforecreate created beforemount 子 mounted 父 mounted
17、mixins，过滤器，自定义指令
18、html5的新特性，Do ctype作用，Canvas和svg 区别，Sessionstorage， localstorage， 作用域，两个窗口之间怎么通信
19、vue绑定函数方式： v-on，@，v-bind，冒号。
20、v-if 和 v-show区别，keep-alive组件，封装动态组件，项目怎么优化，vue-loader，最近学了啥了解新技术
21、MVVM 双向绑定
22、打包流程： 纯净包的话就是 npm run build:prod，也就是生产包。npm run build:dev或者 npm run build，开发包。
23、es5和es6继承区别
24、怎么优化网站性能，解决白屏问题，加载慢的问题
25、webpack的预加载，webpac构建过程的优化，为什么要用webpack打包，webpack是怎么知道需要使用哪种loader的，babel作用
26、怎么自己封装一个指令： directive（他就是vue组件对象的一个属性啊，在标签中写好 v-abc，然后再这个里面去写方法，在使用 inserted 这个方法就可以了）。
27、v-if是局部渲染还是全部渲染
28、import为什么可以实现路由懒加载
29、304状态码
30、打包优化
31、ajax axios和fetch区别
32、用promise实现图片的懒加载
33、JSON.parse(JSON.stringy())有什么弊端
34、虚拟dom和真实dom哪个好
35、检查类型的方法
36、一个div width:400 height：200，里边还有一个div，给他设置成padding:50%，这个50%是多少像素？： 基于父元素计算的 200px。
37、this的指向问题
38、前端面试题地址：前端面试题地址
39、普通布局和flex 布局
40、vue中的mixins和actions的使用
41、前端框架也要多看看 react，vue，小程序
42、从输入URL 到页面展示到底发生了什么
43、vw和vh，calc计算css样式
44、Promise的链式调用和axios处理高并发：Promise的链式调用和axios处理高并发
45、 js中查找字符串中出现次数最多的字符： var str=“abaaccddde”; 输出 {a:3,b:3} function findStr(str){ if(typeof str !=="string") return false; var obj={}; var newObj={}; for(let key of str){ if(!obj.hasOwnProperty(key)){ obj[key]=1; }else{ obj[key]++; } } var max=Math.max.apply(null,Object.values(obj)); for(let key in obj){ if(obj[key]==max){ newObj[key]=max; } } return newObj; } console.log(findStr(str));
46、es6新增fill函数用法如下： arr.fill(value, start, end) value：填充值。start：填充起始位置（根据索引走），可以省略。end：填充结束位置（根据索引走），可以省略，实际结束位置是end-1。例如：const arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]；arr3.fill(7, 2, 5)；console.log(arr3); 1,2,7,7,7,6,7,8,9,10,11
如有未提及到的面试题还请大家多多提问，欢迎大家来新增新的面试题~~~