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

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

　　网站性能监控的现状

　　网站 性能因为直接影响用户体验，越来越受到大众的关注。大多数互联网公司在网站性能监控方面只做服务器性能监控和网络I/O监控。这种背景催生了一些做网站性能监控的第三方公司，比如Keynote和Surveillance。，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 图像。由于图像数据只有几个字节，并且直接存储在内存中，因此可以以极快的速度响应客户端请求。

　　位置 = /_.gif {empty_gif;}

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

　　读取日志/发送到队列

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

　　从队列中取出/Storm集群实时分析

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

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

　　图3 Storm计算拓扑*敏*感*词*（引自Storm官方网站）

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

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

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

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

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

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

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

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

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

　　我们还能做什么？

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

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

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

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

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