前端面试（性能优化，网络通信）篇

没救了的前端cv工程师
92 阅读30分钟

1. 性能优化

1. 前端页面性能如何优化？

  1. 减少 HTTP 请求数量：将多个小文件合并成一个大文件，使用 CSS Sprites 来减少图像的请求次数，使用字体图标代替图片，避免重复的请求。
  2. 压缩文件：使用 Gzip、Deflate 等压缩算法对文件进行压缩，减少文件大小，提高加载速度。
  3. 减少 DOM 操作：减少对 DOM 树的操作，可以使用 documentFragment 等方式来优化 DOM 操作。
  4. 避免重绘和重排：尽量减少页面的重绘和重排，可以使用 CSS3 动画，将动画效果交给 GPU 处理，避免对 CPU 的影响。
  5. 使用缓存：使用浏览器缓存和 CDN 缓存来减少请求时间和响应时间，提高页面加载速度。
  6. 延迟加载：对于页面上不必要立即加载的内容，可以使用延迟加载技术，如懒加载、按需加载等。
  7. 减少 JavaScript 的执行时间：JavaScript 的执行会阻塞页面的渲染，可以将 JavaScript 代码放在底部，使用异步加载等方式来减少 JavaScript 的执行时间。
  8. 使用 HTTP/2：HTTP/2 支持多路复用，可以实现并行请求，提高页面加载速度。
  9. 去除不必要的插件和库：去除页面中不必要的插件和库，只保留必要的功能，可以减少页面加载时间，提高性能。
  10. 使用性能分析工具：使用性能分析工具来分析页面的性能瓶颈，进行针对性的优化，如 Chrome DevTools、Lighthouse 等。

2. 讲讲回流和重绘的区别，如何避免回流和重绘？

回流和重绘是浏览器在重新渲染页面时会进行的操作，它们的区别如下：
  • 回流（reflow）：当页面中的元素发生布局或几何属性发生变化时，会触发回流操作，浏览器需要重新计算元素的布局信息，然后重新排列页面的元素。
  • 重绘（repaint）：当页面中的元素的样式发生变化，但不影响它在布局上的位置时，会触发重绘操作，浏览器只需要重新绘制元素的样式，不需要重新计算元素的布局信息。
避免回流和重绘的方法如下：
  • 使用 CSS3 动画：使用 CSS3 动画可以使用 GPU 处理，不会触发回流和重绘。
  • 批量操作 DOM：避免频繁操作 DOM，可以将多次 DOM 操作合并成一次操作，减少回流次数。
  • 避免频繁修改样式：避免频繁修改元素的样式，可以将样式合并成一个 class，然后一次性修改元素的 class 名称。
  • 避免使用 table 布局：table 布局比较复杂，每次修改都会触发回流。
  • 避免频繁查询布局信息：频繁查询元素的布局信息，也会触发回流，可以将查询的结果缓存起来，避免重复查询。

2. 网络通信

1. 说说从输入url到页面展示出来的整个过程。

从输入 URL 到页面展示出来，整个过程可以分为以下几个步骤：

1. DNS 解析

在用户输入 URL 后，浏览器首先会进行 DNS 解析，将域名解析为对应的 IP 地址。如果 DNS 缓存中存在该域名的 IP 地址，则直接返回 IP 地址；否则会向 DNS 服务器发起请求，获取 IP 地址。

2. 建立 TCP 连接

在获得 IP 地址后，浏览器会向服务器发起 TCP 连接请求。TCP 三次握手的过程如下：

a. 客户端向服务器发送 SYN 报文，表示请求建立连接。

b. 服务器返回 SYN+ACK 报文，表示同意建立连接。

c. 客户端再次向服务器发送 ACK 报文，表示连接建立成功。

3. 发送 HTTP 请求

TCP 连接建立成功后，浏览器会向服务器发送 HTTP 请求，请求相应的资源文件。

4. 服务器响应请求

服务器收到请求后，会返回相应的资源文件，响应报文包括状态码、响应头和响应体等信息。

