html,css,js 세 가지 로 딩 순서 에 대한 자세 한 설명
<head lang="en">
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/*.css" rel="external nofollow" >
<script src="js/*.js></script>
</head>1、DOM 링크 탭 에 불 러 오기
css 파일 의 로 딩 은 DOM 의 로 딩 과 병행 합 니 다.즉,css 가 로 딩 할 때 Dom 은 계속 로 딩 되 어 구축 되 고 있 으 며,그 과정 에서 만난 css 스타일 이나 img 은 서버 에 요청 을 보 냅 니 다.자원 이 돌아 오 면 dom 의 상대 적 인 위치 에 추가 합 니 다.
2、DOM 을 script 태그 로 불 러 오기
js 파일 은 DOM 과 함께 불 러 오지 않 기 때문에 js 전체 파일 을 불 러 온 후에 야 DOM 의 불 러 올 수 있 습 니 다.만약 에 js 스 크 립 트 파일 이 너무 크 면 브 라 우 저 페이지 가 정체 되 고'가사'상태 가 나타 날 수 있 습 니 다.이런 효 과 는'차단 효과'라 고 합 니 다.매우 나 쁜 사용자 체험 을 초래 할 수 있다.
이 기능 도 js 파일 에서 시작 할 때$(document).ready(function(){})또는(function(){})또는 window.onload 가 필요 한 이유 입 니 다.즉,DOM 문 서 를 불 러 온 후에 야 js 파일 을 실행 하 는 것 입 니 다.그래 야 DOM 노드 를 찾 지 못 하 는 등 문제 가 발생 하지 않 습 니 다.
js 가 다른 자원 의 불 러 오 는 것 을 막 는 이 유 는 브 라 우 저가 js 가 DOM 트 리 를 수정 하 는 것 을 방지 하기 위해 DOM 트 리 를 다시 구축 해 야 하 는 경우 입 니 다.
3.해결 방법
전제,js 는 외부 스 크 립 트 입 니 다.
script 탭 에 defer="ture"를 추가 하면 js 와 DOM 을 병행 하여 불 러 옵 니 다.페이지 로 딩 이 끝 난 후에 js 파일 을 실행 하면 차단 이 없습니다.
scirpt 탭 에 async="ture"를 추가 합 니 다.이 속성 은 브 라 우 저 에 이 js 파일 이 비동기 로 불 러 와 서 실 행 된 것 임 을 알려 줍 니 다.즉,다른 js 와 css 에 의존 하지 않 습 니 다.즉,js 파일 의 불 러 오 는 순 서 를 보장 할 수 없 지만 DOM 과 병행 하여 불 러 오 는 효과 가 있 습 니 다.
defer 와 async 속성 을 동시에 사용 하면 defer 속성 이 효력 을 잃 습 니 다.
scirpt 탭 을 body 탭 에 두 면 불 러 오 는 충돌 이 발생 하지 않 습 니 다.
상기 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 html,css,js 세 사람의 로 딩 순서 문제 에 대한 상세 한 설명 과 통합 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
