【茶包射手日記】使用IE Dev Tools追查Javascript效能問題
- - 黑暗執行緒同事回報某個網頁出現"在IE8下，使用jquery.blockUI遮蔽某個div後，輸入時，每打一個字都要等1-2秒字元才會顯示"的問題. 開啟VM使用IE8可重現問題；而同樣網頁在IE9下則運作正常. 針對此一IE下的JavaScript茶包，決定交由 JavaScript效能茶包一哥--IE Dev Tools Profiler工具進行獵殺!.
【茶包射手日記】使用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 16岁了
- yuguichun123 - cnBeta.COMFirefox 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%
- 丁丁 - SolidotPanggit 写道 "根据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软件简介.