前端面试知识总结

面试准备

  • 巩固基础,温故而知新

CSS

  1. 盒子模型中用什么属性改变宽度和高度(box-sizing)border-box /content-box/padding-box /inherit

  2. margin属性:(collaps BFC)指路灯—>https://b23.tv/BV16b411H7Pz

  3. opsition:属性及其区别 :static relative position fixed inherit initial

  4. px em rem vh wm vmin vmax 指路灯—》(https://blog.csdn.net/javaloveiphone/article/details/51120476)

  5. 如何计算rem 指路灯–>https://blog.csdn.net/WuLex/article/details/99703250
    在这里插入图片描述

  6. 水平垂直居中 指路灯—》https://blog.csdn.net/weixin_42259266/article/details/89244691

  7. flex布局 指路灯–》https://blog.csdn.net/weixin_41305441/article/details/90213419

  8. 三角形(border-width)

  9. 圆 (border-radius) 指路灯https://blog.csdn.net/sinat_37168842/article/details/106466556

  10. 回流和重绘,设置哪些属性引起回流,哪些属性引起重绘。 指路灯–》https://www.jianshu.com/p/e081f9aa03fb

  11. css3和html5新特性指路灯–》http://www.cnblogs.com/star91/p/5659134.html

  12. 动画 transform transition animation转自:https://blog.csdn.net/u014607184/article/details/51801393

  13. flex:1 的含义。默认值(0 1 auto)

  • flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长
  • flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小
  • flex-basis : 0; // 这意味着div没有这样的起始值,并且将根据可用的屏幕大小占用屏幕。例如: - 如果包装器中有3个div,则每个div将占用33%
  1. css3中的媒体查询
  2. 隐藏元素;display:none; visible:hidden;(不可点击) opcity:0;(可点击)
  3. rgba 和opcity 设置透明度的异同,opcity会影响字体的透明度
  4. mousemove ,mouseover,mouseenter 鼠标移入事件的区别,enter不会冒泡。

JS

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

  1. AJAX调用的API
    在这里插入图片描述

  2. AJAX如何实现跨域

  3. axioes ajax fetch的区别指路灯—>https://blog.csdn.net/caseywei/article/details/85274069

  4. ajax同步异步指路灯—>https://blog.csdn.net/TxbLcy/article/details/107830743

网络(http)

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

Vue

  1. vue原理 (响应式布局,MVVM,数据双向绑定)指路灯—》https://www.jianshu.com/p/1032ecd62b3a 指路灯—>https://segmentfault.com/a/1190000006599500
  2. v-model 的实现原理。
  3. vue,react Angular的区别指路灯—》https://blog.csdn.net/weixin_41879988/article/details/81638474
  4. watch 和computed、
  5. v-if ,v-show ,v-for
    • v-for的优先级大于v-if 源码中得知
    • v-show的性能高于v-show
  6. 数组赋值,vue能检测到变化吗(不能呀 this.$set()) 指路灯https://blog.csdn.net/csu_passer/article/details/98793663
    指路灯————>https://segmentfault.com/a/1190000015783546
  7. vue3.0 新特性(编译patch ssr proxy)
  8. vuex
  9. vue router(hash router history)
  10. diff算法指路灯—>https://blog.csdn.net/xuexueenen/article/details/89218685
  11. webpack如何解决包体积过大的问题指路灯—>https://blog.csdn.net/Afra_bd/article/details/100662351
  12. 生命周期
  13. nextTickt :数据流的改变DOM不会立刻更新。
  • 用法:
    下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
  1. ajax在哪个生命周期中发送: created beforeMounted Mounted
  2. v-html会导致?纯html渲染解析 xss攻击不要用在用户提交的内容上 v-text==={{ }}
  3. watch中的deep:true如何实现?
  4. v-if和v-for不能连用:v-for优先级高于v-if,所以会造成不必要的开销,提升v-if,或者过滤数组。
  5. vue中beforeDestory的使用场景
  • 路由缓存
    1. 情境一:离开当前路由,会直接调用;
      当前路由不使用 缓存,离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁
    2. 情景二:离开当前路由,不会直接调用,需要程序控制调用;
      当前路由使用 缓存,离开当前路由不会直接调用 beforeDestroy 和 beforeDestroy 销毁,需要使用路由钩子函数主动的调用
      beforeRouteLeave(to, from, next) {
      this.$destroy();
      next();
      }
  1. 组件数据更新钩子函数的执行过程:
    1. 加载渲染的过程:fbC-fC-fbM-zbC-zC-zbM-zM-fM
    2. 自组件的更新过程
    3. 父组件更新过程
    4. 销毁过程
      在这里插入图片描述
  2. vue子组件可以修改prop的值吗?不能,单向数据流。如何修改?(data:中定义,this.$emit( )同步修改父组件)
  3. vue子组件中没有定义方法的时候,需要@click.native去触发事件。
  4. vue性能优化
  5. vue data为什么是个函数?根实例为什么没有限制呢?
    • inintData()源码中显示,如果data是函数,则执行之并将其结果作为data的选项值。
    • 如果不是函数,被复用的组件中所有的data值都是一样,一个组件不同实例共享一个data,污染数据。
    • 根组件是一个单例模式,全局只有一个。

设计模式

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

知识扩展

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

落地

  1. 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一面
  1. vue响应式原理,以及如何更新数据
  2. 第二个项目文件上传时后端是如何操作的
  3. 异步操作如何实现
    promis /generator/async awit
    promise如何并行异步多个事件 .all方法及其返回值
    promise如何抛出错误 ( 自己说了catch 看书后有done 方法)
  4. web前端安全 xss及xcrf
  5. CSS3中animation
  6. 如何实现一个平移transition
  7. traslate和top lef哪个更好一点
  8. 职业规划
  9. 反问环节
京东一面

不知什么原因,官网投递的简历石沉大海,在boss直聘上投了京东数科,复盘一下面试中遇到的问题吧

  1. 说一下原型链继承吧,面向对象的封装性,继承性,多态性等等;
  2. 数据类型的判断四种方式,typeof,instanceof,consturctor,object.prototype.toString.call()
  3. 说说对闭包的理解
  4. Jquery事件委托
  5. 场景题,一个输入框,查找数据,多次更新,然后怎么优化呢?(函数节流和函数防抖)
  6. 函数节流和函数防抖的区别
  7. Http是无状态协议,那么如何识别每一个用户呢?
  8. vue-router中的hash路由和history路由的区别
  9. vue mixin????(不太懂)
  10. CSS3中的新特性
  11. 盒模型
  12. css优先级
  13. 如何实现图片懒加载
  14. 反问环节,能进二面吗???
    

深信服面试

  • 数据结构:
  1. 快速排序和堆排序
  2. 大堆小堆如何删除,和添加元素
  3. x层楼梯,可以选择爬一层或者爬二层,有几种方法
  4. 英文文章需要找到某个单词出现多少次,需要使用什么方法(数据结构)
  • JS
  1. for of和for in的区别
  2. 异步ajax和同步ajax的区别
  • CSS
  1. 如何清除浮动
  2. 垂直居中布局
  3. BFC
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值