不久前，蓝洞封禁绝地求生主播SY和星魂的游戏账号，引发玩家热议。 而经过严格审核后，SY的账号很快就会被宣布解封，而官方的这一举动也代表着官方对SY没有被链接的认可。 正当玩家们等待《星魂》最终审核结果的时候斗鱼html5斗鱼html5，斗鱼超管突然发了一条微博，而在那条斗鱼超管的奇葩言论中，竟然有一条让人哭笑不得的暗示：腾讯、蓝洞拿了虎牙的钱来解封主播的账号。
在那个超级管家发的微博中，虎牙对星魂的做法是暂时封禁直播间，等待公众号检查结果。 如果确认星魂未开启，则开启星魂直播间。 对于封禁直播间的事情，虎牙的做法合理公正，并没有与主播勾结，而是利用了超观的想象力，为星魂造势。
毕竟，在虎牙女主播错误求婚的时候，虎牙就已经采取了这样的做法。 真正让斗鱼反超“大惊小怪”的，是斗鱼黑主播的做法。 无论是蛇哥还是50-50，游戏账号被封的事实都已经曝光，但斗鱼似乎“看到”了这些事情，依然纵容主播继续直播。 在斗鱼看来，民间实锤主播并没有真正的疗效，而斗鱼又不主动要求官方调查主播账号，那岂不是无法无天了吗？
事实上，腾讯、蓝洞之所以积极配合虎牙进行实测，并不是因为他们收了虎牙的直播钱，而是因为他们讨厌作弊。 一个普通玩家的作弊影响了游戏的质量，而一个主播的作弊似乎带动了无数玩家作弊。 再加上绝地求生韩服正式上线，为了良好的游戏环境，腾讯肯定会全力以赴检测主播是否作弊。
吃鸡平台服务推出后，腾讯必然会举办各种小型比赛，看来直播平台将与腾讯达成合作关系。 平台主播的干净程度，也将在很大程度上决定平台与腾讯的合作是否紧密。 虎牙直播也可以将自己的主播交给官方，哪怕身无畏惧，哪怕两个主播挂了，也已经向官方及时报告处理，并表示决心防止欺骗官方。 至于个别平台，是否敢于将自己的主播拱手让给蓝洞和腾讯，显然还是一个未知数。
如今，尽管有作弊传闻，两位绝地求生主播无无开和蛇仍然逍遥法外。 星魂和SY在人气上似乎无法与他们相比。 不知道斗鱼超人是否指责虎牙向官员行贿，但他们有没有想过，为什么自家平台不敢将两位主播的账号送去检查？
中国应用性能管理行业盛会——2016中国应用性能管理大会（简称APMCon2016）于8月18日至19日在广州新粤皇冠假日酒店隆重举行。 APMCon由听云、Geekbang、InfoQ联合主办。 作为国外APM领域最具影响力的技术会议，首届APMCon以“驱动应用架构优化与创新”为主题举办，旨在推动APM在国外的成长和发展。
同程框架开发部中层研发总监魏晓军在HTML5调优最佳实践环节发表了题为《携程的HTML5性能优化实战》的演讲，现场分析了同程在HTML5方面的一些性能优化经验。
以下为演讲实录：
魏晓军：我收到的分享内容是关于我带来的HTML5框架下的实际优化。 我昨天说的和他们以前说的不一样。 我只是看了一下明天演讲的主题，基本上涵盖了HTML5中的所有内容。 如果使用测试框架来检查HTML5性能问题，在HTML5速度环境下会有一些优化。 而明天我会讲一下同程在HTML5方面做了哪些优化。
1. HTML5概述
首先告诉大家，HTML5就是HTML5。 虽然HTML5不仅仅是HTML，它还包括包括CSS和JavaScript在内的一组技术组合。 传统的 HTML5 有新的标签和新的元素。 CSS之间还有一些动画等方面，都是广义的HTML5定义，而不仅仅是狭义的HTML5。
我们可以看到HTML5的发展趋势，它在游戏领域的应用，比如刚才魏子军老师介绍的游戏中的HTML5，以及大家常用的电子商务。 ，离不开HTML5。 其实广告也是有的，而且陌陌上的促销大部分都是HTML5页面，可见HTML5随处可见。 为什么HTML5发展得这么好？ 有几个优点。 最简单的优点就是跨平台，而且它的开发周期比较短。 虽然它有很多优点，但这里就不多说了。
HTML5也有一些载体。 HTML5本身的优化和载体的优化都可以做到完美，所以我在里面列出了几个载体。 最常用的是Momo。 我们经常在陌陌上看到一些网络营销页面，包括我们自己的一些公众号，本来就是HTML5页面。 然后是APP。 虽然APP中有很多模式，比如Native模式，但是我们经常会听到APP上有一些广告页面，或者经常变化的页面都是HTML5制作的。 最简单的就是你可以看到很多平台上有扫描。 然后就是浏览器，所以这种东西就是它的载体。 如果只优化HTML5，如果载体不变的话，如何优化是有限的，包括最早接触AE6。 如果AE6没有升级，你将无法进行AE6。 。
2. 携程HTML5框架介绍
接下来我们就来说说同城使用HTML5的框架。 我们称之为蜥蜴。 虽然Lizard的意思是鬣蜥，但是Lizard这个名字是希望我们的框架是跨平台的，HTML5可以走，SEO可以用，Hybrid也可以用。 我们艺龙目前的HTML5框架只需要为开发者做代码，这就是我们名字的由来。
虽然框架采用的是单页面模型，但是我们基于业界一些开源的东西组装了一个单元框架。 看起来丰富的各种行为，包括性能采集、定制UI、与第三方的合作，构成了HTML5整体的框架。 那我想讲一下我们在做这个框架的时候遇到了哪些问题，一一分享给大家。 知识点可能比较复杂，而且都是我们实际的干货。
上图是我画的框图，虽然上面还有很多东西没画。 最下面一栏是我们支持的平台，也就是我昨天提到的HTML5平台载体html5 框架，SEO，以及我们自己的APP。 现在有Android TV、微信、第三方APP等，比如合作的招商建设银行APP，上面的Embedding我们的页面是基于Lizard的。
下面是Lizard的一些载体，里面是Lizard的一些功能。 既然是单页面模型，那么它就有自己的一套MVC机制，以及我们的一些用户行为集合。 我们有一个模块化的想法。 随着现在后端的发展，后端已经不再只是做一些特效了。 更多的是吸收前端的思想。 我们已经在做工程化的东西了，所以我们不能再像之前提到的那样，我们必须有一种思维来做这件事，所以我们都是通过模块来定义的。
另外，因为我们的HTML5框架会应用到我们的Native上，所以我们使用了一些外部的工具库，最常用的就是Router、模板引擎、RequireJS等html5 框架，还有我们的一套UI，虽然每个A公司也会有一些多元化的UI，通常公司都会有自己的一套框架，你的很多东西都是多元化的。 这是一个简单的蜥蜴结照明，它只是一个平台，它包含的内容，第三方的介绍，以及它的一些形式。
3.蜥蜴使用场景
接下来我们看看蜥蜴的场景。 我只列出了三个：英文站点、广告页面、英文站点。 另外，我们在APP上也可以看到，只要是与HTML5相关的，就可以看到蜥蜴的链接。
明天的重点是优化。 我列出了一些优化点，比较多，也比较简单。
单页模式：我们在2013年左右就已经离开了这个机制。单页模式有很多优点，也有一些适用的场景。 如果你只有一个页面，没有必要使用单页模式，对于我们来说，页面很多，而且上面至少要有五层，所以使用单页还是比较合适的页面模式。
组件样式的拆分：一开始页面比较少的时候，我们会把所有的框架放在一个页面上，把所有的样式都放在里面。 优点之一是只需要一个请求。 随着业务的发展，这种款式的桌子的部件越来越多，也随着业务的发展越来越大，最后达到了40K多，我们只能拆了。 组件使用的样式全部拆解到自己的组件上，实现按需加载，提高页面性能。
图片压缩上传：不知道您对HTML5中的图片有没有要求？ 因为艺龙是做旅游的，特别是我们攻略频道，很多人都会上传一些图片。 有时他使用更好的单反，拍摄的照片很大，所以我们对这部分做了一些处理。 我们使用Canvas压缩图像，然后将其扔到服务器中。 后来我们发现，随着图片尺寸的减小，压缩率越好，小于2m时压缩率高于90%。 如果使用的图片比较多，这个区域也是一个很好的优化点。
模块前馈：这个东西一开始也是一样的。 你们都在一起做CSS和JS，各种渠道聚集在一起写这个东西。 写完之后，有很多集成，或者其他依赖逐步完善。 ，最终依赖关系非常复杂，很少能拿下一个。 出现这个问题的时候只用了一个模块，最终找到了十个模块，所以后来进行了解耦，保证一个独立的功能只有一个。
静态资源拆分：一开始每个通道都在一台主机上，但是我们应该是使用.NET最多的公司，所以后面会分开，如果你前期做的话，应该也会遇到这样的问题，现在我们所有的静态资源都放在静态服务器上，动态资源都放在动态服务器上，所以这也可能是一个小的优化点。
首屏显示：这个应该是大家最关心的，最直接的就是首屏的内容。 如果首屏无法显示的话，用户流失率是相当高的，所以大家都在绞尽脑汁地想这方面的事情。 我们也有自己的看法。 首先，慢的原因当然有两个，一是资源太大，二是网络请求太慢。 右图中，我标记了橙色的。 现在我们会提前把一些DOM结构放在那里，实际下载完之后再填写数据，这样用户看起来还不错，所以我们做了一个FakeData，第二块做ErrorData，当数据超时的时候，就可以先填默认的数据，虽然这次不行，但是上次点击就可以了。 你还可能会用到其他的东西，比如Core和UI的分割，还有一个就是延迟加载功能，还有模板预编译和ShowView功能。 这是我们首页的一些优化。 事实上，也有消极的一面。
性能数据收集：这个可以结合刚才大风老师的框架做一些新的测试方向，支持你认为需要做哪一块测试。 这个主要涉及到数据方面，还有模板方面，另外就是一些文档流方面一些新的数据。 还有版本。 例如，每个公司的框架不可能是一成不变的。 您将比较以前的版本和此版本，以查看同一页面上存在哪些性能问题。 并不是说新版本就是最好的，所以这方面我们要做综合比较，只有通过比较才能发现问题。
页码处理机制：因为我们是单页模式，所以只有一页是真实的。 这会导致一个问题。 每页的 DOM 节点将会越来越多。 当达到2000多的时候，还是会比较卡。 只要改变任意一个DOM的颜色，改变颜色就可以了，但是如果改变其他东西就会很卡。 因此，需要对这块进行加工。 页面节点不超过5个。 让他指定需要保存哪些页面。 还有一个我们没有完全清除的页面可以放在文档部分。 上次我进来的时候，有时你只需要平息风暴。
数据缓存：虽然现在HTML5有了一些新特性，但我们还是要好好利用它们。 我们用的最多的是localstorage，虽然它有一定的局限性，并且可以浏览。 现在阿里、百度等几家大公司也都使用localstorage来做一些缓存。 一切都可以被缓存，但它是有限的。 当达到一定限度的时候，有些东西就无法缓存了，所以还是有选择性缓存。 我们更频繁使用的一些数据。 数据类型是非实时的，比如城市信息、常用联系人，可以放在localstorage上，会有一些限制。 现在我们将每 30-60 秒手动清除一次。
减少数据返回：这似乎是影响我们今天页面的一个重要点。 由于文档的结构会导致DOM耗时较长，因此应尽可能减少数据返回。 这部分主要做了几个步骤。 比如我们取出城市的时候，取出了国际和国外，但毕竟用户是国外，所以就没有必要取出国际。 另一种是返回必要的数据，从这个页面到下一个页面需要拉取一次，而且首页好像不需要，只需要拉取相应的数据即可。
情感组件迁移：这个应该是大家都会用到的，最常见的就是loading，从产品的角度来说非常美观，从用户的角度来说需要花费大量的流量，所以为了解决这个问题我们想用canvas来画画。 您可以看到，baseuw64 位于左侧，canvas 图像位于右侧。
增大框架的规模：虽然这也是所有框架都会遇到的一个缺点，因为业务线多了，但是你采取共同使用的方式，所以框架体系越来越大。 如果我自己做一个简单的框架，可能十K就够了，而如果酒店、旅游、机票、火车票集中起来的话，框架就会非常大，所以对我们今天业务影响最大的就是框架系统太大。 今天我们大约有80K。 在这方面我们也绞尽脑汁优化HTML5，所以必须拆解一下。 我们可以把解析配置项拆掉，比如单线面模式。 另一部分是你多样化的用户界面，所以一定要删除这些东西。
用浏览器并发：这是有一次我发现我们在浏览器上请求的时候，这段时间只有一个JS请求。 我们知道，浏览器是可以改变的，只要带宽允许，而2G网络的路不同，所以在4G和wifi的情况下只要求一个JS是浪费的。 这时候框架里的一些东西就被拆解成了并发的东西。 改进，这也可能是一个小小的优化点。
框架功能分解：看下图，这是我们拆解出来的一个JS资源，首先会有一个解析文件，这个解析文件会解析这个页面的配置项文件，比如WEB，由于去掉导致的问题实在是要求太高了。 这个时候我们用的是webresource.c-ctrip-com，技术就放在旁边了。
异步加载非必要模块：虽然很多API都用不到，所以这个东西一定要找出来，然后删掉。 然后就是我们的一些定位模块。 我们的定位分为国际和国外，还有百度和谷歌。 混乱还是相当大的，所以如果第一个请求无法播放另一个请求也没关系，但可能是用户体验问题。 那就有点糟糕了，所以我们必须异步做这种事情。
并行加载：原来的逻辑是取出bu首屏的数据，待dom节点显示完成后，再以阻塞的方式加载bu业务的控制器，然后绑定domstorm等，中间两个异步请求风暴是串行的，导致时间>=两者之和； 优化的逻辑是两个异步请求同时加载，然后在处理业务时互相等待。 在不影响原有业务处理顺序的情况下，总时间为两个异步请求中请求时间最长的一个。
适当使用服务器端优点：即使我们使用单页模式，仍然存在一些缺点，所以我们使用一些资源服务器端输出，或者将登录状态放在服务器端，并将数据聚合在服务器端。 一定要充分发挥各个多终端的优势，后端有后端的优势，服务器有服务器的优势，组合起来才能得到最好的效果。
实现Lite版本：由于你的框架并不适合所有的场景，比如营销、广告页面，可能是一个页面，在构建框架和页面的时候是相当复杂的，所以我们推出了自己的Lite版本，可以说可以是一个工具加插件的形式，比如我们会提取一些工具功能和一些定位模块，以模块的形式加载。 可以加载没有模块的模块，这样就可以保证这个营销页面的速度。 他们单纯运行框架的话是相当浪费的，所以我们最后拆解的Lite版本只用了4K，压缩版也只有7K。 制作一个活动页面是相当有意义的。
第三方库优化：因为我们是模块化的，所以我们似乎用了更多的JS。 你认识另外两个吗？ alameda、almond、requirejs看起来还是蛮好用的，虽然其他东西可以自己精简，但没必要完全遵守。
新技术介绍：ReactJS.net、ReactJS、Webpack、Vue.js、AngularJS，我们推出ReactJS.net来做自己的东西，有时候是必须的，所以需要关注一些新技术。
APMCon2016讲座PPT合集下载
链接： 密码： bezk