5. 解析 HTML 文件

浏览器收到响应后，会解析 HTML 文件，构建 DOM 树和 CSS 样式树。

6. 构建页面渲染树

浏览器根据 DOM 树和 CSS 样式树构建页面渲染树，确定每个节点的位置和大小等信息。

7. 页面渲染

浏览器根据页面渲染树对页面进行渲染，将页面呈现给用户。

整个过程中，DNS 解析、建立 TCP 连接和发送 HTTP 请求都需要一定的时间，而浏览器的解析和渲染也需要一定的时间。因此，页面的加载速度受到多个因素的影响，如网络带宽、服务器响应速度、资源文件大小、浏览器解析和渲染速度等。为了提高页面加载速度，可以采用一些优化策略，如压缩资源文件、使用 CDN 加速、利用缓存机制等。

2. 什么是跨域？为什么会出现跨域？如何解决跨域问题？jsonp原理 是什么？

跨域是指在浏览器中，当一个 Web 应用程序在访问另一个域名下的资源时，就会发生跨域。出现跨域问题的原因是浏览器的同源策略，即限制了一个域名下的 JavaScript 无法访问另一个域名下的资源。

同源策略的限制包括：

  • 协议必须相同
  • 域名必须相同
  • 端口号必须相同

跨域问题可以通过以下方式解决：

  1. JSONP（JSON with Padding）：通过动态创建 script 标签，以 GET 请求的方式获取 JSON 数据，数据会被包含在回调函数中返回，利用 script 标签的跨域特性，从而实现跨域请求。
  2. CORS（Cross-Origin Resource Sharing）：服务器端设置 Access-Control-Allow-Origin 响应头，允许指定的域名跨域访问资源。
  3. 代理：通过在同一域名下的服务器端转发请求，实现跨域请求。
  4. WebSocket：WebSocket 协议不受同源策略限制，可以通过 WebSocket 进行跨域通信。

JSONP 的实现原理是利用 script 标签的特性，将请求的数据包装在回调函数中返回给客户端。客户端动态创建一个 script 标签，src 属性设置为请求地址，并在 URL 中添加一个回调函数的参数名和回调函数的名称。服务器端返回的数据会被包含在回调函数中，客户端通过回调函数来获取数据。

例如，客户端请求：

<script src="http://example.com/data?callback=myCallback"></script>

服务器端返回：

myCallback({"name": "Tom", "age": 18});

客户端定义回调函数：

function myCallback(data) {
  console.log(data.name); // 输出 "Tom"
}

综上所述，跨域问题是浏览器的同源策略所导致的，可以通过 JSONP、CORS、代理、WebSocket 等方式来解决跨域问题。其中，JSONP 利用 script 标签的跨域特性，动态创建 script 标签，从而实现跨域请求。

3. http各版本的改进都是什么？

HTTP 是超文本传输协议，目前主要使用的是 HTTP/1.1 和 HTTP/2。下面是各版本的改进：

  1. HTTP/0.9：最初版本的 HTTP，只支持 ASCII 码，只能传输纯文本的 HTML 文档。
  2. HTTP/1.0：支持多种数据类型，如图片、视频等，支持请求头和响应头，支持状态码和缓存等特性。
  3. HTTP/1.1：引入了持久连接（Keep-Alive），可以在一个连接中传输多个请求和响应，减少了连接建立和关闭的开销，同时支持管道化（Pipelining）请求，可以同时发送多个请求，提高了传输效率。还引入了分块传输编码（Chunked Transfer Encoding）和压缩（Gzip、Deflate）等特性，提高了传输效率和带宽利用率。
  4. HTTP/2：采用二进制格式传输数据，而非文本格式，减少了传输数据的大小。引入了头部压缩（Header Compression）技术，减少了头部信息的传输，提高了传输效率。还支持多路复用（Multiplexing），可以在一个连接中同时传输多个请求和响应，提高了传输效率。还支持服务器推送（Server Push）技术，可以在客户端请求之前，将一些可能需要的资源预先推送到客户端，提高客户端的加载速度。

