고급 JavaScript 프로그래밍에서는 IE의 오류에 대해 이야기할 때 단축된 작업 개념을 언급했습니다.
아직 로드되지 않은 페이지를 수정하면 오류가 발생합니다.
샘플 코드:
으아악<script>가 요소에 포함되어 있고 JS 코드가 DOM 메서드를 사용하여 상위 요소나 조상 요소를 수정하면 작업 중단 오류가 발생합니다(로드된 요소만 수정할 수 있기 때문입니다).
을
로 변경했습니다. 으아악실수를 피할 수 있습니다.
document.body의 끝이 아닌 시작 부분에 새로운 <p>를 추가하면 오류가 발생하지 않습니다.
읽어보니 문서가 어떻게 로드되는지 잘 모르겠습니다. 본문 시작 부분에만 삽입하고 끝 부분에는 삽입하지 않으면 왜 작동합니까?
曾经蜡笔没有小新2017-05-19 10:44:33
브라우저가 페이지를 로드할 때 js 코드를 로드하고 구문 분석합니다. 이때 다른 코드의 구문 분석 및 렌더링이 중지됩니다. 이것이 우리가 일반적으로 페이지 끝에 js 코드를 배치하는 이유입니다. 페이지 문서 구조의 로딩을 구성하지 않으며 모든 DOM 요소에서 작동할 수 있습니다.
위 코드에서 js 코드가 실행될 때 전체 페이지의 html 구조가 로드되지 않아서 브라우저는 본문의 끝 위치를 알 수 없으며 본문의 시작 위치는 따라서 새로운 p를 시작 부분에 추가할 수 있지만 끝 부분에는 추가할 수 없습니다.
高洛峰2017-05-19 10:44:33
DOM 문서를 로드하는 단계
1 HTML 구조를 구문 분석합니다.
2 외부 스크립트 및 스타일시트 파일을 로드합니다.
3 스크립트 코드를 구문 분석하고 실행합니다.
4 HTML DOM 모델을 구성합니다. //DOMContentLoaded
5는 이미지와 같은 외부 파일을 로드합니다.
6 페이지가 로드되었습니다. //로드
이론적으로는 사실이지만 실제로는 문서 내용의 위치도 위에서 아래로 파싱되기 때문에 js를 만나면 js 파싱 및 실행을 위한 렌더링이 차단됩니다.
말씀하신 문제는 몸체의 앞부분은 렌더링을 했는데 실행시 꼬리 부분은 렌더링을 하지 않아서 꼬리 부분을 어디에 삽입해야 할지 모르기 때문에 발생하는 것 같습니다.
최신 브라우저의 DOM 작업 최적화로 인해 크롬에서 테스트할 때 오류를 찾을 수 없습니다. 두 방법 모두 괜찮으므로 이 문제에 너무 주의할 필요는 없습니다. 순차적으로 렌더링하고 넣는 것만 기억하세요. js는 맨 아래에 있습니다.
