网站crash问题处理过程

2015年3月19日

之前发现过,在百度浏览器上6.*版本上会crash,发现百度浏览器7在性能上做了一些优化,升级到7后其实还是会有crash问题,然后就简单查了下。
用的chrome的插件Audits做页面评估,主要是网络利用率和页面性能这两方面,它会显示出一些页面不足的地方。
图1
发现很多无用的css,是common模块中的,有98%都没有用到。
图2
原因是common模块中除了一些特定的打包后,把所有其他css和其他js都打包到一起,会导致可能只是用到一小块地方,也会去加载这整个打包的css和js。因为之前common模块主要是给选址包模块用的,基本都会用到,所有很多都打包到一起,而选址系统中只用到了部分。
图3
但其实css再多,也很少很会把浏览器弄crash的,一般是js引起的,死循环、内存泄露之类的。
能看出这里js也是会存在这个问题,会有很多无用的js代码,最后经过修改打包方式后,减少了2/3无用的js代码。
图4
这会再在百度浏览器7.0中看已经可以正常访问了,就以为问题已经解决了。但其实那会也怀疑过客流通同样加载这么多代码为什么都没问题,但只是带有这么个疑问,还没去处理。
后来偶然发现百度浏览器6还是会存在这个crash问题,但升级到7就没问题,说明百度浏览器7确实在性能上有了提升,但其实发现之前减少js代码后,只是治标不治本,还是会有crash的问题。
今天尝试去找出这个引起crash的地方,希望能彻底解决问题,又重新检查了下所加载的js。
偶然在Timeline和Profiles(这个主要是做性能优化的,包括查看CPU执行时间与内存占用)中发现,_colorize方法占用的cup执行时间相对其他来说都比较多,这方法是热力图绘制中的着色方法。
图5
图6
首页本不应该绘制热力图的,追查到使用这个调用到这个方法的地方
图7
是在重置热力图状态的时候是使用空数据的方法来清除热力图状态的
图8
把它改成隐藏热力图的方法后即可解决了
图9
CPU Profiles中也没有_colorize了,idle的占有率也上升了
图10
至此解决了crash问题的根本问题。
其实是热力图中当传入的数据为空的时候会有这个问题,至于为什么传入空值的时候会出现问题,后续会继续跟进,算是热力图的一个bug吧。