首页 > 其他 > 详细

如何进行前端性能优化?

时间:2021-04-08 15:30:50      阅读:2      评论:0      收藏:0      [点我收藏+]

 

技术分享图片

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 元素位置或大小时,会导致浏览器重新生成渲染树。

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

 

如何进行前端性能优化?

原文:https://www.cnblogs.com/software-test-Python/p/14631858.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号