Question

我们正在经历一个奇怪的问题，我们正在努力找到底线。

我们有一个基于网络的系统，有问题的页面有一个大约600行的表格。每行有两个选项“锁定/解锁”和“编辑”，它们实现为具有onclick事件的两个锚点。 onclick事件在html中定义，不受jquery约束 - 这是因为每个javascript调用根据记录的id不同，例如解锁（132）;

此页面需要10到25秒才能在Internet Explorer中呈现，但立即显示在chrome中。我们的客户仅支持Internet Explorer！：（

这是我发现的，我希望有人可以解释发生了什么或提供一些理由来解决问题：

如果我从onclick移动javascript调用并放置在href中，页面会立即加载 - 为什么会有任何区别？
如果我用alert（''）替换我的javascript调用; （仍然在onlick属性中）页面立即加载 2A。所以我把我的javascript调用回来了，但用空存根替换了这些函数，页面仍然加载缓慢。这很奇怪，因为现在我不知道Internet Explorer正在做什么!!

有人听说过类似的事情，或者对发生的事情提供了很好的解释吗？

祝你好运马修

Answer 1

如果没有看到实例，很难说出问题的原因。我曾经看到过类似的项目，其中IE6存在非常显着的性能问题，其中handers动态绑定到大表中的锚点。但不是当它们在html中被硬编码时。

解决这个问题的一种方法是在DOM的更高级别捕获一次点击事件，然后识别源锚点。如果您使用的是jQuery（＆gt; = v1.4.2），则可以使用delegate快速实现此目的。

html中有以下锚点（注意：data-id属性将使用html5 doctype验证）：

<td>
    <a href="#" class="lock" data-id="123">Lock/Unlock</a>
    <a href="#" class="edit" data-id="123">Edit</a>
    ... data ...
</td>

在你的js中添加一个click事件委托，它将触发表中的所有锚点。然后，您可以通过其data-id识别单击的锚点，并调用您需要的任何功能：

$('table').delegate('a', 'click', function() {
    var el = $(this)
        id = el.attr('data-id');

    if (id && el.hasClass('lock')) {
        alert('Lock/unlock ' + id);
        // do stuff...
    }
    if (id && el.hasClass('edit')) {
        alert('Edit ' + id);
        // do stuff...
    }
});

使用delegate的优点是，如果动态更改表内容，事件处理将适用于新创建的锚点。例如，假设您决定在使用ajax加载新数据的表上添加分页。

更新：

根据评论添加了一个示例http://jsfiddle.net/johnhunter/QKYJ5/，它使用查询字符串参数将数据传递给委托者。这使得js不受html的影响，并且可以构成非脚本回退的基础。

Answer 2

我学到了很难的方法。对于具有大量元素的页面，当文档就绪时使用js的绑定元素事件非常非常慢。更不用说通过js呈现HTML了（在ajax调用之后，我想用新信息更新我的页面，但是为了防止页面的其他部分出现新数据，必须重新呈现整个页面）。我的页面一直在超时。那是你的IE浏览器。所以我决定使用内联事件绑定并在每个事件后重新加载页面。

Answer 3

@Matthew 嗨，我也面临同样的问题。我有一个java脚本函数，它接受两个参数并与锚标记上的onclick事件绑定。这减缓了IE中页面的加载时间。

解决方案：使用jQuery绑定onclick事件而不是在锚标记内部onclick。你可以使用正则表达式来搜索锚元素。在document.ready（）中使用以下代码，如下所示：

$(document.ready(function(){

$("a[id^=elemID]").click(function(){

//Your call to the javascript function. 

   });

});

这肯定会解决你的问题。

此致

Answer 4

这对我有用：

$(document).ready(function(){
    $( "a.scrollLink" ).click(function( event ) {
        event.preventDefault();
        $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 500);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#anchor1" class="scrollLink">Scroll to anchor 1</a>
<a href="#anchor2" class="scrollLink">Scroll to anchor 2</a>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<p id="anchor1"><strong>Anchor 1</strong> - Lorem ipsum dolor sit amet, nonumes voluptatum mel ea.</p>
<p id="anchor2"><strong>Anchor 2</strong> - Ex ignota epicurei quo, his ex doctus delenit fabellas.</p>

您可以在原始here中找到此文章。

由于html锚点中的onclick事件导致加载页面缓慢

4 个答案: