复习一下构建工具，淘天集团前端一面
1. Webpack的构建原理
Webpack的构建原理就是将多个模块打包成一个或多个静态资源文件的过程。它的构建原理可以简单概括为以下几个步骤：
- 入口点：Webpack通过指定一个或多个入口点来启动构建过程。每个入口点表示一个模块，可以是JavaScript、CSS、图片等任何类型的文件。
- 模块解析：Webpack会根据入口点，递归地解析所有依赖的模块。它会分析模块之间的依赖关系，并构建一个依赖关系图。
- 加载器：Webpack使用加载器来处理不同类型的文件。加载器允许你在打包过程中对模块进行转换和处理。例如，你可以使用Babel加载器将ES6代码转换为ES5代码，或者使用CSS加载器处理CSS文件。
- 插件：Webpack还提供了插件系统，可以用于扩展其功能。插件可以用于优化打包结果、压缩代码、生成HTML文件等。你可以根据需要选择和配置各种插件。
- 资源输出：通过配置输出选项，Webpack会将打包后的结果输出到指定的目录。你可以选择输出为一个或多个文件，也可以选择输出为内存中的虚拟文件。
- 构建优化：Webpack会根据配置进行一系列的构建优化。例如，它可以按需加载模块，减少打包结果的体积；还可以使用缓存机制，加快再次构建的速度。
2. 如何优化Webpack？
- 升级 webpack 版本，3升4，实测是提升了几十秒的打包速度
- 使用Tree Shaking和Scope Hoisting来减少代码体积和模块构建时间，其中Tree Shaking可以去除未使用的代码，而Scope Hoisting可以将模块内的代码尽量合并到一个函数（单一作用域）中，以减少函数声明和闭包的数量。
- 使用splitChunksPlugin插件来将公共代码抽离成单独的chunk，以减少代码重复和提高缓存命中率。
- 合理配置resolve.alias和resolve.extensions选项来减少Webpack查找文件的时间。
- 针对生产环境，可以开启代码压缩以及多进程并行处理等优化方式，以减少构建时间和服务器负载。
- 使用DLLPlugin和DllReferencePlugin来预先编译一些稳定不变的代码，以减少每次构建的时间。
- 使用HappyPack来启用多线程并发处理，以加速代码构建和增强开发体验。
- 对于图片、字体等资源文件，可以通过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、创建渲染树、布局、绘制以及合成与显示。
- 解析 HTML：浏览器使用解析器将 HTML 代码解析成 DOM（文档对象模型）树。DOM 树是一个以层级结构表示 HTML 文档的对象树，它将 HTML 元素及其属性、文本内容等表示为节点，这些节点之间具有父子关系。
- 构建 CSSOM：在解析 HTML 的同时，浏览器还会构建 CSSOM（CSS 对象模型）。CSSOM 是表示 CSS 样式信息的对象树，它包含了样式规则、选择器和对应的属性值。浏览器会根据 CSSOM 将样式应用到 DOM 树上的相应元素。
- 创建渲染树：浏览器将 DOM 树和 CSSOM 结合起来，创建渲染树（Render Tree）。渲染树只包含需要显示的元素，例如可见的 HTML 元素和应用了样式的元素，而不包含隐藏的元素或不可见的元素（如
display: none）。 - 布局（回流）：浏览器会计算每个渲染树节点的几何信息，例如位置、大小等，并确定它们在屏幕上的精确位置。这个过程称为布局或回流（Layout or Reflow）。当布局发生变化时，浏览器需要重新计算并更新渲染树和页面的几何信息。
- 绘制：浏览器使用渲染树和布局信息进行绘制，将每个节点转换为屏幕上的实际像素。这个过程称为绘制（Painting）。
- 合成与显示：浏览器会将绘制好的图像发送给 GPU（图形处理单元），由 GPU 加速合成并显示在屏幕上。GPU 能够更高效地处理图像合成，提高页面的渲染性能。
5. v8垃圾回收处理机制
V8 的垃圾回收机制主要基于以下两个原则：
- 分代回收：V8 将内存对象分为几个不同的代（Generation），通常是新生代（New Generation）和老生代（Old Generation）。新生代包含较短寿命的对象，而老生代包含较长寿命的对象。由于大多数对象在短时间内就会变得不可达，因此将对象分类可以更有效地进行垃圾回收。
- 停止-复制式垃圾回收：V8 使用了一种称为停止-复制（Stop-The-World Copying）的垃圾回收算法。这种算法将堆内存分为两个空间，一个是活动空间（From Space），一个是空闲空间（To Space）。在垃圾回收过程中，V8 会先暂停 JavaScript 执行，然后将所有还存活的对象从活动空间复制到空闲空间，并且对它们进行整理和压缩。最后，活动空间和空闲空间的角色会互换，完成垃圾回收过程。
wx公众号：大厂前端面试真题，免费查看百余篇大厂前端面试真题！
6. 跨域问题怎么产生，如何解决？
跨域问题是因为浏览器的同源策略产生的。 同源指的是两个 URL 的协议、主机和端口号都相同。
常用的跨域解决方案包括：
- CORS：跨域资源共享（Cross-Origin Resource Sharing），是一种允许浏览器向跨域服务器发送 Ajax 请求的机制，支持现代浏览器，服务器端需要设置 Access-Control-Allow-Origin 头信息，指定允许的源或通配符，从而实现跨域请求。
- 代理：在同源页面内部发送 AJAX 请求到同域服务器，由服务器代理转发请求到跨域服务器，最后再将结果返回给同源页面。
7. 浏览器中的performance监控工具怎么用的？
- 打开谷歌浏览器并导航到你要进行性能分析的网页。
- 按下 F12 键或右键单击页面上的任何位置并选择 "检查"（Inspect）来打开开发者工具。
- 在开发者工具中，点击顶部的 "Performance" 选项卡。
- 点击 "Record" 按钮开始记录性能数据。在记录期间，你可以进行一些与性能相关的操作，例如加载网页、执行某些用户操作等。
- 当你完成了需要分析的操作后，点击 "Stop" 按钮停止记录。
- 分析性能数据。在 Performance 面板上，你将看到一个时间轴，显示了从记录开始到结束期间的各种事件和活动。你可以使用鼠标滚轮缩放时间轴，以便更详细地查看。
- 你可以通过不同的图表和面板来查看详细的性能数据，例如 CPU 使用情况、网络请求、内存使用等。点击相应的标签和图表可以查看更多信息。
- 根据分析结果，你可以识别出潜在的性能问题，并采取相应的优化措施。例如，你可以查看长时间执行的 JavaScript 代码、大量的网络请求或内存泄漏等。
wx公众号：大厂前端面试真题，免费查看百余篇大厂前端面试真题！
