一个非常，非常非常大的div

2018-07-01 14:26:24

对于我的项目（请参阅BigPictu.re或bigpicture.js GitHub项目），我必须处理潜在的非常非常大的<div>容器。

我知道用我使用的简单方法存在性能差的风险，但我并没有指望它大部分与...... Chrome一起出现！

如果你测试这个小页面（见下面的代码），平移（点击+拖动）将是：

在Firefox上正常/平滑

即使在Internet Explorer上也正常/平滑

在Chrome上非常慢（几乎崩溃）！

当然，我可以添加一些代码（在我的项目中），当你放大很多时，隐藏可能非常大的字体大小的文本。但是， 为什么Firefox和Internet Explorer能正确处理它，而不是Chrome呢？

在JavaScript，HTML或CSS中有没有一种方法可以告诉浏览器不要为每个动作呈现整个页面（这里的宽度为10000像素）？ （只呈现当前的视口！）

<!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似乎加速了事情。

使用transform而不是top/left ：

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

在jsFiddle现场演示。

回答第一个任务“为什么”。其中一个问题是字体大小 。您的字体大小为600000px，大多数浏览器会将其视为太高而渲染得更小，而chrome会尝试渲染原始大小。看起来像铬不能用你所要求的风格非常快地重新绘制这样的大字母。

但是，结合Teemu和geert3的答案 - 使用变换和位置：固定，使得即使使用大字体，chrome的工作速度也快得多。

第二个问题的答案：“是否有办法......不尝试渲染整个页面” - 您可以尝试对容器中的元素应用鼠标操作，而不是整个容器。

最大字体大小：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/88115.html

上一篇: A very, very, very big div

下一篇: iFrame Hide Scroll bars but still be able to scroll with mouse wheel