2022前端面试实录（更新ing）

当S会笑场_当M会还手
234 阅读9分钟

写在前面的话： 本人面试实录，框架基本是React，vue只是会用，原理不清楚，且本篇文章是为了记录一下自己面试中回答的不太好的问题，并不是一篇面经

CSS相关

1.flex布局中，align-content和align-items的区别是啥

1. align-items属性是针对单独的每一个flex子项起作用，它的基本单位是每一个子项，
在所有情况下都有效果（当然要看具体的属性值）。
2. align-content属性是将flex子项作为一个整体起作用，它的基本单位是子项构成的行，只在两种情况下有效果：
①子项多行且flex容器高度固定 
②子项单行，flex容器高度固定且设置了flex-wrap:wrap;

参考：align-items和align-content的区别

2.回流，重绘（概念及如何减少）

概念

回流：计算渲染树（解析HTML生成的DOM树，解析CSS生成CSSOM树，浏览器将DOM树和CSSOM树
结合起来构造渲染树）中可见的DOM节点在视口内的确切位置和大小
重绘：通过构造的渲染树和回流阶段的到计算信息，我们可以知道有哪些DOM节点是可见节点，
节点样式，以及他们的几何信息（大小，位置），将这些节点转化为屏幕上的实际像素点，就是重绘

哪些操作会触发浏览器的回流重绘

要想知道如何减少回流重绘，我们需要知道哪些操作会触发回流重绘 回流阶段是计算阶段，那么当页面的布局和几何信息（大小，位置）发生改变时，就会触发回流

例如：

  • 添加或删除可见的DOM元素
  • 元素的位置发生变化
  • 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
  • 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
  • 页面一开始渲染的时候（这肯定避免不了）
  • 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

注：回流一定会触发重绘，但是重绘不一定触发回流

如何减少回流重绘

1、避免使用层级较深的选择器，或其他一些复杂的选择器，以提高CSS渲染效率（盒子的层级不要嵌套太深）

2、避免使用CSS表达式，CSS表达式是动态设置CSS属性的强大但危险方法，它的问题就在于计算频率很快。
不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次

3、元素适当地定义高度或最小高度，否则元素的动态内容载入时，会出现页面元素的晃动或位置，造成回流

4、给图片设置尺寸。如果图片不设置尺寸，首次载入时，占据空间会从0到完全出现，上下左右都可能位移，发生回流

5、不要使用table布局，因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间

6、能够使用CSS实现的效果，尽量使用CSS而不使用JS实现

参考：你真的了解回流和重绘吗

7.粘性定位（position:sticky）

JS相关

1.includes和indexOf（Array）的区别

基本异同

相同点

1.都可以用来判断数组中是否包含某一项
2.都只能用来检测基本数据（布尔，字符串，数字）
3.includes()和indexOf()没有区分-0和+0，在判断时，认为二者是相同的

不同点

返回值不同：includes返回值是布尔类型，indexOf返回值是数值类型，当数组中不包含指定项时，
返回-1，否则返回数组下标

原理差异

indexOf是通过===进行严格判断的，所以不能用来校验NaN，
但是严格来说includes使用 零值相等 来对比数据的，所以也可以校验NaN值

使用事项

1.indexOf不能校验NaN
2.都不能用于引用类型的判断

参考：includes和indexOf 参考：# JavaScript 中的相等性判断

3.es6判断对象是否相等的方法是啥

Object.is(),用来比较两个变量是否相等的方法之一

object.is,==,=== 的区别

1.== 运算符比较时，如果左右两边的数据类型不同，会先进行同类型转化，然后进行比较
2.=== 运算符不会转换类型，只有同类型且同值时才会判定为true，NaN与任何值都不相等，所有NaN!==NaN
3.object.is()方法，可以用来比较NaN（Object.is(NaN,NaN)==>true）

4.for in,for of 和 forEach 和map的区别

1.for in 根据key进行遍历，如果遍历数组，key就是数组的下标，如果遍历对象，key就是对象属性
2.for of 根据值进行遍历，只能用来遍历可迭代的引用类型，Map，Set，Array...
3.forEach和map根据index进行遍历,仅能用来遍历数组
4.forEach不可通过寻常办法打断循环，forEach无返回值
5.map无法打断，返回值是一个与原数组等长的数组

5.Object.assign的作用（深浅拷贝？）

基本概念

