node.js中事件循环(EventLoop)的详细介绍(附代码)
本篇文章给大家带来的内容是关于js中事件循环(EventLoop)的详细介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
前言
在学习eventloop之前,我们需要复习一下js的单线程和异步。
虽说js是单线程的,但是在浏览器和Node中都做了相应的处理。如浏览器中的web workers(工作线程),Node中的child_process(子进程)。它们的出现对大量计算的分解起到了促进作用。
事件循环
当进程启动时,Node会创建一个tick循环,每个tick循环通过内部的观察者来查看是否有事件需要处理,如果有就取出事件和它相关的回调函数去执行,执行完以后就进入下一个循环,如果不再有就退出进程。
浏览器中的eventloop
在浏览器中把异步事件放到工作线程中,避免阻塞主线程UI的渲染
console.log('进程开始') const ajax = new XMLHttpRequest() ajax.addEventListener('load', () => { console.log('load') }) ajax.addEventListener('loadend', () => { if (ajax.readyState == 4 && ajax.status == 200) { console.log('ajax success') } else { console.log('ajax success') } }) ajax.open('get', 'http://localhost/study/html/vue.js') ajax.send() setTimeout(() => { console.log('setTimeout') }, 300) fetch('http://localhost/study/html/demo.json',{ headers: { 'content-type': 'application/json' } }).then(res => { console.log('fetch') }) let i = 0 while(i < 10000) { i++ } console.log(i) console.log('进程结束')
从结果可以看出三种异步处理不阻塞主线程代码的执行,而ajax、fetch、setTimeout根据代码处理结束的先后来执行回调函数。
Nodejs中的eventloop
Node中的事件循环根据观察者的优先级来执行,同一个循环内的process.nextTick -> setTimeout -> setImmediate
setTimeout(() => { console.log('setTimeout') }, 0) setImmediate(() => { console.log('setImmediate1') process.nextTick(() => { console.log('setImmediate1 插入nextTick') }) }) setImmediate(() => { console.log('setImmediate2') }) process.nextTick(() => { setTimeout(() => { console.log('nextTick1 setTimeout') }, 100) console.log('nextTick1') }) process.nextTick(() => { console.log('nextTick2') }) console.log('正常执行')
总结
事件循环的执行特点,源于利用单线程,远离多线程死锁、状态同步等问题;利用异步让单线程远离阻塞,以更好的使用CPU。
相关推荐:
Atas ialah kandungan terperinci node.js中事件循环(EventLoop)的详细介绍(附代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

Jawapan: Anda boleh menggunakan komponen pemetik tarikh bootstrap untuk melihat tarikh di halaman. Langkah -langkah: Memperkenalkan rangka kerja bootstrap. Buat kotak input pemilih Tarikh dalam HTML. Bootstrap secara automatik akan menambah gaya kepada pemilih. Gunakan JavaScript untuk mendapatkan tarikh yang dipilih.

Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

Untuk mengesahkan tarikh dalam bootstrap, ikuti langkah -langkah ini: memperkenalkan skrip dan gaya yang diperlukan; memulakan komponen pemilih tarikh; Tetapkan atribut data-BV-tarikh untuk membolehkan pengesahan; Konfigurasikan peraturan pengesahan (seperti format tarikh, mesej ralat, dll.); Mengintegrasikan rangka kerja pengesahan bootstrap dan mengesahkan input tarikh secara automatik apabila borang dikemukakan.

Bootstrap Menyediakan panduan mudah untuk menubuhkan bar navigasi: Memperkenalkan Perpustakaan Bootstrap untuk membuat bar navigasi Tambah Identiti Jenama Buat Pautan Navigasi Tambah Elemen Lain (Pilihan) Laraskan Gaya (Pilihan)
