【面试题】前端面试复习6（前端面试题简书）

if (entries[i].name===\’first-contentful-paint\’) {

console.log(\’FCP\’, 条目[i].startTime)

}

}

观察者.disconnect()

}).observe({entryTypes: [\’绘制\’, \’最大内容全绘制\’] })

新的PerformanceObserver((entryList, 观察者)={

让条目=entryList.getEntries()

const lastEntry=条目[条目.长度- 1]

console.log(\’LCP\’,lastEntry.startTime)

观察者.disconnect()

}).observe({entryTypes: [\’最大内容全画\’] })

#####获取一些常用指标的代码

设置超时（（）={

持续的{

获取开始，

开始连接，

连接终止，

开始请求，

响应开始，

响应完成，

dom 加载，

多姆互动，

domContentLoadedEventStart,

domContentLoadedEventEnd，

加载事件开始

}=性能.计时

const info=connectTime (TCP 连接时间) : ${connectEnd – connectStart} ttfbTime (获取第一个字节) : ${responseStart – requestStart} responseTime (response 响应时间) : ${responseEnd – responseStart} parseDOMTime (DOM 解析和渲染) 时间) : ${loadEventStart – domLoading} domContentLoaded（事件时间）：${domContentLoadedEventEnd – domContentLoadedEventStart} TimeToInteractive（首次交互时间）：${domInteractive – fetchStart} loadTime（完全加载时间）：${loadEventStart – fetchStart}

控制台.日志(信息)

}，2000）

//如果setTimeout，则页面将显示然后打印。延迟执行时间将根据实际情况设定。

### 3. 性能应该从哪些维度进行分析？

#### 维度1：I/O（网络）维度


##### 阶段中的应用程序缓存/HTTP 缓存

强缓存（Cache-Control 和Expires）和协商缓存（ETag 和Last-Modified）是两种常见的缓存机制，用于优化客户端和服务器之间的资源请求和响应。

强缓存是指客户端直接使用本地缓存的资源，而不需要向服务器发送请求。这主要通过两种方式实现：

1. Cache-Control：在服务器响应头中设置Cache-Control指令来控制资源的缓存机制。常用的步骤有：

* public：表示该资源可以被任何缓存（包括客户端和代理服务器）缓存。

* private：表示该资源只能被客户端缓存，不能被代理服务器缓存。

* max-age：指定资源的生命周期（以秒为单位）。在此期间，客户端可以直接使用本地缓存，无需发送请求。

2.Expires：在服务器响应头中，设置Expires字段来指定资源的过期时间。这是一个时间点，表明在此点之后客户端不能再使用本地缓存，而是应该向服务器发送请求。

协商缓存是指客户端首先向服务器发送请求，服务器验证请求并决定是否返回资源的实际内容。这主要通过两种方式实现：

1. ETag：在服务器响应头中，设置ETag字段来标识资源的版本号。客户端可以在后续请求中使用If-None-Match 头字段将上次响应的ETag 值发送给服务器。服务器通过比较资源的ETag 值来确定资源是否发生变化。返回304 状态代码，告诉客户端缓存的资源可用。

* 基于QUIC协议：HTTP/3基于QUIC（快速UDP互联网连接）协议，该协议使用UDP而不是TCP，从而带来更低的延迟和更好的性能。

* 支持复用和标头压缩：HTTP/3 也继承了HTTP/2 的复用和标头压缩特性。

这些是不同版本的HTTP 协议之间的主要区别。随着协议的发展，每个版本都致力于提高性能、安全性和效率，以提供更好的Web 体验。您使用哪个版本取决于服务器和客户端支持以及您的具体需求。

Keepalive 是一种持久连接机制，旨在提高HTTP 协议的性能。在传统的HTTP/1.0中，每个客户端请求都必须与服务器建立一个新的TCP连接，导致每个请求都要经历建立和释放TCP连接的过程，增加了延迟和资源消耗。 Keepalive 允许您重用已建立的TCP 连接，从而简化了建立和终止连接的过程。

具体来说，keepalive是通过以下方式实现的：

1、持久连接：在HTTP头中添加“Connection: keep-alive”，表示客户端希望与服务器保持持久连接。当服务器收到此标头时，它会在响应中返回相同的标头，表明它同意持久连接。

2. 多个连接：客户端发送请求并且服务器响应后，TCP连接不会立即关闭，而是保持打开状态直到下一个请求。

3. 设置超时时间。如果一段时间内没有新的请求，连接会自动关闭。

使用keepalive 具有以下好处：

1.减少延迟：避免了建立和终止TCP连接的过程，从而减少了连接延迟。

2、减少资源消耗：连接复用减少了服务器的负担和占用网络带宽。

3、提高性能：单个连接可以发送多个请求，实现并行请求，减少网络拥塞和串行请求的影响。

请注意，Keep-Alive 默认情况下未启用，必须在请求标头中显式指定。在HTTP/1.1 中，默认情况下启用keepalive，除非显式指定“Connection: close”。对于HTTP/2和HTTP/3来说，长连接默认是开启的，不再需要单独指定。

Keepalives有效提高HTTP性能，提高网络请求的效率。但是，确切的实现和支持级别可能会有所不同，具体取决于服务器和客户端的配置和版本。

##### 请求和响应阶段

