회전 결합 비동기 스 크 립 트

회전 결합 비동기 스 크 립 트
돌리다http://www.cnblogs.com/yslow/archive/2009/04/29/1446236.html
결합 비동기 스 크 립 트 영문 원문 주소
 
최근 에 제 작업 은 외부 스 크 립 트 를 비동기 로 불 러 오 는 것 (loading external scripts asynchronously) 을 중심 으로 진행 되 고 있 습 니 다.외부 스 크 립 트 를 일반 방식 으로 불 러 올 때 <script src="..."> 페이지 에 있 는 모든 자원 의 다운로드 와 스 크 립 트 아래 요소 의 렌 더 링 을 막 습 니 다. 스 크 립 트 를 아래쪽 (Put Scripts at the Bottom) 에 두 는 샘플 의 효 과 를 볼 수 있 습 니 다. 비동기 로 스 크 립 트 를 불 러 오 면 차단 행 위 를 피하 고 페이지 를 더 빨리 불 러 옵 니 다.
비동기 로 스 크 립 트 를 불 러 오 는 문 제 는 내장 스 크 립 트 가 외부 스 크 립 트 에서 정의 하 는 기 호 를 사용 하 는 문제 입 니 다. 내장 스 크 립 트 가 비동기 로 불 러 오 는 외부 스 크 립 트 기 호 를 사용 하면 경쟁 조건 에서 정의 되 지 않 은 기호 오류 가 발생 할 수 있 습 니 다.따라서 비동기 스 크 립 트 와 내장 스 크 립 트 를 아래 방식 으로 결합 시 킬 필요 가 있 습 니 다. 비동기 스 크 립 트 다운로드 가 완료 되 기 전에 내장 스 크 립 트 가 실 행 될 수 없습니다.
다음은 비동기 스 크 립 트 를 결합 하 는 몇 가지 방법 이 있 습 니 다.

window 's onload - 내장 스 크 립 트 는 창의 onload 이 벤트 를 사용 해 볼 수 있 습 니 다. 구현 은 매우 간단 하지만 내장 스 크 립 트 는 가능 한 한 빨리 실행 되 지 않 습 니 다.

script 's onreadystatechange - 내장 스 크 립 트 는 스 크 립 트 onreadystatechange 와 onload 이벤트 (모든 유행 하 는 브 라 우 저 에서 당신 이 직접 실현 해 야 합 니 다) 코드 가 길 고 복잡 하지만 스 크 립 트 다운로드 가 끝 난 후 바로 내장 스 크 립 트 를 실행 할 수 있 습 니 다.

hardcoded callback - 외부 스 크 립 트 는 리 셋 함수 (callback function) 를 통 해 인 라인 스 크 립 트 를 명확 하 게 호출 할 수 있 습 니 다. 외부 스 크 립 트 와 인 라인 스 크 립 트 가 한 팀 이 개발 하면 문제 가 없 지만 제3자 스 크 립 트 를 사용 하면 필요 한 유연성 을 제공 하지 못 합 니 다.

