다양한 브라우저에서 기본 자바 스크립트 흐름

-1

아주 간단한 JavaScript 예제로 3 가지 브라우저 (Chrome, IE 및 Firefox)를 사용하여 JavaScript에서 흐름을 배우려고합니다. 세 가지 모두 서로 다른 흐름 패턴과 다른 최종 결과를 보여줍니다. 예상 할 수있는 브라우저 간 문제가 있다는 것을 알고 있지만이 것은 매우 간단합니다. 그래서 JavaScript가 실제로 어떻게 움직이는 지 해석하는 방법을 이해하려고합니다.다양한 브라우저에서 기본 자바 스크립트 흐름

<!DOCTYPE html> 
<html> 
<head> 
<title>Test 01</title> 
    <script type="text/javascript"> 
    document.bgColor = "red"; 
    </script> 

</head> 

<body bgColor="yellow"> 

<p>Paragraph 1</p> 
<script>alert("after para 1");</script> 
<p>Paragraph 2</p> 
<script>alert("after para 2");</script> 
<p>Paragraph 3</p> 
<script>alert("after para 3");</script> 

</body> 
</html>

내가보고하고하는 것은 "제 1 항"텍스트는 또한 다른 두 개의 경고와 경고 등 후 크롬에 표시되어 있습니다 : 여기

는 코드입니다. IE와 파이어 폭스는 옳은 일을하고있는 것처럼 보인다.

그리고 IE와 Firefox 사이에서 IE는 빨간색 배경과 Firefox가 노란색으로 끝납니다. 해석해야 할 것이 정확히 무엇인지 모르기 때문에 모든 브라우저에서 동작이 다릅니다.

정확히 어떻게 작동하는지 어떻게 알 수 있습니까?

편집 :이 질문과 관련없는 var x = 10을 삭제하십시오. 그리고 문제는 관련 텍스트 앞에 경고가 표시되는 경우 크롬 동작을 해석하는 방법과 bgcolor가 다른 경우가 아니라 한 경우에 우선 적용되는 이유입니다.

출처

2016-08-20 kcityg

스크립트 태그에없는'var x = 10;'이라는 루즈가 있습니다. – Script47

여기서 질문은 무엇입니까? 그것이 정말로 "어떻게 배울 것인가?"라고 말하면 이것은 주제를 벗어났습니다. – JJJ

(가능) ** 관련 ** : [BlockingJS] (https://developers.google.com/speed/docs/insights/BlockingJS). – Script47

내가 아주 간단한 와 자바 스크립트의 흐름을 배우려고 노력하고 자바 스크립트 예를하지만, 세 가지 브라우저 (크롬, IE와 파이어 폭스) 모든 세 가지 서로 다른 흐름 패턴과 다른 최종 결과를 보여주고있다.

당신이 말하는 것은 HTML engine in different browsers입니다. 그래서 이것은 자바 스크립트를 처리하는 것이 아니라 HTML을 처리하는 것에 관한 것입니다 ...

이것이 정확히 어떻게 작동 할 수 있는지에 대해 어떻게 알 수 있습니까?

에 의존 ... 나는 window.onload (또는 DOMContentLoaded) 이벤트가 발생하기 전에 HTML을 많이로드하지 않는 단일 페이지 자바 스크립트 응용 프로그램을 만들고 싶습니다. 그래서 빈 몸체로 시작해서 자바 스크립트로 페이지를 완전히 만듭니다. 일부 프로젝트에서는 정상적인 성능 저하가 필요하며 일부 기본 기능을 구현하는 HTML로 시작하고 자바 스크립트를 추가하여 고급 기능을 구현할 수 있습니다. 이 시나리오에 따르면 코드가 DOM을 사용하여 원하는 작업을 수행하기 위해 앞서 언급 한 이벤트를 기다려야합니다. 그렇지 않으면 브라우저가 DOM 요소를 렌더링하고 javascript 명령을 실행하는 순서에 대한 보장이 없습니다. 그래서 나는 Diogo Sperb와 동의합니다, 당신은 나쁜 습관으로 시작했습니다. Ofc. DOM로드 전에 javascript 코드를 실행할 수 있지만 DOM을 포함하면 안됩니다. 예를 들어 서버에 대한 XHR 요청을 수행하거나 히스토리 API를 사용하여 URI 등을 대체 할 수 있습니다.문서 조각을 사용하여 DOM 요소를 만들 수도 있지만 렌더링하면 안됩니다. 지금까지 DOM 요소를 렌더링하는 것이 동기화되어 있으므로 DOM을로드 한 후에 비슷한 문제가 발생하지 않습니다.

그냥 언급하면 아무도 alert()을 사용하지 않으며 페이지로드를 차단하지 않는 console.log()을 사용합니다.

참고 : 왜 사람들이 질문을 하향 투표하는지 이해할 수 없습니다. 나는 그것이 좋은 자바 스크립트 초보자 질문이라고 생각한다. 나는 싫어하는 사람들이 싫어할 것 같아. :-)

출처

2016-08-20 23:08:43 inf3rno

브라우저의 JavaScript에 환영합니다. 예외는 아니지만 브라우저에 따라 다른 동작이 예상됩니다.

코드가하는 것이 권장되지 않는다는 것을 알아야합니다. 실제로 뭔가를 수행하는 (예 : 경고와 같은) JavaScript 문은 body 태그를 닫기 전에야 올 수 있습니다.

나쁜 일은 존중하지 않고 브라우저가 페이지를 렌더링하는 동안 코드를 실행하려고 할 때 발생합니다. 하지만 문서 본문의 끝까지 호출되지 않는 한 얼마든지 선언 할 수 있습니다.

출처

2016-08-20 22:35:35

Diogo, 기본 자바 스크립트 책의 예입니다. 하지만 여기서 html 사이의 스크립트 요소를 확산함으로써, 나는 자바 스크립트 인터프리터가 html을 렌더링하는 연속 된 순서로 전달하고 다음 스크립트에서 멈추고 앞으로 나아 가기 전에 그것을 실행하는 것을 보려고합니다. – kcityg

나는 본다. 브라우저 렌더링은 모든 JavaScript 문이 완료 될 때까지 기다리지 않아야합니다. 하지만 자바 스크립트 인터프리터는 적절한 순서로 코드를 실행합니다. 즉, 첫 번째 경고가 발생하기 전에 두 번째 경고가 표시되지 않습니다. 테스트를 쉽게하기 위해'alert()'호출을 비대화 형'console.log()'로 대체 할 수 있습니다. –

다양한 브라우저에서 기본 자바 스크립트 흐름

답변

관련 문제