【每日前端面经】2024-03-10
欢迎订阅我的前端面经专栏: 每日前端面经
本期题目来源: 牛客
回流与重绘
-
重绘：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘
-
回流：当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置
- 页面初始渲染，这是开销最大的一次回流
- 添加/删除可见的 DOM 元素
- 改变元素位置
- 改变元素尺寸，比如边距、填充、边框、宽度和高度等
- 改变元素内容，比如文字数量，图片大小等
- 改变元素字体大小
- 改变浏览器窗口尺寸，比如 resize 事件发生时
- 激活 CSS 伪类（例如：:hover）
- 设置 style 属性的值，因为通过设置 style 属性改变结点样式的话，每一次设置都会触发一次 reflow
- 查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等，除此之外，当我们调用 getComputedStyle 方法，或者IE里的 currentStyle 时，也会触发回流，原理是一样的，都为求一个即时性和准确性
如何避免回流
减少范围
- 尽可能在低层级的DOM节点上，而不是像上述全局范围的示例代码一样，如果你要改变p的样式，class就不要加在div上，通过父元素去影响子元素不好
- 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。那么在不得已使用table的场合，可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围
减少次数
- 样式集中改变: 不要频繁的操作样式，对于一个静态页面来说，明智且可维护的做法是更改类名而不是修改样式，对于动态改变的样式来说，相较每次微小修改都直接触及元素，更好的办法是统一在 cssText 变量中编辑。虽然现在大部分现代浏览器都会有 Flush 队列进行渲染队列优化，但是有些老版本的浏览器比如IE6的效率依然低下
- 分离读写操作：DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作
- 将 DOM 离线
- 使用 display: none
- 通过 documentFragment 创建文档碎片在添加进文档中
- 复制节点 -> 操作副本 -> 替换
- 使用 absolute / fixed 脱离文档流：使用绝对定位会使的该元素单独成为渲染树中 body 的一个子元素，回流开销比较小，不会对其它节点造成太多影响。当你在这些节点上放置这个元素时，一些其它在这个区域内的节点可能需要重绘，但是不需要回流
- 优化动画
Vue 组件通信
- Props / 组件属性
- Custom Events / 自定义属性
- Event Bus / 事件总线
- VueX / 状态管理
- Provide & Inject / 依赖注入
- Ref & Reactive
- 全局事件
- useAttrs
- Pinia
- Slots / 插槽
- v-model / 双向绑定
父子组件生命周期
- 父beforeCreate
- 父created
- 父beforeMount
- 子beforeCreate
- 子created
- 子beforeMount
- 子mounted
- 父mounted
- 父beforeUpdate
- 子beforeUpdate
- 子updated
- 父updated
- 父beforeDestroy
- 子beforeDestroy
- 子destroyed
- 父destroyed
new Set() 方法的作用
Set 是 es6 新增的数据结构，似于数组，但它的一大特性就是所有元素都是唯一的，没有重复的值，我们一般称为集合。Set本身是一个构造函数，用来生成 Set 数据结构
super 关键字
super 关键字用于访问对象字面量或类的原型（[[Prototype]]）上的属性，或调用父类的构造函数
- 在派生类的构造函数体中（使用 extends），super 关键字可以作为"函数调用"（super(...args)）出现，它必须在使用 this 关键字之前和构造函数返回之前被调用。它调用父类的构造函数并绑定父类的公共字段，之后派生类的构造函数可以进一步访问和修改 this
js
class Polygon {
constructor(height, width) {
this.name = "Rectangle";
this.height = height;
this.width = width;
}
sayName() {
console.log("Hi, I am a ", this.name + ".");
}
get area() {
return this.height * this.width;
}
set area(value) {
this._area = value;
}
}
class Square extends Polygon {
constructor(length) {
this.height; // ReferenceError，super 需要先被调用！
// 这里，它调用父类的构造函数并传入 length
// 作为 Polygon 的 height, width
super(length, length);
// 注意：在派生的类中，在你可以使用 'this' 之前，必须先调用 super()。
// 现在可以使用 'this' 了，忽略 'this' 将导致引用错误（ReferenceError）
this.name = "Square";
}
}- 属性查询形式可以用来访问一个对象字面或类的 [[Prototype]] 的方法和属性。在一个类的主体中，super 的引用可以是父类的构造函数本身，也可以是构造函数的 prototype，这取决于执行环境是实例创建还是类的初始化
js
class Rectangle {
static logNbSides() {
return "I have 4 sides";
}
}
class Square extends Rectangle {
static logDescription() {
return `${super.logNbSides()} which are all equal`;
}
}
Square.logDescription();Webpack 构建流程
- 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
- 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译； 确定入口：根据配置中的 entry 找出所有的入口文件
- 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行编译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
- 完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
- 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统
加载 chunk 的原理
Chunk 不同于 entry、 output、module 这样的概念，它们对应着 Webpack 配置对象中的一个字段，Chunk 没有单独的配置字段，但却出现在 CommonsChunkPlugin（Webpack3 以前）、optimization.splitChunks（Webpack4 以后）这样的名称之中
Webpack 可以看做是模块打包器，我们编写的任何文件，对于 Webpack 来说，都是一个个模块。所以 Webpack 的配置文件，有一个 module 字段，module 下有一个 rules 字段，rules 下有就是处理模块的规则，配置哪类的模块，交由哪类 loader 来处理
Chunk 是 Webpack 打包过程中，一堆 Module 的集合。我们知道 Webpack 的打包是从一个入口文件开始，也可以说是入口模块，入口模块引用这其他模块，模块再引用模块。Webpack 通过引用关系逐个打包模块，这些 Module 就形成了一个 Chunk
常见的状态码
| 分类 | 描述 | 举例 |
|---|---|---|
| 1** | 信息，服务器收到请求，需要请求者继续执行操作 | |
| 2** | 成功，操作被成功接收并处理 | 200: 请求成功; |
| 3** | 重定向，需要进一步的操作以完成请求 | 301: 资源已经被永久移动; |
| 4** | 客户端错误，请求包含语法错误或无法完成请求 | 403: 拒绝执行此请求; 404: 无法找到请求的资源; 405: 请求的方法被禁止; |
| 5** | 服务器错误，服务器在处理请求的过程中发生了错误 | 505: 服务器不支持请求的 HTTP 版本; 500: 服务器内部错误，无法完成请求; |
缓存
基本的网络请求就是三个步骤：请求，处理，响应
前端缓存则可以在请求和响应中进行。在请求步骤中，浏览器也可以通过存储结果的方式直接使用资源，直接省去了发送请求；而响应步骤需要浏览器和服务器共同配合，通过减少响应内容来缩短传输时间
重排(reflow)和重绘(repaint)
Vue------父子组件的生命周期（执行顺序）
MDN
一文说清 Webpack 的整体构建流程
理解 Webpack 中的 Chunk
一文读懂前端缓存
txt
新人发文，礼貌求关❤️