스크립트 태그를 사용하여 파일을 동기식으로 로드하는 동안 피해야 할 일반적인 실수-JS 튜토리얼-php.cn

스크립트 태그를 사용하여 파일을 동기식으로 로드하는 동안 피해야 할 일반적인 실수

WBOY

풀어 주다： 2024-07-20 12:44:47

원래의

1059명이 탐색했습니다.

스크립트를 동기적으로 로드하면 스크립트가 다운로드된 후 다음 코드 줄이 실행될 것이라고 생각할 수도 있습니다. 그렇죠? 그러나 이는 자바스크립트 파일의 동기 로딩이 의미하는 것이 아닙니다. 특정 파일을 로드하는 비동기, 동기화 및 지연 전략을 비교할 때 혼란이 발생합니다.

게시물 끝부분에서 비동기, 동기화, 지연 방식으로 자바스크립트 파일을 로드하는 방법에 대해 자세히 알아보세요.

여기서 먼저 코드 실행에 대해 이야기하겠습니다. 스크립트가 성공적으로 다운로드된 후 코드 줄을 실행하려면 스크립트 태그에 onload 속성을 사용할 수 있습니다. 아래 코드 조각을 참조하세요.

<html>

<head>
    <title>Sync Script Tag</title>
</head>

<body>
    <h1>Load script sync.</h1>
</body>
<script>
    function  afterLoad() {        
        console.log('script loaded successfully.') // executes after script has loaded   
    }    
    function  sync_load()  {        
        console.log('sync_load...')         
        var  s  =  document.createElement('script');        
        s.type  =  'text/javascript';        
        s.async  =  false; // load synchronously       
        s.onload  =  afterLoad;        
        s.src  =  "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js";        
        var  x  =  document.getElementsByTagName('script')[0];        
        x.parentNode.insertBefore(s,  x);            
    }    
    console.log('JS entry')     
    sync_load();    
    console.log('next tick') // this executes before after_load 
</script>

</html>

로그인 후 복사

출력:

Common mistake to avoid while loading a file synchronously using script tag