A very, very, very big div

 

For a project of mine (see BigPictu.re or bigpicture.js GitHub project), I have to deal with potentially a very, very, very big <div> container.

I knew there was a risk of poor performance with the simple approach I use, but I did not expect it to be mostly present with ... Chrome only!

If you test this small page (see code below), panning (click + drag) will be:

  • Normal / smooth on Firefox
  • Normal / smooth even on Internet Explorer
  • Very slow (nearly crashing) on Chrome!

    • Of course, I could add some code (in my project) to do that when you're zoomed in a lot, text with potentially very very big font-size would be hidden. But still, why does Firefox and Internet Explorer handle it correctly and not Chrome?

    Is there a way in JavaScript, HTML, or CSS to tell the browser not to try to render the whole page (which is 10000 pixels wide here) for every action? (only render the current viewport!) 

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            html, body {
                overflow: hidden;
                min-height: 100%; }

            #container {
                position: absolute;
                min-height: 100%;
                min-width: 100%; }

            .text {
                font-family: "Arial";
                position: absolute;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div class="text" style="font-size: 600px; left:100px; top:100px">Small text</div>
            <div class="text" style="font-size: 600000px; left:10000px; top:10000px">Very big text</div>
        </div>

        <script>
            var container = document.getElementById('container'), dragging = false, previousmouse;
            container.x = 0; container.y = 0;

            window.onmousedown = function(e) { dragging = true; previousmouse = {x: e.pageX, y: e.pageY}; }

            window.onmouseup = function() { dragging = false; }

            window.ondragstart = function(e) { e.preventDefault(); }

            window.onmousemove = function(e) {
                if (dragging) {
                    container.x += e.pageX - previousmouse.x; container.y += e.pageY - previousmouse.y;
                    container.style.left = container.x + 'px'; container.style.top = container.y + 'px';
                    previousmouse = {x: e.pageX, y: e.pageY};
                }
            }
        </script>
    </body>
</html>

    改变position: fixed似乎加速了事情。

    Use transform instead of top/left : 

    container.style.transform = 'translate(' + container.x + 'px, ' + container.y + 'px)';

    A live demo at jsFiddle.

  • Answer to first quest "why". One of problems are font size . you have font size 600000px, most browser will see it as too high and render smaller, while chrome tries to render original size. Looks like chrome can not repaint such big letters with your requested styles very fast.

    • But combining Teemu and geert3 answers - using transform and position:fixed, makes chrome works much more faster even with big fonts.

  • Answer to 2nd question: "Is there a way ... not to try to render the whole page" - you can try to apply mouse action for elements in container, not for whole container.

    • Maximum font sizes: http://jsfiddle.net/74w7yL0a/ 

    firefox 34 - 2 000 px
chrome 39 - 1 000 000 px
safari 8 - 1 000 000 px
ie 8-11 - 1 431 700 px
    链接地址: http://www.djcxy.com/p/88116.html

    上一篇: 隐藏“水平”滚动条，但仍然可以滚动

    下一篇: 一个非常，非常非常大的div