Rumah hujung hadapan web tutorial js Topik pengoptimuman JavaScript: Memuatkan dan Melaksanakan kemahiran memuatkan dan running_javascript

Topik pengoptimuman JavaScript: Memuatkan dan Melaksanakan kemahiran memuatkan dan running_javascript

May 16, 2016 pm 03:19 PM
javascript pengoptimuman memuatkan lari

Prestasi JavaScript dalam penyemak imbas boleh dianggap sebagai isu kebolehgunaan paling penting yang dihadapi oleh pembangun. Masalah ini ditambah lagi dengan sifat menyekat JavaScript, yang bermaksud perkara lain tidak boleh diproses oleh penyemak imbas semasa JavaScript sedang berjalan. Malah, kebanyakan penyemak imbas menggunakan satu proses untuk mengendalikan berbilang tugas seperti kemas kini UI dan JavaScript berjalan, dan hanya satu tugas boleh dilaksanakan pada masa yang sama.

Berapa lama JavaScript berjalan, kemudian berapa lama ia menunggu sebelum penyemak imbas melahu untuk membalas input pengguna.

Pada peringkat asas, ini bermakna kehadiran teg menyebabkan seluruh halaman menunggu skrip dihuraikan dan dijalankan. Tidak kira sama ada kod JavaScript sebenar adalah sebaris atau terkandung dalam fail luaran yang tidak berkaitan, proses muat turun dan penghuraian halaman mesti berhenti dan menunggu skrip menyelesaikan pemprosesan ini sebelum meneruskan. Ini adalah bahagian penting dalam kitaran hayat halaman, kerana skrip boleh mengubah suai kandungan halaman semasa berjalan.

Contoh biasa ialah fungsi document.write(), contohnya:

<html>

<head>

<title>Script Example</title>

</head>

<body>

<p>

<script type=”text/javascript”>

document.write(“The date is ” + (new Date()).toDateString());

</script>

</p>

</body>

</html>

Salin selepas log masuk

Apabila penyemak imbas menemui teg seperti dalam halaman HTML di atas, adalah mustahil untuk meramalkan sama ada JavaScript akan menambah kandungan dalam teg

Oleh itu, penyemak imbas berhenti, menjalankan kod JavaScript ini, dan kemudian meneruskan menghuraikan dan menterjemah halaman. Perkara yang sama berlaku apabila memuatkan JavaScript menggunakan atribut src. Penyemak imbas mesti memuat turun kod untuk fail luaran terlebih dahulu, yang mengambil sedikit masa, dan kemudian menghuraikan dan menjalankan kod ini. Semasa proses ini, penghuraian halaman dan interaksi pengguna disekat sepenuhnya.

Dokumentasi HTML 4 menyatakan bahawa teg boleh diletakkan dalam teg atau Secara tradisinya, teg digunakan untuk memuatkan fail JavaScript luaran. Selain kod tersebut, bahagian juga mengandungi teg untuk memuatkan fail CSS luaran dan perisian tengah halaman lain. Maksudnya, adalah lebih baik untuk meletakkan bahagian yang bergantung pada gaya dan tingkah laku bersama-sama dan memuatkannya terlebih dahulu supaya halaman itu boleh mendapatkan rupa dan tingkah laku yang betul. Contohnya:

<html>

<head>

<title>Script Example</title>

<– Example of inefficient script positioning –>

<script type=”text/javascript” src=”file1.js”></script>

<script type=”text/javascript” src=”file2.js”></script>

<script type=”text/javascript” src=”file3.js”></script>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

Salin selepas log masuk

Walaupun kod ini kelihatan tidak berbahaya, ia mempunyai isu prestasi: tiga fail JavaScript dimuatkan dalam bahagian Oleh kerana setiap teg menyekat proses penghuraian halaman, pemprosesan halaman tidak boleh diteruskan sehingga ia telah memuat turun sepenuhnya dan menjalankan kod JavaScript luaran. Pengguna mesti bertolak ansur dengan kelewatan yang dirasakan ini.

Ingat bahawa penyemak imbas tidak akan memaparkan mana-mana bahagian halaman sehingga ia menemui teg Meletakkan skrip di bahagian atas halaman dengan cara ini akan menyebabkan kelewatan yang ketara, yang biasanya menunjukkan dirinya sebagai: apabila halaman dibuka, ia mula-mula memaparkan halaman kosong dan pengguna tidak boleh membaca mahupun berinteraksi dengan halaman tersebut

