내 프로젝트 ( 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>
54
[OT] 600K 글꼴 크기. 시력 이 매우 나쁜 사람들을위한 접근성 기능이어야 합니까? ;-)
—
geert3 2014
@ geert3 확실 해요 그것의 달 궤도 웹 브라우저
—
데이비드 윌킨스
귀하의 데모는 크롬 41.0.2236.0 dev에-m 부드러운
—
부두 뤽 Gendreau을
나는 카나리아 (41.0.2241.0 카나리아)에 있으며 여전히 지연이 발생합니다. 너희들이 대신 게임 장비의 노트북을 시도해야합니다, 당신은 그것을 볼 수 있습니다
—
markasoftware
일반적인 믿음과는 달리 IE는 실제로 대부분의 페이지를 렌더링하는 데 Chrome보다 빠릅니다. 하지만 자바 스크립트 엔진은 조금 느립니다.
—
Falanwe