JS 스크립트 연기의 역할 예
- PHPz앞으로
- 2016-05-16 17:05:451327검색
defer의 기능은 문서가 로드된 후 스크립트를 실행하여 개체를 찾지 못하는 문제를 방지하는 것입니다. 아래에 좋은 예가 있으며 관심 있는 친구들은 이를 참조할 수 있습니다.
<script src="../cgi-bin/delscript.js" defer></script>
中的defer作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题---有点问题
<button id="myButton" onclick="alert('ok')">test</button>
<script>
myButton.click();
</script>
<script>
myButton.click();
</script>
<button id="myButton" onclick="alert('ok')">test</button>
<script defer>
function document.body.onload() {
alert(document.body.offsetHeight);
}
</script>추가된 defer는 페이지가 완전히 로드된 후에 실행된다는 의미입니다. 이는 window.onload와 동일하지만 애플리케이션의 window.onload보다 더 유연합니다!
defer는 스크립팅 프로그램의 강력한 기능 중 "숨겨진 영웅"입니다. 이는 스크립트 세그먼트에 즉시 실행될 필요가 없는 코드가 포함되어 있음을 브라우저에 알리고, SRC 속성과 함께 사용하면 이러한 스크립트가 백그라운드에서 다운로드되어 전경의 콘텐츠가 표시될 수도 있습니다. 정상적으로 사용자에게
그러나 문서가 로드된 후에 스크립트를 실행하십시오.
마지막으로 두 가지 사항에 유의하십시오.
1. defer 유형 스크립트 세그먼트에서는 document.write 명령을 호출하지 마십시오. document.write 직접 출력 효과를 생성합니다.
2. 또한 즉시 실행 스크립트에서 사용하는 전역 변수나 함수를 defer 스크립트 세그먼트에 포함하지 마세요.
성능을 최적화하는 일반적인 방법은 스크립트를 즉시 실행할 필요가 없을 때 03c6714b8e3ee3238fc596020c4901e1 태그에 "defer" 속성을 설정하는 것입니다. (직접 스크립트는 함수 블록에 포함되어 있지 않으므로 로딩 과정 중에 실행됩니다.) "defer" 속성을 설정하면 IE는 스크립트가 로드되고 실행될 때까지 기다릴 필요가 없습니다. 이렇게 하면 페이지가 더 빨리 로드됩니다. 일반적으로 이는 즉시 실행 스크립트가 함수 블록에 가장 잘 배치되고 문서 또는 본문 개체의 onload 핸들러에서 함수를 처리한다는 의미이기도 합니다. 이 속성은 버튼 클릭, 특정 영역으로 마우스 이동 등 사용자 작업에 의존하는 스크립트가 있는 경우 유용합니다. 그러나 페이지가 로드되는 동안이나 이후에 실행해야 하는 일부 스크립트가 있는 경우 defer 속성을 사용하는 이점은 크지 않습니다.
모두 미루어진 탓입니다. 지난 이틀간 홈페이지 원문 조회 오류가 발생한 이유입니다.
지난 주말에 본 사이트에서는 광고 투자로 인해 페이지 가져오기 시간이 길어지는 것을 방지하기 위해 Google 광고 코드를 수정하고 defer를 사용하여 기존에 사용해오던 광고 가져오기를 지연시켰습니다. FireFox 브라우저에서 문제가 발견되지 않았습니다. 오늘 친구가 정보를 확인하기 위해 이 사이트를 방문했는데, 그녀는 내가 기사를 확인하자마자 페이지가 지나가고 나서야 방문에 문제가 있다는 것을 알았습니다. 이 웹사이트가 지난 이틀 동안 다운됐나요? 이유를 확인한 결과, Firefox에서는 defer가 유효하지 않은 것처럼 보였고, Google의 경우 IE에서는 스크립트 로딩이 지연되어 페이지가 실제로 원본 콘텐츠로 로드되었기 때문에 defer 때문이라는 것을 알게 되었습니다. Document.write의 작성 방식을 사용하는 광고 스크립트이며 defer 때문입니다. Google AD의 스크립트는 iframe으로 감지되므로 Google 광고의 실제 내용을 얻으면 페이지 전체가 가려져 전체 텍스트가 순식간에 보입니다.
코드를 수정하고 이렇게 테스트하지 않은 것은 모두 제 잘못입니다. 앞으로 어떻게 바꾸든 IE와 FireFox 모두에서 테스트해야 한다는 점을 말씀드리고 싶습니다. 지난 이틀 동안 접속에 어려움을 겪은 점 진심으로 사과드립니다!
기타: 이 사이트에 액세스하려면 FireFox를 사용하는 것이 좋습니다. 액세스 및 구문 분석 속도와 페이지 레이아웃의 일관성이 더 좋습니다!
위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요.