综上所述，HTTP 在不断地演进和改进，从最初的 HTTP/0.9，到 HTTP/1.0、HTTP/1.1 和 HTTP/2，不断地提高了传输效率、带宽利用率和用户体验。

4. https原理是什么？为什么可以保证安全性？

HTTPS（Hypertext Transfer Protocol Secure）是基于 HTTP 协议之上的安全通信协议，它的安全性主要基于以下两个方面：

1. SSL/TLS 协议

HTTPS 使用 SSL/TLS 协议来加密传输数据。SSL/TLS 协议是一种公钥加密和私钥解密的协议，通过使用证书来验证通信双方的身份，从而保证通信的安全性。具体而言，SSL/TLS 协议的工作流程如下：

  • 客户端向服务器端发送一个连接请求，请求建立 SSL/TLS 连接。
  • 服务器端向客户端发送一个公钥证书，该证书中包含了服务端的公钥。
  • 客户端验证服务器端的公钥证书是否合法，如果合法，则生成一个随机的对称密钥，使用服务端的公钥进行加密，然后将加密后的密钥发送给服务端。
  • 服务端使用自己的私钥对客户端发送的密钥进行解密，获取对称密钥。
  • 双方使用对称密钥进行加密和解密传输的数据。
2. 数字证书

HTTPS 中使用数字证书来验证服务器端和客户端的身份。数字证书是由第三方机构（如 CA 机构）颁发的，证书中包含了服务器端或客户端的公钥，以及该公钥的拥有者信息和证书机构信息等。客户端在与服务器端建立 SSL/TLS 连接时，会验证服务器端的数字证书是否合法。如果证书合法，则可以安全地与服务器端通信。

综上所述，HTTPS 的安全性基于 SSL/TLS 协议和数字证书。通过使用 SSL/TLS 协议加密传输数据，以及使用数字证书验证通信双方的身份，可以有效地保护通信过程中的数据安全和通信的可信性。

5. http常见状态码有哪些？

HTTP（Hypertext Transfer Protocol）定义了多种状态码，常见的状态码包括：

  1. 1xx（信息响应）：表示请求已被服务器接收，继续处理。

  2. 2xx（成功）：表示请求已成功被服务器接收、理解、并接受。

    • 200 OK：表示请求已成功，服务器返回了请求的资源。
    • 201 Created：表示请求已成功，并且服务器创建了新的资源。
    • 204 No Content：表示请求已成功，但服务器没有返回任何内容。

  3. 3xx（重定向）：表示需要客户端进一步操作才能完成请求。

    • 301 Moved Permanently：表示请求的资源已被永久移动到新的位置。
    • 302 Found：表示请求的资源临时被移动到新的位置。
    • 304 Not Modified：表示客户端请求的资源未被修改，可以直接使用缓存的版本。

  4. 4xx（客户端错误）：表示客户端发送的请求有误，无法被服务器处理。

    • 400 Bad Request：表示请求的语法有误或者请求无法被服务器理解。
    • 401 Unauthorized：表示未授权，需要身份验证。
    • 403 Forbidden：表示访问被禁止，没有权限访问请求的资源。
    • 404 Not Found：表示请求的资源不存在。

  5. 5xx（服务器错误）：表示服务器在处理请求时发生了错误。

    • 500 Internal Server Error：表示服务器内部错误。
    • 502 Bad Gateway：表示服务器作为网关或者代理时收到了无效的响应。
    • 503 Service Unavailable：表示服务器暂时无法处理请求，一般是因为服务器过载或维护中。

以上是常见的 HTTP 状态码，不同的状态码表示了不同的请求处理状态，客户端可以根据状态码来判断请求是否成功，并做出相应的处理。

6. http有哪些方法？

