| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- docker명령어
- 검색
- Query
- appspec
- 예약
- 추후정리
- WeNews
- 2 > /dev/null
- application.yml
- AuthenticationEntryPoint
- EC2
- ㅔㄴ션
- foreignkey
- ubuntu
- 네이티브쿼리
- appspec.yml
- 서브쿼리
- MySQL
- 메소드명
- 포트
- 컨테이너실행
- 메세지수정
- querydsl
- 커밋메세지수정
- 적용우선순위
- 테스트
- subquery
- 참조키
- 외부키
- 테스트메소드
- Today
- Total
제뉴어리의 모든것
css와 javascript 의 html 적용 부분에 대하여 본문
css는 <head> </head> 의 안에 적용하는것이 효율적이고
javascript는 하단 </body> 바로 위에 적용하는 것이 효율적이다
일단 시각적으로 웹페이지를 띄우고 (그러기 위해선 css가 필요하기 때문) 그 다음에 자바스크립트들을 읽어오는것이 사
용자가 봤을때는 딜레이 없는상황이기 때문에.
그렇지 않고 스크립트는 헤더에서 먼저 읽는다면 스크립트를 읽는 동안 화면을 그려내는 일은 중지(물론 몇초 정도의 딜레이 혹은 1초도 안되는 상황일수도 있다) 되고 스크립트를 다 읽은 다음에 다시 그리기 시작할 것이기 때문이다.
그러나 여러곳을 구글링 하던중 새로운 글을 발견하였다.
html 안에 script 태그를 어느 위치에 삽입하는것이 가장 좋을까? :: 물고기 개발자의 블로그 (tistory.com)
고전적인 방법
이 문제를 해결하기위한 이전 접근법은 <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는 비동기 스크립트와는 다르게 지연 스크립트는 전체 문서가 로드된 후에만 실행됩니다.
출처: https://epthffh.tistory.com/entry/html-안에-script-태그를-어느-위치에-삽입하는것이-가장-좋을까 [물고기 개발자의 블로그]
html 안에 script 태그를 어느 위치에 삽입하는것이 가장 좋을까?
html 안에 script 태그를 어느 위치에 삽입하는것이 가장 좋을까? 문득 궁금해서 찾아보았습니다. 다음은 stackoverflow 에서 가장 추천수가 많은 질문과 답변입니다. 발번역이므로 오역은 댓글로 지적
epthffh.tistory.com
이러한 방법도 있다
'HTML' 카테고리의 다른 글
| Button 의 Action으로 페이지 이동과 파라미터 전송 (0) | 2021.01.19 |
|---|---|
| SPAN 태그 (0) | 2021.01.18 |
| 모달로 팝업창 띄우기 (0) | 2021.01.18 |
| 웹 브라우저에서 HTML문서 렌더링 과정 (동작 순서) (0) | 2021.01.18 |
| List 태그 (0) | 2021.01.17 |
