阅读 9

前端性能优化

性能优化最核心的部分就是减少请求数量和资源下载量

性能判断指标

DnsTime:DNS解析时间 (选择合适的DNS服务商 DNS预解析)

ConnectTime:tcp连接时间 (忽略)

SSLTime:SSL安全连接时间 (忽略)

RequestTime:发送请求所用时间

FirstByteTime(TTFB):“最初的网络请求被发起”到“从服务器接收到第一个字节前”所花费的毫秒数(优化后端性能,购买更好的服务器内存、CPU、带宽等等)

ReponseTime 资源下载时间

性能测试工具

在这里推荐几款性能测试工具

pagespeed

webpagetest

pingdom

Google develop

性能优化手段

文本文件优化

首先从减少资源大小方面入手,首先就是我们的代码层面竟可能的精简

  • 比如公共代码的提取(通常在项目中我们会把代码分成业务代码,业务代码中的公共代码和第三方公共库)当然这些都是Webpack的code slipt功能来做的
  • 只加载我们需要的代码(treeshaking),例如我们在使用lodash等等库的时候,我们往往只用到了部分功能,那么我们可以只需要加载我们需要使用的代码片段。首先是从代码源上面较少代码的体积。
  • 压缩代码(去掉注释,空格,使用更短的变量名等等),当然这些webpack插件已经帮我们实现好了
  • 服务端开启gzip压缩,我们可以通过判断Content-Encoding这个响应头,当然我们也可以直接通过这个在线工具

到了现在我们的代码在大小方面或许没有多少优化空间了,但是最后还讲一点,就是有时候在引入库的时候,我们首先要思考是不是非得要引入这个库,因为有可能我们只用到了一点点,比如jQuery,在这里我推荐一个网站也许你并不需要jQuery

接下来就是从减少请求数量开始,我们常见的方式就是代码的合并,例如我们可能在webpack中会有一个bundle专门用来存放第三方库的代码,而不是每个库我都给他打包成一个bundle,实际也是为了减少请求数。

图片优化

图片优化我们可以主要从如下四个方面:

  • 1 选择正确的格式
  • 2 选择合适的大小
  • 3 去除元数据适当压缩
  • 4 图片懒加载

首先我们从图片格式说起,我们最常见的格式就是PNG,JPG和Gif。对于gif我们都知道是在有动画效果的时候我们去使用,但是对于png和jpg我们该什么场景下去使用。首先png是一种无损格式,支持半透明,一般图片占用体积非常大,可能动不动就上M了。jpg是一种有损格式,不支持半透明效果。所以在一般情况下我们建议在没有透明效果的要求下,我们都应该使用jpg格式。因为在同等视觉效果下,jpg可能是png的一半体积。当然现在还有一些其他更现代化的格式例如webp等等,视觉效果更好,支持动画,透明而且占用体积小,这基本就是我们理想中的图片格式,但是遗憾的就是目前的支持情况不太好,可以期待一下。

选择合适的大小,这个很容易明白,就是根据图片在网站中展示的真是大小来进行图片的尺寸更改,因为在一般情况下,设计给我们切得图都是1000 甚至2000像素的,但是在网页中我们可能只展示四五百左右的像素,所以图片尺寸调整也是非常重要的

图片压缩,在照片中会存在一些照片基本信息(例如地理位置,曝光度等等),实际上这些数据对于我们来说是无用的,这一部分数据通常可能有20~30k左右,因此我们可以采用一些工具将这些元数据给去掉。一些图片压缩工具: www.verexif.com/en/ tinypng.com/

最后就是图片懒加载,这个是非常有用的手段,然后实施起来也很简单,甚至不用我们自己去写js代码。这里主要推荐下面两款图片按需加载的库。 github.com/aFarkas/laz… github.com/tuupola/jqu… 我们可以先加载一张低分辨率的,然后等图片真正到了可视区域再去加载真实图片。

当然还有一些其他图片优化相关的比如响应式图片,但是由于我还没有真正实践过,所以暂且不谈。

更多关于图片优化内容可以参考这篇文章: developers.google.com/web/fundame… developers.google.com/web/fundame…

缓存

其实缓存才是性能优化里面最重要的一环,而一般缓存都是需要后端来进行配合。 关于缓存相关的请求头 expires: 绝对时间 (客户端的时间可能不准确) cache-control: 相对时间 last-modify:服务器端绝对时间 (只能精确到1s,如果是在1s之内放生变化,还是会用缓存的) Etag:根据内容生成的一个hash值

优先级 cache-control > expires > etag > last-modify 强缓存 200 from memory from disk
协商缓存 304

离线缓存

这一块应该是PWA相关的知识,离线缓存主要用来提升应用处于离线下的用户体验,但是由于现在还没有实践过,所以就到这了。

性能监控

我们在做性能测试的时候其实我们都是在自己的机器上测试的,但是我们其实并不知道用户所处的真正的环境,那么我们为了获取用户真实的数据我们可以做呢?我们可以通过performance API 写一个性能监控脚本 然后将获取到的真实数据上报到我们的服务器上面。

var pageNav = performance.getEntriesByType("navigation")[0];
var dnsTime = pageNav.domainLookupEnd - pageNav.domainLookupStart;
复制代码
// Request plus response time (network only)
var totalTime = pageNav.responseEnd - pageNav.requestStart;

// Response time only (download)
var downloadTime = pageNav.responseEnd - pageNav.responseStart;

// Time to First Byte (TTFB)
var ttfb = pageNav.responseStart - pageNav.requestStart;
复制代码

参考链接;developers.google.com/web/fundame…

developers.google.com/web/tools/c…

在这里由于我也没有真正做过,所以不详细讲,大家有兴趣可以参考这篇文章

参考文章

谷歌开发文档-性能优化

最后(欢迎大家关注我)

DJL箫氏个人博客 博客GitHub地址 简书 掘金

关注下面的标签,发现更多相似文章
评论