前端面试（争取日更版）（二）

目录

面试真题

一、vite和webpack相关知识

二、前端性能优化的常见策略

三、防抖和节流

四、箭头函数和普通函数的区别

五、服务器渲染（SSR）

总结

---

面试真题

笔者正在每天争分夺秒准备着前端的面试中，这个系列是笔者每天看牛客网总结出来的各个前端大厂面试真题（主要会涉及到html，css，js，vue，计算机网络等前端必备知识）

---

一、vite和webpack相关知识

Vite 是一个基于 ES Module 的快速开发工具，它利用浏览器原生的 ES Module 支持来实现快速的开发和热更新。其工作原理可以简述如下：

1. 快速开发服务器（Dev Server）： 在开发模式下，Vite 启动一个快速开发服务器，用于提供开发环境。当浏览器请求一个模块时，Vite 会拦截这个请求，分析并编译对应的源代码，然后将编译后的结果返回给浏览器。这个过程中，Vite 利用浏览器原生支持的 ES Module 特性，避免了传统打包工具中需要将所有模块打包成一个或多个文件的过程，从而实现了更快的响应速度。

2. 按需编译（On-Demand Compilation）： Vite 只编译当前需要的模块，而不是像传统打包工具一样一次性将所有模块都编译打包。这样做的好处是，可以极大地提高开发过程中的编译速度，特别是在大型项目中，只编译当前修改的模块，而不是整个项目。（有点懒加载的味道）

3. 热模块更新（HMR，Hot Module Replacement）： Vite 支持热模块更新，当文件发生改变时，它会在不刷新页面的情况下，实时将新的模块代码推送到浏览器，从而使开发者能够立即看到修改后的效果。（有点局部刷新的味道）

4. 生产构建（Production Build）： 在生产环境下，Vite 会执行一次完整的构建过程，将所有的模块编译打包成适合部署的静态文件。这个过程会将代码进行压缩、合并，并且进行一些优化，以提高网页加载性能。

总的来说，Vite 的工作原理是利用浏览器原生的 ES Module 特性，在开发过程中实现按需编译和热模块更新，从而提供了更快的开发体验和更高的开发效率。

其实简单来说就是，传统的webpack老大哥是开头疯狂消耗浪费时间，把全部的都加载了一遍，后面页面切换的时候就很爽，但是如果页面比较大的话，就很不划算，因为很多页面，你首次全部加载了的话，后面不一定会使用到。老大哥在修改方面也不是热模块更新，而是把全部页面更新一遍，这种就很不方便了。

二、前端性能优化的常见策略

前端性能优化可以从多个方面入手，以下是一些常见的优化点：

1. 减少网络请求：

   • 合并文件：将多个 CSS 或 JavaScript 文件合并成较少的文件，减少网络请求次数。
   • 使用雪碧图：将多个小图片合并成一张大图，减少图片加载的网络请求次数。
   • 使用字体图标或 SVG 替代小图标，减少图片请求。
   • 使用 HTTP/2 或者 CDN 来提高资源加载速度。

2. 压缩资源：

   • 压缩 CSS、JavaScript 和 HTML 文件，减小文件体积。
   • 使用图片压缩工具来减小图片文件大小。

3. 优化渲染性能：

   • 减少重排和重绘：尽量避免频繁修改页面样式和布局，合理使用 CSS 布局。
   • 使用 CSS Sprites 或者将小图标转换成 Data URL，减少图片请求。
   • 使用懒加载技术延迟加载页面中的图片和资源。
   • 避免使用大量的 DOM 操作，尽量减少 DOM 的数量和复杂度。

4. 缓存优化：

   • 使用浏览器缓存：合理设置资源的缓存策略，利用浏览器缓存提高页面加载速度。
   • 使用 Service Worker 实现离线缓存，提高网站的访问速度和体验。

5. 代码优化：

   • 避免不必要的代码执行和资源加载。
   • 使用延迟加载或异步加载技术加载不影响页面初始化的资源。
   • 使用前端框架或库时，注意选择轻量级的方案，并合理使用懒加载和代码分割等技术。

6. 移动端优化：

   • 使用响应式设计或者移动端专属布局，提升在移动设备上的用户体验。
   • 避免使用过多的动画和特效，减少页面卡顿和性能消耗。
   • 使用防抖（王者回城）和节流（击打小兵）等技术来减少事件监听的触发次数，提高页面的响应速度。

