<script async =“async”/>를 지원하는 브라우저는 무엇입니까?


196

2009 년 12 월 1 일 Google은 비동기 Google 웹 로그 분석 추적에 대한 지원을 발표했습니다 .

비동기 추적은 <script>태그에 대한 비동기 지시문을 사용하여 수행됩니다 .

어떤 브라우저가 비동기 지시문 ( <script async="async" />)을 지원하며 어떤 버전부터 지원 합니까?


1
"Firefox 3.6은 공식적으로이 새로운 기능에 대한 지원을 제공하는 최초의 브라우저입니다."FWIW HTML5 기능으로 빠르게 더 나은 지원을 받고 있습니다.
Crescent Fresh

51
HTML5 사양에 따르면 async = "true"는 불법입니다. 부울 HTML 속성으로서, 속성의 존재는 "true"를 나타내며, 속성의 부재는 "false"와 같습니다. 속성이 존재하면 속성에 유효한 값은 ""및 "async"뿐입니다.
Joel Mueller

다음은이 속성 html5demo.braincracking.org/demo/async.php 의 라이브 테스트입니다 .

3
이이 문제에 관심있는 사람들을위한 자주 확인하는 책갈피해야한다 : en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29을
pumpkinthehead

답변:


162

Google이 지정한 비동기 지원은 두 부분으로 이루어집니다.

  • 페이지에서 스크립트를 사용하여 (Google에서 스크립트를 제공함) <script> 태그를 DOM에 씁니다.

  • 해당 스크립트에는 async = "true"속성이있어 페이지를 계속 렌더링 할 수 있음을 호환 브라우저에 알립니다.

첫 번째 부분은 <script async..태그 를 지원하지 않는 브라우저에서 작동 하므로 "단지"(비록 단단하지만)로 비동기식으로로드 할 수 있으며 ga.js가 검색 될 때까지 기다리지 않고도 페이지를 렌더링 할 수 있습니다.

두 번째 부분은 비동기 html 속성 을 이해하는 호환 가능한 브라우저에만 영향을 미칩니다.

  • FF 3.6+
  • Android 용 FF 모든 버전
  • IE 10 이상 (미리보기 2로 시작)
  • 크롬 8 이상
  • Android 용 Chrome 모든 버전
  • 사파리 5.0+
  • iOS 사파리 5.0 이상
  • Android 브라우저 3.0 이상 (허니컴)
  • 오페라 15.0+
  • 오페라 모바일 16.0+
  • 오페라 미니 없음 (8.0 기준)

비동기 지정하는 "HTML5 적절한"방법은 함께 <script async src="..."하지 <script async="true". 그러나 처음에는 브라우저가이 구문을 지원하지 않았으며 참조 된 요소에 대한 스크립트 특성 설정도 지원하지 않았습니다. 원하는 경우 목록이 변경됩니다.

  • FF 4+
  • IE 10 이상 (미리보기 2 이상)
  • 크롬 12+
  • Android 32 이상용 Chrome
  • 사파리 5.1 이상
  • 안드로이드 버전 없음

34
나는 확실히 당신도 당신은 단지 '비동기'를 쓸 수 = "true"로 비동기를 필요로하지거야
수직 동기화

4
따라서 Google과 같은 스크립트 태그를 생성하면 올바른 것입니다. var s = document.createElement ( 'script'); s.async = 'true'; s.async = true; (Google은 그렇게합니다) 또는 s.async = 'async'; ?
Toby

8
@Tobias : HTML 부울 속성과 해당 DOM 요소 속성을 혼합합니다 : HTML 속성 (마크 업에 표시하고을 사용하여 속성을 명시 적으로 설정 setAttribute하는 경우 권장하지 않음)이 존재하거나 빈 문자열 또는 자체로 설정되어야합니다 ( defer="defer"XHTML 호환 문서를 작성할 때 특히 중요합니다); JavaScript를 사용하여 요소의 속성을 즉석에서 설정할 때는을 사용해야합니다 s.async = true.
Marcel Korpel

39
@vsync : 심지어는 안됩니다 true. 중 async, async=""또는 async="async".
Marcel Korpel

4
질문 세트에 링크 된 게시물에 유의하십시오 async="true". 그것은 그것을 할 올바른 방법이 아니다 지금 ,하지만 그것을 할 수있는 유일한 광범위하게 지원 방법이었다 다음 . 예를 들어 IE10p2은 지원 async="true"하지만 지원하지 않았다async="async"
필립 RIECK

60

이 질문에는 두 부분이 있습니다.

  1. Q : 마크 업시 스크립트 태그에서 "비동기"속성을 지원하는 브라우저는 무엇입니까?

    A : IE10p2 +, Chrome 11+, Safari 5+, Firefox 3.6+

  2. Q : 동적으로 생성 된 스크립트 요소에서 JavaScript 의 "비동기" 속성 에 대한 동작을 정의하는 새로운 사양을 지원하는 브라우저는 무엇입니까?

    A : IE10p2 +, Chrome 12+, Safari 5.1+, Firefox 4+

Opera는 두 가지 유형의 비동기를 모두 지원하는 버전을 출시하는 데 매우 가깝습니다. 나는 이것들과 밀접하게 일해 왔으며 곧 나올 것입니다 (바람직합니다!).

ordered-async (일명 "async = false")에 대한 자세한 정보는 여기에서 찾을 수 있습니다. http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order

또한 브라우저가 새로운 동적 비동기 속성 동작을 지원하는지 테스트하려면 다음을 수행하십시오. http://test.getify.com/test-async/



10

참조 페이지에서 :

http://googlecode.blogspot.com/2009/12/google-analytics-launches-asynchronous.html

Firefox 3.6은이 새로운 기능을 공식적으로 지원하는 최초의 브라우저입니다. 궁금한 점이 있으면 공식 HTML5 비동기 사양 에 대한 자세한 내용이 있습니다 .


"이 새로운 기능"은 HTML5 비동기 속성을 나타냅니다. Google 웹 로그 분석 비동기 스 니펫은 모든 브라우저에서 지원됩니다.
Brian

1

async현재 주요 브라우저의 모든 최신 버전에서 지원됩니다. 대부분의 브라우저에서 몇 년 동안 지원되었습니다.

MDN 웹 사이트 ( https://developer.mozilla.org/en-US/docs/HTML/Element/script )에서 비동기 (및 지연)를 지원하는 브라우저를 추적 할 수 있습니다.


이 링크가 질문에 대답 할 수 있지만 여기에 답변의 필수 부분을 포함시키고 참조 할 수있는 링크를 제공하는 것이 좋습니다. 링크 된 페이지가 변경되면 링크 전용 답변이 유효하지 않을 수 있습니다. - 리뷰에서
Michael Gaskill

@MichaelGaskill 이것으로 충분합니까? 필립의 답변에 연결 하시겠습니까?
brunoais

0

Google 웹 로그 분석을 사용하는이 페이지의 DOM (document.scripts [1] .attributes)을 살펴 보았습니다. Google에서 async = ""를 사용하고 있다고 말할 수 있습니다.

[type="text/javascript", async="", src="http://www.google-analytics.com/ga.js"]
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.