HTTP（Hypertext Transfer Protocol）定义了多种请求方法，常见的 HTTP 方法包括：

  1. GET：获取资源，一般用于请求服务器返回某个资源的内容，可以附带请求参数，请求参数会被拼接在 URL 后面。
  2. POST：提交数据，一般用于向服务器提交数据，可以提交表单数据、上传文件等，请求参数会包含在请求体中。
  3. PUT：更新资源，一般用于向服务器更新某个资源的内容，请求参数会包含在请求体中。
  4. DELETE：删除资源，一般用于向服务器删除某个资源，请求参数会包含在 URL 中。
  5. HEAD：获取资源头部信息，一般用于请求服务器返回某个资源的头部信息，但不返回具体内容。
  6. OPTIONS：获取资源支持的请求方法，一般用于请求服务器返回某个资源支持的请求方法列表。
  7. TRACE：追踪请求路径，一般用于请求服务器返回该请求的路径信息，主要用于调试和诊断。
  8. CONNECT：建立隧道连接，一般用于建立与服务器的隧道连接，用于加密通信等。

其中，GET 和 POST 是最常用的两种方法，其他方法的使用频率较低。

7. get和post区别是什么？

在 HTTP 协议中，GET 和 POST 是两种最常用的请求方法，它们有以下区别：

  1. 参数传递方式不同：GET 请求的参数是通过 URL 参数传递的，而 POST 请求的参数是通过请求体传递的。
  2. 请求参数长度限制不同：GET 请求的参数长度有限制，一般是 2KB 左右，而 POST 请求的参数长度没有限制，但是服务器会对参数长度进行限制。
  3. 安全性不同：GET 请求的参数会出现在 URL 中，可以被浏览器缓存、历史记录等收集和存储，安全性较低，而 POST 请求的参数不会出现在 URL 中，安全性更高。
  4. 缓存机制不同：GET 请求可以被浏览器缓存，因为它是幂等的，请求多次返回结果相同，而 POST 请求不能被浏览器缓存，因为它会改变服务器状态。
  5. 适用场景不同：GET 适用于请求数据，一般用于获取资源；POST 适用于提交数据，一般用于更新资源、添加资源、删除资源等操作。

总的来说，GET 和 POST 的本质区别在于它们的请求方式不同，GET 是从服务器请求数据，而 POST 是向服务器提交数据。因此，在实际应用中应根据具体情况选择适合的请求方式。

8. 讲讲http缓存机制

HTTP 缓存机制是指浏览器缓存 HTTP 请求的响应结果，以减少服务器负载和提高网站性能。HTTP 缓存机制分为强缓存和协商缓存两种方式。

1. 强缓存

强缓存是指在一定时间内，浏览器不会向服务器发送请求，而是直接从本地缓存中读取数据。强缓存的实现是通过在 HTTP 响应头中添加 Expires 和 Cache-Control 字段来实现的。

  • Expires：表示缓存过期时间，是一个绝对时间，由服务器返回。

  • Cache-Control：表示缓存控制，可以设置多个指令，常见指令如下：

    • public：表示响应可以被任何中间节点缓存。
    • private：表示响应只能被浏览器缓存。
    • max-age：表示缓存过期时间，是一个相对时间，单位是秒。
2. 协商缓存

协商缓存是指浏览器会向服务器发送请求，但是服务器会告诉浏览器是否需要更新缓存。协商缓存的实现是通过在 HTTP 响应头中添加 Etag 和 Last-Modified 字段来实现的。

  • Etag：表示资源的唯一标识符，服务器通过计算资源的哈希值来生成 Etag。
  • Last-Modified：表示资源的最后修改时间，由服务器返回。

浏览器会在下一次请求时将 Etag 和 Last-Modified 传递给服务器，服务器会根据这些信息判断资源是否需要更新。如果资源没有更新，则返回 304 Not Modified 状态码，浏览器会从本地缓存中读取数据，否则返回新的资源。

综上所述，HTTP 缓存机制可以显著提高网站性能和用户体验，减轻服务器负担。在实际应用中，应根据具体情况选择合适的缓存策略。

9. CDN是什么？它的原理是什么？

