Nicholas教您如何避免Javascript脚本导致IE和其他浏览器运行缓慢
在Web开发的时候,经常会遇到的一种情况就是浏览器提示脚本运行时间过长,停止还 是继续,无论你选择什么,相信你都会想尽一切办法让这个对话框远离你的用户们。可你是否知道,这些不同的浏览器究竟是如何判断,哪些脚本处于“失控”状态 么?本文作者,就从Internet Explorer、Firefox、Safari、Chrome和Opera五种浏览器,分析了这个情况出现的原因。
【原文标题】What determines that a script is long-running?
【原文作者】Nicholas C. Zakas
以下是对原文的翻译:
Web 开发者经常遇到并必须及时处理的问题就是“提示脚本运行时间过长的提示框”(或者称为“失控脚本提示”),这些令人讨厌的对话框会在你的脚本 执行时间过长的时候出现。对于Web开发者的基本准则就是,无论什么时候,都不要让用户看到这些对话框,因为这会给人一种代码缺乏结构化的印象,更简单的 说,你的代码负担太重了。
用Brendan Eich(JavaScript的发明人)的话来讲,如果JavaScript运行的时间需要用秒来计算,一定是什么地方搞错了。我个人可以忍受的上限可 能更小一些,不论什么脚本,在任何时间、任何浏览器上执行,都不应该超过100毫秒。如果实际执行的时间长于这个底限,一定要将进程分解成若干更小的代码 段。
另外,其实很少有人真正意识到究竟是什么原因导致脚本在不同的浏览器中运行时间过长,连我自己都没有深究过。所以我决定坐下来好好研 究一下,我们究 竟会在什么情况才会看到那个讨厌的对话框。判断脚本是否失控,无外乎就两种方法。一种是根据执行了多少条语句,一种是判断脚本执行花费的时间。各个浏览器 判断脚本失控的具体方法会有略微的不同。
Internet Explorer
Internet Explorer判断一个脚本是否失控,主要通过JScript引擎执行语句的总数来判断。默认情况下,这个上限是500万条语句,这个值是可以通过注册表修改的。当你的脚本执行的语句数量超过这个限制,你就会看到下面的窗口。
这 个对话框提示:“这个页面上有一段脚本导致Internet Explorer运行缓慢,如果你继续运行,你的计算机可能会变为无响应状态”。要不是追求技术上的准确性,这样说确实有点过了。对话框有两个选项,要么 停止脚本执行,要么允许脚本继续运行。当这个对话框显示的时候,脚本已经被完全停止了。如果你选择继续运行脚本,就会重新计算当前执行的语句数,也就是 说,如果这个数值再次达到上限时,你会再次看到这个对话框。
Firefox
Firefox是根据脚本引擎持续执行代码的时间来判断一段脚本是否失控。默认的上限是10秒,可以通过about:config页面来修改这个值。这里需要注意的是,当弹出类似alert的模式对话框的时候,是不计时的。当浏览器执行脚本的时间达到这个上限,Firefox就会显示类似下面的对话框:
Firefox 的对话框提示:“这个页面的一段脚本目前运行忙,或者这段脚本已经停止响应。你可以停止执行这段脚本,并在调试器中打开这段脚本,或 者保持这段脚本继续运行”。更清楚的描述了遇到的问题,并且没有IE说的那么恐怖。在这个对话框上可以执行三种操作:停止脚本执行、调试脚本或者让脚本继 续运行。和Internet Explorer一样,当运行脚本继续运行以后,对持续运行脚本时间的统计就会重置。调试脚本按钮,只有在你安装了Firebug,并在该页面激活了调试 的时候才会出现。执行调试脚本操作后,可以显示执行时间过长的代码段的具体位置。
Safari
Safari同样根据脚本引擎持续执行脚本的时间来判断,当我对Webkit的源代码进行反复研究后,发现默认的超时时间是5秒,一旦达到这个上限,就会给出下面的对话框提示:
对话框提示:“在页面url上的脚本让Safari失去响应,你是要继续运行脚本还是终止脚本”。同样的,对于用户来说,也不是什么可怕的提示。在Safari中,可以关闭失控脚本的检测功能。
Chrome
Chrome 在跟踪技术上有点狡猾,失控脚本检测功能似乎和tab的事故控制(crash control)关联到一起。我仔细看了源代码,却没有找到具体的限制,但基本确定的是,这个限制是以时间为基础的,估计在10秒左右(要么是5秒,要么 是10秒,总要和Safari或者Firefox看齐么)。我正在联系Chrome项目组中的朋友,看看能不能得到确定的信息。尽管如此,如果网页中存在 失控的脚本,用户还是会看到下面的对话框:
毫无疑问,Chrome的提示比起其他浏览器来说,显得都更加严重。点击“Wait”按钮,脚本会继续运行,直到达到下一个上限为止,也可以点击“Kill pages”,直接关闭该页面在内存中的所有信息,并用一个空白页取而代之。
Opera
Opera的情况比较有趣:他貌似没有针对失控脚本的相应限制。我运行了几个很长的测试,甚至花了几分钟,而在这个过程中,浏览器一直可以正常响应,这很出我的意料之外。我不是很确定,对于现在的情况来说,这个方法是好是坏,但至少它生效了,不是么?
一些建议
无论你的用户使用什么浏览器,都不应该在任何时候看到类似的提示。在你的网站或者Web应用程序作为产品发布之前,做一些常规的性能测试是非常有必要的。在这方面有很多工具可以加以利用,比如Firebug’s profiler(只支持Firefox)、YUI Profiler (支持全部浏览器)或者Internet Explorer 8’s Profiler。 你应该毫不犹豫地将那些执行时间超过100毫秒的脚本找出来,哪怕这些脚本只是在某些浏览器上运行不畅,这些脚本包含了一些需要执行很长时间的代码段,而 这些代码应该通过性能检测工具进行重新评估。确保你不是使用Chrome作为测试的底线,因为Chrome在执行JavaScript的速度上比其他浏览 器要高出一个数量级(和Firefox 3.1还有最新的WebKit Nightly相当)。最好使用Internet Explorer作为测试的底线,然后再测试其他浏览器,因为无论什么时候,IE的JavaScript引擎都是最慢的,当在IE上修复问题以后,十有八 九在其他浏览器上也可以正常运行了。
本文引用自
http://www.w3cgroup.com/article/trackback.asp?tbID=212&action=addtb&tbKey=eb3887fc6720f83620a98dfa54247f504cc98f96
分享到:
相关推荐
应同学邀请,演示如何使用 PyQt5 内嵌浏览器浏览网页,并注入 Javascript 脚本实现自动化操作。 下面测试的是一个廉价机票预订网站(http://www.flyscoot.com/),关键点如下 使用 QWebEngineView 加载网页,并显示...
各主流浏览器如何禁用javascript脚本
火狐和IE支持javaScript脚本的一些区别
1.编译运行JavaScript脚本的例子。 2.包含了QScriptEngine的一些使用方法。
如果希望自己的浏览器禁止运行网页上的 JavaScript 脚本的话,可以按照下面的方法将自己的浏览器设置一下: 【1】:打开 IE 浏览器,然后选择 【工具】–> 【Internet 选项】–>【安全】–>【自定义级别】然后在打开的...
作为一个前端,避免不了会遇见IE的坑,其他浏览器都好好的,测到IE就完蛋,各种不支持,服气了 有些属性和方法是所有版本IE都不支持,而有些则是部分支持,在项目中能够,主要分界岭为IE8,我相信目前大部分在...
IE4 DOM的一部分也被其他的浏览器所采用,并且,它仍然在Web中发挥作用。在介绍了IE4 DOM的标准替代之后,将在本章末尾介绍它。 Netscape 4针对DOM采用了一种非常不同的方式,基于叫做层的动态定位的可脚本化元素。...
IE javascript 脚本视角解决办法
Google出的JavaScript脚本,用于测试JavaScript引擎的性能。
上网时浏览器要求启用JavaScript脚本时使用
获取IE信息的JavaScript脚本,是一个完整的html文件,直接打开就可以。
javascript获取浏览器临时目录javascript获取浏览器临时目录javascript获取浏览器临时目录javascript获取浏览器临时目录
索引访问 用vs.net调试javascript 1,首先,要让你的ie允许调试脚本,具体步骤如下: 打开ie->工具菜单->inter选项->高级选项卡->去掉“禁止脚本调试"选项 2,打开vs.net,创建一个新的asp.net项目(或打开一个) 3,运行...
如何用JavaScript检测当前浏览器是无头浏览器 目录 什么是无头浏览器(headless browser)?为什么叫“无头”浏览器?为什么要检测无头浏览器?检测无头浏览器User agent插件 Plugins语言WebGL浏览器特征加载失败的...
确定JavaScript代码在什么浏览器中运行,并且获取有关客户端环境的其他信息。 在浏览器窗口的状态栏显示任意的文本。 处理在一个窗口中发生的未捕获的JavaScript错误。 编写和多个窗口或帧交互的JavaScript代码...
gopherjs - 一个将Go编译成JavaScript的编译器,用于在浏览器中运行Go代码
jquery 判断 IE6 浏览器
JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析、渲染以及其他资源的下载都要停下来等待脚本执行完毕①。这一点是没有争议的,并且在所有浏览器中的行为都是一致...
1.1. IE6,IE7浏览器对JS的调试方式 2 1.1.1准备工作 2 1.1.2调试脚本步骤 3 1.1.3总结 4 1.2.IE8浏览器对JS的调试方法 4 1.2.1.准备工作 4 1.2.2调试脚本步骤 5 1.2.3总结 8 2对火狐进行调试 8 2.1安装Firebug 8 2.2...