前端面试知识总结_boss直聘前端面试题热门知识点-CSDN博客

本文链接：https://blog.csdn.net/sinat_37168842/article/details/104819603

面试准备

巩固基础，温故而知新

CSS

盒子模型中用什么属性改变宽度和高度（box-sizing）border-box /content-box/padding-box /inherit
margin属性：（collaps BFC）指路灯—>https://b23.tv/BV16b411H7Pz
opsition：属性及其区别：static relative position fixed inherit initial
px em rem vh wm vmin vmax 指路灯—》(https://blog.csdn.net/javaloveiphone/article/details/51120476)
如何计算rem 指路灯–>https://blog.csdn.net/WuLex/article/details/99703250
水平垂直居中指路灯—》https://blog.csdn.net/weixin_42259266/article/details/89244691
flex布局指路灯–》https://blog.csdn.net/weixin_41305441/article/details/90213419
三角形（border-width）
圆（border-radius）指路灯https://blog.csdn.net/sinat_37168842/article/details/106466556
回流和重绘，设置哪些属性引起回流，哪些属性引起重绘。指路灯–》https://www.jianshu.com/p/e081f9aa03fb
css3和html5新特性指路灯–》http://www.cnblogs.com/star91/p/5659134.html
动画 transform transition animation转自：https://blog.csdn.net/u014607184/article/details/51801393
flex：1 的含义。默认值（0 1 auto）

flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长
flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小
flex-basis : 0; // 这意味着div没有这样的起始值，并且将根据可用的屏幕大小占用屏幕。例如： - 如果包装器中有3个div，则每个div将占用33％

css3中的媒体查询
隐藏元素；display：none； visible：hidden；（不可点击） opcity：0；（可点击）
rgba 和opcity 设置透明度的异同，opcity会影响字体的透明度
mousemove ，mouseover，mouseenter 鼠标移入事件的区别，enter不会冒泡。

JS

ES6 的新特性指路灯：https://www.cnblogs.com/Wayou/p/es6_new_features.html

null 和undefined的区别（声明时，typeof null//object ）指路灯—>https://blog.csdn.net/suhuaiqiang_janlay/article/details/80501204
检验数组的四种方法：Array.isArray;instanceof;array constructor ;Object.prototype.toString.call(array)
let const (1.提升 2.覆盖) 全局作用域是否会被打印？
this指向问题（call bind apply）箭头函数 new问题 )
箭头函数的特征
ES6 继承（ class extends）指路灯—>https://blog.csdn.net/sinat_37168842/article/details/105744992
闭包及其作用（节流和防抖为什么使用闭包？什么时候及为什么造成内存泄漏）指路灯—>https://blog.csdn.net/KangTongShun/article/details/105316227
ES6 class 指路灯—>https://blog.csdn.net/sinat_37168842/article/details/105744992
模块化指路灯—>https://blog.csdn.net/u012149969/article/details/80232014
promise对象指路灯—>https://blog.csdn.net/sinat_37168842/article/details/105935634
setTimeout,Promise的区别（宏任务，微任务）指路灯—>https://blog.csdn.net/MichelleZhai/article/details/103978257
setTimeout可以实现异步吗？缺点是什么？
new一个对象时发生了什么
JS事件委托
DOM点击行为
冒泡及捕获指路灯—>https://blog.csdn.net/sinat_37168842/article/details/105779293
垃圾回收机制指路灯—>
事件循环机制
原生js如何操作cookies
JS的延迟加载 asyn defer
前端模块化
- 模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。
- 在服务器端，运行时加载，在浏览器端, 模块需要提前打包处理
- ES6模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西
- require和import的区别：（前者运行时加载，后者编译时加载，后者实现方式转为require实现）
- 指路灯—>https://www.jianshu.com/p/a85afdc50d58
- 指路灯—>https://segmentfault.com/a/1190000017466120
数组的遍历方法，及其特点，使用场景，是否可以中断？
1. 简单的for循环，可以break
2. for of 遍历数组的值， i代表属性值
3. for in for-in遍历对象属性，i只代属性名，对象值arr[i]
4. forEach （value，index，value[index]）,不能中断
5. Object.key(arr),以数组形式返回键值
6. map()

    let mapArr = [1, 3, 4, 5]
		let re= mapArr.map((m, index, arr) => {
			 console.log(m+","+index, arr[index])
			 return m+22;
             
		})
		console.log(mapArr);
		console.log(re);

AJAX

AJAX调用的API
AJAX如何实现跨域
axioes ajax fetch的区别指路灯—>https://blog.csdn.net/caseywei/article/details/85274069
ajax同步异步指路灯—>https://blog.csdn.net/TxbLcy/article/details/107830743

网络（http）

