必须会的前端基础通用优化方法

为什么要做优化?

虽然现在网速越来越快,客户端性能越来越好。但是还是有很多人在使用老旧的设备,不稳定的或者2G、3G网络。另外用户现在对应用的体验要求也越来越高,用户不仅会拿你的应用和同行业的竞争对手去做比较,并且会跟使用过的做的最好的应用去比较。

优化应用的性能可以提升用户体验从而提高留存率,转化率。谷歌、微软和亚马逊的研究都表明,性能可以直接转换成收入。比如,Bing搜索网页时延迟2000ms会导致每用户收入减少4.3%。BBC发现他们的网站加载时间每增加一秒,他们就会失去10%的用户。

下面分享一些操作简单但是效果明显的优化方法。

1、使用HTTP 2.0

HTTP 2.0通过支持首部字段压缩和多路复用技术,让应用更有效地利用网络资源,减少感知的延迟时间。

二进制分帧机制是HTTP 2.0大幅度提高网页性能的核心,它定义了如何封装HTTP消息并在客户端与服务器之间传输。HTTP 1.x的版本都是通过文本的方式传递数据,而HTTP 2.0将传输的信息分割为更小的消息和帧,并对它们采用二进制格式的编码。

HTTP 2.0在二进制分帧的基础上实现了多路复用技术,可以在同一连接上同时发送多个请求和响应,解决了HTTP 1.x的队头阻塞问题,提高了并行处理能力和性能,突破了HTTP 1.x中每个连接每次只交付一个响应的限制。

HTTP 2.0使用HPACK算法对请求和响应头部进行压缩,减少了数据传输量, 可以显著减少每个请求的开销,提高了网络传输速度。而且,它还支持服务器到客户端的主动推动推送机制。

体验demo:http2.akamai.com/demo

开启http2的方法也非常简单,下面以nginx为例

server {
-      listen       443 ssl;
+      listen       443 ssl http2;
       ...
}

2、缓存资源

浏览器发出的所有HTTP请求首先会转至浏览器缓存,用于检查是否存在可满足请求的有效缓存响应。如果存在匹配,则从缓存中读取响应,从而消除网络延迟和传输产生的数据成本。

HTTP缓存是一种提高负载性能的有效方式,因为它减少了不必要的网络请求。所有浏览器都支持该功能,并且不需要太多设置。默认情况下,大部分Web服务器内置支持设置缓存相关表头的设置。

3、缩小和压缩传输的资源

对传输的资源进行缩小和压缩可以有效减少负载大小,进而缩短页面加载时间。

像webpack中已经内置了缩小代码的插件,不需要做额外的工作就可以直接使用,可以删除空格和不需要的代码。

压缩是使用压缩算法修改数据的过程。目前使用最广泛的压缩格式是Gzip,但可以有限考虑使用Brotli,2015年谷歌推出的Brotli压缩算法能在Gzip的基础上将数据再压缩20~25%,现在大部分的浏览器已经支持这种压缩格式,国外很多站点已经开始使用,但是国内还没有开始大规模的应用。很多托管平台、CDN和反向代理服务器默认情况下都会对资产进行压缩编码,或者经过简单的配置就可以轻松实现。下面以Express为例配置一下动态压缩。

const express = require('express');
const compression = require('compression');

const app = express();

app.use(compression());
app.use(express.static('public'));

const listener = app.listen(process.env.PORT, () => {
    console.log(`Your app is listening on port ${listener.address().port}`)
})

4、使用CDN(内容分发网络)

由离用户更近的服务器向用户提供数据,可以显著减少每次TCP连接的网络延迟,增大吞吐量。选择一个可靠的CDN服务提供商进行简单的配置就可以,如阿里云、腾讯云、百度云等。

5、图片处理

对图片处理可以很好得对图片就行优化,经过图片处理优化的图像可以节省40%~80%的大小。虽然通过构建脚本也可以实现图片处理的效果,但在实践中一般使用第三方提供的图像CDN,第三方图像CDN也可以提供更多形式的图像处理方式。通过向文件地址传递参数来获取合适的图像,而不是直接获取原文件。

比如在chrome浏览器中使用WebP格式图片,WebP是由谷歌开发的一种新型图片格式,相比JPEG和PNG格式,WebP图片可以更好地压缩图片大小,从而提高页面加载速度。

6、优先加载关键资源

优先加载关键资源,延迟加载次要资源。优先加载关键资源可以减少页面加载时间,加快页面的渲染速度,提高用户体验。可以对网站进行分析,确定哪些资源是关键资源,然后将非关键资源设置为延迟加载。

7、利用chrome性能工具

Chrome浏览器的Lighthouse扩展程序可以对网站进行测试并生成一个性能报告。Lighthouse生成的报告包含了网站性能、可访问性、最佳实践和SEO等方面的评估结果,以及优化建议。分析测试结果,找出需要改进的方面,并根据建议进行优化。

总之,前端优化是提高用户体验、提高网站性能、减少成本和支持更多设备的关键因素之一。上述优化方法可以帮助开发人员优化应用程序的性能,提高用户体验和满意度,从而提高留存率和转化率,增加收入。

原文链接:https://juejin.cn/post/7219241334926180410 作者:liupl

(0)
上一篇 2023年4月8日 上午10:15
下一篇 2023年4月8日 上午10:26

相关推荐

发表回复

登录后才能评论