关于前端:day35-测试三非功能性测试

6次阅读

共计 3415 个字符，预计需要花费 9 分钟才能阅读完成。

性能指标
对于 JS 利用的开发者来说，也能够参考相似的 Rail 指标。Rail（response, amination, idle，load）是响应、动效、闲暇和加载这 4 个单词的缩写。上面，咱们来别离看下它们所代表的意义。
对于响应，准则是咱们的利用该当在 50ms 内解决响应，并且在 50-100ms 内提供一个可见的响应；
对于动效，如之前讲过的，在解决渲染时，咱们的帧估算是每秒 60 帧，也就是每帧要管制在 16.6ms 内渲染实现；
对于闲暇，无论是在加载模式还是垃圾回收的一讲中，咱们都提到过应该最大化地利用闲暇工夫，然而这里须要留神的是，这个利用也须要一个度，如果利用这个工夫须要解决的工作超过了 50ms，就会影响咱们第一点说的 100ms 内的响应；
对于加载，对于页面的加载而言，咱们的利用应该尽量在 5 秒内实现首次加载，并且在 2 秒内实现后续页面的加载。
影响性能的因素
说完了测试指标，咱们再来看看影响 Web 性能的因素。影响性能的因素是盘根错节的。
从大的品种来看，其中就包含了但不限于网络环境、资源的加载和浏览器渲染等外在因素，以及内存治理、垃圾回收等外在因素。
面对这么多的因素，如果齐全通过手动的形式来做性能测试，会十分消耗工夫和精力，而且要把这些测试的后果叠加转换成上述指标，又会是一个繁琐的过程。为了解决这个问题，大多的浏览器都提供了开发者工具帮忙咱们进行这些测试。以 Chrome 为例，咱们能够用到的就有 Lighthouse 和 Performance Insights 两个工具。

性能测试工具

Lighthouse
首先，咱们能够看下 Lighthouse。在开发者工具的 Lighthouse 页签下，咱们能够抉择性能检测的选项。从检测的后果中，咱们能够看到之前提到的在渲染和加载中关注的 FCP、TTI 等指标。同时咱们能够看到一些性能诊断的倡议，比方缩小过多的 DOM 节点、针对动态资源应用高效的缓存策略。同时，咱们能够验证一些曾经优化项，比方压缩后的 JS 和 CSS 文件。

然而上述的后果中，咱们失去的基本上是一个个的数字，对加载过程中的工夫散布没有直观的感触。而通过性能洞察（Performance Insights）的页签，咱们能够更直观地基于页面理论的应用场景，让页面加载的过程中产生的耗时在一条工夫线上展现进去。这样，咱们能够更间接地对一些性能瓶颈做分析判断和优化。

性能瓶颈排查

下面咱们通过 Lighthouse 和 Performance Insights，能够很好地对外在因素做剖析。可是针对一些内存治理和垃圾回收类的问题，就无从通晓了。
所以咱们能够看到表象，但无奈剖析前面的根因。所以咱们就须要对 内存治理 有深刻的剖析工具。
首先，咱们能够通过更多工具 -> 工作治理进入到内存治理的窗口，在这里，咱们能够看到内存列展现的内存应用状况。这时，如果咱们右键抉择 JavaScript Memory，也能够同时加载出 JS 的内存应用信息。那么 Memory 和 JavaScript Memory 这两列有什么区别呢？
这里的区别是 Memory 中蕴含的是咱们的页面产生的 DOM 元素。而 JS Memory 蕴含的是 JS 生成的对象的数量和括号中蕴含的目前有的存活的对象数量。如果这里的数量过高，则须要进一步排查。

首先从工夫的维度，咱们能够通过开发者工具中的性能页签（Performance Tab）来做性能剖析。在这里，咱们能够勾选内存选项，而后抉择录制，并且在开始和完结的时候通过点击垃圾桶的标记各做一次垃圾回收来防止来自测试时间段以外的烦扰。在后果的总览窗口中，heap 图 示意的是 JS 的堆，概览下方是计数器窗口。在这里，你能够看到按 JS 堆、节点和 GPU 内存等细分的内存应用状况。如果此时咱们看到，随着记录的进行，结尾处的 JS 堆或节点的数量高于开始处，则意味着过程中可能存在着内存透露。

另外通过内存页签（Memory Tab），咱们能够通过空间的维度来剖析性能瓶颈。对于浏览器而言，只有当 DOM 节点在页面的 DOM 树或 JavaScript 代码中没有被援用时，才会被垃圾回收。当节点从 DOM 树中被移除，但依然被一些 JavaScript 援用时，这些节点就被称为“脱离 DOM 树的节点”。脱离 DOM 树的节点是造成内存透露的常见起因。

