ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 스크립트 순서 ready, onload, javascript
    개발/개발관련 2020. 3. 18. 10:25

     

    1. 외부 내부 스크립트 실행 순서?

    <head>
        <script type="text/javascript" src="/resources/lib/panolens/seoul/js/first.js"></script>
        <script type="text/javascript" src="/resources/lib/panolens/seoul/js/second.js"></script>
    </head>
    
    <body>
    
        <script type="text/javascript">
            $(document).ready(function() {
                alert("html - script - ready 안 4");
            });
            alert("html - script 태그 안 1");
        </script>
    
    </body>
    

    html은 이와같고, first.js안에 ready함수가 들어가있고, second.js에는 first.js ready함수안에서 호출하는 함수가 들어있다.

    //first.js 안
    $(document).ready(function() {
        alert("first.js안 ready");
    });
    
    //second.js 안
    aaa: function(){
        alert("aaa함수 안");
    }

    이런식으로 외부 스크립트, 내부 스크립트 짬뽕되어있는 스크립트들의 순서는 어떻게 될까

    결론부터 말하자면 아래와 같다.

     

    1. alert("html - script 태그 안 1");
    2. alert("first.js안 ready");
    3. alert("aaa함수 안");
    4. alert("html - script - ready 안 4");

    2. ready onload 순서

    ready 함수는 브라우저가 DOM트리 생성한 직후 실행한다. 그래서 alert("html - script 태그 안 1"); 이후에 first.js에 있는 ready가 실행되면서 aaa함수가 실행되고, 마지막으로 html내부 script의 ready가 실행된거같다.

    onload는 쉽게 말하면 화면이 다 뜨고 마지막에 실행된다.

    jquery 대신 순수 자바스크립트로 할 수 있다. 그건 구글에 찾아보면 잘 나온다.

     

     

     

     

     

    728x90
Designed by Tistory.