复习一下构建工具，淘天集团前端一面

1. Webpack的构建原理

Webpack的构建原理就是将多个模块打包成一个或多个静态资源文件的过程。它的构建原理可以简单概括为以下几个步骤：

1. 入口点：Webpack通过指定一个或多个入口点来启动构建过程。每个入口点表示一个模块，可以是JavaScript、CSS、图片等任何类型的文件。
2. 模块解析：Webpack会根据入口点，递归地解析所有依赖的模块。它会分析模块之间的依赖关系，并构建一个依赖关系图。
3. 加载器：Webpack使用加载器来处理不同类型的文件。加载器允许你在打包过程中对模块进行转换和处理。例如，你可以使用Babel加载器将ES6代码转换为ES5代码，或者使用CSS加载器处理CSS文件。
4. 插件：Webpack还提供了插件系统，可以用于扩展其功能。插件可以用于优化打包结果、压缩代码、生成HTML文件等。你可以根据需要选择和配置各种插件。
5. 资源输出：通过配置输出选项，Webpack会将打包后的结果输出到指定的目录。你可以选择输出为一个或多个文件，也可以选择输出为内存中的虚拟文件。
6. 构建优化：Webpack会根据配置进行一系列的构建优化。例如，它可以按需加载模块，减少打包结果的体积；还可以使用缓存机制，加快再次构建的速度。

2. 如何优化Webpack？

1. 升级 webpack 版本，3升4，实测是提升了几十秒的打包速度
2. 使用Tree Shaking和Scope Hoisting来减少代码体积和模块构建时间，其中Tree Shaking可以去除未使用的代码，而Scope Hoisting可以将模块内的代码尽量合并到一个函数（单一作用域）中，以减少函数声明和闭包的数量。
3. 使用splitChunksPlugin插件来将公共代码抽离成单独的chunk，以减少代码重复和提高缓存命中率。
4. 合理配置resolve.alias和resolve.extensions选项来减少Webpack查找文件的时间。
5. 针对生产环境，可以开启代码压缩以及多进程并行处理等优化方式，以减少构建时间和服务器负载。
6. 使用DLLPlugin和DllReferencePlugin来预先编译一些稳定不变的代码，以减少每次构建的时间。
7. 使用HappyPack来启用多线程并发处理，以加速代码构建和增强开发体验。
8. 对于图片、字体等资源文件，可以通过url-loader和file-loader等loader设置较小的limit值，将文件转换成base64编码的字符串内嵌在js文件中，以减少http请求次数。

3. Webpack 和 Vite相比，Vite有哪些优势？

• 优点：
• 快速的冷启动: 采用No Bundle和esbuild预构建，速度远快于Webpack
• 高效的热更新：基于ESM实现，同时利用HTTP头来加速整个页面的重新加载，增加缓存策略
• 真正的按需加载: 基于浏览器ESM的支持，实现真正的按需加载

• 缺点
• 生态：目前Vite的生态不如Webapck，不过我觉得生态也只是时间上的问题。
• 生产环境由于esbuild对css和代码分割不友好使用Rollup进行打包

4. 从浏览器拿到Html树到渲染是什么样的？

从浏览器拿到 HTML 树到最终渲染的过程包括解析 HTML、构建 CSSOM、创建渲染树、布局、绘制以及合成与显示。

1. 解析 HTML：浏览器使用解析器将 HTML 代码解析成 DOM（文档对象模型）树。DOM 树是一个以层级结构表示 HTML 文档的对象树，它将 HTML 元素及其属性、文本内容等表示为节点，这些节点之间具有父子关系。
2. 构建 CSSOM：在解析 HTML 的同时，浏览器还会构建 CSSOM（CSS 对象模型）。CSSOM 是表示 CSS 样式信息的对象树，它包含了样式规则、选择器和对应的属性值。浏览器会根据 CSSOM 将样式应用到 DOM 树上的相应元素。
3. 创建渲染树：浏览器将 DOM 树和 CSSOM 结合起来，创建渲染树（Render Tree）。渲染树只包含需要显示的元素，例如可见的 HTML 元素和应用了样式的元素，而不包含隐藏的元素或不可见的元素（如display: none）。
4. 布局（回流）：浏览器会计算每个渲染树节点的几何信息，例如位置、大小等，并确定它们在屏幕上的精确位置。这个过程称为布局或回流（Layout or Reflow）。当布局发生变化时，浏览器需要重新计算并更新渲染树和页面的几何信息。
5. 绘制：浏览器使用渲染树和布局信息进行绘制，将每个节点转换为屏幕上的实际像素。这个过程称为绘制（Painting）。
6. 合成与显示：浏览器会将绘制好的图像发送给 GPU（图形处理单元），由 GPU 加速合成并显示在屏幕上。GPU 能够更高效地处理图像合成，提高页面的渲染性能。

5. v8垃圾回收处理机制

V8 的垃圾回收机制主要基于以下两个原则：

1. 分代回收：V8 将内存对象分为几个不同的代（Generation），通常是新生代（New Generation）和老生代（Old Generation）。新生代包含较短寿命的对象，而老生代包含较长寿命的对象。由于大多数对象在短时间内就会变得不可达，因此将对象分类可以更有效地进行垃圾回收。
2. 停止-复制式垃圾回收：V8 使用了一种称为停止-复制（Stop-The-World Copying）的垃圾回收算法。这种算法将堆内存分为两个空间，一个是活动空间（From Space），一个是空闲空间（To Space）。在垃圾回收过程中，V8 会先暂停 JavaScript 执行，然后将所有还存活的对象从活动空间复制到空闲空间，并且对它们进行整理和压缩。最后，活动空间和空闲空间的角色会互换，完成垃圾回收过程。

wx公众号：大厂前端面试真题，免费查看百余篇大厂前端面试真题！

6. 跨域问题怎么产生，如何解决？

跨域问题是因为浏览器的同源策略产生的。 同源指的是两个 URL 的协议、主机和端口号都相同。

常用的跨域解决方案包括：

1. CORS：跨域资源共享（Cross-Origin Resource Sharing），是一种允许浏览器向跨域服务器发送 Ajax 请求的机制，支持现代浏览器，服务器端需要设置 Access-Control-Allow-Origin 头信息，指定允许的源或通配符，从而实现跨域请求。
2. 代理：在同源页面内部发送 AJAX 请求到同域服务器，由服务器代理转发请求到跨域服务器，最后再将结果返回给同源页面。

7. 浏览器中的performance监控工具怎么用的？

1. 打开谷歌浏览器并导航到你要进行性能分析的网页。
2. 按下 F12 键或右键单击页面上的任何位置并选择 "检查"（Inspect）来打开开发者工具。
3. 在开发者工具中，点击顶部的 "Performance" 选项卡。
4. 点击 "Record" 按钮开始记录性能数据。在记录期间，你可以进行一些与性能相关的操作，例如加载网页、执行某些用户操作等。
5. 当你完成了需要分析的操作后，点击 "Stop" 按钮停止记录。
6. 分析性能数据。在 Performance 面板上，你将看到一个时间轴，显示了从记录开始到结束期间的各种事件和活动。你可以使用鼠标滚轮缩放时间轴，以便更详细地查看。
7. 你可以通过不同的图表和面板来查看详细的性能数据，例如 CPU 使用情况、网络请求、内存使用等。点击相应的标签和图表可以查看更多信息。
8. 根据分析结果，你可以识别出潜在的性能问题，并采取相应的优化措施。例如，你可以查看长时间执行的 JavaScript 代码、大量的网络请求或内存泄漏等。

wx公众号：大厂前端面试真题，免费查看百余篇大厂前端面试真题！