网站监控网页内容监测 优势劣势HTML5给我们带来了什么HTML5中新(组图)

　　网站监控网页内容监测 优势劣势HTML5给我们带来了什么HTML5中新(组图)

　　网站性能监控状态

　　网站 性能因为直接影响用户体验，越来越受到大众的关注。大多数互联网公司在网站性能监控方面只做服务器性能监控和网络I/O监控。这个背景催生了一些做网站性能监控的第三方公司，比如Keynote、Surveillance Bao、GA。他们都有一个共同点，监控点基本分布在全国各大城市，并且定期主动访问页面获取性能数据。然后定期汇总数据，生成报告并提供给最终用户。

　　第三方监控的优缺点

　　第三方监控有以下优点和缺点。

　　优势

　　缺点

　　HTML5 给我们带来了什么

　　HTML5新增的性能标准已经在IE9、、最新的Firefox和Chrome中实现，准确度达到毫秒级。通过详细的时间点，我们可以获得很多关键指标。

　　这里先简单介绍一下一些可用的指标（如1）所示。很多可以帮助我们了解客户端性能和客户体验，例如：服务器端处理时间+网络传输时间（更短）= responseStart–requestStart，客户端白屏时间=domInteractive–navigationStart 或 responseStart 等

　　图1 HTML5性能指标（图片引自W3C官方网站）

　　对于携程，我们主要监测以下指标。

　　1.总时间：从页面跳转到页面onLoad；

　　2.DNS域名解析时间：从页面域名解析开始到解析完成；

　　3.Connect 与服务器建立 TCP 连接时间：从 TCP 连接的发起到三路握手的完成；

　　4.请求时长：从发起页面请求到服务器返回第一个字节；

　　5.响应时长：从接收服务器发回的第一个字节到主页面下载完成；

　　6. DomReady 页面 Dom 树分析：页面跳转 Dom 元素稳定。

　　接下来我们来看看客户端数据采集的优缺点。

　　优势

　　缺点

　　携程最佳实践

　　携程在数据采集方面积累了一定的经验，主要实现思路和环境搭建如图2所示。

　　图2 主要实现思路及环境搭建

　　JavaScript 采集 / 数据回传

　　页面加载时，页面上部署的JavaScript代码会从performance.timing对象中获取性能信息，然后将数据组装成URL参数，模拟向Collector服务器发送图片请求。模拟图片请求的方法和谷歌分析类似，就是new Image().src=。该方法应用广泛，具有跨域、兼容性好等优点。

　　这种返回方式有一些缺点。众所周知，GET请求的参数长度是有限的，这意味着我们必须小心处理回发数据的长度，截断过长的信息。否则，过长的信息可能会直接丢失，不利于后续的处理和分析。

　　Nginx 接收/记录日志

　　Collector 服务由 Nginx 集群提供，性能卓越。为了尽量减少客户端发回数据时的资源占用，Nginx 只保留日志，不做任何处理。这样可以快速完成客户端的返回数据并关闭连接，最大限度地减少对用户体验的影响。 Nginx常见的访问日志格式（包括Apache等）都收录GET请求的完整URL，我们返回的性能数据记录在URL参数中。

　　为了优化 Collector 集群的负载能力，我们需要对 Linux、Nginx 等进行相应的调优。

　　对于Linux，最大打开文件数是最关键的参数。由于常规的Web服务器经常运行PHP、JavaScript等动态脚本，并且每个请求还涉及到数据库操作，所以它们的并发量都在1000以上。 Linux 服务器的默认配置通常足以满足此级别的并发。但是我们的场景比较特殊：我们几乎不需要做处理，只需要写下访问日志。 Nginx服务器以强大的并发性能着称，官方数据显示可支持10万并发。在Linux系统中，每个连接对应一个Socket文件，所以最大并发数以系统对最大打开文件数的限制为准。此外，一些网络相关的内核参数也根据应用场景进行了优化。