cookies session之间的关联及如何清除cookies指路灯—》https://blog.csdn.net/weixin_43625577/article/details/92393581
session和JWT指路灯–》https://juejin.im/post/5cefad23e51d4510774a87f4
localStorge和sessionStorge
http缓存（强缓存弱缓存字段）指路灯：转自https://blog.csdn.net/qq_20448485/article/details/89873718
http2.0 多路复用的原理指路灯 https://segmentfault.com/a/1190000016975064
http 1.0 /http2.0/https的区别指路灯–》https://blog.csdn.net/striveb/article/details/84230923
TCP/IP 的三次握手：指路灯—》https://blog.csdn.net/ZWE7616175/article/details/80432486
https握手的过程指路灯—>https://blog.csdn.net/Regino/article/details/105509254
XSS/CSFR 攻击指路灯—》https://blog.csdn.net/weixin_43627766/article/details/96855171
CDN的查询方式（边缘计算）指路灯—>https://blog.csdn.net/5hongbing/article/details/78025349
DNS解析方式
输入一个url到展示整个页面发生了什么指路灯—>https://www.cnblogs.com/shihaiying/p/12127502.html
web socket /connect：keep-alive /session 指路灯—>
- keep alive制定了一种连接状态，而session指定了和谁保持这种状态。
简单请求复杂请求，cors预检请求指路灯—>https://www.jianshu.com/p/ebd498cc3c52
简单请求cors跨域处理指路灯—>https://www.jianshu.com/p/37c248258e89
ssr渲染指路灯—>https://www.jianshu.com/p/8fbfbe537a9b

Vue

vue原理（响应式布局，MVVM，数据双向绑定）指路灯—》https://www.jianshu.com/p/1032ecd62b3a 指路灯—>https://segmentfault.com/a/1190000006599500
v-model 的实现原理。
vue，react Angular的区别指路灯—》https://blog.csdn.net/weixin_41879988/article/details/81638474
watch 和computed、
v-if ，v-show ，v-for
- v-for的优先级大于v-if 源码中得知
- v-show的性能高于v-show
数组赋值，vue能检测到变化吗（不能呀 this.$set()）指路灯https://blog.csdn.net/csu_passer/article/details/98793663
指路灯————>https://segmentfault.com/a/1190000015783546
vue3.0 新特性(编译patch ssr proxy)
vuex
vue router(hash router history)
diff算法指路灯—>https://blog.csdn.net/xuexueenen/article/details/89218685
webpack如何解决包体积过大的问题指路灯—>https://blog.csdn.net/Afra_bd/article/details/100662351
生命周期
nextTickt ：数据流的改变DOM不会立刻更新。

用法：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

ajax在哪个生命周期中发送： created beforeMounted Mounted
v-html会导致？纯html渲染解析 xss攻击不要用在用户提交的内容上 v-text==={{ }}
watch中的deep：true如何实现？
v-if和v-for不能连用：v-for优先级高于v-if，所以会造成不必要的开销，提升v-if，或者过滤数组。
vue中beforeDestory的使用场景

路由缓存
1. 情境一：离开当前路由，会直接调用；
  当前路由不使用缓存，离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁
2. 情景二：离开当前路由，不会直接调用，需要程序控制调用；
  当前路由使用缓存，离开当前路由不会直接调用 beforeDestroy 和 beforeDestroy 销毁，需要使用路由钩子函数主动的调用
  beforeRouteLeave(to, from, next) {
  this.$destroy();
  next();
  }

组件数据更新钩子函数的执行过程：
1. 加载渲染的过程：fbC-fC-fbM-zbC-zC-zbM-zM-fM
2. 自组件的更新过程
3. 父组件更新过程
4. 销毁过程
vue子组件可以修改prop的值吗？不能，单向数据流。如何修改？（data：中定义，this.$emit( )同步修改父组件）
vue子组件中没有定义方法的时候，需要@click.native去触发事件。
vue性能优化
vue data为什么是个函数？根实例为什么没有限制呢？
- inintData()源码中显示，如果data是函数，则执行之并将其结果作为data的选项值。
- 如果不是函数，被复用的组件中所有的data值都是一样，一个组件不同实例共享一个data，污染数据。
- 根组件是一个单例模式，全局只有一个。

设计模式

单例模式如何实现单例模式—>https://www.cnblogs.com/dingxiansen/p/9353254.html
观察者模式
发布者-订阅者模式
单例模式和工厂模式的不同点
观察者和发布者订阅者的不同点

知识扩展

Java&node.js
weex
微前端
前端工程化指路灯—>https://www.cnblogs.com/fsyz/p/8274727.html
webpack打包优化指路灯—>https://www.cnblogs.com/kidflash/p/9995673.html

落地

js控制页面可见性，（笔试不能离开页面）指路灯—>http://ourjs.com/detail/54c89289232227083e00001b

美团一面

es5 es6 ？
你es6常用哪些？
let、const、var 有什么区别？
promise 有哪些方法？
箭头函数 () => {} ?
this ? 实现 bind 函数？
gulp、webpack
ajax ?
http有哪些状态？
请求跨域？跨域传输cookie ?
header 和缓存相关字段？
CSS3 有哪些新特性
盒模型有什么特点？
标准盒模型 div 宽 = 100px =
border = 10px
padding-width = 10px
margin-width = 10px
context-width = 40px?
背景可以重叠？
边框 div 设置border-radius圆
饼图 50% #000 %50#FFF
linear-gradient ？
动画
选择器 css 预处理器
less sass scss
VueJS 数据双向绑定原理？
ES6 proxy

360一面

vue响应式原理，以及如何更新数据
第二个项目文件上传时后端是如何操作的
异步操作如何实现
promis /generator/async awit
promise如何并行异步多个事件 .all方法及其返回值
promise如何抛出错误（自己说了catch 看书后有done 方法）
web前端安全 xss及xcrf
CSS3中animation
如何实现一个平移transition
traslate和top lef哪个更好一点
职业规划
反问环节