html안에서 자바스크립트의 위치

html 안에 script 태그를 어느 위치에 삽입하는것이 가장 좋을까?
문득 궁금해서 찾아보았습니다.
다음은 stackoverflow 에서 가장 추천수가 많은 질문과 답변입니다.
발번역이므로 오역은 댓글로 지적받겠습니다 :)

HTML 문서에 자바 스크립트를 삽입 할 때 <script> 태그와 자바 스크립트를 넣을 수있는 가장 좋은 곳은 어디일까?

사람들은 자바스크립트를 <head> 섹션에 삽입하면 좋지 않다고 하지만, <body> 섹션의 시작 부분에 놓는 것 또한 나쁘다고 합니다.
왜냐하면 자바 스크립트는 페이지가 완전히 렌더링되기 전에 파싱되어야하기 때문입니다.
그럼 <body> 섹션의 끝에 <script> 태그를 놓는 방법만이 남은것 같아 보입니다.
그렇다면 <script> 태그를 넣을 수있는 가장 적합한 곳은 어디일까요?

브라우저가 웹 사이트를 로드 할 때 일어나는 일

  1. HTML 페이지 가져 오기 (예 : index.html)

  2. HTML 구문 분석을 시작합니다

  3. 파서는 외부 스크립트 파일을 참조하는 <script> 태그를 발견합니다.

  4. 브라우저가 스크립트 파일을 요청합니다. 한편 파서는 페이지의 다른 HTML을 구문 분석하는 것을 차단합니다.

  5. 잠시 후 스크립트가 다운로드 된 후 실행됩니다.

  6. 파서는 나머지 HTML 문서를 계속 파싱합니다.

4번은 좋지 않은 사용자 환경을 유발합니다.
웹 사이트는 기본적으로 모든 스크립트를 다운로드 할 때까지 로드를 중지합니다.
사용자는 웹 사이트가 로드 될 때까지 기다리는 것을 싫어합니다.

왜 이런 일이 일어날까요?

모든 스크립트는 document.write () 또는 다른 DOM 조작을 통해 자체 HTML을 삽입 할 수 있습니다.
이는 구문 분석기가 나머지 문서를 안전하게 구문 분석하기 전에 스크립트가 다운로드되고 실행될 때까지 기다려야 함을 의미합니다. 결국 스크립트는 자체 HTML을 문서에 삽입 할 수 있습니다.

그러나 대부분의 개발자는 문서가 로드되는 동안 더 이상 DOM을 조작하지 않습니다. 대신 문서를 수정하기 전에 문서가 로드 될 때까지 대기합니다.

예를 들면:

<!-- index.html -->
<html>
    <head>
        <title>매일매일 커밋하나씩</title>
        <script type="text/javascript" src="my-script.js"></script> 
    </head>
    <body>
        <div id="user-greeting">환영합니다!</div>
    </body>
</html>

Javascript:

