携程网实习案例同享：运用HTML5监控网站功用
HTML5技能给Web带来许多新的元素，不只使网站变得越来越漂亮，交互体会越来越挨近完满，更使得许多从前不能够完结的功用都能够完结。本文关于HTML5在网站功用监控方面带来的新特性，与咱们共享携程旅行网在此方向的实习经历。
网站功用监控的现状
网站功用越来越被群众所重视，因为它直接影响用户体 验。大多数互联网公司在网站功用监控方面仅做到效劳器功用监控和网络I/O监控，这样的布景催生了一些第三方做网站功用监控的公司，如基调、监控宝、GA 等。它们都有一个共同点——根本在全国首要城市铺设了监控点，守时自动拜访页面来获取功用数据。然后守时对数据进行汇总，生成报表后供给给结尾用户。
第三方监控的优势与下风
第三方监控有如下一些优势与下风。
优势
无需改动现有程序代码。第三方监控因为选用自动拜访并搜集的机制，只需求在用户办理界面装备关联页面的URL，就能够模仿用户拜访的进程，因而彻底不需求开发人员介入。
能搜集到丰厚的数据。因为模仿拜访运用的阅读器由供货商布置，所以能够在客户端参加自定义插件或集成其他功用东西，能经过编程完结各类功用数据的搜集。
数据量不大，汇总便利。这取决于供货商的监测点布置，但限于本钱思考，一般供货商只会在一二线城市布置，这样数据量汇总相对简略，剖析杂乱度较低。
出现疑问时可重现和验证。因为能有丰厚的数据，而且发作疑问的监测点可控，咱们就能很简略重现，便利排错。
下风
一次性投入大。监测点的布置需求许多设备撑持，若是仅仅为一家公司供给效劳，性价比不高，需求许多的资金。
难以完结不一样阅读器下的测验。监测点无法顾及到一切用户运用的阅读器，关于不一样的事务，客户集体不一致，阅读器的权重也不一样，故监测点一般以IE和WebKit中心的阅读器为主。
呼应有时刻距离。一般来说，监控页面不能够只要一个，会有许多，测验时为确保不相互搅扰，特别是功用测验，会顺次按行列方法进行，这会使得一个循环的时刻很长，且需求比及一切监测点均完结测验后方可取得结尾陈述，不能及时反映其时的情况。
关于强依托流程进入的页面难以监控。例如预定流程，需求POST许多信息，且有时效性，关于监测点来说具有必定的应战。如今有些运营商能够供给一些简略的脚本功用，但关于日益杂乱的事务需求，已无法满意。
监控点有限，不能掩盖全体用户群。监控点能够添加，但总是无法掩盖一切的网络环境，因而数据只能用于参阅，并不能代表实在用户感触。
HTML5给咱们带来了啥
HTML5中新参加的performance规范在IE9、最新的Firefox和Chrome中都已完结，精确度也达到了毫秒等级，经过详细时刻点，咱们能取得许多要害的目标项。
在此，咱们简略看一下一些可用的目标(如图1)。其间有许多能协助咱们知道客户端功用和客户感触，例如：效劳器端处置时刻 + 网络传输时刻(较短)=responseStart–requestStart，客户端白屏时刻=domInteractive– navigationStart或responseStart等。
关于携程，咱们最首要监控的目标有下面几种。
1. Total总时长：从页面跳转开端至页面onLoad;
2. DNS域名解析时长：从建议页面域名解析至解析完结;
3. Connect树立与效劳器TCP衔接时长：从建议TCP衔接至三次握手完结;
4. Request恳求时长：从建议页面恳求至效劳器端回来榜首个字节;
5. Response呼应时长：从接纳效劳器发回的榜首字节至主页面下载完结;
6. DomReady页面Dom树解析：从页面跳转至页面Dom元素安稳。
接下来咱们看看客户端数据搜集的优势与下风。
优势
实在的客户拜访功用数据。客户在拜访网站的一起，能够还在做许多其他操作，而且能够还有许多其他的网络运用占用带宽，实在的用户数据关于知道客人感触具有代表性。
能区别阅读器、操作体系渠道。时下，用户运用着各式各样的外壳阅读器和自定义阅读器，而一般的测验无法掩盖到如此杂乱的网站阅读环境，因而这有些数据特别宝贵。
掩盖规划广，且地域散布较均衡。比拟第三方，咱们能依托JavaScript搜集到各个地域的数据，乃至是海外，规划越大的网站，越有含义，能反映用户当地的网络情况，获悉CDN加快作用等。
阅读器原生撑持，精度高。毫秒级的精度关于网络DNS、Connect时刻，以及阅读器初始化工作执行时刻有很大的含义。
下风
关于旧版别阅读器力不从心。功用数据搜集需求HTML5的撑持，关于IE6、IE7、IE8，不撑持这一规范是其最大硬伤，不过得益于HTML5的推动速度，跟着高版别阅读器的发布，这个疑问会逐渐淡化，并不需求咱们操心。
需求布置少数JavaScript代码。相似于Google Analyze的代码加载机制，需求在每个页面的底部嵌入代码，工作量取决于网站架构，若是有一致的页脚，工作量其实很小。
无法重现。因为数据来自客户，其时的情况无法保存，很难模仿客户的环境，会关于排错有必定的影响。
携程网的最佳实习
携程在数据搜集方面已累积了必定经历，首要完结思路与环境建立如图2所示。
JavaScript 搜集 / 数据回发
当 页面加载完结后，布置在页面中的JavaScript代码会从performance.timing目标中获取功用信息，然后把这些数据拼装成URL参 数，模仿发送一个图像恳求到Collector效劳器。模仿图像恳求的方法和Google Analyze等相似，即new Image().src=。这种方法运用广泛，具有跨域、兼容性好等长处。
这种回传方法也有缺乏。众所周知，GET恳求的参数长度是有约束的，这意味着咱们必需当心处置回发数据的长度，关于超长的信息进行切断。如若不然，过长的信息有能够会被直接扔掉，不利于后续的处置与剖析。
Nginx 接纳 / 记载Log
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;}
如上装备的作用是，拜访http://yourdomain/_.gif将得到一个只要一像素的GIF图像，其呼应速度非常快。
读取 Log / 发送至行列
一 个专门担任日志传送的Agent会经过相似tail的机制盯梢日志内容，实时地将新增日志条目发送至音讯行列，以备后续处置。这有些的含义在于：榜首，它 将集群中涣散的日志一致发送到了一处，是一个日志的聚合进程;第二，将剖析程序与Nginx效劳器解耦开来，最大化保证Nginx集群的高可用性，也最大 化保证了RAW Data的可用性。
从行列中取出 / Storm集群实时剖析
后端数据剖析程序选用了散布式实时流数据处置布局Storm。依据该布局进行处置，一来面临搜集到的海量数据，能够横向扩大处置才能，二来实时流式的运算推迟很小，能够实时获取页面功用信息，使及时的预警成为能够。
Storm把数据处置笼统成由一个个逻辑单元组成的拓扑布局(如图3)。每个逻辑单元由运算和输入输出组成，依照Storm的术语，这些逻辑单元有两大类：Spout和Bolt，其间Spout是数据的源头。
这些拓扑布局，将被涣散到集群中的各个物理节点上，然后进行散布式的高效运算，能够敏捷处置许多数据。
咱们在Storm集群上所做的工作，包含阅读器、操作体系、地理位置等的剖析，剖析后的数据，直接撑持按区域、运营商、体系渠道、阅读器类型，以及指定详细的页面等条件恣意查询和报表。
发生实时报表 / 预警邮件 / 预警短信
凭仗于Storm布局的强壮实时处置才能，对日志的剖析能够敏捷发生实时报表。此外经过与历史数据的参照比照，还能够就功用数据中的反常信息给予预警，包含发送预警邮件和预警短信等。
实时报表直接在内存中处置，凭仗Storm的DRPC(Distributed Remote Procedure Call)(如图4)，也即散布式远进程调用，能够把缓存在各个运算节点中的近来数据直接聚合起来生成报表。
经过一些规矩判别，咱们对实时数据流进行一些预警操作。预警工作触发后，关联信息作为一个工作发往报警体系。报警体系依据装备，向关联人员发送预警邮件或短信。
日、周、季、年汇总
在Storm输出数据的基础上，守时按日、周、季、年进行汇总。关于汇总数据能够便利地进行历史数据查询，为实时预警、长时刻功用评价等供给参阅。一起以不一样粒度进行旧数据的汇总，能够逐渐丢掉过期的巨大明细数据，减轻数据库的压力。
还有啥咱们能够做的?
整个环境建立需求不少的人力物力，许多人能够会对其价值置疑。在这里，我想通知咱们，客户端的数据搜集对错常值得投入的。除了以上说到的页面拜访的时刻点数据搜集外，其实咱们还有许多当地能够复用。
例如客户端的JavaScript过错搜集，运用try catch和onerror的组合，搜集客户端的过错信息。在携程，咱们也把这类数据归为网站的功用数据，JavaScript过错会直接影响用户对网站 的形象，一起会影响用户在网站的消耗，直接关系到赢利，不行无视。
又例如，经过用户行动数据搜集，能够取得页面的根本拜访信息。用户拜访流、用户在页面上的一切操作，都能够协助改善现有商品，若是条件答应，合作A/B测验，关于新商品的研制也能供给许多有价值的参阅。
因而，咱们能够凭仗想象力，扩大思路，取得更多有含义的信息，完结更多有含义的研讨(转载：A5)