「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」
与前端性能相爱相杀多年，终于找到一条前端性能的腾飞之路。腾飞之前，我们需要准备一些工具再上路。
工具一： 尽量少地请求 http（nds 查找、tcp 握手 🤝、request、response...）
工具二： 能用 http2 的地方就不用 http（http2 的解析速度要优过 http、一个 tcp 连接可以供多个请求共用、唯一的流 id 来标识同一个请求和响应；增加了压缩 head 的功能，从而节省流量，缩短请求时间；对请求设置优先级；可以精确控制不同流的流量；服务端也对请求增加了推送功能）
工具三： 首屏的数据可以通过服务端进行渲染（ssr）
工具四： 通过 cdn 来加载静态资源（内容分发网络，缩短用户与服务器的距离）
工具五： 先加载 css 文件，再加载 body 部分的元素，最后加载 js 文件
工具六： 使用图片图标的地方替换为 字体图标（fontmin-webpack 压缩字体文件）
工具七： 通过 max-age 和 expires 来控制缓存，在设置的时间内不再重复请求
工具八： 通过 webpack 的 UglifyPlugin 压缩 js 文件，MiniCssExtractPlugin 压缩 css 文件，HtmlWebpackPlugin 压缩 html 文件；也可以使用 gzip 压缩文件
工具九： 图片的懒加载，加载适合屏幕 🖥 大小的图片
工具十： 渐变、阴影等特效可以通过 css3 来实现
工具十一： 第三方库等引用，可以通过 webpack 设置为按需加载
工具十二： 减少重绘重排的概率
工具十三： 事件委托的使用（指定 🈯️ 一个事件处理程序来管理一类的事件）
工具十四： 查找表 > switch > if-else
工具十五： 位操作（相较于数学运算和逻辑运算，位运算要快很多）
工具十六： 能用原生 js 的地方就用原生 js 来实现（原生方法要更快一些）
工具十七： css 选择器（尽可能短、使用优先级高的、尽量不使用 * ）
工具十八： 使用 flexbox 布局（性能要比其他的布局方式更好一些）
工具十九： 尽量使用 opacity 和 transform 来实现动画（避免了重绘和重排的内存消耗）
当然，性能优化的方法还有很多，这里只是列出其中的一部分，对性能优化有兴趣的小伙伴可以继续补全。
掌握越多的性能优化的点，就可以让我们的工作效率得到大大的提升，也让我们开发的应用越来越丝滑。
前端性能腾飞之路还在继续，这条路还需要更多热爱技术的小伙伴参与进来。让我们一起为了这条路能够走的更远一起努力 💪 吧！！！！！！
