Question

我正在尝试实现与lotrproject.com类似的功能。但是，我注意到网站在与它交互时有很多延迟（拖动）。 Chrome的任务管理器在交互时显示高达11％以上的CPU使用率。这是正常的吗？或者这个网站实施不当吗？我注意到这个网站的所有内容都在一个div中。

<div id="zoomcontent" class="images ui-draggable" style="width: 15358px; height: 5326.6666666667px; left: -6907px; top: -654px;">
<!-- CONTENT -->
</div>

另一方面，谷歌地图使用类似 -

的东西

<div id="dragContainer" style="position: absolute; left: 0px; top: 0px; z-index: 0; -webkit-transform: translate(-4482px, -3928px) scale(1);">
    <div style="position: absolute; left: 0px; top: 0px;">
        <div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
            <img src="https://mts0.google.com/vt/lyrs=m@26..." class="css-3d-layer" style="position: absolute; left: 7359px; top: 6211px; width: 256px; height: 256px; border: 0px; padding: 0px; margin: 0px;">
            <!-- MORE IMGs -->
        </div>
    </div>
</div>

滚动地图不会增加正文的大小。我怀疑一个非常大的DOM会减慢浏览器的速度，并在交互时造成滞后。有没有更好的方法来实现没有非常大的DOM的lotrproject？

实现lotrproject.com的正确方法是什么？

0 个答案: