如何进行前端性能优化？

今天药忘吃喽~ 2022-11-17 05:05 184阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDM0MzE4_size_16_color_FFFFFF_t_70]  
1.减少 HTTP 请求

一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等诸多过程，下载数据只是其中一部分。

建议将多个小文件合并为一个大文件，从而减少 HTTP 请求的次数。

2.使用 HTTP2。相比于HTTP 1.1 ：

解析速度快、多路复用（多个请求可以共用一个 TCP 连接）、首部压缩

可以设置请求的优先级

可以对不同的流的流量进行精确控制

除了对最初请求的响应外，服务器还可以额外向客户端推送资源，而无需客户端明确地请求。

3.使用服务端渲染

客户端渲染:获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。

服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML。

优点：首屏渲染快，SEO 好。

缺点：配置麻烦，增加了服务器的计算压力。

4.静态资源使用 CDN

内容分发网络（CDN）是一组分布在多个不同地理位置的 Web 服务器。

使用 CDN 在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。

5.将 CSS 放在文件头部，JS 文件放在底部

所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染，如果时间很久就会使页面空白，所以 JS 文件要放在底部，不影响用户的观感。

如果 JS 文件非要放在头部，只要给 script 标签加上 defer 属性，异步下载，延迟执行。

为了避免用户只看到 HTML 没有样式的情况，CSS 文件要放在头部。

6.使用字体图标 iconfont 代替图片图标

字体图标就是将图标制作成一个字体，使用时就跟字体一样，可以设置属性。

字体图标是矢量图，不会失真，而且生成文件特别小。

使用 fontmin-webpack 插件对字体文件进行压缩。

7.善用缓存，不重复加载相同的资源

8.优化图片

图片延迟加载：当图片出现在浏览器的可视区域时，才去加载真正的图片，这就是延迟加载。

响应式图片：优点是浏览器能够根据屏幕大小自动加载合适的图片。

调整图片大小：一开始，只加载缩略图，当用户悬停在图片上时，才加载大图。

降低图片质量：通过压缩适当降低图片质量，基本看不出区别。

尽可能利用 CSS3 效果代替图片

使用 webp 格式的图片

9.通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码。

10.减少重绘重排

重排：当改变 DOM 元素位置或大小时，会导致浏览器重新生成渲染树。

重绘：当重新生成渲染树后，就要将渲染树每个节点绘制到屏幕。

一个用心码了这么多文字的人，往往渴望得到大家的认可。如果你觉得这篇文章对你有帮助，双击屏幕，给我点个赞呀！

更多软件测试资源分享微信公众号：【一诺教育软件测试】  
软件测试技术交流群：![在这里插入图片描述][20210713144127260.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDM0MzE4_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDM0MzE4_size_16_color_FFFFFF_t_70]: /images/20221022/41dcc116f02846db8e368b981bebce79.png
[20210713144127260.png_pic_center]: /images/20221022/6e2a80332b9143459402bad4d332a625.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDM0MzE4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/d72f887497ea441c8c62fc7ce4cb4afe.png