　　对于 Nginx，去掉了不必要的功能，保留了 HttpEmptyGifModule。此模块仅向传入请求返回 1×1 像素的 GIF 图像。由于图像数据只有几个字节，并且直接存储在内存中，因此能够以极快的速度响应客户端请求。

　　location = /_.gif {empty_gif;}

　　以上配置的效果是访问会得到一张一像素的GIF图片，响应速度非常快。

　　读取日志/发送到队列

　　一个专门负责日志投递的agent会通过类似tail的机制跟踪日志内容，并实时将新的日志条目发送到消息队列中进行后续处理。这部分的意义在于：首先将集群中分散的日志发送到一个地方，这是一个日志聚合过程；其次，分析程序与Nginx服务器解耦，最大限度的保护Nginx集群。可用性也被最大化以保证RAW数据的可用性。

　　出队/Storm集群实时分析

　　后端数据分析程序使用分布式实时流数据处理框架Storm。基于该框架的处理，一方面可以在面对采集到的海量数据时横向扩展处理能力，另一方面实时流式操作延迟小，可以在实时，使及时预警成为可能。

　　Storm 将数据处理抽象为由逻辑单元组成的拓扑结构（如3）。每个逻辑单元由操作和输入输出组成。根据 Storm 的术语，这些逻辑单元分为两类： Spout还有 Bolt，其中 Spout 是数据的来源。

　　图3 Storm运行拓扑结构*敏*感*词*（引自Storm官方网站）

　　这些拓扑结构会分布到集群中的每个物理节点，从而可以进行分布式高效的操作，快速处理大量数据。

　　我们在Storm集群上所做的，包括对浏览器、操作系统、地理位置等的分析，所分析的数据直接支持地区、运营商、系统平台、浏览器类型，并指定具体的任何查询和报告页面等条件。

　　生成实时报告/警告邮件/警告短信

　　借助Storm框架强大的实时处理能力，分析日志可以快速生成实时报告。此外，通过历史数据的参考和对比，还可以对性能数据中的异常信息进行预警，包括发送预警邮件和预警短信。

　　实时报告直接在内存中处理。借助Storm的DRPC(Distributed Remote Procedure Call)（如4）分布式远程过程调用所示，可以直接聚合各计算节点缓存的最新数据生成报告。

　　图4 Storm分布式RPC*敏*感*词*（引自Storm官方网站）

　　从一些规则来看，我们对实时数据流进行了一些预警操作。预警事件触发后，相关信息作为事件发送到报警系统。报警系统根据配置向相关人员发送预警邮件或短信。

　　每日、每周、每季度和每年的总结

　　基于Storm的输出数据，会按天、周、季、年定期汇总。对于汇总数据，可以轻松查询历史数据，为实时预警和长期绩效评估提供参考。同时，对不同粒度的旧数据进行采集，可以逐步丢弃过时的海量明细数据，减轻数据库压力。

　　我们还能做什么？

　　整个环境的建设需要大量的人力物力，很多人可能会怀疑它的价值。在这里，我想告诉大家，客户端的数据采集是非常值得投资的，除了上面提到的页面访问的时间点数据采集，其实还有很多我们可以复用的地方。

　　比如客户端JavaScript错误采集，结合使用try catch和onerror来采集客户端错误信息。在携程，我们也将这类数据归类为网站性能数据。 JavaScript错误会直接影响用户对网站的印象，同时也会影响用户在网站的消费，直接关系到利润，不容忽视。

　　再比如，通过用户行为数据采集，可以获得页面的基本访问信息。用户访问流程和用户在页面上的所有操作都可以帮助改进现有产品。如果条件允许，通过A/B测试，还可以为新产品的研发提供很多有价值的参考。

　　因此，您可以发挥您的想象力来扩展您的思维，获取更有意义的信息，完成更有意义的研究。

　　文/楚承东、刘海峰、谢盛晓（本文三位作者均来自携程网）