重温前端性能监控和 4 款最佳工具分享
对于大多数开发人员而言,监控应用程序的性能并不是一个陌生的概念。在某些情况下,我们必须自己进行一些性能调试。通常,当出现影响用户体验或影响成本的大问题时,就需要去监控应用程序的性能。同时我们也需要话时间去查看应用在不同场景下的表现情况。
通常,应用程序的监控是按照不同的方式进行,一般应用程序都由前端和后端组成,因此监控通常按照前端和后端不同进行处理,前端和后端监控的方式有所不同,监控指标同样存在不同。本文将重点介绍前端性能监控及比较流行的监控工具,对于需要开发相关工具的小伙伴可以借鉴这些工具的实现。
什么是前端应用监控?
前端监控是开发人员用来跟踪和维护应用程序表现层的运行状况的过程和工具。它基本上是用户将与之交互的所有内容,从内容和菜单到api和其他面向前端的组件。
应用程序性能监控(简称APM)关注的是用户的体验,而不是服务器和前端之间的通信。虽然这两者都值得关注,但理解用户如何与应用程序交互对于提供良好的体验至关重要。
前端监控重要吗?
答案是肯定的,我们使用很多不同的监控工具和技术来监控后端、数据库、内存、CPU等基础设施,而前端的监控没有任何的不同。随着前端网站和应用程序的复杂性的增加,监测的需求也在增加。过去,监测只需要每天ping服务器几次就可以确保正常了。如今,这样已经远远不够,任何停机时间、请求速度缓慢等降低网站和应用性能的现象都可能带来严重的后果。同时用户对于应用的体验相比过去要求也更高了,任何不好的体验都将对用户带来负面影响。
可以解决那些性能问题?
在衡量应用程序性能时,建议重点关注一下三个部分:
速度
在网络环境优越的今天,速度是比较重要的指标。缓慢的加载资源会导致瓶颈和糟糕的用户体验,所以尽快解决它们至关重要。那么一个好的网站应该多快?多慢不能被用户接受?可以使用 PageSpeed 测试网站的加载速度。
加载缓慢的页面会让用户感到沮丧,以至于甚至多出一秒钟的时间也会导致跳出率激增,在其他地方寻找解决方案。
网站和应用程序的速度应该多快呢?一下是可参考的关键性指标描述:
- 小于100毫秒被认为是瞬时的;
- 100ms到300ms的延迟是可感知的;
- 一秒钟是用户思想不被打断的极限;
- 用户希望网站在2秒内加载;
- 3秒后,40%的访问者会放弃你的网站;
- 10秒是保持用户注意力的极限。
客户端性能的工具
现在大多数前端应用程序在浏览器上花费的时间比在服务器端花费的时间要多,原因是新的应用大部分在使用JavaScript框架,比如Vue、React和AngularJS。
这些功能丰富的前端添加了一个需要测量的新层。因此,衡量在客户端本地计算机上运行的应用程序的渲染时间变得至关重要。
- Google PageSpeed Insights:可分析网页内容并生成建议以使您的网页加载速度更快。减少页面加载时间可减少跳出率并提高转化率。
- Google Lighthouse:是用于提高网页质量的开源自动化工具。您的前端开发人员至少应使用Lighthouse指标,该指标在Google Chrome浏览器工具中可用。
- Sitespeed.io:一个开源工具,会根据性能最佳做法和时间指标来分析网站的速度和性能。可以分析一个站点,分析和比较多个站点。
团队并非总是可以修改应用程序以优化客户端性能。幸运的是,谷歌提供了ngx_pagespeed
和mod_pagespeed
作为web服务器扩展,以自动提高性能,而不需要修改代码。
以下是对谷歌这两个扩展的使用:
-
Google ngx_pagespeed 可以加速网站并减少页面加载时间。这个开源的nginx服务器模块为这个Pagespeed工具自动应用web性能最佳实践页面和相关资产(CSS, JavaScript,图像),而不需要修改现有的内容或工作流。
-
Google mod_pagespeed 可加快网站速度并减少页面加载时间。这个开源的Apache HTTP服务器模块自动将Web性能最佳实践应用于页面和相关资产(CSS,JavaScript,图像),而无需您修改现有内容或工作流程。
-
WebPagetest.org 提供了对客户端在各种实际浏览器中的性能的深刻洞察。这个工具可以在任何浏览器、任何地点、任何网络条件下测试网页,而且它是免费的。
错误和功能
这里不是在说404或503这样的明显错误。而是那种不太明显的错误,比如第三方API拒绝连接或在应该发送HTTPS请求时发送HTTP请求。这些问题可能会导致严重的服务中断,从而破坏用户的体验。
当你的网站或应用遇到问题时,无论它是JavaScript错误、网络故障,还是特定框架问题,有一个工具会提醒你,这会让你更好的优化网站或应用。使用一个能够进行日志管理的工具,比如Sematext Logs,会发现更容易识别和修复所遇到的问题。
虽然使用控制台日志中提供的信息就可以解决一些问题,但会发现其中一些不那么容易解决的问题。在某些情况下,日志只有一个位置,但更多情况下,日志将位于不同的位置,具有不同的时间戳,并且可能具有不同的冗余,这将使调试变得非常复杂。
拥有一个能够存储、归档和控制日志质量的工具对于理解全局是至关重要的。可以使用单独的解决方案,但是在单一平台上进行日志记录和监视可以使关键问题的故障排除更快、更简单。
可用性
这里不是说显而易见的,而是网站需要在线并为用户提供正常功能,可用性就至关重要,特别是当平台已经发展到足够大的程度,并且在世界各地拥有了更多的用户时。洞察用户如何体验网站将非常有帮助,这就需要监视真实用户的体验的工具。
真实用户监控工具将跟踪用户在整个应用程序中的进程,提供有关他们如何与应用程序交互以及他们将得到何种响应的信息。基于这些UX指标,将能够决定是否需要更快的机器、更好的伸缩性,或者必须优化业务逻辑。
监测应用程序和网站性能的最佳工具
1、AppSignal
AppSignal 提供前端和后台作业的性能的洞察力、主机监视、错误跟踪以及允许从应用程序收集指标的工具。可以通过易于自定义的仪表盘关注有效负载大小、数据库查询、收入以及更多其他内容。
借助轻量级的Rust支持的代理,AppSignal易于安装。它能监视应用程序的性能,并显示其记录的操作和与之相关的指标的简单分类。可以看到有关CPU使用率、内存分配和网络信息的详细信息,以及显示有关代码实际作用的详细信息的事件时间线。这能够了解应用程序的哪一部分会影响性能,哪些方面需要改进。
它还有一个异常检测系统,该系统能够预先构建一些警报,这些警报会在一切未正常运行时触发。刚起步并不确定要查找的内容时,或者承受重负荷时,这很有用,并且有太多事情需要跟踪。
尽管AppSignal易于使用和实施,但它缺少高级日志记录和基础架构监视功能,这将带来一些大问题。能够看到所有前端性能的详细信息,但是其中一半是空白的。
AppSignal具有30天的试用期和简单的定价,基于25万个请求的每月19美元起,直至2500美元的25亿个请求,每月2249美元起。
特征:
- 异常检测
- 开箱即用的警报
- 简易安装
- 简单的定价
2、Sentry
Sentry为项目团队提供了检测和解决影响用户体验的错误和其他问题的工具。它是开源的,并且完全免费的,具有与付费版本相同的优点。在《浅谈前端异常监控平台实现方案》有介绍过。
Sentry会告诉你应用程序何时崩溃或运行太慢以及应用程序的性能,从而能够深入研究需要注意的区域。除了解决错误外,还可以解决最终导致错误的问题。
特征:
- 简易安装
- 利用Google的Web要素来提供有关性能的详细信息
- 交易追踪
3、Site24x7
Site24x7 可以查看应用程序或项目在现实世界中运行情况的替代方法。作为可用性和用户体验监控解决方案,Site24x7提供了许多整洁的特性,如服务器监控、云管理、RUM等。
当涉及前端性能监视时,Site24x7有一个Web部分,可以在其中创建网站或API的监视器。这些监视器将对您所需的资源执行ping操作,以收集诸如可用性、响应时间、停机时间等数据。
Site24x7还将在 REST API部分中跟踪SLA遵从性,这将派上用场。该视图按位置显示可用性和响应的明细,过去24小时内发生的所有明细的历史记录,以及吞吐量和响应时间的详细信息。除此之外,Site24x7还会监视SSL和TLS证书以及域到期,并在一个证书到期或出现问题时通知你。
Site24x7提供30天的试用期,无需使用信用卡,并且有四个计划,起价为10美元,一直到每月499美元。
特征:
- 多合一监控解决方案
- 全面的API交易监控
- 真实的用户监控工具
4、Pingdom
Pingdom 是一项具有各种功能的正常运行时间监控服务,包括SSL监控、正常运行时间监控和实际用户监控等。借助灵活的警报系统,当服务中断或降级时,Pingdom会通知你。
正常运行时间监视视图将可以深入了解页面或资源完全加载所花费的时间。如果发生错误,将可以使用他们的事件报告管理器来深入研究事务,以找出问题的根本原因。在这种情况下,traceroute非常有用。
关于性能报告,只要你需要网站上的详细信息(例如加载时间、页面大小、请求ID和性能得分),就可以使用“页面速度”部分,它可以简单地描绘出整体效果性能。瀑布图是其中最有用的功能之一,瀑布图显示了时间轴上的所有资产,因此很容易看到需要优化的地方和要优化的内容。
Pingdom的试用期为14天,其专业计划开始于每月15美元的综合监控,其中包括10个正常运行时间的监控器,1个高级监控器和50条SMS通知,而其真正的用户监控服务则是每月15美元(每100K页面浏览量) 。
特征:
- 简单的定价
- 真实的用户监控工具
- 短信和电子邮件通知
- 可自定义的警报
结论
重要的是要承认,在构建网站或应用程序时,性能并不是一次性检查清单的事情。正确处理需要花费时间和精力,而且这是一个持续的过程。监视前端性能将需要特殊的工具,以确保用户获得24×7的最佳体验。
上一篇: 亲身体验 DHT11(原理+驱动程序)
推荐阅读
-
41 个下载免费 3D 模型的最佳网站-使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 17. Clara.io Clara.io 是一个创建 3D 内容的全球平台,也是一个培养新 3D 艺术家的社区。Clara.io 提供+100,000个免费的3D模型,包括OBJ,Blend,STL,FBX,DAE,Babylon.JS,Three.JS格式,用于 Clara.io,Unity 3D,Blender,Sketchup,Cinema 4D,3DS Max和Maya。 使用说明:免费,标准和专业帐户仅供个人使用,如果您需要将 clara.io 用于商业用途,请与销售团队联系。 18. 3DExport 3DExport是一个市场,您可以在其中购买和销售用于CG项目的3D模型,3D打印模型和纹理。它提供15 +不同的3D格式供下载,如3DS MAX(.max),Cinema4D(.c4d),Maya(.mb,.ma),Lightwave(.lwo),Softimage(.xsi),Wavefront OBJ(.obj),Autodesk FBX(.fbx)等。它还提供15种不同的语言! 使用说明:免费下载仅供个人和非商业用途。 19. 3D Warehouse 3D Warehouse是一个开放的库,允许用户共享和下载SketchUp 3D模型,用于建筑,设计,施工和娱乐!任何人都可以免费制作,修改和重新上传内容到3D仓库,您可以找到任何您能想到的东西,如家具,电子产品,室内产品等。 使用说明:3D Warehouse中的所有模型都是免费的,因此任何人都可以下载文件以用于SketchUp甚至其他软件,如AutoCAD,Revit和ArchiCAD。 20. CadNav.com CadNav是CGI平面设计师和CAD / CAM / CAE工程师的在线3D模型库,我们提供超过50000 +免费3D模型和CAD模型下载。在CadNav网站上,您可以下载高质量的多边形网格3D模型,3D CAD实体对象,纹理,Vray材料,3D作品,CAD图纸等。 使用说明:免费下载仅供个人和非商业用途。 21. All3dfree.net 就像网站名称一样,它提供免费的3D模型,还包括Vray材料,CAD块,2d和3d纹理集合,无需注册即可免费下载。它是不断更新的,因此您可以查找或请求3DS,MAX,C4D,skp,OBJ,FBX,MTL等格式的模型。 使用说明:所有资源均不允许用于商业用途,否则您将承担责任。 22. Hum3D 自2005年以来,Hum3D帮助来自3多个国家的80D艺术家节省3D建模时间,并制作逼真的3D模型,用于电影,视频游戏,AR应用程序和可视化。所有模型均由首席3D艺术家进行验证,他们检查其是否符合专业要求和最新的3D建模标准。 使用说明:免费下载仅供个人和非商业用途。 23. Artist-3D.com 艺术家-3D 库存的免费 3D 模型下载按通用类别排序。它为人体解剖学、汽车、家具、火箭、卫星等模型提供 AutoDesk 3DS Max 格式。您还可以在浏览他们的网站时找到教程和类似类型的建模。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 24. Free the models 就像本网站的标题一样,它为3d应用程序和3d游戏引擎提供免费的内容模型。您可以为您的任何项目找到许多有趣且有用的模型!它提供3ds,wavefront,bryce,poser,lightwave,md2和unity3d格式的模型。还有一个很棒的纹理集合,可以在您最喜欢的建模和渲染程序中使用。 使用说明:您从这里下载的所有内容都可以免费使用,除非它不能包含在另一个免费的网络或CD收藏中,也不能单独出售。否则,您可以在商业游戏,3D应用程序或渲染作品中使用它。您不必提供信用,但如果您这样做,那就太好了。 25. Resources.blogscopia 本网站由一家名为Scopia的公司创建。他们制作3D图像和视频,您可以找到许多为CGI工作的信息架构设计的模型,所有这些都可以在现实生活中使用。您可以免费下载它们,但是,如果您想一次下载它们,您可以支付 3 到 9 欧元。 使用说明:您可以免费下载模型部分的所有文件。每个压缩文件都包含您也可以在此处找到的许可证。基本上,您可以对文件执行任何操作。唯一的限制是不归属于Scopia的重新分发。 26.ambientCG 1000+公共领域PBR材料适合所有人!环境CG是使用许多不同的方法和资产类型创建的,例如照片纹理(PBR),贴花(PBR),图集(PBR),照片纹理(普通),物质存档(SBSAR),雕刻画笔,3D模型和地形。您可以在所有项目中*使用它们! 使用说明:在 ambientCG 上提供下载的所有 PBR 材料、画笔、照片和 3D 模型均根据知识共享 CC0 1.0 通用许可提供。您可以复制、修改、分发和执行作品,即使是出于商业目的,也无需征得许可。信用将不胜感激。 不要满足于平庸的大理石纹理 - 立即使用我们的免费PBR大理石纹理升级您的3D设计。 27.Pixar One Twenty Eight 这是一个提供官方动画行业经典纹理的网站:皮克斯,创建于 1993 年,该纹理库包括 128 个重复纹理,现在免费提供。 它包含您来到的纹理,包括砖块和动物毛皮。肯定会有一些你可以使用的东西。 使用说明:皮克斯动画工作室的《Pixar One Twenty Eight》根据知识共享署名4.0国际许可协议进行许可。即使出于商业目的,您也可以重新混合、调整和构建您的作品,只要您以相同的条款对新创作进行信用和许可。 访问数以千计的免费纹理并提升您的设计游戏 - 立即开始下载! 28. 3DXO 即使有近 620 个免费贴纸可供下载,3DXO 也不是最大的资源,但它的内容非常有用,不需要注册。无论是简单的墙壁或地板,还是一些奇怪的小东西,您都需要的纹理都可以在此网站上看到。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 29. 3DModelsCC0 3DModelsCC0 与其他产品的不同之处在于它包含超过 250+ 个高质量 3D 模型,并且本网站上的所有内容都是免费的,完全是公共领域!使用我们的模型时无需信用或归属! 使用说明:为每个人提供完全免费的公共领域内容。 30.Sketch up texture club Sketchup Texture Club是一个非营利性的教育和信息门户网站,由3D社区的图像促进协会管理,特别强调面向学生和建筑和室内设计专业人士的可视化和渲染技术,以及所有正在学习3D可视化的人。 使用说明:您无需支付版税或使用费。纹理可以免费下载和使用。不允许将纹理作为竞争产品出售或重新分发,即使图像被修改也是如此。 31. FlippedNormals FlippedNormal 是一个提供计算机图形和 3D 资产的市场,您可以找到许多用于雕刻、建模、纹理、概念艺术、3D 模型、游戏资产或课程的高级资产! 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 32. NASA 3D NASA 3D网站是一个在线门户,提供与太空和各种NASA任务相关的大量三维模型和模拟。该网站是用户友好的,并提供有关每个型号的详细信息。该网站允许用户探索和下载几种不同格式的模型,包括 OBJ、STL 和 FBX,只需单击下载按钮即可。 使用说明: 要下载模型,只需单击模型页面上的下载按钮并选择所需的格式。 33. 3DAGOGO (Astroprint) 3DAGOGO 是一个提供广泛 3D 模型的网站,包括角色、车辆和建筑物。3DAGOGO 的独特功能之一是它专注于适合 3D 打印的模型,使其成为希望创建物理原型或模型的设计师的绝佳资源。要使用 3DAGOGO,设计师只需在网站上搜索他们正在寻找的模型类型,然后下载 STL 格式的文件。 使用说明: 要使用 3DAGOGO,只需搜索所需的 3D 模型类型并下载 STL 格式的文件。根据需要自定义模型,并确保在将其用于商业目的之前检查使用权限。 34. FreeCAD FreeCAD是一款了不起的3D建模软件,可让您在计算机上创建令人难以置信的3D设计。该软件可免费下载和使用,它提供了广泛的工具和功能,可用于创建用于各种目的的3D模型。 该网站易于浏览,您可以找到开始使用FreeCAD的所有必要信息。此外,该网站还提供一系列教程和指南,可帮助您了解 3D 建模的来龙去脉。 使用说明: 要下载模型,请访问网站并从库中选择所需的模型。该网站还提供了一系列使用该软件的教程和指南。 35. Pinshape Pinshape是一个提供一系列3D打印模型的网站。网站上提供的型号质量很高,因此您可以确保您的最终印刷产品看起来很棒。该网站提供了广泛的模型,包括从家居用品到小雕像和珠宝的所有物品。 但这还不是Pinshape所能提供的全部!该网站还允许用户上传和共享自己的3D模型。这意味着您不仅可以下载出色的模型,还可以通过分享自己的设计为社区做出贡献。此外,Pinshape 提供了一系列自定义选项,因此您可以调整和调整模型以满足您的特定需求。 使用说明: 要下载模型,请在网站上创建一个帐户,搜索所需的模型,然后单击下载按钮。该网站还为每种型号提供了一系列定制选项。 36.Yeggi Yeggi 提供了大量免费的 3D 模型,您可以下载各种格式的模型,例如 STL、OBJ 和 FBX。该网站易于使用,您可以按关键字、类别或特定网站搜索模型。 Yeggi 对于任何寻找 3D 模型的人来说都是一个很好的资源。它提供了大量的模型集合,从日常物品到复杂的机械,以及介于两者之间的一切。该网站的收藏量在不断增长,每天都有新的型号增加。 使用说明: 要下载模型,请在网站上搜索所需的模型,然后单击下载按钮。该网站还提供指向托管模型的原始网站的链接。 37. Open3DModel 来自开放3D模型的图像 Open3DModel具有各种类别的模型,包括建筑,车辆和角色。无论您需要建筑物,汽车还是人的3D模型,都可以在此网站上找到。 该网站易于浏览,您可以按类别或关键字搜索模型。每个模型都附带预览图像和详细信息,例如文件格式、大小和多边形数量。此信息可以帮助您选择适合您需求的模型。 使用说明: 要下载模型,请访问网站,从库中选择所需的模型,然后单击下载按钮。 使用最好的 3D 资产管理工具简化您的 3D 制作流程。立即试用它们,将您的 3D 项目提升到一个新的水平! 38. 3DExport 对于那些为其 3D 设计项目寻找 3D 模型、纹理和其他资源的人来说,该平台是一个很好的资源。该网站有大量模型可供选择,包括 3D 打印对象、游戏资产等。用户可以按类别、文件格式或价格范围浏览,以找到适合其项目的完美资源。此外,3DExport 还提供一系列教程和其他 3D 资源,以帮助用户提高技能并创建更令人印象深刻的设计。 使用说明: 要使用 3DExport,只需创建一个帐户并浏览可用型号。您可以按类别、格式和价格进行搜索,以找到所需的型号。找到喜欢的模型后,只需下载它并开始在您的项目中使用它。 39.Blend Swap Blend Swap是一个社区驱动的市场,提供与Blender软件兼容的各种免费3D模型。该平台允许用户共享和下载模型、纹理和其他资产,以便在他们的项目中使用。 使用说明: 创建免费帐户后,您可以浏览社区上传的大量3D模型。当您找到要使用的一个时,只需下载它并将其导入您选择的 3D 软件即可。 40. 3DShook 3DShook 是一个高级 3D 模型市场,提供一系列用于建筑、游戏等各个行业的高质量模型。该平台提供基于订阅的模型,具有不同的定价计划,允许用户访问一系列模型。 使用说明: 注册免费帐户后,只需浏览3D模型库,选择您喜欢的模型,然后以您需要的格式下载它们。 41. Smithsonian X 3D 史密森尼 X 3D 对于正在寻找历史文物和文物的高质量 3D 模型的设计师来说,这是一个独特的资源。该平台提供了大量3D模型,这些模型是根据史密森尼博物馆和研究中心中的真实物体扫描创建的。 使用说明:
-
重温前端性能监控和 4 款最佳工具分享