I want to load a large HTML page with a lot of redundancy as fast as possible. What is the best way?_问答_开发者

I want to load a large HTML page with a lot of redundancy as fast as possible. What is the best way?

开发者 https://www.devze.com 2023-03-16 05:24 出处：网络

I want to load a very large HTML page containing nothing but the letter \'x\' (let\'s say 10000 lines of each 100 characters), each of the characters linking to a similar url: the first one to www.exa

相关专题：javascript

I want to load a very large HTML page containing nothing but the letter 'x' (let's say 10000 lines of each 100 characters), each of the characters linking to a similar url: the first one to www.example.com/1, the second to www.example.com/2, etc.

Of course I cannot just generate the entire page with php beca开发者_运维问答use it would build a very large file for the browser to download. But if I try it with javascript and a simple for-loop, it takes ages for the script to complete.

Any solutions for this problem?

Much better idea:

document.body.addEventListener("click", function (e) {
    console.log("Clicked at coordinates ", e.pageX, e.pageY);

    // Convert in your own fashion; here's one idea:
    var index = (e.pageX % 100) + (100 * e.pageY);

    window.location.href = "http://example.com/" + index;
});

Those are pretty much your only options. Only thing I think you can do is use a faster browser (test out the latest versions of the current browsers, recent years have seen lots of javascript optimization) and/or a faster computer.

The biggest issue though is why are you doing this? I can't think of any practical use for this, and most likely there's a better way to do what you're actually trying to accomplish

Even generating it server side, it'll likely take a long time to render. We've recently tried loading a page that hasn't needed paging previously because the dataset has always been small, but with a huge dataset even though the whole page was transferred, it still froze the entire browser for over 5 minutes before we had to kill the process. I suspect you'll run into similar issues if it's really that much stuff.

What you are trying to do is not very clever. 10,000 times 100 is 1,000,000 elements. The most efficient way is use P elements with a minimal id, then use a click listener on the body element to determine which element was clicked on and genrate the URL. So your html looks something like:

<html><title>Silly Page</title>
<style type="text/css">p {display:inline;margin:0;padding:0}</style>
<script type="text/javascript">
function doNav(e) {
  var id = (e.target || e.srcElement).id;
  window.location.href = 'http://www.example.com/' + id.replace('p','');
}
</script>
<body onclick="doNav(event)"><p id=p1>x<p id=p2>x<p id=p3>x<p id=p4>x...
</body>

If you are trying to associate a link with a location on a page, use an image map, it will be vastly more efficient.

You have two options:

To make a virtual view. In this case you will load only visible elements and do scrolling/panning manually (similar to maps)
To output/populate just text "xxxxx...." and handle clicks by coordinates and synthesizing hyperlink clicks by code. In this case you will have only one DOM element - container of x'es

The following chokes for about 20s in FF on my machine, about 6s in Chrome. A good portion of that is spent parsing the injected DOM, and I suspect this would remain the case for a downloaded DOM of the same structure. No matter how you approach this, it's going to foul up the user's browser for a while.

<script type="text/javascript">
    //<![CDATA[
    $(function() {
        var strings=[];
        for(var a=0;a<10000;a++)
        {
            for(var b=0;b<100;b++)
            {
                var c=a*100+b;
                strings.push(
                    '<a href="http://www.example.com/'+c+'">x</a>');
            }
            strings.push("<br/>");
        }
        var megaString=strings.join("");
        $("body").html(megaString);
    });
    //]]>
</script>