2020春前端面试小汇总

163 阅读6分钟

1、从堆栈的角度理解闭包
juejin.cn/post/684490…
2、如果有一个图片需要放大,怎么不引起重排
使用CSS3的transform,因为它是在新图层上做的动作,并且有硬件加速,详见
3、webpack基本原理(一直用的是vue-cli3,在webpack的细节方面没有了解)、性能优化 编译优化、打包构建优化

1、左侧300px 右侧撑满 flex布局
拓展: 页面等分
水平居中、垂直居中、水平垂直居中
2、vue是怎么打包的 原理
3、XSS(Cross Site Scripting) 跨站脚本攻击 CSRF(Cross-site request forgery) 跨站请求伪造【名称记住】
4、webpack
5、多人同时点击API怎么解决
6、前台内存修改了 其他人怎么拿到这个同步数据

1、BOM中常使用的对象
history:back()、forward()、go(intValue)
location:href
screen: avaiHeight,avaiWidth
2、hash值的改变为什么路由会改变
本来是页面内的锚点信息,用于页面内跳转,#后面的内容表示锚点的id,存在这个信息的时候会跳到页面指定的锚点处
3、async和defer的区别,参考

4、环境中js文件改变,但是浏览器有js文件缓存,怎么解决?
--给js文件加上时间戳或者hash值(webpack可以做)
5、Object常用的方法
Object.assign(target, ...sources) (对象的合并)
Object.create(proto[, propertiesObject]) (创建一个新对象,使用现有的对象来提供新创建的对象的__proto__)
Object.keys
Object.defineProperty(Vue响应式原理)
6、Array中常用方法小结
7、1px问题,怎么解决
8、addEventListener的click和onclick的区别

1、判断数组类型的几种方法: Array.isArray(arr),a instanceof Array,a.constructor === Array
注意!typeof不能直接判断出数组类型typeof返回下列的字符串:
"undefined" ---如果这个值未定义
"boolean" ---如果这个值是布尔值
"string" ---如果这个值是字符串
"number" ---如果这个值是数值
"object" ---如果这个值是对象或者null(typeof null === 'object'原理如下图)
"function" ---如果这个值是函数
1.1 typeof的原理 ,与 instanceOf 、 Object.prototype.toString.call() 的区别


使用 typeof 来判断基本数据类型是 ok 的,不过需要注意当用 typeof 来判断 null 类型时的问题,如果想要判断一个对象的具体类型可以考虑用 instanceof,但是 instanceof 也可能判断不准确,比如一个数组,他可以被 instanceof 判断为 Object。所以我们要想比较准确的判断对象实例的类型时,可以采取 Object.prototype.toString.call 方法。参考
2、CDN为什么可以就近访问?
DNS解析的时候逐级往上找,详见
3、pwa(Progressive web apps,渐进式 Web 应用)
4、利用Access-Control-Allow-Origin响应头解决跨域请求原理
如果设置 Access-Control-Allow-Origin:*,则允许所有域名的脚本访问该资源。
Access-Control-Allow-Origin:www.xxx.com,则允许特定的域名访问。
5、跨域详解
自己小结的跨域
6、options
7、懒加载的实现原理(图片懒加载、Vue中的路由懒加载) v-lazy的实现原理 锚点的计算
8、diff算法
9、spring-boot原理
10、mybatis
Mybatis 是一个半 ORM(对象关系映射)框架,它内部封装了 JDBC,开发时 只需要关注 SQL 语句本身,不需要花费精力去处理加载驱动、创建连接、创建 statement 等繁杂的过程。程序员直接编写原生态 sql,可以严格控制 sql 执行性 能,灵活度高。
11、流控算法
漏桶算法
令牌桶算法
区别:漏桶是出,令牌是进;令牌是允许伸缩 漏桶算法与令牌桶算法的区别在于,漏桶算法能够强行限制数据的传输速率,令牌桶算法能够在限制数据的平均传输速率的同时还允许某种程度的突发传输。
需要注意的是,在某些情况下,漏桶算法不能够有效地使用网络资源,因为漏桶的漏出速率是固定的,所以即使网络中没有发生拥塞,漏桶算法也不能使某一个单独的数据流达到端口速率。因此,漏桶算法对于存在突发特性的流量来说缺乏效率。而令牌桶算法则能够满足这些具有突发特性的流量。通常,漏桶算法与令牌桶算法结合起来为网络流量提供更高效的控制。

1、伪类、伪元素的区别
伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过:before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。
伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档树外的元素。因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素。 CSS3规范中的要求使用双冒号(::)表示伪元素,以此来区分伪元素和伪类,比如::before和::after等伪元素使用双冒号(::),:hover和:active等伪类使用单冒号(:)。
2、await 后面如果接一个同步函数会怎么样
[return_value] = await expression;
1)expression 后为非 promise【会将其封装为Promise对象】
直接返回这个 expression 的值
2)expression 为兑现的 promise
返回兑现的 promise 的值
3)expression 为拒绝的 promise
如果await后面的 promise 被拒绝或本身代码执行出错都会抛出一个异常,然后被 catch 到,并且,和当前await同属一个代码块的后面的代码不再执行
3、Promise.all的实现
思路:计数器,返回结果放到一个数组中存储,其中任何一个失败了则reject,参考
4、getElementById和querySelector(html5,入参是选择器)的区别
getXXXByXXX 获取的是动态集合,querySelector获取的是静态集合。简单的说就是,动态就是选出的元素会随文档改变,静态的不会,取出来之后就和文档的改变无关了。
性能方面,getXXXByXXX效率更高(我理解它可以直接id查找,但是querySelector需要整个文档流去找)。
5、前端模块化:CommonJS,AMD,CMD,ES6
参考