堆快照是辨认拆散节点的一种办法。顾名思义，堆快照向咱们展现了在快照时页面的 JS 对象和 DOM 节点之间的内存散布状况。在内存页签中，咱们能够看到 JS 堆快照的选项，它能够帮忙咱们理解页面上 JS 对象和相干 DOM 节点的散布。
在获取快照后，在对象类型的筛选器中通过“detached”关键词，咱们能够搜寻脱离 DOM 树的节点。这时咱们可能会看到红色和黄色两种节点。而咱们须要关注的是黄色节点，因为它们是间接被援用的节点，在应用后须要被及时回收，它们的回收会顺带删除上面被间接援用的红色节点。

另外，咱们也能够通过 JavaScript 内存调配的工夫线，从工夫的维度来看对象的内存调配，排查内存透露点。

说完性能测试，咱们再来看看平安测试。在网络的平安测试中，次要蕴含 浸透测试和破绽扫描 。
浸透测试 能够是黑盒或白盒的，也就是表演入侵者的测试人员通过前端提供的测试环境和相干开发进去的利用来测试。在黑盒的状况下，入侵者默认没有代码拜访，通过尝试，试图渗透到零碎外部。
而 破绽扫描 通常是白盒测试，比方很多的云服务厂商都会反对代码托管，在这个根底上，个别会附加破绽扫描的测试工具。在这个扫描的过程中，负责自动测试的程序能够拜访代码库中的代码，并对代码进行扫描，从中发现破绽。
无论是浸透测试，还是破绽扫描，这两种测试都是在软件工程中由专门的测试人员或云平台提供的工具来执行的。
上面，咱们就从开发的角度，看看咱们在程序开发中能够做哪些初步的测试。
从前端，如何测试平安连贯呢？
这里，咱们同样能够通过浏览器提供的开发者工具。以 Chrome 为例，在平安页签（Security Tab）看到的主源的平安证书和连贯的安全性，以及相干的资源的安全性，能够帮忙咱们对平安问题做初步的排查。

测试辅助性能在很多欧美的网站是很重要的一个性能，它容许一些残障人士通过辅助性能浏览咱们开发的页面。这里蕴含了色弱症、色盲症和失明的人等，他们按情理也应该能够无障碍地拜访咱们所开发的页面。在开发辅助性能时，咱们个别要思考两个问题，一是用户是否能够用键盘或屏幕阅读器浏览页面，二是页面元素是否为屏幕阅读器做了正确标记。

这里插播一条数据信息，当咱们说到视障人士，大家可能会感觉这部分人群的比例很低，但实际上中国视障群体超过 1700 万，其中超过 800 万人齐全失明。另外一个常常被疏忽的群体是色盲或色弱的群体，中国色弱人数有 6000 多万，色盲人群有 2000 多万，加在一起，又是惊人的 8000 万人。也就是说光在国内，上亿人可能都会因为咱们的页面没有辅助性能，而没法失常拜访相干的内容。

开发对这部分人群敌对的利用，不仅对大公司来讲是企业责任，即使是从功利的角度来看，这部分人群也是购买咱们服务或产品的潜在客户。而越是访问量高的网站，要面对的这个群体就越大。如果咱们对这部分用户不加以器重，那影响的不仅是名誉，也是咱们的业务。所以无论是从社会倒退提高的角度，还是市场角度，咱们都应该尽可能为这部分用户提供相干的性能和测试。

色盲或色弱的人群所面临的次要困扰是无奈分辨一些对比度较低的色彩。咱们能够参考相干的指导性的技术标准 WCAG，这是一部内容无障碍指南。其中一共有 3 级，A 级是残障用户可能拜访和应用 Web 内容的根本要求；AA 级示意了内容总体可拜访，并打消了拜访内容的较大阻碍；AAA 级为一些残障用户提供了网络辅助性能的改良和加强。

还是以 Chrome 开发者工具为例，在 CSS 总览页签（CSS Overview Tab）上面，咱们能够在对比度问题上，看到对比度有问题的字体和背景。比方在上面的例子中，咱们能够看到当文字的灰色和背景的灰色相差不多的时候，是没有达到 AA 规范的，而基于蓝色背景的红色字体达到了 AA 规范，然而相比拟 AAA 还是差一些。

另外除了 CSS 总览页签外，在开发者工具中，咱们也能够通过在 Lighthouse 页签中勾选辅助性能来对网站做审计。通过审计，咱们能够看到通过的后果、须要额定手工查看的问题以及在本次测试中不实用的测试用例。