Pengenalan kepada penggunaan elemen skrip HTML5 async dan tangguhkan kemahiran tutorial loading_html5 asynchronous

(Nota Penterjemah: Pemuatan tak segerak boleh difahami sebagai pemprosesan serentak tidak menyekat.)

Salah satu sebab mengapa saya begitu teruja dengan HTML5 ialah ia melaksanakan banyak ciri yang telah lama ditunggu-tunggu dalam industri. Kami sentiasa memerlukan kotak input untuk memaparkan gesaan kosong, tetapi semuanya dilaksanakan menggunakan JavaScript. Kami juga mahu menjadikan keseluruhan blok boleh diklik, sekali lagi menggunakan JavaScript.
WebKit kini melaksanakan atribut async bagi teg SCRIPT untuk HTML5. Pada masa lalu kami menggunakan pelbagai helah JavaScript untuk melakukan perkara seperti ini, tetapi kini sifat baharu menjadikannya agak mudah untuk menghalang penyekatan.

async - atribut HTML
Seperti yang saya nyatakan sebelum ini, menambah atribut async adalah sangat mudah:

Salin kod

Kodnya adalah seperti berikut:

Malah, jika struktur JavaScript dan HTML anda direka secara munasabah, maka dalam 90% kes Skrip anda elemen boleh Gunakan pemuatan tak segerak.

tunda - atribut HTML
Pelayar Safari menambah atribut penangguhan tambahan

Salin kod

Kodnya adalah seperti berikut:

Perbezaan antara async dan defer
Blog rasmi WebKit menerangkan perbezaan antara async dan defer dengan sangat baik
- ---- ----------------------------------
Dalam keadaan biasa, apabila penyemak imbas sedang menghuraikan fail sumber HTML, jika ia menemui skrip Luaran, maka proses penghuraian akan dijeda dan permintaan akan dihantar untuk memuat turun fail skrip DOM akan diteruskan hanya selepas skrip dimuat turun dan dilaksanakan sepenuhnya. Contohnya:

Semasa proses muat turun penyemak imbas disekat daripada melakukan kerja berguna lain, termasuk menghurai HTML, melaksanakan skrip lain dan Paparan susun atur CSS. Walaupun pengimbas pramuat Webkit boleh melakukan muat turun berbilang benang secara detektif semasa fasa muat turun, sesetengah halaman masih mengalami kependaman rangkaian yang ketara.
Pada masa ini terdapat banyak teknik untuk meningkatkan kelajuan paparan halaman, tetapi semuanya memerlukan kod tambahan dan teknik khusus penyemak imbas. Sekarang, skrip boleh menambah atribut tak segerak atau tangguh supaya skrip tidak perlu dilaksanakan secara serentak Contohnya adalah seperti berikut:

Salin kod.

Kod Seperti berikut:

defer src="myDeferScript.js" onload="myInit()">

Skrip yang ditandai dengan async dan defer akan dimuat turun serta-merta tanpa menjeda penghuraian HTML panggilan balik untuk menyelesaikan keperluan Skrip ini melakukan pemulaan.
Perbezaan antara kedua-duanya terletak pada masa pelaksanaan:
Skrip async akan dilaksanakan serta-merta selepas fail skrip dimuat turun dan masa pelaksanaannya mestilah sebelum acara pemuatan tetingkap dicetuskan. Ini bermakna berbilang skrip async kemungkinan besar tidak akan dilaksanakan secara berurutan mengikut susunan yang dipaparkan pada halaman.
Sebaliknya, penyemak imbas memastikan bahawa berbilang skrip penangguhan dilaksanakan secara berurutan dalam susunan yang dipaparkan dalam halaman HTML, dan masa pelaksanaan adalah selepas penghuraian DOM selesai dan sebelum peristiwa DOMContentLoaded dokumen dicetuskan.

Berikut menunjukkan contoh yang mengambil masa 1 saat untuk memuat turun dan 1 saat untuk menghuraikan dan melaksanakan operasi lain Kita dapat melihat bahawa keseluruhan halaman mengambil masa kira-kira 2 saat untuk dimuatkan.

Contoh yang sama, tetapi kali ini kami menentukan atribut penangguhan skrip Kerana apabila skrip tangguh dimuat turun, operasi lain boleh dilaksanakan secara selari, jadi ia adalah lebih kurang 1x lebih pantas.

---------------------------------------- ----
Pandangan yang manakah Penyemak imbas menyokong async dan tangguh
Ia juga disebut dalam artikel yang dipetik di atas:

Selain versi baharu pelayar berdasarkan Webkit, FireFox telah menyokong atribut tangguh dan onload untuk masa yang lama, dan sejak FF3.6 Atribut async telah ditambah. IE juga menyokong atribut tangguh, tetapi belum lagi menyokong atribut async Bermula dari IE9, atribut onload juga akan disokong.

aynsc Hebat!
Saya sangat gembira melihat webkit melaksanakan async. Untuk setiap tapak web, penyekatan adalah kesesakan prestasi yang besar, dan dapat menentukan terus fail skrip untuk dimuatkan secara tidak segerak sudah pasti akan mempercepatkan halaman web.