Browser mana yang mendukung <script async = “async” />?

196

Pada 1 Desember 2009, Google mengumumkan dukungan untuk pelacakan Google Analytics yang tidak sinkron .

Pelacakan asinkron dicapai menggunakan arahan async untuk <script> tag.

Browser mana yang mendukung arahan async ( <script async="async" />) dan sejak versi mana?

javascript html performance asynchronous google-analytics Knorv
sumber
1
Itu tepat di halaman yang Anda tautkan ke: "Firefox 3.6 adalah browser pertama yang secara resmi menawarkan dukungan untuk fitur baru ini" FWIW ini adalah fitur HTML5, yang dengan cepat mendapatkan dukungan yang lebih baik dan lebih baik.
Crescent Fresh
51
Spesifikasi HTML5 mengatakan bahwa async = "true" adalah ilegal. Sebagai atribut HTML boolean, keberadaan atribut menunjukkan "true", sedangkan tidak adanya atribut sama dengan "false". Jika atribut ada, satu-satunya nilai yang valid untuk atribut adalah "" dan "async".
Joel Mueller
Berikut ini adalah tes langsung dari atribut ini html5demo.braincracking.org/demo/async.php .
3
Ini harus menjadi bookmark untuk sering memeriksa siapa pun yang tertarik dengan masalah ini: en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29
pumpkinthehead

Jawaban:

162

Dukungan async seperti yang ditentukan oleh google dicapai dengan menggunakan dua bagian:

  • menggunakan skrip pada halaman Anda (skrip disediakan oleh google) untuk menulis tag <script> ke DOM.

  • skrip itu memiliki atribut async = "true" untuk memberi sinyal ke browser yang kompatibel sehingga ia dapat melanjutkan rendering halaman.

Bagian pertama berfungsi pada browser tanpa dukungan untuk <script async..tag, memungkinkan mereka memuat async dengan "retasan" (meskipun yang cukup solid), dan juga memungkinkan merender halaman tanpa menunggu ga.js diambil.

Bagian kedua hanya memengaruhi browser yang kompatibel yang memahami atribut html async

  • FF 3.6+
  • FF untuk Android Semua Versi
  • IE 10+ (dimulai dengan pratinjau 2)
  • Chrome 8+
  • Chrome Untuk Android Semua versi
  • Safari 5.0+
  • iOS Safari 5.0+
  • Android Browser 3.0+ (honeycomb on up)
  • Opera 15.0+
  • Opera Mobile 16.0+
  • Opera Mini Tidak Ada (per 8.0)

Cara "html5 proper" untuk menentukan async adalah dengan <script async src="...", bukan <script async="true". Namun, pada awalnya browser tidak mendukung sintaks ini, juga tidak mendukung pengaturan properti skrip pada elemen yang dirujuk. Jika Anda menginginkan ini, daftar berubah:

  • FF 4+
  • IE 10+ (pratinjau 2 dan lebih tinggi)
  • Chrome 12+
  • Chrome Untuk Android 32+
  • Safari 5.1+
  • Tidak ada versi android
Philip Rieck
sumber
34
Saya tidak yakin Anda bahkan memerlukan async = "true", Anda cukup menulis 'async'
vsync
4
jadi jika saya membuat tag skrip seperti google melakukannya - apa yang benar: var s = document.createElement ('script'); s.async = 'true'; s.async = true; (Google melakukannya dengan cara itu) atau s.async = 'async'; ?
Toby
8
@Tobias: Anda memadukan atribut boolean HTML dan properti elemen DOM yang sesuai: atribut HTML (hadir dalam markup dan ketika secara eksplisit menyetel atribut menggunakan setAttribute, yang tidak disarankan) seharusnya hanya ada atau disetel ke string kosong atau sendiri ( defer="defer", sangat penting saat menulis dokumen yang mematuhi XHTML); saat mengatur properti elemen saat menggunakan JavaScript, orang harus menggunakannya s.async = true.
Marcel Korpel
39
@ vsync: Bahkan seharusnya tidak true; baik async, async=""atau async="async".
Marcel Korpel
4
Harap dicatat bahwa pos yang ditautkan dalam set pertanyaan async="true". Ini bukan cara yang benar untuk melakukannya sekarang , tapi itu satu-satunya cara didukung secara luas untuk melakukannya kemudian . Misalnya IE10p2 didukung async="true"tetapi tidak mendukungasync="async"
Philip Rieck
60

Ada dua bagian dari pertanyaan ini, sungguh.

  1. T: Browser mana yang mendukung atribut "async" pada tag skrip di markup?

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

  2. Q: Yang browser mendukung spesifikasi baru bahwa perilaku mendefinisikan untuk "async" properti di JavaScript, pada elemen script yang dibuat secara dinamis?

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

Adapun Opera, mereka sangat dekat untuk merilis versi yang akan mendukung kedua jenis async. Saya telah bekerja dengan mereka dengan cermat dalam hal ini, dan itu akan segera keluar (saya harap!).

Informasi lebih lanjut tentang memerintahkan-async (alias, "async = false") dapat ditemukan di sini: http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order

Juga, untuk menguji apakah browser mendukung perilaku properti async dinamis baru: http://test.getify.com/test-async/

Kyle Simpson
sumber
25

Daftar lengkap versi peramban yang mendukung asyncparameter tersedia di sini

JeremiahLee
sumber
1

Saat asyncini didukung oleh semua versi terbaru dari browser utama. Sudah didukung selama beberapa tahun sekarang di sebagian besar browser.

Anda dapat melacak browser mana yang mendukung async (dan menunda) di situs web MDN di sini:
https://developer.mozilla.org/en-US/docs/HTML/Element/script

brunoais
sumber
Meskipun tautan ini dapat menjawab pertanyaan, lebih baik untuk memasukkan bagian-bagian penting dari jawaban di sini dan memberikan tautan untuk referensi. Jawaban hanya tautan dapat menjadi tidak valid jika halaman tertaut berubah. - Dari Ulasan
Michael Gaskill
@MichaelGaskill Apakah ini cukup? Apakah Anda ingin saya menautkan ke jawaban Philip?
brunoais
0

Lihat saja DOM (document.scripts [1] .attributes) dari halaman ini yang menggunakan google analytics. Saya dapat memberi tahu Anda bahwa google menggunakan async = "".

[type="text/javascript", async="", src="http://www.google-analytics.com/ga.js"]
jeekajoo
sumber