HTML DOM Drawing Transaction in Javascript?

콘텐츠가 "깜박 거리지"않도록 여러 DOM 명령을 트랜잭션에 캡슐화하는 방법이 있습니까? 이런 식으로 뭔가 :HTML DOM Drawing Transaction in Javascript?

window.stopDrawing(); // start transaction 
$("#news").append("<div>a new news item</div>"); 
// ... do something more 
$("#news").css("top", "-150px"); 
window.startDrawing(); // stop transaction

출처

2011-08-28 duality_

브라우저 (최신 버전)는 이미 내부적으로 가능한 한 수행합니다. 그러나 명시 적 제어가 없습니다. 특정 상황에 대해 더 많이 게시하면 누군가가 최적화를 제안 할 수 있습니다. – Pointy

매번 당신은 모든 작업을 포함하여 기능을 설정 요소의 큰 세트를 업데이트해야합니다 mozRequestAnimationFrame (또는 webkitRequestAnimationFrame)를 호출, 단지 당신의 기능을 완전히 변경 사항을 그릴 것입니다 실행이 완료된 후 화면에.

에서

더 : https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame

출처

2011-08-28 12:58:37 Shedokan

사실, [requestAnimationFrame] (http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/Default.html)이라고하는이 API의 표준화 된 버전이 있습니다 – sternr

그 기능은 파이어 폭스 또는 크롬에 존재하지 않습니다. IE 9에 대해 알고 있습니다.) 실험적이기 때문에 접두어로 된 버전을 사용하는 것이 좋습니다. – Shedokan

내가 스크립트가도 루프에 반환하는 경우에만 브라우저에서 문서를 다시 그릴하는 생각, 그래서하지 않습니다 스크립트가 끝날 때까지 아무것도 렌더링합니다.

어쨌든 일부 조작으로 인해 브라우저에서 문서의 요소 크기를 다시 계산하는 것과 같이 (예 : 일부 DOM 조작 후 요소의 치수를 검색 할 때) 값 비싼 작업을 수행 할 수 있습니다. 따라서 가능한 한 문서에서 DOM 조작을 수행해야합니다.

일부 요소에 대한 조작이 많은 경우 을 문서 트리에서 제거하고 조작 한 다음 다시 트리에 추가하는 것이 더 저렴할 수 있습니다.

출처

2011-08-28 13:04:37 arnaud576875

HTML DOM Drawing Transaction in Javascript?

답변

관련 문제