前端性能优化——概述

Posted 2021-07-27 黑木令

之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论做什么都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给你们, 现在看到感觉还挺有意思 。

好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

1. 前端性能优化点:

1. 4 个层面 与 8 个点 。

1. 4 个层面:

1. 网络层面
2. 构建层面
3. 浏览器渲染层面
4. 服务端层面

2. 8个点:

1. 资源的合并与压缩 。
2. 图片的编码原理和类型选择 。
3. 浏览器的渲染机制 。
4. 懒加载预加载 。
5. 浏览器存储 。
6. 缓存机制 。
7. PWA 。
8. Vue-SSR 。

如果对你有所帮助，希望大家喜欢点个关注；整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。