面试准备
- 巩固基础,温故而知新
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
- 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
- 数组的遍历方法,及其特点,使用场景,是否可以中断?
- 简单的for循环,可以break
- for of 遍历数组的值, i代表属性值
- for in for-in遍历对象属性,i只代属性名,对象值arr[i]
- forEach (value,index,value[index]),不能中断
- Object.key(arr),以数组形式返回键值
- 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的使用场景
- 路由缓存
- 情境一:离开当前路由,会直接调用;
当前路由不使用 缓存,离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁 - 情景二:离开当前路由,不会直接调用,需要程序控制调用;
当前路由使用 缓存,离开当前路由不会直接调用 beforeDestroy 和 beforeDestroy 销毁,需要使用路由钩子函数主动的调用
beforeRouteLeave(to, from, next) {
this.$destroy();
next();
}
- 情境一:离开当前路由,会直接调用;
- 组件数据更新钩子函数的执行过程:
- 加载渲染的过程:fbC-fC-fbM-zbC-zC-zbM-zM-fM
- 自组件的更新过程
- 父组件更新过程
- 销毁过程
- 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哪个更好一点
- 职业规划
- 反问环节
京东一面
不知什么原因,官网投递的简历石沉大海,在boss直聘上投了京东数科,复盘一下面试中遇到的问题吧
- 说一下原型链继承吧,面向对象的封装性,继承性,多态性等等;
- 数据类型的判断四种方式,typeof,instanceof,consturctor,object.prototype.toString.call()
- 说说对闭包的理解
- Jquery事件委托
- 场景题,一个输入框,查找数据,多次更新,然后怎么优化呢?(函数节流和函数防抖)
- 函数节流和函数防抖的区别
- Http是无状态协议,那么如何识别每一个用户呢?
- vue-router中的hash路由和history路由的区别
- vue mixin????(不太懂)
- CSS3中的新特性
- 盒模型
- css优先级
- 如何实现图片懒加载
-
反问环节,能进二面吗???
深信服面试
- 数据结构:
- 快速排序和堆排序
- 大堆小堆如何删除,和添加元素
- x层楼梯,可以选择爬一层或者爬二层,有几种方法
- 英文文章需要找到某个单词出现多少次,需要使用什么方法(数据结构)
- JS
- for of和for in的区别
- 异步ajax和同步ajax的区别
- CSS
- 如何清除浮动
- 垂直居中布局
- BFC