为了优化我的IE7 / IE8的ajax应用程序以避免“停止运行此脚本”，我该怎么办？ [英] What can I do to optimize my ajax application for IE7/IE8 in order to avoid "Stop running this script"?
问题描述
当用户登陆步骤2时，ajax请求用Web来拉入数据服务，以显示酒店房间。酒店房间分为主房类型和更多特定类型。适用于酒店客房的JS功能包括：
- 房间手风琴
- 手风琴上的房间类型（嵌套手风琴）
- quickflip on the image
- jscrollpane，图片翻转后左侧的房间描述中的自定义滚动条
- jscrollpane，右侧房间类型的自定义滚动条
所有这一切都会导致着名的：
很明显，原因是有太多的事情脚本语句在IE中在特定时间内顺序执行。
我基本上需要重构我的代码并进行优化，以便函数调用之间有延迟。 p>
在执行ajax请求后注入HTML的方式是：
734 $（o.html）.appendTo（el）
o .html 是对从 html 属性的引用。 new / ajax /？step = 2rel =nofollow noreferrer> here 。
然后，下面的代码运行：
setTimeout（function（）{
$（'＃roomz .room-accordion' function（）{
$（this）.accordion（{
header：'h2.new-heading'，
autoheight：false，
clearStyle：true，
可折叠：true，
更改：functio n（event，ui）{
window.ui = ui;
//如果它没有被quickflipped / subnest转载，做它
如果（！$（ui.newContent）.data（'enabled'））{
$（' .room-rate'，ui.newContent）.each（function（）{
$（this）.accordion（{
header：'h4.rate-name'，
autoheight：false，
active：0，
clearStyle：true
}）;
// if（！$。browser.msie）
$（this）.jScrollPane（）;
}）
$（'。room-image'，ui.newContent）.quickFlip（{
vvertical： true
//缓动：'easeInBounce'
//缓动：'easeInSine'
}）;
$（'。back-copy-inner'，ui.newContent）.jScrollPane（{
verticalDragMaxHeight：131
}）;
$（ui.newContent）.data（'enabled'，true）;
}
}
}）
var el = this;
setTimeout（function（）{
$（'。back-copy-inner：eq（0）'，el）.jScrollPane（{
verticalDragMaxHeight：131
}）;
}，500）;
$（'。房价：eq（0）'，this）.each（function（）{
$（this）.accordion（{
header：'h4.rate-name'，
autoheight：false，
active：0，
clearStyle：true
}）;
var el = this;
setTimeout（function（）{
// if（！$。browser.msie）
$（el）.jScrollPane（）;
}，50） ;
}）;
$（'。room-image：eq（0）'，this）.quickFlip（{
vvertical：true
// easing：'easeInBounce'
// easing：'easeInSine'
}）;
$（'。room：eq（0）'，this）.data（'enabled'，true）;
}）;
}，20）;
我的第一个版本的代码基本上应用了quickflip和scrollpanes到每个房间是否被隐藏在手风琴中。重构的版本（现场/现在版）将其应用于手风琴活动的第一个房间，当另一个通过手风琴单击时，我会使用quickflip和scrollpane。
我在整个事情中添加了一个setTimeout，因为这是在HTML被注入之后发生的。我还有$ code> setTimeout 。
看起来还是太慢了。 任何人都可以提供任何重构/优化提示？
我的重构方案再次包含：
- 而不是在
.room手风琴上执行.each在每次这样的迭代？ - 优化和最小化ajax返回的HTML甚至更多 - 我已经做了很多优化，杀死了空格，不显示HTML评论等。
- 启用Gzip
- 在图片上进行懒惰加载，以便只有可见的手风琴内容图像显示，而其他的则是
blank.gif，直到您通过手风琴激活 - 而不是返回HTML和转储它，只返回相关数据与否HTML，而不是使用模板构建HTML引擎？！
如果任何人可以就我的想法重新提出意见，就哪些方面产生最好的结果，那么
LINKS：
PS - 不支持IE6
编辑：我在 .each 的迭代之间拖延，它仍然很慢。我认为自定义滚动条是主要的原因。呃。
编辑＃2 ：现场代码是setTimeouts的意大利面。我试图懒惰加载滚动窗格，但它仍然对IE缓慢。
要使IE脚本太慢消息消失，您需要使用更多的 setTimeout 。问题是达到500万个javascript命令。 setTimeout 重置此计数器。
更换手风琴电话
$（this）.accordion {
...
}）;
与
var that = this;
setTimeout（function（）{
$（that）.accordion（{...}）;
}，0）;
应该解决你的问题。它不会加快代码，它只会使脚本太慢消失。
至于实际的优化，有两个obvouis的东西。
而不是 $（'。room：eq（0）'）
使用 $（。room）。eq（0）
strong>
.each（function（）{
setTimeout（function（）{
...
}，0）;
}
I have a booking engine which is pretty sluggish in IE7. It's ajaxified and hash/window onchange based. There are 5 total steps. The main issue I'm having is step 2 is uber slow in IE.
When a user lands on step 2, an ajax request is made to pull in data with web services in order to display hotel rooms. The hotel rooms are divided by the main room type and more specific types inside. The JS functionality that gets applied to the hotel rooms consist of:
- accordion on the rooms
- accordion on the room types (nested accordion)
- quickflip on the image
- jscrollpane, custom scrollbar on the room description on the left after the image flips
- jscrollpane, custom scrollbar on the room types on the right
All of this causes the famous:
I've googled and landed on this, this, and this.
So obviously the cause is that there are too many script statements executing sequentially within a specific amount of time in IE.
I basically need to refactor my code and optimize it such that there are delays in between function invocations.
The way I'm injecting the HTML after doing the ajax request is:
734 $( o.html ).appendTo( el )
o.html is a reference to the JSON objects html property which is derived from here.
Then, the code below runs:
setTimeout(function () {
$('#roomz .room-accordion').each(function () {
$(this).accordion({
header: 'h2.new-heading',
autoheight: false,
clearStyle: true,
collapsible: true,
change: function (event, ui) {
window.ui = ui;
// if it hasnt been quickflipped/subnest accordioned, do it
if (!$(ui.newContent).data('enabled')) {
$('.room-rates', ui.newContent).each(function () {
$(this).accordion({
header: 'h4.rate-name',
autoheight: false,
active: 0,
clearStyle: true
});
//if (!$.browser.msie)
$(this).jScrollPane();
})
$('.room-image', ui.newContent).quickFlip({
vvertical: true
//easing:'easeInBounce'
//easing:'easeInSine'
});
$('.back-copy-inner', ui.newContent).jScrollPane({
verticalDragMaxHeight: 131
});
$(ui.newContent).data('enabled', true);
}
}
})
var el = this;
setTimeout(function () {
$('.back-copy-inner:eq(0)', el).jScrollPane({
verticalDragMaxHeight: 131
});
}, 500);
$('.room-rates:eq(0)', this).each(function () {
$(this).accordion({
header: 'h4.rate-name',
autoheight: false,
active: 0,
clearStyle: true
});
var el = this;
setTimeout(function () {
//if (!$.browser.msie)
$(el).jScrollPane();
}, 50);
});
$('.room-image:eq(0)', this).quickFlip({
vvertical: true
//easing:'easeInBounce'
//easing:'easeInSine'
});
$('.room:eq(0)', this).data('enabled', true);
});
}, 20);
My first version of the code basically applied the quickflip and scrollpanes to every room whether it was hidden in the accordion or not. The refactored version ( live/current one ) applies it to the very first room that's active in the accordion, and when another is clicked on through the accordion, I apply the quickflip and scrollpane to it.
I added a setTimeout around the entire thing, because this happens after the HTML gets injected. I have setTimeouts inside as well.
It seems like it's still too slow. Can anyone offer any refactoring/optimization tips?
My ideas for refactoring it again consist of:
- instead of doing an
.eachon.room accordion, apply a repeating operation to force a delay in between each iteration like this? - optimize and minify the HTML returned by the ajax even more - I have already done lots of optimization, killed whitespace, dont show HTML comments, etc..
- Enabling Gzip
- Doing lazy loading on the images so that only the visible accordion content images show and others are
blank.gifuntil you activate them through the accordion - Instead of returning the HTML and dumping it, return only relevant data with NO HTML and instead build the HTML with a templating engine?!
If anyone can offer opinions on my ideas for refactoring in terms of which ones would produce the best results, that'd be great too.
LINKS:
- the page in question is this.
- the relevant JS is here.
- the relevant code/line numbers start at line 829 of
new.js( thats the snippet I pasted ) - the relevant ajax request that is made is made to this page.
PS - not supporting IE6
EDIT: I put a delay between iteration of .each and it's still uber slow. I think the custom scrollbar is the leading cause. Ugh.
EDIT #2: The live code is a spaghetti of setTimeouts. I tried to lazy load the scroll pane but its still too sluggish for IE.
To make the IE script is too slow message dissapear you need to use more setTimeout. The problem is hitting 5 million javascript commands. setTimeout resets this counter.
Replacing the accordion calls
$(this).accordion({
...
});
With
var that = this;
setTimeout(function() {
$(that).accordion({ ... });
}, 0);
Should fix your problem. It won't speed up the code though, it will just make the script is too slow dissapear.
As for actual optimisation there are two obvouis things.
Instead of $('.room:eq(0)')
Use $(".room").eq(0)
Edit
.each(function() {
setTimeout(function() {
...
}, 0);
}
这篇关于为了优化我的IE7 / IE8的ajax应用程序以避免“停止运行此脚本”，我该怎么办？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
