웹사이트가 브라우저 충돌을 일으키는 이유 요약(다양한 브라우저) 권장_javascript 기술

모 회사에 면접을 하던 중 면접관이 브라우저 충돌의 원인이 무엇인지 물었습니다. 저는 바보라서 메모리 누수 문제에만 답했습니다. 실제로, 웹 페이지 로딩 과정에서 여러 가지 이유로 인해 브라우저의 응답이 매우 느려지거나, 브라우저가 응답을 잃거나, 심지어 기기가 다른 작업을 수행할 수 없게 만드는 경우가 종종 있습니다.

방문자가 웹사이트에 로그인하면 브라우저가 즉시 중단되는 것은 모든 사람이 참을 수 없는 일이라고 생각합니다. 다음은 웹사이트에서 브라우저가 중단되는 이유를 요약한 것입니다.

1. 메모리 누수

먼저 메모리 누수에 대해 이야기해 보겠습니다. 메모리 누수로 인해 웹사이트가 충돌하는 경우, 서버 충돌과 브라우저 충돌이 발생합니다. 메모리 누수로 인한 문제는 명백합니다. 할당된 메모리에 대한 참조가 손실되고 시스템이 실행되는 동안 프로세스는 계속해서 메모리를 사용하게 됩니다. 그 결과, 한 번 더 많은 메모리를 점유한 프로그램은 시스템이 완전히 작동을 멈추고 메모리가 완전히 지워질 때까지 시스템 성능을 저하시킵니다.

Apache의 웹 서버는 C/C로 작성되어 있는데, 말할 필요도 없이 C/C에 메모리 누수 문제가 있는데, 이로 인해 메모리가 부족하거나 시스템 충돌이 발생하는 경우가 있습니다. Java에서 메모리 누수는 도달 가능하지만 쓸모없는 객체가 할당되어 있음을 의미합니다. 이러한 객체는 GC에 의해 재활용되지 않지만 메모리를 차지합니다.

클라이언트 측에서는 JavaScript로 인한 메모리 누수로 인해 브라우저가 중단될 수도 있습니다. JavaScript의 메모리 누수에 대한 더 권위 있는 기사에는 "

Memory 누수 패턴 in JavaScript" 및 "Understanding and Solving Internet Explorer Leak Patterns가 있습니다. 》.

JavaScript는 GC(가비지 수집기) 언어입니다. 즉, 개체 생성에 따라 메모리가 개체에 할당되고 개체에 대한 참조가 없으면 브라우저에서 회수됩니다. "

Fabulous Adventures In Coding" 기사에 따르면 "JScript는 비세대 마크 앤 스윕 가비지 수집기를 사용합니다.", "비세대 마크 앤 스윕"을 사용할 수 있습니다. 이러한 방식으로 브라우저는 JavaScript를 처리하기 위해 순수한 가비지 수집을 사용하지 않고 참조 계산을 사용하여 기본 개체(예: Dom, ActiveX 개체)에 대한 메모리를 처리합니다.

참조 카운팅 시스템에서는 참조된 각 객체가 이를 참조하는 객체 수를 알기 위해 카운트를 유지합니다. 개수가 0에 도달하면 개체가 삭제되고 해당 개체가 차지한 메모리가 힙으로 반환됩니다.

객체가 서로 참조하면 순환 참조가 형성됩니다. 브라우저(IE6, Firefox2.0)는 순수 JavaScript 객체 간의 순환 참조를 올바르게 처리할 수 있지만 참조 카운팅 시스템으로 인해 객체는 상호 참조될 수 없습니다. 참조 횟수가 0이 될 수 없기 때문에 파괴되므로 브라우저는 JavaScript와 기본 개체(예: Dom, ActiveX 개체) 간의 순환 참조를 처리할 수 없습니다. 따라서 Native 객체와 JavaScript 객체 사이에 순환 참조가 있으면 메모리 누수가 발생합니다.

간단히 말해서 브라우저는 참조 계산을 사용하여 Native 개체의 메모리를 처리하며 참조 계산된 개체는 삭제할 수 없습니다. Native 개체와 관련된 순환 참조로 인해 메모리 누수가 발생합니다. 다음 예제를 통해 이 문장을 이해하면 JavaScript로 인해 발생하는 메모리 누수를 기본적으로 이해할 수 있습니다.

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

