事情经过是这样的:今天某同学用Matrix滤镜实现了IE下的一个旋转效果,但在IE6、7下页面样式全部被搞乱掉,滤镜之后的CSS样式完全没生效。剥离无关代码后类似于这样:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jerry Qu's HTML document</title>
<style type="text/css">
#img {
filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand');
}
body {color:red;}
</style>
</head>
<body>
<img id="img" src="http://st.imququ.com/uploads/2011/07/ququ_1_1_1.jpg" />这行文字应该是红色的。
</body>
</html> 用IE6或7打开这个页面,可以看到滤镜之后定义的样式没有生效。
上一篇博客提到09年初WED团队开发的浏览器环境检测工具时,忘记说这个是aoao同学的创意了。不过没关系,据说他又在秘密规划新版本了,再据说新版要增加的DNS解析时间计算已经开发完成,点上面那个链接就可以抢先体验。。。
好吧,参加过11年Velocity大会的同学应该都知道facebook那个算DNS解析时间的方法了,像我这种穷人家孩子参加不起VC大会的,主办方很厚道的提供有PPT可供观看。看完PPT觉得不过瘾,还是来动手实战下吧。
首先看原理:
a <= <random number> t1 http://a-doppler.facebook.com/test_pixel?HTTP1.0&t=1&size=0k t2 http://a-doppler.facebook.com/test_pixel?HTTP1.1&t=2&size=0k t3 http://a-doppler.facebook.com/test_pixel?HTTP1.1&t=3&size=0k t4 http://a-doppler.facebook.com/test_pixel?HTTP1.1&t=4&size=10k t1 = DNS + New Connection +RTT t2 = New Connection + RTT t3 = RTT 10k /(t4–t3)~TCP bandwidth
(来源:《MobilePerformanceVelocity2011.pdf》 by DavidWei.)
在我之前参与过的某产品上线后,我们经常会收到用户反馈的各种奇怪问题,很多都和浏览器环境有关,每次跟进起来费时费力。09年初,JK和Miller开发了一个页面工具用来排查浏览器环境相关问题,挺好用的。这个工具在我的小站也存放了一份,去掉了无关内容并改了一些提示文字,版权属于原作者。可以通过这个地址来访问:
http://qgy18.imququ.com/browser-doctor/
-----分割线-----
对于跟进用户反馈这个事情,再多说点。有时候用户在论坛或微博抱怨自己啥啥功能用不了,但这个问题没办法复现,也没有其他人反馈,要怎么解决呢?如果能联系到用户并且用户配合,能用上面的工具跑出结果来当然最好了;联系不上呢?那得从侧面下手:
如果有截图,大概扫一眼可以排查样式是否加载失败和样式兼容性问题,也可以排查缺少字体、缩放文本、调整DPI等常见问题。有些截图还能看到当时使用的浏览器,这就可以把问题定位到某个浏览器的某个版本。如果图上没浏览器,根据一些元素例如表单的默认样式差异,也差不多可以定位OS和浏览器类型。看截图还可以判断页面内容是否加载正常,例如页面上空了一块,那就要考虑是不是Ajax请求失败,或者被用户浏览器当广告屏蔽了一部分内容等等情况。
如果没截图,或者截图提供的信息太有限,那么可以设法确定用户身份,根据用户唯一标识和提交反馈的时间点,可以拿到web server访问日志,access log一般都有记userAgent,这就可以确认用户的OS和浏览器信息。还可以根据连续的日志还原用户操作流程,排查特定分支下出现的bug。有时候用户某个功能不能用是因为他的网络运营商劫持了某个域名造成的,服务器根本就没有他的访问日志。
我遇到的用户反馈的奇怪问题,大部分都是代码bug,剩下小部分问题就各种原因了,有页面被运营商篡改的;有浏览器设置不当或系统组件被破坏如msxml3.dll被反注册的;还有国内各种Shell把IE改坏的等等。
每件事背后都有它发生的原因,能通过种种蛛丝马迹成功解决用户的疑难杂症还是非常有幸福感的,虽说很多时候让用户“Ctrl+F5”、“换台电脑试试”同样能解决问题。
本文链接:http://www.imququ.com/post/browser-doctor.html
--EOF--