외부 JS 의 차단 다운로드 모든 브 라 우 저 는 JS 를 다운로드 할 때 다른 모든 활동 을 막 습 니 다.예 를 들 어 다른 자원 의 다운로드,내용 의 표현 등 입 니 다.JS 다운로드,해석,실행 이 끝 난 후에 야 다른 자원 을 병행 다운로드 하고 내용 을 보 여 줍 니 다.왜 JS 가 CSS,이미지 처럼 병행 다운 로드 를 못 하 느 냐 는 질문 이 나온다.브 라 우 저 구조 페이지 의 원 리 를 간단하게 소개 해 야 합 니 다.브 라 우 저 는 서버 에서 HTML 문 서 를 받 고 HTML 을 메모리 에서 DOM 트 리 로 변환 합 니 다.변환 하 는 과정 에서 특정한 노드(node)에서 CSS 나 IMAGE 를 인용 한 것 을 발견 하면 1 개의 request 를 보 내 CSS 나 image 를 요청 한 다음 에 다음 변환 을 계속 수행 합 니 다.request 의 귀환 을 기다 리 지 않 아 도 됩 니 다.request 가 돌아 오 면 되 돌아 온 내용 을 DOM 트 리 에 해당 하 는 위치 에 넣 으 면 됩 니 다.그러나 JS 를 인 용 했 을 때 브 라 우 저 는 js request 1 개 를 보 내 면 이 request 가 돌아 오 기 를 기다 리 고 있 습 니 다.브 라 우 저 는 안정 적 인 DOM 트 리 구조 가 필요 하기 때문에 JS 에 서 는 document.write 나 appendChild,심지어 직접 사용 하 는 location.href 를 사용 하여 점프 하 는 코드 가 있 을 가능성 이 높 습 니 다.브 라 우 저 는 JS 가 DOM 트 리 를 수정 하 는 것 을 방지 하기 위해 DOM 트 리 를 다시 구축 해 야 합 니 다.그래서 다른 다운로드 와 보 여 주 는 것 을 막 습 니 다.다운로드 차단 그림:아래 그림 은 블 로그 자바 홈 페이지 를 방문 하 는 시간 폭포 그림 입 니 다.시작 하 는 2 개의 이미 지 는 모두 병렬 다운로드 이 고 뒤의 2 개의 JS 는 다운 로드 를 막 습 니 다(1 개 1 개 다운로드).
JS 가 삽 입 된 블록 다운 로드 는 JS 가 HTML 문서 에 직접 쓰 인 JS 코드 를 말한다.위 에 서 는 외부 JS 를 인용 하면 그 후의 자원 다운로드 와 그 후의 내용 을 막 을 수 있 습 니 다.어떤 JS 가 어떻게 막 혔 는 지 보 여 줍 니 다.아래 의 2 개의 코드 를 보 세 요.코드 1:
<ul>
<<li>blogjava></li>
<li>CSDN></li>
<li> ></li>
<li>ABC></li>
<li>AAA></li>
<ul>
<div>
<script type="text/javascript">
// 5
var n = Number(new Date());
var n2 = Number(new Date());
while((n2 - n) (6*1000)){
n2 = Number(new Date());
}
</script>
<div>
<ul>
<li>MSN></li>
<li>GOOGLE></li>
<li>YAHOO></li>
</ul>
</div>
코드 2(test.zip 안의 코드 는 코드 1 의 JS 코드 와 똑 같 습 니 다):
<div>
<ul>
<li>blogjava></li>
<li>CSDN></li>
<li> ></li>
<li>ABC></li>
<li>AAA></li>
<ul>
<div>
<script type="text/javascript" src="test.zip"><script>
<div>
<ul>
<li>MSN></li>
<li>GOOGLE></li>
<li>YAHOO></li>
</ul>
</div>
이 실 행 된 후에 코드 1 에서 5 초 전 페이지 에 공백 이 있 는 것 을 발견 할 수 있 습 니 다.5 초 후 페이지 가 모두 표 시 됩 니 다.코드 2 에 서 는 5 초 전에 블 로그 자바,csdn 등 이 먼저 표시 되 고 5 초 후에 야 MSN 이 표 시 됩 니 다.이 를 통 해 알 수 있 듯 이 JS 를 삽입 하면 모든 내용 의 표현 을 막 을 수 있 고 외부 JS 는 그 후의 내용 의 표시 만 막 을 수 있 으 며 두 가지 방식 은 그 후의 자원 의 다운 로드 를 막 을 수 있다.JS 를 끼 워 넣 어서 CSS 가 불 러 오 는 문 제 를 막 았 습 니 다.CSS 가 어떻게 불 러 오 는 것 을 막 았 습 니까?CSS 는 동시에 다운로드 할 수 있 었 는데 어떤 상황 에서 차단 로드 가 발생 했 습 니까?국외 서버 1 개 를 선택 한 CSS):
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js test>title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="http://69.64.92.205/Css/Home3.css" />
</head>
<body>
<img src="https://www.jb51.net/images/logo.gif" /><</span>br />
<img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" />
</body>
</html>
시간 폭포 도:
코드 2(JS 에 빈 것 1 개 만 추가):
js test>title><meta http-equiv="Content-Type"content="text/html;charset=UTF-8" /> <link type="text/css" rel="stylesheet" href="http://69.64.92.205/Css/Home3.css" /> <script type="text/javascript"> function a(){} </script> <head> <body> <img src="https://www.jb51.net/images/logo.gif" /><</span>br /> <img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif"/></body>시간 폭포 도:<img src="https://s1.md5.ltd/image/1a9dd44a9ab961e95ef816deaf38f07d.jpg" border="0"/> 시간 폭포 도 에서 알 수 있 듯 이 코드 2 에 서 는 CSS 와 그림 을 병행 다운로드 하지 않 고 CSS 다운로드 가 끝 난 후에 야 뒤의 2 개의 그림 을 병행 다운로드 합 니 다.CSS 뒤에 포 함 된 JS 를 따라 가면 이 CSS 는 뒤의 자원 다운 로드 를 막 는 상황 이 발생 합 니 다.여기 왜 끼 워 넣 은 JS 가 뒤의 자원 을 막 았 는 지 말 하지 않 고 CSS 가 막 혔 는 지 물 어 볼 수도 있다.지금 우리 가 사용 하고 있 는 빈 함 수 를 생각해 보 세 요.이 빈 함 수 를 1ms 만 해석 하면 됩 니 다.뒤의 두 그림 은 CSS 가 1.3s 를 다운로드 한 후에 야 다운로드 하기 시 작 했 습 니 다.JS 를 CSS 앞 에 끼 워 넣 으 면 막 히 지 않 을 수 있 습 니 다.근본 원인:브 라 우 저 는 html 에서 css 와 js 의 순 서 를 유지 하기 때문에 스타일 시트 는 끼 워 넣 은 JS 가 실행 되 기 전에 먼저 불 러 오고 해석 해 야 합 니 다.끼 워 넣 은 JS 는 뒤의 자원 로드 를 막 기 때문에 위의 CSS 가 다운 로드 를 막 는 경우 가 발생 합 니 다.끼 워 넣 기 JS 는 어느 위치 에 두 어야 합 니까?1.아래쪽 에 두 면 모든 디 스 플레이 가 막 히 지만 자원 다운 로드 는 막 히 지 않 습 니 다.2.JS 를 head 에 끼 워 넣 으 면 JS 를 CSS 머리 에 끼 워 넣 으 십시오.3.defer 4 를 사용 하여 끼 워 넣 은 JS 에서 실행 시간 이 비교적 긴 함 수 를 호출 하지 마 십시오.만약 에 꼭 사용 해 야 한다 면 setTimeout 으로 PS 를 호출 할 수 있 습 니 다.많은 사이트 들 이 head 에 JS 를 끼 워 넣 는 것 을 좋아 하고 CSS 뒤에 두 는 습관 이 있 습 니 다.예 를 들 어 보 이 는 www.qq.com,물론 JS 를 CSS 앞 에 두 는 사이트 도 많 습 니 다.예 를 들 어 야후,google[성명]전재 출처 를 밝 혀 주세요.http://www.blogjava.net/BearRui/。 상용 금지!