CDN（Content Delivery Network）即内容分发网络，是一种分布式网络应用系统，通过部署在全球各地的服务器，将用户请求的内容快速地分发到最接近用户的节点上，从而提高用户访问网站的速度和体验。

CDN 的工作原理如下：

  1. 用户向 CDN 内容服务器发起请求。
  2. CDN 内容服务器根据用户 IP 地址，选择距离用户最近的节点服务器。
  3. 节点服务器向 CDN 源站服务器发起请求，获取用户请求的资源。
  4. CDN 源站服务器将资源返回给节点服务器。
  5. 节点服务器缓存资源，并将资源返回给用户。

CDN 的优点如下：

  1. 加速网站访问速度，提高用户体验。
  2. 减轻源站服务器压力，提高网站的稳定性和可靠性。
  3. 提供全球范围内的服务，保证用户可以随时随地访问网站。
  4. 支持海量数据存储和传输，可以为网站提供更多的增值服务。
  5. 可以有效地抵御恶意攻击和 DDoS 攻击，提高网站的安全性。

10. 讲讲304协商缓存过程

HTTP 304 状态码表示 Not Modified，用于协商缓存。当客户端向服务器发送请求时，如果该资源已经缓存在客户端本地，客户端会向服务器发送一个条件请求（conditional request），即在请求头中携带 If-Modified-Since 或者 If-None-Match 字段，询问服务器该资源是否发生了改变。如果该资源没有发生改变，则服务器会返回 304 状态码和空的响应体，客户端会从本地缓存中读取该资源，否则服务器会返回新的资源。

协商缓存的过程如下：

  1. 客户端发起请求，请求头中携带 If-Modified-Since 或者 If-None-Match 字段，表示上一次请求的响应中返回的 Last-Modified 或 Etag 值。
  2. 服务器接收到请求，判断资源是否发生了改变。
  3. 如果资源没有发生改变，则服务器返回 304 状态码和空的响应体。
  4. 如果资源发生了改变，则服务器返回新的资源和相应的响应头，其中包括新的 Last-Modified 或 Etag 值。
  5. 客户端接收到响应，如果是 304 状态码，则从本地缓存中读取资源，否则更新本地缓存。

协商缓存的优点是可以减少网络流量和服务器负载，并且可以提高网站的性能和用户体验。

11. 浏览器有哪些缓存？localStorage、sessionStorage、cookie的、session的区别是什么？

浏览器中常见的缓存方式有四种，分别是：

  1. LocalStorage：本地存储，可以存储较大量的数据，数据不会随着请求发送到服务器端，而是永久存储在本地，除非手动清除或浏览器清除缓存。
  2. SessionStorage：会话存储，可以存储一定量的数据，数据只在当前会话期间内有效，关闭浏览器时数据会被清除。
  3. Cookie：存储在客户端的小型文本文件，可以存储一定量的数据，可以设置过期时间，数据会随着请求发送到服务器端，可以在服务器端进行修改，但是会影响每一次请求。
  4. Session：存储在服务器端的数据，可以存储较大量的数据，数据只在当前会话期间内有效，关闭浏览器时数据不会被清除，但是需要服务器端进行管理。

它们之间的区别如下：

  1. 存储容量：LocalStorage 和 SessionStorage 可以存储较大量的数据，Cookie 和 Session 存储容量相对较小。
  2. 存储位置：LocalStorage 和 SessionStorage 存储在客户端，Cookie 存储在客户端，Session 存储在服务器端。
  3. 数据传输：LocalStorage 和 SessionStorage 不会随着请求发送到服务器端，Cookie 会随着请求发送到服务器端，Session 需要在服务器端进行管理。
  4. 数据有效期：LocalStorage 和 Cookie 可以设置数据的有效期，SessionStorage 和 Session 只在当前会话期间内有效。

总的来说，LocalStorage 和 SessionStorage 适合存储较大量的数据，而 Cookie 和 Session 适合存储较小量的数据，根据需求和场景选择合适的缓存方式可以提高网站的性能和用户体验。

12. 讲讲TCP三次握手、四次挥手，为什么要三次握手、四次挥手？

