headjs는 웹사이트의 병렬 로딩을 구현하지만 JS의 순차적 실행을 구현합니다.

JS를 병렬로 로드하되 순차적으로 실행하면 웹 사이트 속도가 향상됩니다.

<script src="js/head.min.js"></script>
<script type="text/javascript"> head.js("js/jquery-1.6.1.min.js","js/jquery.validate.min.js","js/my_validate.js"); </script>

참고: head.js("js/jquery -1.6 .1.min.js","js/jquery.validate.min.js","js/my_validate.js"); 여기에 포함된 JS는 로컬 폴더에 있어야 합니다. 그렇지 않으면 중간에 실행됩니다. IE

예: head.js("js/jquery-1.6.1.min.js", "js/jquery.validate.min.js", "js/alert.js"); 로컬에 jquery가 없습니다. verify.min.js 파일이 있으면 IE에서는 Alert.js가 실행되지 않습니다.

1. Jquery와 같은 다른 JS 파일을 비동기적으로 로드합니다. 이전에는 참조된 외부 JS를 페이지 하단에 배치했지만 head.js를 사용한 후에는 모든 JS 콘텐츠를 하나의 파일로 모아 페이지 끝에 배치할 수 있습니다. 그런 다음 이 JS 파일에서 다른 외부 JS를 참조할 수 있습니다. 예를 들어 내 페이지 하단에 참조된 JS가 있습니다.

head(function() {
........
});
/* part 1 */
head.js("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
/* part 2 */

첫 번째 부분은 페이지가 완료된 후 실행될 JS 스크립트입니다. 두 번째 부분은 스크립트를 실행하기 전에 참조되는 외부 JS 파일의 주소입니다. 분명히 사용 중인 Jquery 버전을 업그레이드하려면 페이지 내용을 변경하지 않고 이 파일만 수정하면 됩니다. 이는 정적으로 게시된 MovableType에 유용합니다.

2. CSS3 속성 지원 감지. 말하기는 어렵지만 브라우저가 특정 CSS3 속성을 지원하는지 여부를 알 수 있음을 의미합니다. 특정 속성이 지원되면 이 속성의 이름을 딴 클래스가 페이지의 HTML 노드에 추가됩니다. 지원되지 않으면 클래스 이름에 접두사가 없습니다. 예를 들어 IE6은 boxshadow 속성을 지원하지 않으므로 IE6을 사용하여 페이지를 탐색할 때 페이지의 html 노드는 468173b1765eaff59b8f5229c44a2da8와 유사합니다.

이러한 방식으로 브라우저가 특정 고급 속성을 지원하지 않는 경우 다른 솔루션이 대신 사용되도록 CSS 파일에서 설정할 수 있습니다.

.boxshadow .box{
box-shadow: 0px 0px 5px #bbb;
}
.no-boxshadow .box{
border: 2px solid #bbb;
}

현재 head.js가 감지할 수 있는 CSS3 속성에는 borderimage borderradius boxshadow 불투명 반사 rgba textshadow 변환 전환이 포함됩니다.

3. head.js는 브라우저의 유형과 버전을 감지할 수 있으며 웹사이트의 루트 디렉터리를 기준으로 현재 방문한 페이지의 경로도 감지할 수 있습니다. 더 멋진 것은 head.js가 동적으로 감지할 수 있다는 것입니다. 브라우저의 현재 상태. 또한 이전 속성을 html 노드에 동적으로 전달하고 해당 클래스를 추가하세요! 이러한 방식으로 CSS와 결합하면 각 브라우저에 맞게 조정되고, 각 페이지를 고유하게 만들고, 창 크기가 변경됨에 따라 레이아웃이 자동으로 변경되는 멋진 디자인을 만들 수 있습니다.