前端科举八股文-性能优化篇

常见的前端性能优化方案？css精灵图的原理？说说懒加载的原理什么是防抖节流？什么是重绘和重排，如何减少重绘和重排如何减少重排？webpack是干什么的？简历上写到你使用了vite，讲讲它和webpack的区别？webpack的核心配置是什么？有开发过loader吗？ 他的本质是什么？常用的loader？为什么plugins可以执行更高级的任务，loader不可以呢？webpack可以进行哪些优化

常见的前端性能优化方案？

前端性能优化方案可以从几个方向去切入，

第一点是从请求方面去优化。可以使用css精灵图或者懒加载来减少http的请求数。可以使用cdn分发网络加快请求效率。

第二点是从代码层面去优化，比如将css写在页面顶部，使资源优先加载，将js写在页面底部，使js执行不阻塞页面的渲染。使用防抖节流等技巧去优化代码的执行效率。尽量避免浏览器的重绘与重排。

第三点是从缓存方向去优化，浏览器向服务器端请求资源是十分耗时的，可以将一些不常变化的资源通过http的缓存协议缓存到本地。使得浏览器直接从本地缓存中读取资源，提高效率。

第四点可以通过一些第三方打包工具，比如webpack，可以使用webpack的插件完成线上代码压缩功能、tree-shaking、图片压缩等进一步压缩线上代码体积。

css精灵图的原理？

精灵图的原理就是把多张图片压缩成一张图片，这种优化方案并不能减少需要传输的数据体积。比如一个网站需要多张图片资源，精灵图可以把多张图片资源合并成一张之后，通过css的定位属性精准的定位到所需要使用的图片坐标来使用。

说说懒加载的原理

懒加载就是在页面渲染时避免加载一些不必要的资源。所谓的不必要的资源就是比如一个官网首页，用户进入到这个页面时能看到的范围肯定时有限的。所以在视口之外的，也就是说需要滚动才能看到的一些图片资源实际上是不需要加载的。可以等到这些资源进入到用户视口区域内再去加载。可以通过getBoundingClientRect这个js方法去判断。

什么是防抖节流？

防抖节流是通过js的优化手段去减少一些高频次触发的事件。比如移动端常见的场景是下拉获取最新的内容。如果不加以限制，在滚动过程中可能会触发上百次的请求。防抖就是把高频触发的事件合并成一次。节流就是将高频触发的场景优化成低频触发。（具体实现方法放在前端科举八股文-手撕代码篇）

什么是重绘和重排，如何减少重绘和重排

浏览器从绘制页面到呈现会生成两棵树，一个css树一个dom树，然后把两个合并生成渲染树之后再挂载到页面上。然后在页面更新时，如果更新时需要重新绘制css树和dom树的叫做重排，不需要重新绘制只需要重新渲染的叫做重绘。比如页面的首次渲染，修改字体，修改背景颜色，边框颜色就只会引发重绘。但是修改元素大小引发网页整体结构发生变化的，就叫做重排。重排的开销是很大的，所以要尽量避免重排。

如何减少重排？

1、如果需要频繁操作dom的场景可以使用文档碎片来合并批量操作，一次性去操作dom。

2、将一些频繁变化的元素，比如动画元素设置脱离文档流使它不会影响到其他dom元素的布局，进而减少重排。

3、在可能改变页面布局的场景下使用防抖节流（比如resize）

webpack是干什么的？

简单来说，webpack就是帮助浏览器去识别它默认情况下不能识别的语法。因为浏览器是只认识JS语法的。那么如果我们在js中如引用图片，引用css资源，就要借助webpack的帮助来实现这些功能。webpack可以使用css-loader，vue-loader去处理css资源，vue文件。使这些文件也能正常的被浏览器识别并使用

简历上写到你使用了vite，讲讲它和webpack的区别？

首先vite将项目代码分为源码和依赖两部分，vite在处理依赖部分使用的是go语言，由于语言优势，go语言先天就会比webpack快上10-100倍。

其次在项目启动时，由于现代浏览器都支持ES6的模块化语法了。所以现代浏览器都是先直接启动开发服务器，然后根据打开的页面去动态的请求页面资源。而webpack会从打包入口开始，把整个项目打包之后再去启动开发服务器。所以项目越大 vite的优势会越明显。

webpack的核心配置是什么？

1、入口 entry 表示需要从哪个文件开始去打包整个项目

2、output 表示打包成功之后的输出文件夹

3、loader 表示文件的处理器

4、plugins 插件、可以完成loader不能完成的一些更高级更复杂的功能

5、mode 打包模式 如果是生产模式的话会自动开启代码压缩功能

有开发过loader吗？ 他的本质是什么？

开发过demo，loader的本质其实就是函数，在loader匹配文件时会将文件作为参数传入到函数中，然后在loader中处理最后返回

常用的loader？

css-loader style-loader sass-loader vue-loader image-loader 等等

为什么plugins可以执行更高级的任务，loader不可以呢？

因为loader的本质就是简单的函数，处理能力有限，而webpack在每一次打包编译的过程中都会产生一个complier对象，这个对象可以访问到整个编译生命周期暴露出来的hooks，可以通过这些暴露出来的api来执行更加广泛、更加高级的功能。

webpack可以进行哪些优化

1、对webpack的loader属性加上includes和exclude来加快执行效率

2、生产模式下webpack会默认开启对代码的压缩

3、通过tree-shaking来去除代码中无用的部分，进一步减少代码体积

4、使用code-split结合vue的动态路由实现路由的懒加载

5、通过webpack的插件实现preload，prefetch等预加载功能

6、使用oneOf关键字来提升loader的匹配效率。