이 블 로그 게시 물 에서 나 는 두 가지 문 제 를 토론 했다. 비동기 스 크 립 트 를 어떻게 사용 하여 페이지 를 가속 화 하 는 지,Degrading Script Tags 모드 를 통 해 외부 스 크 립 트 와 내장 스 크 립 트 를 결합 하 는 방법 을 보 여 줍 니 다. 최근 에 완 료 된 프로젝트 UA Profiler results sortable 도 표를 통 해 보 여 줍 니 다. Stuart Langridge 의 sorttable 정렬 스 크 립 트 도 사 용 했 습 니 다. 그의 스 크 립 트 를 내 페이지 에 추가 하고 정렬 하 는 데 약 5 분 이 걸 렸 습 니 다. 비동기 스 크 립 트 와 결합 발 을 추가 로 사용 합 니 다.이 작업량 을 나 는 이 페이지 의 로 딩 속 도 를 30% 높 일 수 있다.
일반 스 크 립 트 태그
처음에 저 는 일반적인 방법 <script src="..."> 을 사용 하여 Stuart Langridge 의 sorttable 정렬 스 크 립 트 를 UA Profiler 에 추 가 했 습 니 다. 예 를 들 어 Normal Script Tag 를 보십시오. HTTP 폭포 도 는 그림 1 참조.
그림 1: 일반 Script 에 표 시 된 폭포 도
표 정렬 작업 은 정상 이지 만 페이지 가 많이 느 려 져 서 만 족 스 럽 지 않 습 니 다. 그림 1 에서 우 리 는 스 크 립 트 (sorttable - async. js) 가 페이지 내 유일한 후계 HTTP 요청 (arrow - right - 20X9. gif) 을 막 아서 페이지 로드 가 느 려 지 는 것 을 볼 수 있 습 니 다. 폭포 도 는 Firebug 1. 3 beta 를 사용 하여 발생 합 니 다. (httpwatch 나 기조 네트워크 의 webwatch 도 구 를 사용 하여 효 과 를 볼 수 있 습 니 다)。 새 버 전의 Firebug 는 onload 이벤트 가 발생 한 곳 에 빨간색 세로 줄 을 표시 합 니 다. (파란색 세로 줄 은 DOMContentLoaded 이벤트 입 니 다.) 일반 Script 태그 에 있어 onload 사건 은 487 밀리초 에 발생 합 니 다.
비동기 로드 스 크 립 트
초기 페이지 렌 더 링 에 있어 서 스 크 립 트 sorttable - async. js 는 필요 하지 않 습 니 다. - 표 가 렌 더 링 된 후에 정렬 합 니 다. 이 경우 (외부 스 크 립 트 는 초기 페이지 에 사용 되 지 않 습 니 다) 비동기 스 크 립 트 로 불 러 올 수 있 는 주요 특징 입 니 다. 예 를 들 어 비동기 스 크 립 트 는 DOM 방식 으로 다른 단계 로 불 러 옵 니 다.

var script = document.createElement('script');

script.src = "sorttable-async.js";

script.text = "sorttable.init()"; //        

document.getElementsByTagName('head')[0].appendChild(script);

스 크 립 트 를 비동기 로 불 러 오 는 HTTP 폭포 그림 2.차단 행 위 를 피하 기 위해 비동기 로 딩 기술 을 어떻게 사용 하 는 지 주의 하 세 요. - sorttable - async. js 와 arrow - right - 20×9. gif 가 동시에 다운로드 되 었 습 니 다. onload 시간 은 429 밀리초 입 니 다.
그림 2: 스 크 립 트 를 비동기 로 불 러 오 는 HTTP 폭포 그림
John Resig 가 소개 한 Degrading Script Tags 모드
예 를 들 어 비동기 로 스 크 립 트 를 불 러 오 면 페이지 가 더 빨리 불 러 오지 만 더 높 아 지 는 공간 이 있 습 니 다. 기본 sorttable 정렬 은 onload 이벤트 에 추가 sorttable.init() 를 통 해 실 행 됩 니 다.외부 스 크 립 트 가 불 러 온 후에 내장 스 크 립 트 를 즉시 호출 sorttable.init() 하면 성능 을 향상 시 킬 수 있 습 니 다. 이런 상황 에서 제 가 사용 하 는 API 는 함수 일 뿐 이지 만 더 복잡 한 상황 을 지원 할 수 있 는 유연 한 모드 를 시도 하 겠 습 니 다.
앞에서 나 는 각종 내장 스 크 립 트 와 외부 비동기 스 크 립 트 를 결합 하 는 방법 을 보 여 주 었 다. window 's onload, script' s onreadystatechange, hardcoded callback. 여기 서 나 는 John Resig 에서 온 Degrading Script Tags 모드 라 고 불 리 는 기술 을 사용 했다.John 은 내장 스 크 립 트 와 외부 스 크 립 트 를 어떻게 결합 하 는 지 설명 합 니 다. 예 를 들 어:

<script src="jquery.js">

jQuery("p").addClass("pretty");