TCP三次握手：

1.客户端发送SYN包（SYN=1，ACK=0）到服务器，请求建立连接。

2.服务器接收到SYN包，发送一个SYN+ACK包（SYN=1，ACK=1）回客户端。

3.客户端接收到SYN+ACK包，发送一个ACK包（ACK=1）回服务器，连接建立。

TCP四次挥手：

1.客户端发送一个FIN包（FIN=1）给服务器，请求关闭连接。

2.服务器接收到FIN包，发送一个ACK包（ACK=1）回客户端，表示收到关闭请求。

3.服务器发送一个FIN包（FIN=1）给客户端，请求关闭连接。

4.客户端接收到FIN包，发送一个ACK包（ACK=1）回服务器，表示收到关闭请求。

为什么要三次握手、四次挥手？

三次握手是为了确保连接双方都能够正常发送和接收数据，防止出现因网络延迟、丢包等问题导致的连接异常。

四次挥手是为了确保连接双方都能够正常关闭连接，防止出现因网络延迟、丢包等问题导致的连接无法关闭，从而造成资源浪费。

13. TCP和UDP区别是什么？

TCP（Transmission Control Protocol）和UDP（User Datagram Protocol）是互联网传输层协议中最常用的两种协议，它们之间的区别如下：

  1. 连接方式：TCP 是面向连接的协议，UDP 是面向无连接的协议。TCP 在传输数据前需要建立连接，传输完成后需要断开连接，而 UDP 不需要建立连接和断开连接，直接发送数据包。
  2. 传输可靠性：TCP 是可靠传输协议，UDP 是不可靠传输协议。TCP 通过校验和、确认应答、重传等机制保证数据传输的可靠性，而 UDP 没有这些机制，数据传输不可靠，可能会丢失或重复。
  3. 传输速度：UDP 比 TCP 快，因为 TCP 的可靠传输机制会影响传输速度。UDP 没有确认应答、重传等机制，数据传输更加高效。
  4. 传输大小：TCP 没有数据大小限制，UDP 有数据大小限制。TCP 可以传输任意大小的数据，而 UDP 的数据包大小有限制，最大为 65,507 字节。
  5. 应用场景：TCP 适用于要求可靠传输的应用场景，如文件传输、电子邮件、网页浏览等；UDP 适用于实时性要求高、数据传输不需要可靠性保证的应用场景，如视频直播、语音通话、在线游戏等。

总的来说，TCP 适用于需要可靠传输的应用场景，UDP 适用于实时性要求高、数据传输不需要可靠性保证的应用场景。

14. 进程与线程区别是什么？

进程（Process）和线程（Thread）是操作系统中的基本概念，它们有以下几点区别：

1.资源占用：进程是操作系统分配资源的基本单位，一个进程可以有多个线程。进程有独立的内存空间、文件句柄、全局变量等系统资源，而线程共享进程的资源。

2.调度：操作系统通过进程调度算法进行进程调度，进程之间是互相独立的，一个进程挂了不会影响其他进程。而线程是由进程调度算法进行调度的，线程之间共享进程的资源，线程挂了会影响进程中的其他线程。

3.通信：进程之间通信需要使用特定的通信机制（如管道、消息队列、共享内存等），而线程之间可以通过共享内存、信号量等方式进行通信，因为它们共享进程的资源。

4.并发性：多进程是并行执行的，多线程是并发执行的，线程之间的切换开销小，可以更高效地利用CPU资源。

5.安全性：进程之间的安全性更高，一个进程挂了不会影响其他进程。而线程之间共享进程的资源，如果一个线程挂了会影响其他线程，所以线程之间的安全性较低。

总之，进程和线程都是操作系统中的基本概念，具有不同的特点和应用场景，开发人员需要根据具体情况选择使用进程还是线程。

15. 网络攻击有哪些？如何防御？

网络攻击类型：

1.拒绝服务攻击（DoS/DDoS攻击）：攻击者通过发送大量的请求或数据包，使目标系统或网络资源不可用。