综合考虑以上各方面的优化策略，可以有效提升前端页面的性能和用户体验。

三、防抖和节流

防抖和节流是前端开发中常用的两种性能优化技术。

防抖（Debouncing）是指在连续触发事件时，只执行一次事件处理函数，并且在最后一次触发事件后经过一定的延迟时间后执行（重新回城）。这样可以有效地减少事件处理函数的执行次数，特别是在一些频繁触发事件的情况下，如输入框输入内容时触发的事件。（就像王者荣耀中的回城设定一样，多次点击回城键，只会执行最后一次，而且要延迟等待一段时间才能完成回车这个事件，如果在回城过程中重新点击，就会重新设定回城时间）

节流（Throttling）则是指在一定的时间间隔内只执行一次事件处理函数，无论事件触发的次数如何。不同于防抖的是，节流会在一定时间间隔内始终保持执行，而不会因为连续触发事件而延迟执行。（有点王者击打小兵的设定，规定的时间内，你多次点击补兵键，就只会攻击一次）

这两种技术都可以用来减少不必要的事件处理函数执行次数，提升前端页面的性能和用户体验。

四、箭头函数和普通函数的区别

箭头函数（Arrow Functions）和普通函数（Regular Functions）之间有几个关键的区别：

1.语法：

         箭头函数使用箭头符号 => 来定义函数，语法更为简洁。

        普通函数使用 function 关键字来定义函数。

2.this 指向：

        在箭头函数中，this 的值是在定义函数时确定的，指向的是箭头函数所在的词法作用域中的 this 值，而不是调用时的 this。

        在普通函数中，this 的值是在函数被调用时动态确定的，它取决于函数的调用方式

3.arguments 对象：

        箭头函数没有自己的 arguments 对象，它会继承外围作用域的 arguments 对象。

        普通函数有自己的 arguments 对象，用于访问传递给函数的参数。

4.构造函数：

        箭头函数不能被用作构造函数，不能通过 new 关键字来调用，也没有自己的 prototype 属性。

       普通函数可以作为构造函数，可以通过 new 关键字来创建实例，同时具有自己的 prototype 属性。

总的来说，箭头函数更适合于简单的函数和匿名函数的定义，语法更为简洁明了，而普通函数则更灵活，具有更多的特性和用法，例如作为构造函数、拥有自己的 this 和 prototype 等。因此，在选择使用箭头函数还是普通函数时，需要根据具体的场景和需求来决定。

五、服务器渲染（SSR）

服务端渲染（Server-Side Rendering，SSR）是一种将网页内容在服务器端生成并发送给浏览器的技术。传统的网页应用通常是在浏览器中通过 JavaScript 在客户端渲染的，也就是说，浏览器下载 HTML 文件后，会加载 JavaScript 文件，然后在浏览器中执行 JavaScript 代码来构建页面内容。

而在服务端渲染中，服务器在收到客户端请求时，会将网页的 HTML 结构和相关的数据一起生成好，然后再将完整的 HTML 页面发送给客户端。这样，客户端收到的就是一个已经包含了内容的完整 HTML 页面，不需要再去执行 JavaScript 来构建页面。

服务端渲染的主要优点包括：

更快的内容呈现：因为客户端收到的是已经包含内容的 HTML 页面，而不需要等待 JavaScript 加载和执行，所以网页的呈现速度会更快，用户可以更快地看到页面内容。

SEO 友好：搜索引擎可以直接读取到服务端渲染后的完整 HTML 页面，这样更容易理解网页的内容，有助于提高网站的搜索排名。

更好的首屏渲染体验：服务端渲染可以在页面加载时直接呈现出完整的内容，而不需要等待 JavaScript 加载和执行完成，因此用户在首次加载页面时可以获得更好的体验。

然而，服务端渲染也有一些限制和缺点，比如相对复杂的实现和部署、服务器端压力增加等。因此，在选择是否使用服务端渲染时，需要根据具体的项目需求和情况进行权衡。有提高搜索引擎优化、页面加载速度和用户体验等方面的需求就可以用。

比如电子商务平台： 电子商务网站通常需要良好的搜索引擎可索引性和快速的页面加载速度，以提供良好的用户体验和增加转化率。SSR 可以帮助电商平台在这方面取得更好的效果。

---

总结

以上就是今天要讲的内容，本文算是我自己的一个日常总结，也是希望能够帮助到更多的前端er。