Bas*_*asj 106 html javascript css google-chrome
对于我的一个项目(参见BigPictu.re或bigpicture.js GitHub项目),我必须处理一个非常非常非常大的<div>容器.
我知道使用简单的方法可能会导致性能不佳,但我并不认为它主要存在于......仅限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>
gee*_*rt3 60
改变position: fixed似乎加快了速度.
Tee*_*emu 42
使用transform而不是top/left:
container.style.transform = 'translate(' + container.x + 'px, ' + container.y + 'px)';
Vil*_*usL 22
但是结合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