highcharts如何把图多余的空白页面_如何进行前端性能测试入门篇

前端性能测试：工具使用和分析

1.   参考地址：

http://www.genshuixue.com/i-cxy/p/7682961

2.    工具：

Yslow , pagespeed  webpagetest

3. Yslow是谷歌插件，可在扩展程序中添加

4. pagespeed和webpagetest都是在线网站

http://www.webpagetest.org/result/170707_BF_2WR/1/details/

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.baidu.com%2F&tab=desktop

性能评测网站：https://gtmetrix.com/

5. 检查ajax是否过CDN缓存

谷歌浏览器安装插件： Akamai debugheaders

查看ajax请求的 ResponseHesders   对应的 X-cache 字段：字段值包含“HIT”则为存在CDN缓存，字段值为“MISS”则不存在CDN缓存；

(PS：缓存时间长短关注 Cache-control字段，如果字段值中的max-age=0，那么为即无；>0为存在缓存，时间单位为秒)

6. 如何编写一份前端性能测试报告

主要分成四个部分编写：

网站前端性能测试评分

响应时间和请求数(竞品对比)

页面耗时分析

优化建议

(1)测试得分：https://gtmetrix.com/

(2)响应时间+请求数测试平台：https://www.webpagetest.org/

术语解析：

1、第一字节响应时间(first byte)

从用户开始导航到页面直到服务器响应的第一位到达的时间。此时间的大部分时间通常称为“后端时间”，是服务器为用户构建页面所花费的时间。

2、文档完成时间(load time)

该加载时间是指从用户开始浏览页面，直到文档完成事件(通常是当所有的页面内容的加载)的时间。这通常在所有图像内容加载后发生，但可能不包括由javascript执行触发的内容。

3、页面开始渲染时间(Start render)

指的是浏览器开始渲染的时间，从用户角度出发则可以定义为用户在页面上看到第一个内容的时间；

该时间决定着用户对页面的第一体验时机，如果时间越短给用户的体验则是页面速度越快，这样用户等待其余内容展现的耐心也会更大一些。如果时间过长，则用户会在长时间内面对的都是一个空白的页面，这对用户的耐心将是一个考验；

4、首屏响应时间(speed index)

速度指数是显示页面可见部分的平均时间。它以毫秒表示，并且取决于视图端口的大小。

5、完全加载时间(Fully Loaded)

页面完全加载完成的时间，即：文档完成后没有网络活动2秒。这通常包括主页加载后由javascript触发的任何活动

测试标准：

第一字节响应时间<=1秒

页面开始渲染时间<=3秒

首屏响应时间<=5秒

F得分项 = 0

响应时间和请求数(竞品对比)

  (1)假设测试的URL是

https://www.newchic.com

    1)输入URL和选择测试的地理位置，浏览器

(2)高级设置：可以参考：

https://www.cnblogs.com/strick/p/6677836.html

(3)设置后开始执行，查看结果

TTFB是指请求响应的第一个字节的时间(重定向时间+连接时间+后端持续时间)

(4)编写报告时，需要把上面的数据记录

首次访问

非首次访问

重点关注：

第一字节时间

页面开始渲染时间；

首屏时间

文档完成时间

完全加载时间

(5)查看请求数和域名数

统计结果如下：

重点关注：首屏请求个数

页面耗时分析

(1)页面解析耗时——各个加载节点 (数据来自gtmetrix)

记录下结果，待优化页面性能后，前后作对比

(2)Chrome DevTools：查看请求

1.是否存在重复的请求

2.是否图片空白部分太多

3.是否图片尺寸不对

4.是否存在多余的资源

5.检查非200的请求

优化建议(优先处理F等级的)

  (1)分析方向：

1.使用CDN(Effective use of CDN)

2.启用压缩GZIP(Compress Transfer)

3.压缩图片(Compress Images)  【对比 gtmetrix--PageSpeed中Optimizeimages】

4.缩小JS(Minify JavaScript) 和内联JS (Inline smallJavaScript)

5.缩小HTML(Minify HTML)

6.缩小CSS(Minify CSS)

7.把CSS放在头部(PutCSS in the document head)

8.减少DOM元素的数量       【数据取gtmetrix--yslow】

9.指定图像尺寸 Specify imagedimensions  【数据取gtmetrix--PageSpeed】

10. 延迟推迟JS  Defer parsingof JavaScript【数据取gtmetrix--PageSpeed】

11. 减少http请求 Make fewerHTTP requests  【数据取gtmetrix--yslow】

减少http请求的方式，如下有两种方式设置缓存，测试时注意常用资源是否请求资源时否设置缓存：

Cache-Control

“no-cache”指示请求或响应消息不能缓存(HTTP/1.0用Pragma的no-cache替换)

“no-store”用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。根据缓存超时

Expires表示存在时间，允许客户端在这个时间之前不去检查(发请求)，等同max-age的效果。但是如果同时存在，则被Cache-Control的max-age覆盖。

设置方式：通过HTTP的META设置expires和cache-control 

往期回顾：

mock + fidder如何应用在测试中

 dubbo接口界面化调试工具(二)

 dubbo接口界面化调试工具(一)

- END -