javascript_javascript 기술에서 연기의 역할에 대한 심층적인 이해

많은 사람들이 이미 Javascript를 능숙하게 사용하고 있지만, 실제로 보면 defer가 무엇인지 알지 못할 수도 있으며, DOM 개체를 작동하지 않는 js를 직접 실행해야 하는 경우도 있습니다. 객체를 찾을 수 없다는 메시지가 항상 보고됩니다. 모두가 알고 있듯이 그 이유는 아직 페이지가 로드되지 않았고 js 작업 객체가 여전히 다운로드 중이기 때문입니다. 그러나 많은 사람들은 defer 태그를 추가하면 이 문제를 쉽게 해결할 수 있다는 사실을 모릅니다.

의 defer 기능은 문서가 로드된 후 스크립트를 실행하여 개체를 찾지 못하는 문제를 방지하는 것입니다---약간의 문제입니다

코드 복사 코드는 다음과 같습니다.

test< ;/버튼>
<script> <br>myButton.click();<br></script>

<script><br>myButton.click();<br></script>

test

defer를 추가한다는 것은 페이지가 완전히 로드된 후에 실행하는 것을 의미하며, 이는 window.onload와 동일하지만 애플리케이션에서는 window.onload보다 더 유연합니다!

defer는 스크립팅 프로그램의 강력한 "숨겨진 영웅"입니다. 이는 스크립트 세그먼트에 즉시 실행될 필요가 없는 코드가 포함되어 있음을 브라우저에 알리고, SRC 속성과 함께 사용하면 이러한 스크립트가 백그라운드에서 다운로드되어 전경의 콘텐츠가 표시될 수도 있습니다. 정상적으로 사용자에게

--단, 문서가 로드된 후에 스크립트를 실행합니다.

두 가지 사항에 유의하세요.

1. document.write는 직접적인 출력 효과를 생성하므로 defer-type 스크립트 세그먼트에서 document.write 명령을 호출하지 마십시오.

2. 또한 즉시 실행 스크립트에서 사용하는 전역 변수나 함수를 defer 스크립트 세그먼트에 포함하지 마세요.

성능을 최적화하는 일반적인 방법은 스크립트를 즉시 실행할 필요가 없을 때 <SCRIPT> 태그에 "defer" 속성을 설정하는 것입니다. (직접 스크립트는 함수 블록에 포함되어 있지 않으므로 로딩 과정 중에 실행됩니다.) "defer" 속성을 설정하면 IE는 스크립트가 로드되고 실행될 때까지 기다릴 필요가 없습니다. 이렇게 하면 페이지가 더 빨리 로드됩니다. 일반적으로 이는 즉시 실행 스크립트가 함수 블록에 가장 잘 배치되고 문서 또는 본문 개체의 onload 핸들러에서 함수를 처리한다는 의미이기도 합니다. 이 속성은 버튼 클릭, 특정 영역으로 마우스 이동 등 사용자 작업에 의존하는 스크립트가 있는 경우 유용합니다. 그러나 페이지가 로드되는 동안이나 이후에 실행해야 하는 일부 스크립트가 있는 경우 defer 속성을 사용하는 이점은 크지 않습니다. </p> <p>스크립트의 defer 속성은 기본적으로 false입니다. DHTML 프로그래밍 가이드의 설명에 따르면 Defer 속성은 다음과 같이 작성됩니다. </p> <p>디자인 타임에 속성을 사용하면 브라우저가 스크립트를 구문 분석하고 실행할 필요가 없으며 대신 페이지를 계속 다운로드하고 구문 분석할 수 있으므로 페이지의 다운로드 성능을 향상시킬 수 있습니다.</p> <p>즉, 스크립트 작성 시 defer 속성을 추가하면 브라우저가 스크립트 다운로드 시 바로 처리할 필요 없이 계속해서 페이지를 다운로드하고 파싱하므로 다운로드 성능이 향상됩니다. </p> <p>그런 상황이 많아요. 예를 들어, JavaScript 변수를 많이 정의하거나 참조 파일(.inc)에 처리해야 하는 스크립트를 많이 작성하는 경우 이러한 스크립트에 defer 속성을 추가하면 성능 향상에 확실히 도움이 됩니다. . </p> <p><strong>예: <br></strong></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="51013" class="copybut" id="copybut51013" onclick="doCopy('code51013')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code51013"> <br> <script 언어="javascript" defer><br>var object = new Object();<br>....<br></script>