Internet Explorer 8, Firefox 3.5, Safari 4 dan Chrome 2 membenarkan muat turun selari fail JavaScript. Berita baik ini bermakna apabila teg memuat turun sumber luaran, ia tidak perlu menyekat teg Malangnya, muat turun JavaScript masih menyekat proses muat turun sumber lain Walaupun proses muat turun antara skrip tidak menyekat satu sama lain, halaman masih perlu menunggu semua kod JavaScript dimuat turun dan dilaksanakan sebelum ia boleh diteruskan. Jadi, sementara penyemak imbas meningkatkan prestasi dengan membenarkan muat turun selari, masalah itu tidak dapat diselesaikan sepenuhnya dan penyekatan skrip masih menjadi isu.

Oleh kerana skrip menyekat proses muat turun sumber halaman lain, pendekatan yang disyorkan ialah meletakkan semua hampir ke bahagian bawah teg muka surat. Contohnya:

<html>

<head>

<title>Script Example</title>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<p>Hello world!</p>

<– Example of recommended script positioning –>

<script type=”text/javascript” src=”file1.js”></script>

<script type=”text/javascript” src=”file2.js”></script>

<script type=”text/javascript” src=”file3.js”></script>

</body>

</html>

Salin selepas log masuk

Kod ini menunjukkan lokasi teg yang disyorkan dalam fail HTML. Walaupun muat turun skrip menyekat satu sama lain, halaman telah dimuat turun dan dipaparkan di hadapan pengguna, dan kelajuan memasuki halaman tidak akan kelihatan terlalu perlahan.

Di atas ialah pengenalan yang berkaitan dengan Memuatkan dan Pelaksanaan memuatkan dan menjalankan dalam kandungan pengoptimuman JavaScript. Saya harap ia akan membantu pembelajaran semua orang.

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk melaksanakan fail .sh dalam sistem Linux? Bagaimana untuk melaksanakan fail .sh dalam sistem Linux? Mar 14, 2024 pm 06:42 PM

Bagaimana untuk melaksanakan fail .sh dalam sistem Linux? Dalam sistem Linux, fail .sh ialah fail yang dipanggil skrip Shell, yang digunakan untuk melaksanakan satu siri arahan. Melaksanakan fail .sh ialah operasi yang sangat biasa Artikel ini akan memperkenalkan cara melaksanakan fail .sh dalam sistem Linux dan memberikan contoh kod khusus. Kaedah 1: Gunakan laluan mutlak untuk melaksanakan fail .sh Untuk melaksanakan fail .sh dalam sistem Linux, anda boleh menggunakan laluan mutlak untuk menentukan lokasi fail. Berikut ialah langkah khusus: Buka terminal

Di mana untuk membuka win8 running Di mana untuk membuka win8 running Mar 20, 2024 pm 03:46 PM

Terdapat tiga cara untuk membuka dialog Run: menggunakan pintasan Win + R, melalui fungsi carian, atau dengan menaip "Run" terus dalam skrin Mula.

Pengoptimuman program C++: teknik pengurangan kerumitan masa Pengoptimuman program C++: teknik pengurangan kerumitan masa Jun 01, 2024 am 11:19 AM

Kerumitan masa mengukur masa pelaksanaan algoritma berbanding saiz input. Petua untuk mengurangkan kerumitan masa program C++ termasuk: memilih bekas yang sesuai (seperti vektor, senarai) untuk mengoptimumkan storan dan pengurusan data. Gunakan algoritma yang cekap seperti isihan pantas untuk mengurangkan masa pengiraan. Hapuskan berbilang operasi untuk mengurangkan pengiraan berganda. Gunakan cawangan bersyarat untuk mengelakkan pengiraan yang tidak perlu. Optimumkan carian linear dengan menggunakan algoritma yang lebih pantas seperti carian binari.

Program PHP yang penting: Pasang ini untuk berjalan dengan lancar! Program PHP yang penting: Pasang ini untuk berjalan dengan lancar! Mar 27, 2024 pm 05:54 PM