2.网络钓鱼攻击：攻击者通过伪装成合法的网站或邮件，骗取用户的个人信息或密码。

3.恶意代码攻击：攻击者通过植入恶意软件，窃取用户的信息或控制目标系统。

4.密码破解攻击：攻击者通过暴力破解或字典攻击，获取用户的密码信息。

5.中间人攻击：攻击者通过篡改网络通信，窃取用户的数据或信息。

网络攻击防御：

1.安装防火墙：防火墙能够限制非法的网络请求，保障网络安全。

2.使用VPN：VPN能够在公共网络上建立私人通道，保证通信的加密和安全。

3.使用强密码：使用复杂的密码，能够有效防止密码破解攻击。

4.更新软件和系统：及时更新软件和系统，能够修补安全漏洞，提高系统的安全性。

5.使用安全软件：安装杀毒软件、反间谍软件等安全软件，能够有效防止恶意代码攻击。

6.加强员工安全意识：加强员工的网络安全意识培训，提高员工的安全意识，能够有效防止网络钓鱼攻击和中间人攻击等。

3. 工程化

1. webpack性能优化有哪些方法？

Webpack是一个强大的模块打包器，但是在项目大、复杂的情况下，打包时间会变得非常慢，这时候需要对Webpack进行性能优化。以下是一些Webpack性能优化的方法：

1.使用最新版本的Webpack和相关插件，以获取更好的性能和更好的压缩率。

2.使用Tree Shaking技术，即只打包项目中实际使用的模块，减少代码冗余。

3.使用Code Splitting技术，即将代码拆分成多个小块，按需加载，提高页面加载速度。

4.使用DLLPlugin和CommonsChunkPlugin，将一些不经常变化的库文件（如react、jquery等）打包成单独的文件，提高打包速度。

5.使用HappyPack插件，将Webpack的loader执行过程放到子进程中，提高打包速度。

6.使用UglifyJSPlugin和ParallelUglifyPlugin插件，对代码进行压缩和混淆，提高运行速度。

7.使用Externals选项，将一些不需要打包的库文件（如jquery、lodash等）直接引用CDN，减少打包体积和提高加载速度。

8.使用缓存技术，如babel-loader的cacheDirectory选项、webpack的cache选项等，缓存已经打包过的文件，避免重复打包。

9.使用source-map选项，生成sourcemap文件，方便调试和代码压缩。

总之，Webpack性能优化需要结合实际项目进行，根据具体情况选用适合的技术和插件，以提高项目的打包速度和性能。

2. webpack的loader和plugin区别是什么？常用的plugin和loader有哪些？

Webpack 的 Loader 和 Plugin 都是用于对模块进行处理的工具，但它们的作用和使用方式有所不同。

1. Loader

Loader 是用于对模块中的代码进行转换和处理的工具，它可以将不同的文件类型转换成 Webpack 可以识别的模块，以便 Webpack 进行打包。常见的 Loader 有：

  • babel-loader：用于将 ES6/ES7/ES8 语法转换成 ES5 语法。
  • css-loader：用于处理 CSS 文件，支持模块化、压缩等功能。
  • style-loader：用于将 CSS 模块注入到 HTML 页面中。
  • file-loader/url-loader：用于处理图片等静态资源文件，将其转换成模块并输出。
  • vue-loader：用于处理 Vue 单文件组件。
2. Plugin

Plugin 是用于增强 Webpack 功能的工具，它可以在 Webpack 打包的不同阶段执行各种自定义的任务。常见的 Plugin 有：

  • HtmlWebpackPlugin：用于将打包生成的 JS、CSS 文件自动添加到 HTML 页面中。
  • CleanWebpackPlugin：用于清除打包生成的文件夹。
  • ExtractTextWebpackPlugin：用于将 CSS 代码抽离成单独的 CSS 文件。
  • UglifyJsPlugin：用于压缩 JS 代码。
  • HotModuleReplacementPlugin：用于实现热更新功能。

