Hubble平台开发过程难点总结

热力图

1、伪元素实现的热力图，当数据和页面节点太多时，查询和渲染节点时相当耗时，会导致页面出现假死状态。

解决方案：使用setTimeout循环，每秒钟渲染500个节点，这样每秒之间js的执行栈就会有空闲的时间来处理鼠标滚动、点击以及其他事件，就不会出现卡死的现象；动态页面问题，页面中的一些节点是动态加载出来的，解决办法是维护一个数组，没找到的数据都放在这个数组利，循环渲染这个数组，知道清空。

2、使用canvas实现的热力图，由于用户使用时的屏幕尺寸繁杂，点击的位置与分析时最终查看热力图时的位置很有可能不一样。

解决方案：采集数据时，收集dom节点的path，以及鼠标相对于元素左边和上边的距离。这样在画热力图时就不用考虑鼠标相对也网页的位置，只需要先通过path找到dom节点，计算出dom节点距离网页左边和上边的距离，再加上鼠标相对于元素的距离，就能精准的定位到用户点击时的位置。

用户路径——桑基图

echarts本身提供了桑基图的功能，但是echarts是用canvas实现的，灵活性不够。我们的需求是要在每个节点和路径中加入点击实现，弹出详情数据。

解决方案：使用d3+sankey插件实现，d3是基于svg实现的，可以当做普通的dom几点来添加事件，点亮路径等操作。

看板

看板中单图较多时，同时发出查询请求会触发浏览器最大并发数，导致点击其他菜单时发不出请求，页面出现假死状态。

解决方案：通过window.onbeforeunload事件，在页面离开之前abort掉先前的众多请求，这些求情都关闭了，自然就可以发出新的请求了。还有一种是将资源放在不同的域下面，因为浏览器的最大并发数是针对同一个域的显示。

ABTest平台

因为当初首次使用redux，躁动的心促使了我们不管什么数据都要发出action，然而最终被混乱的状态搞的焦头烂额。

解决方案：只有系统级别的数据，公用的数据才放在store里面，像登录用户信息、配置信息、产品列表等。千万不要乱用action。