![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
大剑者兰特
获得徽章 0
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
![[吐舌]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_95.6b0752f.png)
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇沸点
前端性能优化大法
（图转自bytebytego，翻译整理by dogstar）
整理了8个提升前端性能的技巧：
1、打包压缩
在传输前压缩文件并最小化数据大小，以减少网络负载。
2、首屏展示
仅显示可见元素以优化渲染性能。例如，移动端优先展示首屏、动态列表先展示第一页。
3、模块化
将较大的应用程序捆绑包拆分为多个较小的模块包，以便高效加载。
4、基于优先级的加载
优先考虑基本资源和可见（或首屏）内容，以获得更好的用户体验。
5、预加载
在请求资源之前提前获取资源以提高加载速度。
6、Tree Shaking
删除无用的代码（又叫：Dead Code）。
什么是Tree-shaking？Tree-shaking 它的名字来源于通过摇晃（shake）JavaScript代码的抽象语法树（AST），是一种用于优化JavaScript代码的技术，主要用于移除未被使用的代码，使得最终生成的代码包含应用程序中实际使用的部分。这主要用于减小应用程序的体积，提高加载性能。
7、预读
预读(Pre-fetching)，是一种提升数据库查询性能的关键技术。旨在根据数据库的访问模式，提前缓存可能使用的数据，以提高查询性能并预防磁盘I/O瓶颈的出现。又分为两种类型：顺序预读和随机预读。
8、动态引入（按需加载）
根据用户操作动态加载代码模块，以优化初始加载时间。
（图转自bytebytego，翻译整理by dogstar）
整理了8个提升前端性能的技巧：
1、打包压缩
在传输前压缩文件并最小化数据大小，以减少网络负载。
2、首屏展示
仅显示可见元素以优化渲染性能。例如，移动端优先展示首屏、动态列表先展示第一页。
3、模块化
将较大的应用程序捆绑包拆分为多个较小的模块包，以便高效加载。
4、基于优先级的加载
优先考虑基本资源和可见（或首屏）内容，以获得更好的用户体验。
5、预加载
在请求资源之前提前获取资源以提高加载速度。
6、Tree Shaking
删除无用的代码（又叫：Dead Code）。
什么是Tree-shaking？Tree-shaking 它的名字来源于通过摇晃（shake）JavaScript代码的抽象语法树（AST），是一种用于优化JavaScript代码的技术，主要用于移除未被使用的代码，使得最终生成的代码包含应用程序中实际使用的部分。这主要用于减小应用程序的体积，提高加载性能。
7、预读
预读(Pre-fetching)，是一种提升数据库查询性能的关键技术。旨在根据数据库的访问模式，提前缓存可能使用的数据，以提高查询性能并预防磁盘I/O瓶颈的出现。又分为两种类型：顺序预读和随机预读。
8、动态引入（按需加载）
根据用户操作动态加载代码模块，以优化初始加载时间。
展开
2
15
赞了这篇文章