var obj
window.onload; = function( ){
// DOM 객체에 대한 JavaScript 객체 obj의 참조는 id
obj=document.getElementById("DivElement")
　 // DOM 객체에 따라 획득됩니다. ExpandoProperty 구현으로 얻은 이 JavaScript 객체에 대한 참조
　document.getElementById("DivElement").expandoProperty=obj;
};

JavaScript 개체와 DOM 개체 간에 참조가 생성됩니다. DOM 개체는 참조 계산을 통해 관리되므로 두 개체 모두 삭제되지 않습니다.
또 다른 상황은 클로저에서 발생하고 이벤트 응답 코드를 네이티브 객체에 바인딩하면 클로저 메모리 누수가 발생하기 쉽습니다. 핵심 이유는 JavaScript 개체와 Native 개체 간의 순환 참조이기도 한 전자와 동일합니다. 코드가 더 숨겨져 있다는 것뿐입니다.

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

window.onload = function AttachEvents(element){
//요소에는 ClickEventHandler() 함수에 대한 참조가 있습니다.
　element.attachEvent( " onclick " , ClickEventHandler)
function ClickEventHandler; ( ){
//이 함수에는 Scope를 호출하기 위해 AttachEvents(요소)를 가리키는 참조가 있습니다.
　 //즉, 매개변수 요소가 실행됩니다.
　}
}

여기에서는 JavaScript가 메모리 누수를 일으키는 이유를 간단하게 설명합니다. 메모리 누수로 인해 브라우저에 부담이 증가하고 브라우저가 충돌할 가능성이 높습니다. 우리가 해야 할 일은 위에서 언급한 "JavaScript의 메모리 누수 패턴"과 "Internet Explorer의 이해 및 해결을 참조하세요. 누출 패턴 》이해해야 할 두 가지 기사. JavaScript 메모리 누수를 처리하는 궁극적인 목표는 JavaScript 객체와 Native 객체 사이의 순환 참조를 끊거나 참조 카운트를 지우고 객체를 해제하는 것입니다.

클로저 메모리 누수와 같은 일부 메모리 누수는 감지하기 어려울 수 있습니다. 메모리 누수를 감지하려면 "Javascript 메모리 누수 도구 사용"을 참조하세요.

2. 복잡한 웹페이지 코드와 브라우저 버그

다수의 개인 웹사이트와 저품질 웹사이트 코드의 출현으로 인해 일반적으로 브라우징 표준에 대한 지원이 부족해졌습니다. 브라우저에서 일부 버그가 발생하면 브라우저 렌더링 엔진에서 처리 시 오류가 발생합니다. 루프 또는 직접 충돌 등과 같은 웹 페이지 코드.

HTML 코드로 인해 웹사이트가 중단됩니다

이는 IE6의 작동을 중단시키는 HTML 구조 오류입니다. 앞뒤에 문자를 추가하면 IE6이 중단됩니다.

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

"http://www.w3.org/TR/html4/loose.dtd">




:fixed; ">



< /tr>




웹사이트
, 어떤 버전의 XHTML이나 HTML을 사용하든 DOCTYPE 선언이 포함되어 있으면 IE6은 즉시 충돌합니다. DOCTYPE 선언이 없으면 오류가 발생하지 않습니다. 문서 유형 선언과 관련됩니다.
IE6과 충돌하는 CSS 코드 　코드는

캣츠후코드

홈페이지에서 참고했습니다. 해당 버그는 2007년에 발견되었으며 일본인에 의해 발견되었다고 합니다.

코드 복사

코드는 다음과 같습니다. 🎜>

이유 Content 테이블에 직접 배치된다는 점은 IE6에서는 mshtml.dll 모듈이 손상되고 IE6이 아닌 경우에는 브라우저를 닫는 원인이 됩니다.

또한 IE6에 존재하는 버그에는 다음과 같은 상황이 있습니다. 이 문제는 의사 클래스가 a:active인 경우에도 발생합니다:

코드 복사

코드는 다음과 같습니다. IE6 충돌, ie6 충돌

해결 방법 : haslayout을 실행하려면 에 Zoom:1;을 추가하세요.




코드 복사

코드는 다음과 같습니다.

IE7과 충돌하는 CSS 코드

이 버그는 쌀을 훔치기에서 발생합니다. IE7에서만 발생하며 생략된 단어를 처리할 때 충돌이 발생하는 것으로 추정됩니다.

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