【茶包射手日記】使用IE Dev Tools追查Javascript效能問題

标签: Trouble-Shooting IE jQuery | 发表时间:2012-01-18 23:44 | 作者:Jeffrey
出处:http://blog.darkthread.net/blogs/darkthreadtw/default.aspx

同事回報某個網頁出現"在IE8下,使用jquery.blockUI遮蔽某個div後,<input type="text">輸入時,每打一個字都要等1-2秒字元才會顯示"的問題。

開啟VM使用IE8可重現問題;而同樣網頁在IE9下則運作正常。針對此一IE下的JavaScript茶包,決定交由 JavaScript效能茶包一哥--IE Dev Tools Profiler工具進行獵殺!

使用IE8開啟問題網頁,按下F12啟用IE Dev Tools,故意觸發blockUI遮蔽重現輸入回應緩慢問題,此時選取IE Dev Tools的Profiler頁籤,按下"Start profiling",輸入幾個字元後,再停止側錄。

結果顯示,簡單幾個按鍵動作觸發了六千多次的sortOrder、siblingCheck以及高達17萬次的Array.unshift,頗為異常;而未使用blockUI遮蔽時則無此狀況。其中sortOrder耗用了數秒執行時間,疑似導致效能不彰的元兇。

使用IE9進行相同測試,得到相近結果: 一樣在幾秒內連續觸發成千上萬次的sortOrder、siblingCheck及Array.unshift,唯一不同的是IE9並未因此發生輸入回應遲緩的現象。我推估是同樣的指令在IE9環境中執行方式有異或是IE9大幅提升了JavaScript Engine的執行效能,因而執行次數相近,卻只耗用了386ms(如下圖),未明顯影響效能。

為追查導致異常大量呼叫的來源,將Current view切換為Call tree(下圖藍框處),可看出一連串的sortOrder呼叫源於jquery.blockUI.js第448行。

雙擊上圖橘框處,可直接帶至相對的程式碼位置,由邏輯推斷疑似呼叫$(e.target).parents("div." + opts.blockMsgClass)這段所引發。

懷疑是blockUI舊版Bug或blockUI與jQuery版本匹配問題,比對了jquery.js及jquery.blockUI.js版本,發現blockUI已是最新版,而jquery.js則還是1.4.4,版本偏舊。試著將jquery.js換成1.4.2或1.7都不會引發問題,因此推測屬版本匹配問題。決定將jquery.js換為1.7.1版並確認其他功能未受影響後,問題排除~

相关 [茶包 射手 ie] 推荐:

【茶包射手日記】使用IE Dev Tools追查Javascript效能問題

- - 黑暗執行緒
同事回報某個網頁出現"在IE8下,使用jquery.blockUI遮蔽某個div後,輸入時,每打一個字都要等1-2秒字元才會顯示"的問題. 開啟VM使用IE8可重現問題;而同樣網頁在IE9下則運作正常. 針對此一IE下的JavaScript茶包,決定交由 JavaScript效能茶包一哥--IE Dev Tools Profiler工具進行獵殺!.

IE 16岁了

- yuguichun123 - cnBeta.COM
Firefox 6正式版的发布引来了诸多关注,但悄无声息之中,Internet Explorer迎来了自己的16周岁生日――Mozilla,你才应该是送蛋糕的那个. 1995年8月16日(美国当地时间),微软发布了第一个版本的Internet Explorer. 其实,IE并不是微软完全自主开发的产品,而是花了200万美元购买Spyglass Mosaic浏览器的授权,然后修改而来.

IE 浏览器的创新

- - 博客 - 伯乐在线
译者按:IE 曾是 web 创新的先驱,但最近几年因为对 web 标准的支持落后于其他 浏览器以及低版本 IE 的各种 bug 而被人诟病. Zakas 带我们回顾了 IE 在 web 发展过程中扮演的辉煌角色,让我们能以一个更客观的眼光来看待 IE. 看完这篇文章,也许大家都会对 IE 浏览器有一定的改观,这也是我翻译这篇文章的目的.

奇怪的 IE Cookie 设置

- - IE浏览器中文网站
今天接到一个奇怪的问题,所有的浏览器都可以正常执行,唯独在 IE10 浏览器下运行会有问题,花了一些时间找问题到底是什么,这篇记录一下,希望能帮到不小心路过的网友. 经过一番 IE8, IE10, Chrome, Firefox 交叉测试后,发现 IE8 的状态栏有个小小的安全性提示(本来要截图,结果 … 选了接受 cookie 就 … 看不到图了),幸好有使用 IE8 做测试,真是不幸中的大幸,IE10 完全自己暗槓起来什么都不说啊 ~~~.

IE CSS文件限制

- - Web前端 - ITeye博客
单个页面最多31个css文件. 每个css文件大小最大288k. 每个css文件最多4095个选择器. Resource merging, which help you reduce the number of requests made to the server, may bring the following dilemma in IE.

IE中Image .onload方法问题

- 红茶 - WEB前端开发
因为IE会缓存图片,第2次加载的图片,不是从服务器上传过来的,而是从缓冲区里加载的. 先写onload方法,再指定这张图片的URL,这样就正常了. 所以,不是IE没有触发onload事件,而是因为加载缓冲区的速度太快,以至于没有运行到img.onload的时候,onload事件已经触发了.

jQuery2.0将不再支持IE 6/7/8

- - 脚本爱好者
jQuery 官方发布了下一阶段 jQuery 的路线图,该路线图显示 jQuery 1.8 将在一个月内发布,而其他后续版本的计划如下:. jQuery 1.9 (early 2013): 该版本将移除所有在 1.8 版本中废弃的接口,其他一些可能做为插件或者可选 API 使用,将继续支持 IE 6/7/8.

Chrome用户比IE用户更聪明?

- - 创意科技 - 果壳网
Calcudoku 根据2010年至2011年间该网站的数独解谜数据,对使用不同浏览器的用户进行了分析. 结果显示,在推解该网站的数独题时,Chrome用户的表现要好于其他浏览器用户. 从Calcudoku发布的分析图中我们可以看出(下图),无论是解4×4、5×5还是6×6的数独,Chrome用户的解题速度都是最快的,火狐和IE用户分列2、3位.

IE市场占有率已低于50%

- 丁丁 - Solidot
Panggit 写道 "根据Net Applications的统计,随着长时间的缓慢下降,IE市场占有率终于在10月份跌破了50%,为49.58%. 而Firefox在10月的占有率小幅上升0.14%,达21.20%. 上升最快的仍然是chrome,已经达到16.59%,进一步逼近Firefox.

IE各个版本的调试工具

- - CSDN博客互联网推荐文章
最近使用JQuery开发的网页在IE6浏览器下出现样式不对,VS2010调试的时候有些不便. 无意之中看到由微软开发的 modern.ie,继而发现 BrowserStack,发现有很多的IE调试工具,就用微软开发的那款吧. Expression Web SuperPreview 4.0软件简介.