Chrome에서 동시 DOM 노드를 수정 하시겠습니까?

Question

내 문서의 innerHTML에있는 각 노드에 CSSStyleDeclaration 개의 객체를 재귀 적으로 다시 적용하려고합니다. 예를 들어이 페이지에서 window.getComputedStyle(document.getElementsByTagName("a")[0])을 호출하면 해시에 반환되는 약 650 개의 속성이 반환됩니다. 내 문서의 innerHTML에 1,000 개의 노드가 있다고 가정 해 봅시다. innerHTML을 반복하고 각 CSSStyleDeclaration 해시에 스타일을 적용하면 즉, 650000은 node.style.setProperty(key, value)입니다. 그러나 루프를 반복하여 각 노드를 하나씩 수행합니다. 대신이 루프를 수행하는 대신 DOM에 1000 번 호출하는 것이 훨씬 효율적입니다. 문제는 크롬에서 가능하다면 어떻게해야할지 모르겠다는 것입니다.

내 생각에 크롬에 전체 DOM에 대한 GIL (더 나은 단어가 부족함)이 있지만 이는 미신 일뿐입니다. 그렇지 않다면, 자물쇠가 노드 레벨에 있다고 가정합니다. 그러나 다시, 총 미신. 나는이 사실에 대해 사실없는 환경에서 운영하고있다. 당신이 어떤 조언을한다면, 나는 그것을 크게 고맙게 생각할 것입니다.

Answer 1

우선 DOM은 스레드로부터 안전하지 않도록 지정되므로 이러한 속성을 동시에 적용 할 수있는 가능성은 거의 없습니다. 게다가 javascript는 병렬 적이 지 않으므로 이러한 작업을 병렬로 수행하려면 WebWorker를 사용해야합니다. WebWorker는 스레드 보안이 아닌 그대로 DOM에 액세스 할 수 없습니다.

두 번째로, 문서 내에 스타일 시트를 만들고 insertRule을 사용하여 동적으로 생성 된 새 규칙을 추가하고 브라우저의 렌더링 엔진이 대신 작업을 수행하게하는 것이 어떻습니까?