前端面试题（工程化&性能优化篇）

目录

1.Webpack的构建流程

2.常用的plugin和loader有哪些

3.tree-shaking原理

4.前端页面性能优化

5.首屏渲染优化

6.如何减少回流和重绘

7.SEO优化

8.SSR服务端渲染

9.Git的基本使用

10.图片懒加载

11.Echarts怎么做页面适配

---

1.Webpack的构建流程

（1）初始化参数。获取用户在webpack.config.js文件中配置的参数。

（2）开始编译。初始化compiler对象，注册所有的插件plugins，插件开始监听webpack构建过程的生命周期事件，不同环节会有相应的处理，然后开始执行编译。

（3）确定入口。根据webpack.config.js文件的entry入口，开始解析文件，构建ast语法树，找出依赖，递归下去。

（4）编译模块。递归过程中，根据文件类型和loader配置，调用相应的loader对不同的文件做转换处理，再找出该模块依赖的模块，递归本操作，直到项目中依赖的所有模块都经过了本操作的编译处理。

（5）完成编译并输出。递归结束，得到每个文件结果，包含转换后的模块以及它们之间的依赖关系，根据entry以及output等配置生成代码块chunk。

（6）打包完成。根据output输出所有的chunk到相应的文件目录。

基本使用 | 尚硅谷 Web 前端之 Webpack5 教程

webpack看这一篇就够了_itpeilibo的博客-CSDN博客 

2.常用的plugin和loader有哪些

（1）loader：loader从字面意思理解是加载的意思。由于webpack本身只能打包js文件，所以针对css、图片等格式的文件没法打包，就需要引入第三方的模块进行打包。loader虽然是扩展了 webpack，但是它只专注于转化文件（transform）这一个领域，完成压缩、打包、语言翻译。loader是运行在Node.js中。

常用的loader：postcss-loader、css-loader、style-loader、scss-loader、less-loader、eslint-loader等。

（2）plugin：plugin也是为了扩展webpack的功能，但是plugin是作用于webpack本身上的。而且plugin不仅只局限在打包、资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。插件可以携带参数。

常用的plugin：HtmlWebpackPlugin、clean-webpack-plugin、mini-css-extract-plugin、HMR（HotModuleReplacementPlugin）、babel、babel-preset-env等。

3.tree-shaking原理

tree-shaking别名叫摇晃树，最早是由Rollup实现，是一种采用删除不需要的额外代码的方式优化代码体积的技术。tree-shaking会在打包过程中静态分析模块之间的导入导出，确定哪些模块导出值没有被使用并打上标记，将其删除，从而实现了打包产物的优化。

4.前端页面性能优化

（1）减少HTTP请求。一个完整的HTTP请求需要经历DNS查找、TCP握手、浏览器发送HTTP请求、服务器接收请求、服务器处理请求并响应、浏览器接收响应等过程。

（2）善用缓存，如HTTP缓存、本地存储、keep-alive缓存等，不重复加载相同的资源。

（3）静态资源使用CDN。

（4）使用tree-shaking删除不需要的代码，减少代码体积。

（5）通过import动态导入语法进行按需加载，从而达到需要使用时才加载该资源。

（6）压缩css、js文件。

（7）减少回流、重绘。

（8）降低CSS选择器的复杂性。

（9）使用事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

（10）合理使用Web Worker。

（11）使用防抖、节流。

（12）图片压缩和懒加载。图片较小时，使用base64格式，使用字体图标iconfont代替图片图标。

（13）使用SSR服务端渲染。服务端返回HTML文件，客户端只需解析HTML。

前端项目性能优化方案有哪些_前端性能优化-CSDN博客

5.首屏渲染优化

原因：网络延时问题、资源文件体积是否过大、请求资源是否过多、资源是否重复发送请求、加载脚本的时候、渲染内容阻塞等。

解决办法：减小入口文件体积、使用tree-shaking删除不必要的代码、使用UI框架按需加载、图片压缩和懒加载、善用HTTP缓存和本地存储、合理使用Web Worker、使用SSR服务端渲染等。

首屏加载速度慢怎么解决？_首屏优化_大佩梨的博客-CSDN博客

6.如何减少回流和重绘

CSS中避免回流、重绘：

• 尽可能在DOM树的最末端改变尺寸、大小、是否隐藏等。
• 避免设置多层内联样式。
• 动画效果应用到position属性为absolute或fixed的元素上。
• 避免使用table布局。table比其他html标记占更多的字节，布局比较死板不灵活，会阻挡浏览器渲染引擎的渲染顺序从而使得加载速度慢。
• 使用transform、opacity等动画效果不会引起回流、重绘。

JS操作避免回流、重绘：

• 避免使用JS一个样式修改完接着修改下一个样式，最好一次性更改CSS样式，或者将样式列表定义为class的名称。
• 避免频繁操作DOM，使用文档片段创建一个字树，然后再拷贝到文档中。
• 先隐藏元素，进行修改后再显示该元素。
• 避免循环读取offsetLeft等属性，在循环之前把它们存起来。

【精选】一文教会你何为重绘、回流？_回流和重绘_几何心凉的博客-CSDN博客

7.SEO优化

分享SEO优化的8个技巧_csdn seo优化-CSDN博客

8.SSR服务端渲染

什么是SSR-CSDN博客

9.Git的基本使用

视频同步笔记：狂神聊Git

10.图片懒加载

前端必会的图片懒加载(三种方式)_javascript技巧_脚本之家

11.Echarts怎么做页面适配

【精选】ECharts实现数据可视化入门教程（超详细）_牛哄哄的柯南的博客-CSDN博客

echarts 图表大小随窗口变动而自适应变动（无需刷新浏览器调整）_h5自适应echarts-CSDN博客