// my-script.js 
document.addEventListener("DOMContentLoaded", function() {
    // this function runs when the DOM is ready, i.e. when the document has been parsed 
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

브라우저가 my-script.js가 다운로드되고 실행될 때까지 문서를 수정하지 않는다는 것을 브라우저가 알지 못하기 때문에 파서가 구문 분석을 중단합니다.

고전적인 방법

이 문제를 해결하기위한 이전 접근법은 <body> 맨 아래에 <script> 태그를 두는 것이 었습니다. 이렇게하면 파서가 맨 끝까지 차단되지 않기 때문입니다.

이 접근 방식에는 자체적 인 문제가 있습니다. 브라우저는 전체 문서가 구문 분석 될 때까지 스크립트 다운로드를 시작할 수 없습니다. 큰 스크립트 및 스타일 시트가있는 더 큰 웹 사이트의 경우 가능한 한 빨리 스크립트를 다운로드 할 수있는 것이 성능 향상에 매우 중요합니다. 웹 사이트가 2초 내에 로드되지 않으면 사람들은 다른 웹 사이트로 이동할 것 입니다.

최적의 솔루션에서 브라우저는 가능한 한 빨리 스크립트 다운로드를 시작하는 동시에 문서의 나머지 부분을 파싱합니다.

현대적인 접근법

오늘날 브라우저는 스크립트의 비동기 및 지연 특성을 지원합니다. 이러한 속성은 스크립트가 다운로드되는 동안 계속 구문 분석을하는 것이 안전하다는 것을 브라우저에 알려줍니다.

async

<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>

async 속성이있는 스크립트는 비동기 적으로 실행됩니다. 즉, 스크립트가 다운로드되는 즉시 브라우저가 차단되지 않고 실행됩니다.
이는 스크립트 2가 스크립트 1 이전에 다운로드 및 실행될 수 있음을 의미합니다.

http://caniuse.com/#feat=script-async 에 따르면 모든 브라우저의 90 %가이를 지원합니다.

defer

<script type="text/javascript" src="path/to/script1.js" defer></script>
<script type="text/javascript" src="path/to/script2.js" defer></script>

defer 속성을 가진 스크립트는 순서대로 (즉, 첫 번째 스크립트 1 다음에 스크립트 2) 실행됩니다. 이것은 또한 브라우저를 차단하지 않습니다.

defer는 비동기 스크립트와는 다르게 지연 스크립트는 전체 문서가 로드된 후에만 실행됩니다.

http://caniuse.com/#feat=script-defer 에 따르면 모든 브라우저 중 90 %가이를 지원합니다. 92 %는 적어도 부분적으로 그것을 지원합니다.

브라우저 호환성에 대한 중요한 참고 사항 : 일부 경우 IE <= 9는 지연된 스크립트를 순서대로 실행하지 않을 수 있습니다. 해당 브라우저를 지원해야하는 경우 먼저 읽으십시오!

결론

현재의 최신 기술은 스크립트를 <head> 태그에 넣고 async 또는 defer 속성을 사용하는 것입니다. 이렇게하면 브라우저를 차단하지 않고도 스크립트를 최대한 빨리 다운로드 할 수 있습니다.

좋은 점은 이 속성을 지원하지 않는 브라우저의 20%에서도 웹 사이트가 여전히 올바르게 로드 되며 나머지 80 %는 속도가 빨라진다는 것입니다.

이 글의 출처는 stackoverflow 이고 제가 영어를 잘하지 못해서 번역이 틀릴 수 있습니다.

오역은 댓글달아주시면 감사하겠습니다



html5 <a> 태그에서 자바스크립트 함수 호출하는 방법.


javascript:void(0)을 사용하는것을 권장합니다.


href="#" 을 사용하는 경우가 꽤 많이 있는데 이는 권장하지 않습니다.

이에는 3가지 이유가 있습니다.


첫번째는 개발자 팀 사이에 # 사용을 권장하면 필연적으로 다음과 같은 함수의 반환 값 (return false) 을 사용하게됩니다


function doSomething() {
    //사용할 코드
    return false;
}

하지만 개발자들은 onclick에서 return doSomething()을 사용하고 doSomething()을 사용하는 것을 잊어 버립니다.


두 번째 이유는 최종 반환 값이 false라는 점입니다. 호출 된 함수가 오류를 throw하면 실행되지 않습니다. 

따라서 개발자는 호출 된 함수에서 오류를 적절히 처리하는 것을 기억해야합니다.


세 번째 이유는 onclick 이벤트 속성이 동적으로 할당되는 경우가 있기 때문입니다. 필자는 함수를 호출하거나 동적으로 할당 할 수있는 기능을 선호합니다.

 즉, 특정 첨부 메소드 또는 다른 메소드에 대한 함수를 특별히 코딩하지 않아도 됩니다. 그러므로 HTML 마크 업에서 내 onclick (또는 무엇이든)은 다음과 같습니다.


onclick="someFunc.call(this)"

OR

onclick="someFunc.apply(this, arguments)"


javascript:void(0)를 사용하면 위 코드에서 발생할 문제를 피할 수 있으며 단점을 발견하지 못했습니다.


 당신이 독창적 인 개발자라면 분명히 자신 만의 선택을 할 수 있습니다. 하지만 팀으로 일하고 있다면 다음을 고려하세요


href = "#" 를 사용하면 onclick에 항상 false가 포함되어 있는지 확인하고

호출 된 함수는 오류를 발생시키지는 않는지 체크하고

함수를 onclick 속성에 동적으로 연결하면 오류를 throw하지 않고 false를 반환하도록 신경써야합니다


하지만 이 코드는 모든 문제를 해결해 줄 것입니다


href="javascript:void(0)"


출처 : http://stackoverflow.com/questions/134845/which-href-value-to-use-for-javascript-links-or-javascriptvoid0/134957#134957

'개발 > javascript' 카테고리의 다른 글

jQuery 를 이용한 다른 페이지로 이동(redirect) 방법  (2) 2016.11.26
자바스크립트에서 form submit 하는 방법  (0) 2016.11.24
자바스크립트에서는 왜 return false 를 쓰나요?  (0) 2016.11.24

+ Recent posts

티스토리툴바