browser_javascript 스킬에서 html과 javascript의 로딩 순서에 대해 토론하세요.

얼마 전 자바스크립트를 샅샅이 훑어봤는데 그때 기분이 좋았어요. 지금 생각해보면 별거 아닌 것 같은 느낌이 듭니다. 오늘의 임무는 asp.net ajax에서 클라이언트 페이지의 라이프사이클에 관한 장을 연구하는 것입니다. 그런데 이 장의 내용이 조금 혼란스러웠습니다. 이 책에서는 이러한 의심에 대해 언급하지 않습니다.

1. html 페이지의 상세 로딩 과정은 어떻게 되나요? 로드 시 페이지 요소의 우선순위는 무엇입니까?

2. 자바스크립트의 범위, 변수의 범위, 다양한 스크립트 세그먼트 간의 관계?

3. HTML 페이지의 생명주기?

이러한 질문이 정말 마음에 와 닿았습니다. 이를 이해하지 못하면 asp.net ajax 프레임워크를 통해 기본 원칙을 볼 수 없습니다. 나만 알 뿐이지 왜 그런지는 모르겠다.

온라인으로 광범위한 정보에 접근할 수 있습니다. 답변을 얻었습니다.

html 로딩 정보:

일반적으로 html은 위에서 아래로 순서대로 로드되어 파싱되며, html에 혼합되는 내용은 다음과 같습니다.

document.write("xxxx");

등의 순서는 무엇인가요? 그래도 HTML을 파싱할 때 이런 일이 발생하면 파싱을 중단하고 생성된 문장을 중간에 삽입하면 외부 링크에 해당하는 js를 파싱하고 실행하게 됩니다. 다음 명령문은 브라우저마다 결과가 다릅니다.

즉. aaa.js가 다운로드되어 구문 분석될 때까지 기다리지 않고 이를 처리할 다른 스레드를 생성하고 기본 스레드가 전달됩니다. 그러나 ff에서. aaa.js가 다운로드되고, 구문 분석되고, 실행될 때까지 기다립니다.

자바스크립트 실행에 대해서는 본 글 마지막에 첨부된 참고자료를 참고하시기 바랍니다.

html 페이지의 수명 주기 정보:

가장 중요한 두 가지 이벤트는 onLoad와 onUnLoad입니다. onLoad는 페이지가 로드될 때 트리거됩니다. onUnLoad는 페이지의 DOM이 파괴된 후에 트리거됩니다. 그러나 onLoad는 조금 특별합니다. 이 기사 끝에 첨부된 참고 자료도 참조하세요. 주의를 끌도록 하세요.

여러 사이트의 HTML 소스코드를 살펴보니 다음과 같은 코드를 발견했습니다.

국내 웹사이트에서 디스플레이 광고는 일반적으로 타사 페이지를 소개하기 위해 iframe을 사용하지만 여기서는 javascript 세그먼트를 사용하여 직접 생성됩니다. 나중에 163 블로그에서 생성된 HTML 코드를 살펴보니 너무 이상했습니다. 전체 HTML 코드에는 선반이 하나만 있으며 모든 페이지는 js를 통해 생성됩니다. 페이지 뒤에 여러 js 파일이 소개된 것을 보았는데, 마지막으로 페이지 끝에 initAll 함수에 대한 호출이 있었습니다. 나는 그것의 js 코드를 주의깊게 연구하지 않았습니다. 나는 이것이 프리젠테이션 레이어의 모든 기능을 클라이언트의 js 파일에 넣는다고 생각합니다. 서버 측은 단지 몇 개의 페이지 랙과 많은 웹 서비스일 뿐입니다. 정말 숨이 막힐 지경이에요.

다중 응답 기능을 실행하는 하나의 이벤트에 대해:

C#에서 대리자와 비슷한 것을 구현하려고 생각한 적이 있습니다. JavaScript 이벤트는 둘 이상의 함수와 연관될 수 있습니다. 이벤트 목록은 한 번에 트리거될 수 있습니다. 요즘 asp.net ajax를 공부하고 있는데 이에 대한 패키지가 있습니다.

asp.net ajax에서 dom 요소는 asp.net ajax의 Sys.UI.DomElement 개체로 캡슐화될 수 있습니다. 그런 다음 addHandler(), addHandlers(), RemoveHander() 메소드를 사용하여 이벤트 목록을 조작할 수 있습니다. 얼마나 편리합니까? 당시 나는 이 원리를 잘 이해하지 못했다. 오늘은 아래 참고 자료에서 두 가지 코드를 보고 세부 사항을 완전히 이해하게 되었습니다.

1. dom 2의 인터페이스 사용:

코드 복사 코드는 다음과 같습니다. :

if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
……
}else{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
......
}

이 개념은 이미 DOM에 존재했던 것으로 밝혀졌습니다. 그때서야 나는 알았습니다. 아직 돔에 대해 이해하지 못하는 부분이 많은 것 같습니다.

2. 이 방법은 순수하게 손으로 구현됩니다. 아래 코드를 참고하세요.

코드 복사 코드는 다음과 같습니다.

함수 addLoadEvent(func) {

var oldonload = window.onload;

if (window.onload 유형 != '함수') {

window.onload = func;

} else {

window.onload = function() {

if (oldonload) {

oldonload();

}

func();

}

}

}

이 함수는 매우 교묘하게 작성되었습니다. 익명 기능을 사용하여 완료하세요!