javascript - Slow loading page due to onclick events in html anchors - Stack Overflow

admin管理员组

文章数量:1401241

We are experiencing a strange issue that we are struggling to get to the bottom of.

We have a web based system and the page in question has a table with around 600 rows. Each row has two options "lock/unlock" and "edit" which are implemented as two anchors with onclick events. The onclick events are defined in the html and not bound by jquery - this is because each javascript call is different based on the id of the record e.g. unlock(132);

This page takes anywhere from 10-25 seconds to render in internet explorer but in chrome displays instantly. Our clients support internet explorer only! :(

This is what I have discovered and I hope someone could explain what is going on or provide some reasoning to why the problems occur:

1. If I move the javascript calls from the onclick and place inside href the page loads instantly - why would that make any difference?

2. If I replace my javascript calls with alert(''); (still in onlick attribute) the page loads instantly 2a. So I put my javascript calls back but replaced the functions with empty stubs and the page still loaded slowly. Which is weird because now I have no idea what internet explorer is doing!!

Anybody heard of something similar or provide a good explanation to what is happening?

Best regards Matthew

We are experiencing a strange issue that we are struggling to get to the bottom of.

We have a web based system and the page in question has a table with around 600 rows. Each row has two options "lock/unlock" and "edit" which are implemented as two anchors with onclick events. The onclick events are defined in the html and not bound by jquery - this is because each javascript call is different based on the id of the record e.g. unlock(132);

This page takes anywhere from 10-25 seconds to render in internet explorer but in chrome displays instantly. Our clients support internet explorer only! :(

This is what I have discovered and I hope someone could explain what is going on or provide some reasoning to why the problems occur:

1. If I move the javascript calls from the onclick and place inside href the page loads instantly - why would that make any difference?

2. If I replace my javascript calls with alert(''); (still in onlick attribute) the page loads instantly 2a. So I put my javascript calls back but replaced the functions with empty stubs and the page still loaded slowly. Which is weird because now I have no idea what internet explorer is doing!!

Anybody heard of something similar or provide a good explanation to what is happening?

Best regards Matthew

• javascript
• html
• onclick
• anchor
• href

Share Improve this question Follow asked Mar 2, 2011 at 9:26 MatthewMatthew 7122 silver badges55 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

It hard to say why the problem is occurring without seeing a live example. I've seen similar projects in the past where IE6 has had very significant performance problems where handers are dynamically bound to anchors in big tables. But not when they were hardcoded in the html.

One way to solve it would be to capture click events once at a higher level in the DOM and then identify the source anchor. If you are using jQuery (>=v1.4.2) you can implement this quite quickly using delegate.

Where you have the following anchors in the html (note: the data-id attribute will validate with an html5 doctype):

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

In your js add a click event delegate that will fire for all anchors in the table. You then identify the clicked anchor by its data-id and call whatever functionality you need:

$('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...
    }
});

Using delegate has the advantage that if you dynamically change the table contents the event handling will work for newly created anchors. For example, say you decide to add pagination on the table where new data is loaded using ajax.

UPDATE:

Based on ments have added an example http://jsfiddle/johnhunter/QKYJ5/ that uses querystring parameters to pass data to the delegator. This keeps the js out of the html and could form the basis for non-script fallback.

I learn that the hard way. Binding element events using js when document ready is very, very slow for pages with lots of elements. Let alone rendering HTML via js (after ajax call, I was suppose to update my page with new info, but have to re-render the whole page just in case new data appear for the other parts of the page). My page timed-out all the time. That's IE for ya. So I decided to use inline event binding and re-load the page after every event.

@Matthew Hi, I was also facing the exact same issue. I was having a java script function which takes two parameters and was bind with the onclick event on the anchor tag. This was slowing the load time of page in IE.

Solution: Use jQuery to bind the onclick event instead of onclick inside the anchor tag. U can use regular expressions to search for the anchor elements. Use the following code in document.ready() as below:

$(document.ready(function(){

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

//Your call to the javascript function. 

   });

});

This will Solve your problem definitely.

Regards

This worked for me:

$(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./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>

This article you can find in original here.

本文标签： javascriptSlow loading page due to onclick events in html anchorsStack Overflow