前端性能优化 24 条倡导 (前端性能优化面试题)

本文目录导航：

• 前端性能优化 24 条倡导
• vue前端名目优化（编译速度、打包体积、性能）
• 前端性能优化｜什么是防抖和节流？

前端性能优化 24 条倡导

前端性能优化是一把双刃剑，优化能优化网站速度，但性能复杂且需审慎。

上方提供24条针对性倡导，协助你优化网页性能：1. 缩小HTTP恳求：兼并小文件以降落恳求次数，缩小实践下载时期。

2. 驳回HTTP2：提高解析速度、允许多路复用、首部紧缩，缩小流量糜费。

3. 服务端渲染：放慢内容抵达时期，如Vue SSR，缩小文件大小。

4. 经常使用CDN：减速资源加载，缩短恳求时期。

5. 优化资源加载位置：CSS头部、JS底部，防止阻塞渲染。

6. 字体图标替代图片：节俭空间，提供矢量图成果。

7. 善用缓存：管理文件恳求，准确到单文件级。

8. 紧缩文件：减小体积，如gzip紧缩。

9. 图片优化：提前加载、照应式图片、调整大小和品质。

10. 应用CSS3和WebP：缩小图片文件大小，优化性能。

11. 按需加载代码：缩小初始加载体积，提高用户体验。

12. 降落重绘重排：优化DOM操作，提高渲染效率。

13. 事情委托：节俭内存，提高照应速度。

14. 关注程序部分性：应用空间和时期部分性，优化运转速度。

15. 决定性优化：如经常使用switch、查找表，防止过多条件语句。

16. 防止页面卡顿：管理JavaScript口头时期，遵照设施刷新率。

17. 经常使用requestAnimationFrame：保障动画流利。

18. Web Workers：异步解决长时期运本义务，不阻塞UI。

19. 位操作优化：应用JavaScript底层长处，提高性能。

20. 优先经常使用原生方法：应用阅读器内置优化。

21. 简化CSS决定器：缩小阅读器解析累赘。

22. 决定flexbox规划：提高渲染效率，留意兼容性。

23. 优化动画：经常使用transform和opacity，缩小重排重绘。

24. 正当优化：依据需求决定性优化，防止适度。

经过审核加载性能（白屏和首屏时期）和运转性能，实施这些倡导，将有助于优化网站的用户体验。

记得在优化前先诊断疑问所在。

vue前端名目优化（编译速度、打包体积、性能）

Vue前端名目优化战略重要集中在编译速度、打包体积和性能优化上。以下是一些关键的优化方法：

1. 编译速度优化： - autodll-webpack-plugin：将第三方库打包成DLL文件，减小主文件体积，提高构建速度。

经过webpack命令生成DLL文件，并在名目中援用。

- HardSourceWebpackPlugin：创立内存缓存，仅从新构建已更改的模块，放慢构建速度。

- Webpack5自带的cache机制：在开发形式下启用内存缓存，消费形式禁用。

2. 多线程打包： - thread-loader：解决大型义务的多线程工具，对特定耗时义务有效。

- HappyPack：多线程编译工具，合成义务并行口头。

3. 热更新/热重载： - HotModuleReplacementPlugin：启用模块热交流，实时预览修正，提高开发效率。

- babel-plugin-dynamic-import-node：在开发环境灵活导入模块，优化HMR。

4. 优化效率： - 蕴含和扫除文件：经过webpack的性能，缩小不用要的编译。

- 更新Webpack：决定适宜名目标最新版本，如从webpack4到最新。

5. 打包体积优化： - 剖析打包结果：经常使用webpack-bundle-analyzer剖析并优化打包文件。

- 第三方库按需引入：如element-ui、echarts和lodash等。

6. 性能优化： - 路由懒加载：仅在须要时加载路由模块。

- 正当经常使用watch和computed：防止不用要的计算和更新。

- 防抖和节流：管理函数口头频率，提高照应速度。

- v-if和v-show的经常使用：依据场景决定更高效的条件渲染形式。

7. 消费环境优化： - 去掉：经常使用transform-remove-console插件。

- 紧缩资源：CSS、JS、图片，减小包大小。

- source-map：消费环境可以决定性封锁，减小体积。

经过以好方法略，可以清楚优化Vue名目标编译速度，缩小打包体积，并优化用户体验。

前端性能优化｜什么是防抖和节流？

前端性能优化中，防抖和节流是两个经常出现的概念，它们在解决频繁触发的事情时各有特点。

防抖好比电梯门期待乘客所有进入后封锁，假设在期待时期又有新的恳求，会从新计时。

构想一下，当用户延续点击提交按钮，防抖会在必定时期内（如5秒）内只口头最后一次性的提交操作，防止频繁恳求。

而节流则更像是游戏中的技艺冷却机制，无论用户如何极速点击，技艺只能在设定的时时期隔后监禁一次性。

例如在拖拽性能中，节流确保了每距离一段时期才计算并更新一次性位置，降落CPU经常使用。

防抖的外围原理是保养一个计时器，只要在规则时期完结后或触发中止计时条件时，才会口头函数。

节流则是审核时时期隔能否已到，无论触发多少次，只口头一次性函数。

两者都旨在限度事情的口头频率，只是口头机遇不同。

总结来说，防抖是兼并屡次操作为一次性，而节流保障在一段时期内仅口头一次性。

在前端开发中，了解和把握这两个优化技巧，能够优化运行的性能和用户体验。

如需了解更多技术常识，欢迎关注“青云技术社区”群众号，添加技术交流群，介入抽奖优惠，赢取威望的《JavaScript 威望指南》。

优惠截至2021年8月11日，奖品丰盛，时机不容错过。