总的来说，Loader 是用于对模块进行转换和处理的工具，Plugin 则是用于增强 Webpack 功能的工具。常用的 Loader 包括 babel-loader、css-loader、file-loader/url-loader 等，常用的 Plugin 包括 HtmlWebpackPlugin、CleanWebpackPlugin、UglifyJsPlugin 等。

需要注意的是，Loader 和 Plugin 的使用都需要在 Webpack 配置文件中进行配置。在配置文件中，可以通过 module.rules 配置 Loader，通过 plugins 配置 Plugin。

3. webpack构建流程是什么？

Webpack 构建流程主要包括以下步骤：

  1. 解析配置文件：Webpack 会读取配置文件，并解析其中的配置项，以便后续使用。
  2. 解析入口文件：Webpack 会根据配置文件中的入口文件路径，找到入口文件，并从入口文件开始解析项目的依赖关系。
  3. 解析模块依赖：Webpack 会根据入口文件的依赖关系，递归解析出项目中的所有模块依赖，并构建成一个依赖关系图。
  4. 加载模块代码：Webpack 会根据模块的类型和配置项中的 loader，加载和处理模块的代码。
  5. 生成打包文件：Webpack 会将处理后的模块代码，根据配置项中的插件和打包策略，生成最终的打包文件。

在具体实现过程中，Webpack 会根据各个阶段的处理过程，生成对应的钩子函数，以便开发者在适当的时机，插入自己的处理逻辑，实现更加定制化的构建流程。

以上是Webpack 构建流程的主要步骤，简单来说，Webpack 会根据入口文件中的依赖关系，递归解析项目中的所有模块依赖，然后加载和处理模块的代码，最后生成最终的打包文件。

4. 讲讲tree-shaking原理。

Tree Shaking是一种用于减少打包体积的优化技术，它通过静态代码分析的方式，检测出源代码中未被引用的部分，并将其从最终的打包结果中剔除，以达到减少代码体积的目的。

Tree Shaking的原理基于ES6模块化规范中的静态引入和静态分析机制。在ES6模块化中，模块的导出和导入是静态的，即在编译时就可以确定模块的导出和导入关系，这为Tree Shaking提供了可能性。

当我们使用Webpack等打包工具进行打包时，Webpack会通过静态分析模块依赖关系，找出入口文件中所有被引用的模块，并将它们打包到最终的输出文件中。而对于未被引用的模块，Webpack会将其忽略，不会将其打包到最终的输出文件中。

Tree Shaking的实现过程中，Webpack会对每个JS模块进行静态分析，将没有被使用的代码标记为“无用代码”，然后在将代码打包成最终的输出文件时，将这些被标记为“无用代码”的部分去除。

需要注意的是，Tree Shaking只能检测ES6模块化中的代码，对于CommonJS和AMD规范中的代码，Tree Shaking不起作用。同时，一些动态引入的代码也不适合Tree Shaking，因为它们的引入关系只能在运行时确定。因此，在使用Tree Shaking时，需要注意代码的引入方式，避免使用不支持静态分析的引入方式。

总之，Tree Shaking的原理是基于ES6模块化规范中的静态引入和静态分析机制，通过静态分析模块依赖关系，找出未被引用的模块，从而减少最终输出文件的体积。

5. 输入npm run dev之后发生了什么

当我们在命令行输入npm run dev后，会执行npm命令的run子命令，然后执行package.json文件中scripts对象中的dev属性对应的脚本命令。

在执行dev脚本命令时，通常会通过webpack-dev-server等工具启动本地开发服务器，加载项目的入口文件，并根据指定的配置文件（如webpack.config.js）进行打包和编译，将打包后的文件输出到指定的目录。

在开发过程中，我们通常会启用一些自动化工具，如热更新、自动刷新等，这些工具会监测代码变化，然后自动重新编译和打包，将变化后的代码实时反映在浏览器中。

总之，npm run dev命令的作用是启动本地开发服务器，实时监测代码变化并自动编译和打包，提高开发效率和开发体验。

avatar
文章
阅读
粉丝