준비 상태 전에 DOM을 조작해도 괜찮습니까?
https://stackoverflow.com/questions/1222849
-
10-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
이것은 일반적으로 경험을 깨끗하게 유지하면서 진보적 인 향상을 관리하는 방법입니다. 인종 조건에 대한 잠재력이 있습니까? 이것은 작동하지 않습니까?
간단한 추상 시나리오를 상상해보십시오. JavaScript 지원이있는 경우 다른 것을 다르게 표시하고 싶습니다. 이것은 일반적으로 내가 할 일입니다.
<div id="test">original</div>
<script type="text/javascript">
var t = document.getElementById('test');
t.innerHTML = 'changed';
</script>
많은 사람들이 프레임 워크를 사용하고 Domready 이벤트를 기다려야한다고 주장하고 거기에서 변경해야한다고 주장 할 수 있습니다. 그러나 문서의 끝이 끝나고 CSS가 준비되고 CSS가 준비되기 전에 '테스트'요소가 이미 렌더링 된 곳에서 상당한 지연이 있습니다. Domready 트리거 .. 따라서 '원본'의 눈에 띄는 깜박임을 유발합니다.
이 코드는 레이스 조건 실패에 대한 책임이 있습니까? 아니면 스크립트 전에 존재하는 경우 요소가 발견 될 수 있고 수정 가능하다는 것을 보장 할 수 있습니까?
미리 감사드립니다.
해결책
당신은 할 수 있지만, 그것을 둘러싼 문제가 있습니다.
우선, 즉, 닫히지 않은 노드를 조작하려고 시도한 경우 (예 : 닫기 태그 전에 JS 아래에 있어야하는 신체) IE의 "조작 중단 된"오류가 발생하여 빈 페이지가 발생할 수 있습니다. 노드의 조작에는 추가 노드, 이동 노드 등이 포함됩니다.
다른 브라우저에서는 행동이 정의되지 않지만 일반적으로 예상대로 행동합니다. 주요 문제는 페이지가 발전함에 따라 페이지가 다르게로드/구문 분석/실행할 수 있다는 것입니다. 이로 인해 브라우저가 참조 된 요소가 실제로 생성되어 DOM 조작에 사용할 수있게되기 전에 일부 스크립트가 실행될 수 있습니다.
사용자가 인식 된 성능을 향상 시키려고하는 경우 (즉, Snappiness). 이 길을 피하고 페이지를 밝히는 것을 강력히 제안합니다. Yahoo의 Yslow/Google Page Performance Firebug를 사용하여 시작할 수 있습니다.
다른 팁
DOM이 완전히로드되기 전에 DOM을 조작 할 수 있지만 위험 할 수 있습니다. 당신은 분명히 당신이 조작하려는 DOM의 비트가 실제로 존재한다는 것을 보장 할 수 없으므로 코드가 간헐적으로 실패 할 수 있습니다.
스크립트 블록을 선행하는 노드 만 수정하는 한 (예 : 노드의 닫기 태그가 스크립트의 오프닝 태그를 사전에 전달 함) 문제가 발생하지 않아야합니다.
작업이 성공했는지 확인하려면 코드를 try...catch 차단하고 다시 전화하십시오 setTimeout() 실패에.
viagjeros.com에서는 8-9 개월 이후로 로딩 표시기가 작동하며 지금까지 아무런 문제가 없습니다. 다음과 같이 보입니다.
<body>
<script type="text/javascript">
try {
document.write('<div id="cargando"><p>Cargando...<\/p><\/div>');
document.getElementById("cargando").style.display = "block";
} catch(E) {};
</script>
DOM에 조기에 액세스하면 IE 5 및 Navigator 4에서 예외가 발생합니다.