将所有 可枚举（`Object.propertyIsEnumerable()` 返回 true）
和自有（`Object.hasOwnProperty()` 返回 true）属性从一个或多个源对象复制到目标对象，返回修改后的对象。

语法

Object.assign(target, ...sources)

注意事项

1、Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象，
继承属性和不可枚举属性是不能拷贝的。

2、针对深拷贝，需要使用其他办法，因为 Object.assign()拷贝的是属性值。
假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。

3、目标对象自身也会改变

4、异常会打断后续拷贝任务

参考：Object.assign()

6.Object获取value的方法（间接和直接）

1.for in循环
2.Object.values()

7.try catch 和promise的catach的区别（promise的catch能捕捉到then回调中代码执行错误吗）

结果： image.png

异同

1.都可以捕获代码错误信息，且都不能捕获异步错误（自己写个小代码，好记性不如烂笔头~）
2.try catch 不能捕获 Promise 里 reject 出来的错误信息，只能通过promise的catch方法进行捕获

MDN

image.png 参考：Promise.prototype.catch()

React框架相关（React）

1.hooks的State和Class的State之间的区别

1.class组件的setState是新旧状态进行merge操作，hooks的setState是直接进行值替换
(自己写个小代码试试就知道了)
2.两者在React中都是异步更新

image.png

image.png 可以看出hooks的setState是直接替换，而不是合并

参考： 10个案例让你彻底理解React hooks的渲染逻辑，Why Do React Hooks Rely on Call Order?

2.Reat List的组件的虚拟滚动的实现原理

参考：React虚拟滚动介绍与实现,virtual-list

3.antdTable的固定列实现怎么实现的

4.redux的connect方法的几个参数

5.生命周期钩子作用以及他们接收的参数

Vue框架相关

1.hsitory和hash模式的区别

1.hash 就是指 url 后面的 # 号以及后面的字符，history没有带#
2.hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则
3.history原理：利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化

其他

1.单例模式实现一个等待所有请求完毕后再执行操作

2.动态加载三方组件（按需加载）

3.如何本地启动一个打包好的项目文件(Vue)

4.echarts渲染性能

5.浏览器缓存（强制缓存和协商缓存）

浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。 浏览器根据该请求返回的响应头（respone header）的内容来决定该资源是否会被缓存，会存多久

强缓存

浏览器直接读取缓存，不发出任何请求，性能提升最大

响应头设置以下属性会触发强缓存：

  1. Cache-Control：max-age=3600（缓存有效时间为1小时，HTTP 1.1）;
  2. Expires: Thu, 25 May 2020 12:30:00 GMT（缓存的失效时间，HTTP 1.0）;

Cache-Control的权重最高，设置该属性后，其他的缓存规则会被覆盖

协商缓存

协商缓存就是浏览器向服务器发送一个请求，服务器会检查该资源是否有更新，
如果有更新，就返回最新的资源，状态码200，如果没有更新，状态码304，不返回资源，浏览器从缓存中读取资源

协商缓存命中规则：

ETag 与 if-None-Match

ETag 是由服务器发送给客户端的HTTP请求头标签
if-None-Match 则是由客户端发送给服务器的HTTP请求头标签

本质就是一串MD5字符串，首次请求资源A时会在响应头中返回（ETag:eTag值）并暂存在本地，当再次请求资源A时，请求头内会增加一个类似if-None-Match:本地存储的eTag值,服务器会重新计算A的Hash值，如果计算出来的值和传给服务器的值相等，那么会返回状态304，取浏览器缓存，否则返回资源A（状态值200）

Last-Modified 与 If-Modified-Since

用来记录资源的修改时间，数据格式是标准的格林尼治时间(Thu, 11 Aug 2022 10:17:47 GMT)

Last-Modified 是由服务器发送给客户端的HTTP请求头标签
If-Modified-Since 是由客户端发送给服务器的HTTP请求头标签

首次请求资源A时会在相应头中返回（Last-Modified:Thu, 11 Aug 2022 10:17:47 GMT）并暂存在本地，当再次请求资源A时，请求头内会增加一个类似If-Modified-Since:Thu, 11 Aug 2022 10:17:47 GMT,服务器会重新计算A在该时间后是否被修改，如果没修改，返回状态304，取浏览器缓存，否则返回资源A（状态值200）
注：ETag的优先级要大于Last-Modified

参考：浏览器强缓存与协商缓存详解以及实践,浏览器缓存机制剖析

avatar
文章
阅读
粉丝