</script>

그 가 언급 한 이 방법 은 내부 스 크 립 트 를 외부 스 크 립 트 다운로드 가 끝 난 후에 야 실행 하 는 것 이다.이러한 방식 으로 내장 스 크 립 트 와 외부 스 크 립 트 를 결합 하면 몇 가지 장점 이 있 습 니 다.

더 간단 합 니 다. - script 태그 2 개 를 script 태그 1 개 로 바 꿉 니 다

더 뚜렷 합 니 다. - 인 라인 코드 가 외부 스 크 립 트 에 의존 하 는 관계 가 더욱 뚜렷 합 니 다

더 안전 합 니 다. - 외부 스 크 립 트 다운로드 에 실패 하면 내장 스 크 립 트 가 실행 되 지 않 고 정의 되 지 않 은 기호 오류 가 발생 하지 않도록 합 니 다

외부 스 크 립 트 를 비동기 로 불 러 올 때 도 좋 은 모드 입 니 다.이 기술 을 사용 하기 위해 서, 나 는 내 장 된 코드 와 외부 스 크 립 트 를 수정 해 야 합 니 다. 내 장 된 코드 에 대해 서 는 세 번 째 줄 을 추가 하여 script.text 의 속성 을 설정 합 니 다. 결합 코드 를 위해 서, 나 는 sorttable - async. js 끝 에 다음 과 같은 코드 를 추 가 했 습 니 다.

var scripts = document.getElementsByTagName("script");

var cntr = scripts.length;

while ( cntr ) {

var curScript = scripts[cntr-1];

if ( -1 != curScript.src.indexOf('sorttable-async.js') ) {

eval( curScript.innerHTML );

break;

}

cntr--;

}

이 코드 는 웹 페이지 의 모든 스 크 립 트 를 옮 겨 다 니 며 스 크 립 트 블록 자체 (이때 스 크 립 트 의 src 속성 은 sorttable - async. js 포함) 를 찾 은 다음 eval 을 이용 하여 코드 sorttable.init () 를 스 크 립 트 실행 에 추가 합 니 다.이러한 최 적 화 를 통 해 외부 스 크 립 트 는 다른 자원 의 다운 로드 를 막 지 않 을 뿐만 아니 라 내장 코드 도 가능 한 한 빨리 실 행 될 것 이다.
로드 지연
지연 로 딩 을 통 해 페이지 를 더 빨리 불 러 올 수 있 습 니 다 (onload 이벤트 동적 으로 불 러 오기). 예 를 들 어 Lazyload 는 onload 이벤트 에 다음 코드 를 포함 합 니 다.

window.onload = function() {

var script = document.createElement('script');

script.src = "sorttable-async.js";

script.text = "sorttable.init()";

document.getElementsByTagName('head')[0].appendChild(script);

}

이 경우 스 크 립 트 결합 기술 이 필요 합 니 다. onload 이벤트 에 있 는 코드 sorttable.init() 는 실행 되 지 않 습 니 다. 이 때 onload 이벤트 가 발생 했 고 sorttable - async. js 는 다운로드 되 지 않 았 기 때 문 입 니 다.로드 지연 의 장점 은 onload 사건 을 더욱 빨리 발생 시 키 는 것 입 니 다. 그림 3 참조.빨간색 세로 줄 은 onload 사건 이 320 밀리초 에 발생 한 것 을 나타 낸다.
그림 3: 로 딩 지연 HTTP 폭포 그림
결론.
일반적인 차단 행 위 를 피 함으로써 비동기 로 스 크 립 트 를 불 러 오고 스 크 립 트 를 지연 시 키 면 웹 페이지 의 불 러 오 는 시간 을 높 일 수 있 습 니 다. 다음은 서로 다른 버 전의 sorttable 정렬 예 코드 를 추가 합 니 다.

일반 스 크 립 트 태그 - 487 밀리초

비동기 로드 - 429 밀리초

로드 지연 - 320 밀리초

이상 시간 은 onload 사건 이 발생 하 는 시간 을 말 합 니 다.