자 바스 크 립 트 막힘 없 이 불 러 오 는 구체 적 인 방식

《고성능 자 바스 크 립 트》의 독서 노트 를 보 았 다.
몇 가지 원칙:
1.스 크 립 트 를 아래쪽 에 두 기
는 head 에 있 습 니 다.js 를 불 러 오기 전에 정상적으로 표 시 된 페이지 를 불 러 올 수 있 도록 합 니 다.
는앞 에 놓 습 니 다.
2.그룹 스 크 립 트
각탭 을 다운로드 할 때 페이지 분석 과정 을 막 기 때문에 페이지 의총 수 를 제한 하 는 것 도 성능 을 개선 할 수 있 습 니 다.내 연 스 크 립 트 와 외부 스 크 립 트 에 적 용 됩 니 다.
3.비 차단 스 크 립 트
페이지 가 불 러 온 후에 js 코드 를 불 러 옵 니 다.윈도 우즈.load 이벤트 가 발생 한 후 코드 를 다운로드 하기 시작 한 것 이다.
(1)defer 속성:IE4 와 fierfox 3.5 더 높 은 버 전 브 라 우 저 지원
...
내 연 및 외부 파일
defer 속성 이 있 는은 문서 의 모든 위치 에 나타 날 수 있 습 니 다.해당 하 는 js 파일 은이 해 석 될 때 다운 로드 를 시작 하지만 코드 는 실행 되 지 않 습 니 다.DOM 로드 가 끝 날 때 까지(onload 이벤트 핸들 이 호출 되 기 전에).그래서 다른 자원 도 팔 고 같이 다운 로드 를 병행 하 게 되 었 습 니 다.
(2)동적 스 크 립 트 요소
문서 개체 모델(DOM)은 js 동적 으로 HTML 의 거의 모든 문서 내용 을 만 들 수 있 습 니 다.


var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";
document.getElementByTagName_r("head")[0].appendChild(script);

이 기술 의 중점 은 어디서 다운 로드 를 시작 하 든 파일 액 다운로드 와 실행 은 다른 페이지 처리 과정 을 막 지 않 는 다 는 것 이다.헤드 에 있어 도(파일 다운로드 에 사용 되 는 http 링크 제외).
（3）The YUI3 approach
이념:아주 작은 초기 코드 로 다른 기능 코드 를 다운로드 하고 먼저 파일 을 도입 합 니 다.


<script type="text/javascript src=//img.jbzj.com/file_images/article/201306/yuanma/combo.js></script>

이 피 드 파일 은 약 10KB 입 니 다.
사용:


YUI().use("dom",function(Y){
　　Y.Dom.addclass(...)
})

모든 코드 가 사용 가능 할 때 리 셋 함수 가 호출 되 고 YUI 인 스 턴 스 가 매개 변수 로 들 어 오 면 바로 새로 다운로드 한 기능 을 사용 할 수 있 습 니 다.
The LazyLoad library
사용:먼저 도입:lazyload-min.js
(4)


LazyLoad.js("a.js",function(){
Appliction.init();
})

여러 파일:


LazyLoad.js(["a.js","b.js"],function(){
Application.init();
})

(5)The LABjs library
먼저 도입:lab.js


$LAB.script("a.js").wait(function(){
Application.init();
})

여러 파일 을 체인 으로 작성 합 니 다.
그의 독특한 점 은 의존 관 계 를 관리 할 수 있다 는 데 있다.
wait()함 수 를 통 해 다른 파일 을 기 다 려 야 할 파일 을 지정 할 수 있 습 니 다.
예 를 들 어 b.js 의 코드 는 a.js 이전에 실행 되 지 않 음


$LAB.script("a.js").wait().script("b.js").wait(function(){
Application.init();
})

을 보증 합 니 다.두 파일 은 병행 다운로드 되 지만 a.js 가 b.js 전에 실 행 될 수 있 도록 보장 합 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Javascript에서 Math.max와 Math.max.apply의 차이점과 용법 상세 설명

최근에 작은 사례를 만들 때 Math를 만났어요.max.apply라는 용법은 이전에 보기 드물게 재미있게 느껴졌으니 기록해 보세요. 1Math.max 문법:Math.max(n1,n2,n3,...,nX)반환값:max(...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

자 바스 크 립 트 막힘 없 이 불 러 오 는 구체 적 인 방식

좋은 웹페이지 즐겨찾기