1、首先我们怎样才能最小化我们的静态资源包的大小呢？

1、例如Webpack脚手架使用uglify和minify插件来压缩文件。您可以删除代码中的空格、注释和无效代码，并使用各种技术（例如变量重命名和函数替换）来压缩文件。

2.运行时：允许在运行时按需加载polyfill。

3. Tree Shaking：Tree Shaking优化是指通过静态代码分析去除未使用的代码，最终减少打包代码的大小。

4. 图片格式：

*根据场景考虑是否可以使用最小webp格式。

*如果使用base64，图像尺寸将增大1/3倍。不使用base64 会导致多一个HTTP 请求。一般来说，不建议使用base64。

2. 如何拆解首屏加载的内容？

* 代码拆分：以vue项目为例，首页是一个单独的bundle

常量根=[

{

路径： \’/\’,

name:“房子”，

Component: ()=import(/* webpackChunkName: \”home\” */\’./views/HomeView.vue\’),

},

]

3. 如何权衡TCP 请求数量？

* Chrome 中同一源最多可同时运行6 个

2.追加列表时，不要对每一列单独执行appendChild，而是先保存所有列，然后再执行appendChild。

##### 回流和重绘

重排和重绘是浏览器渲染网页时执行的两个重要过程。

**Reflow/Reflow**也称为布局，是浏览器根据DOM树中的元素和CSS样式计算页面上每个元素的几何位置和大小的过程。这是一个相对昂贵的操作，需要浏览器重新计算元素的布局并重新绘制受影响的部分。

在以下情况下会触发回流：

* 添加、删除和修改DOM 元素

* 更改元素的位置和大小（包括宽度、高度、边距和填充）

* 改变元素的内容（文本、图像）

* 浏览器窗口大小变化

* 触发CSS 动画和过渡

* 计算一些属性的值

1. **offsetTop、offsetLeft、offsetWidth、offsetHeight**：读取这些属性将导致浏览器计算元素的布局，可能会导致回流。

2. **clientWidth、clientHeight**：读取这些属性会检索元素可见区域的宽度和高度，并且不会导致回流。

3. **scrollWidth、scrollHeight**：读取这些属性会检索元素内容区域的宽度和高度，并且不会导致回流。

4. **getComputedStyle()**：必须调用此方法来检索元素的计算样式，这可能会触发回流。

5. **getBoundingClientRect()**：调用该方法会检索元素在视口中的位置和大小信息，并触发回流。

6. **offsetParent**：读取该属性将触发回流。

7. **clientTop、clientLeft**：读取这些属性会检索元素内边距的大小，并且不会触发重排。

8. **offsetParent**：读取该属性将触发回流。

当发生回流时，浏览器从渲染树的根节点开始，递归遍历整个渲染树，以确定每个元素的几何位置和大小。然后浏览器重新绘制受影响的部分并更新布局。

**重画**是指浏览器根据计算出的元素样式重新绘制页面，而不影响元素的几何位置或大小的过程。重绘是一个相对较快的操作，因为它仅更新元素的视觉样式。

重绘在以下情况下触发：

* 更改元素颜色、背景颜色、文字颜色等显示样式

* 切换CSS类名

*使用CSS伪类（:hover、active）等。

当发生重绘时，浏览器会重绘受影响的部分，但不会重新计算元素的布局。

频繁的回流和重绘会消耗大量的计算资源，并可能导致性能问题。优化网页性能的关键是尽量减少回流和重绘的次数。

为了减少回流和重绘的次数，您可以采用以下优化策略：

*避免多次加载上述属性，在使用它们之前缓存它们。

* 将样式更改集中在一次操作中，并使用CSS 类名切换批量更改样式。

* 使用CSS3 变换属性进行置换、缩放和旋转，无需重排。

* 使用`requestAnimationFrame`方法更新动画可以优化性能并避免不必要的回流和重绘。

* 使用文档片段（`DocumentFragment`）进行DOM 操作，以减少对实际文档的更改。

CSS 转换属性不会导致重排的主要原因是它们对元素执行视觉转换，而不影响其在布局上的位置或大小。具体原因如下。

1. **硬件加速**：当应用变换属性时，浏览器将元素视为一个单独的图层，并通过硬件加速处理该图层的变换操作。不会触发回流，因为硬件加速是在图层级别进行的，不会影响其他元素的布局。

2. **单独的图层**：在某些情况下，浏览器会自动将某些元素创建为单独的图层，例如使用3D 变换、透明动画、嵌套CSS 动画等时。这些独立层还可以受益于硬件加速，而不会导致回流。

3. **位置不变**：Transformation 属性转换不会改变元素在文档流中的位置；元素的原始位置保持不变。因此，当对元素应用变换时，不需要更改布局来适应变换后的状态。

注意，虽然转换不会引起回流，但仍然会触发重绘。由于元素的显示样式发生变化，浏览器必须重绘元素以反映变化。但相比之下

于回流，重绘的开销要小得多。
因此，对于需要对元素进行平移、旋转、缩放等视觉上的变换操作，使用 CSS 的 transform 属性是一种推荐的做法，可以获得更好的性能和流畅的动画效果，同时避免回流的影响。
 
## 最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

#以上关于【面试题】前端面试复习6的相关内容来源网络仅供参考，相关信息请以官方公告为准！