Program PHP yang penting: Pasang ini untuk berjalan dengan lancar! PHP ialah bahasa skrip sebelah pelayan yang popular yang digunakan secara meluas untuk membangunkan aplikasi web. Untuk berjaya menjalankan program PHP, anda perlu memasang beberapa perisian dan alatan yang diperlukan pada pelayan terlebih dahulu. Dalam artikel ini, kami akan memperkenalkan perisian dan alatan yang mesti dipasang, bersama dengan contoh kod khusus untuk membantu anda menjalankan program PHP dengan lancar. 1. Jurubahasa PHP Teras program PHP ialah jurubahasa PHP, yang bertanggungjawab untuk menghurai dan melaksanakan kod PHP. Untuk memasang penterjemah PHP, anda boleh mengikuti

Bagaimana untuk mengoptimumkan item permulaan sistem WIN7 Bagaimana untuk mengoptimumkan item permulaan sistem WIN7 Mar 26, 2024 pm 06:20 PM

1. Tekan kombinasi kekunci (kekunci win + R) pada desktop untuk membuka tetingkap jalankan, kemudian masukkan [regedit] dan tekan Enter untuk mengesahkan. 2. Selepas membuka Registry Editor, kami klik untuk mengembangkan [HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer], dan kemudian lihat jika terdapat item Serialize dalam direktori Jika tidak, kami boleh klik kanan Explorer, buat item baharu dan namakannya Serialize. 3. Kemudian klik Serialize, kemudian klik kanan ruang kosong dalam anak tetingkap kanan, cipta nilai bit DWORD (32) baharu dan namakannya Bintang

Konfigurasi parameter Vivox100s didedahkan: Bagaimana untuk mengoptimumkan prestasi pemproses? Konfigurasi parameter Vivox100s didedahkan: Bagaimana untuk mengoptimumkan prestasi pemproses? Mar 24, 2024 am 10:27 AM

Konfigurasi parameter Vivox100s didedahkan: Bagaimana untuk mengoptimumkan prestasi pemproses? Dalam era perkembangan teknologi yang pesat hari ini, telefon pintar telah menjadi bahagian yang amat diperlukan dalam kehidupan seharian kita. Sebagai bahagian penting telefon pintar, pengoptimuman prestasi pemproses berkaitan secara langsung dengan pengalaman pengguna telefon mudah alih. Sebagai telefon pintar berprofil tinggi, konfigurasi parameter Vivox100s telah menarik banyak perhatian, terutamanya pengoptimuman prestasi pemproses telah menarik banyak perhatian daripada pengguna. Sebagai "otak" telefon bimbit, pemproses secara langsung mempengaruhi kelajuan berjalan telefon bimbit.

Apakah beberapa cara untuk menyelesaikan ketidakcekapan dalam fungsi PHP? Apakah beberapa cara untuk menyelesaikan ketidakcekapan dalam fungsi PHP? May 02, 2024 pm 01:48 PM

Lima cara untuk mengoptimumkan kecekapan fungsi PHP: elakkan penyalinan pembolehubah yang tidak perlu. Gunakan rujukan untuk mengelakkan penyalinan berubah-ubah. Elakkan panggilan fungsi berulang. Fungsi mudah sebaris. Mengoptimumkan gelung menggunakan tatasusunan.

'Black Myth: Wukong ' Versi Xbox telah ditangguhkan kerana 'kebocoran memori', pengoptimuman versi PS5 sedang dijalankan 'Black Myth: Wukong ' Versi Xbox telah ditangguhkan kerana 'kebocoran memori', pengoptimuman versi PS5 sedang dijalankan Aug 27, 2024 pm 03:38 PM

Baru-baru ini, "Mitos Hitam: Wukong" telah menarik perhatian besar di seluruh dunia. Bilangan pengguna dalam talian serentak pada setiap platform telah mencapai tahap tertinggi yang baharu. Versi Xbox "Black Myth: Wukong" telah ditangguhkan Walaupun "Black Myth: Wukong" telah dikeluarkan pada platform PC dan PS5, tidak ada berita pasti tentang versi Xboxnya. Difahamkan, pegawai itu mengesahkan bahawa "Mitos Hitam: Wukong" akan dilancarkan di platform Xbox. Bagaimanapun, tarikh pelancaran khusus masih belum diumumkan. Baru-baru ini dilaporkan bahawa kelewatan versi Xbox adalah disebabkan oleh isu teknikal. Menurut seorang blogger yang berkaitan, dia belajar daripada komunikasi dengan pembangun dan "orang dalam Xbox" semasa Gamescom bahawa versi Xbox "Black Myth: Wukong" wujud.

See all articles