Question

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 because 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.

任何解决这一问题的办法?

Answer 1

更好的想法:

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;
});

Answer 2

这些只是你唯一的选择。只有我认为你能够做的是使用更快的浏览器(测试目前浏览器的最新版本,近年来已经看到大量分类优化)和(或)更快的计算机。

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.

Answer 3

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>

如果你试图与一页的某个地点联系起来,使用图像地图,就会大大提高效率。

Answer 4

你有两种选择:

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

Answer 5

在我的机器上,FF在大约20个左右, Chrome大约6个。其中相当一部分用于配置注入的OM,我怀疑,下载同一结构的DOM仍属这种情况。不管你如何看待这一问题,它都会把用户浏览器 a在一边。

<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>

友情链接