Visual Studio Code atau VSCode adalah kode editor yang saat ini banyak digunakan developer. Selain karena gratis, VSCode memiliki banyak Extension yang menjadikan kode editor ini sangat menarik, termasuk kita dapat menulis kode Arduino didalamnya.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*t6H7aAEw6NHx2gSA_7kWBA.jpeg"><figcaption>Arduino</figcaption></figure><h3>Install Arduino IDE</h3>
Pertama, yang dibutuhkan adalah <a href="https://www.arduino.cc/en/main/software#download">Arduino IDE</a> atau <a href="https://github.com/arduino/arduino-cli/releases/tag/0.13.0">Arduino-CLI</a>.
Meskipun kita akan menggunakan VSCode untuk menulis kode, kita tetap membutuhkan Arduino IDE atau Arduino-CLI yang nantinya dibutuhkan Extension VSCode untuk menjalankan kode Arduino.
<pre># OS yang saya gunakan Ubuntu 20</pre>
<pre># Buat folder mkdir arduino cd arduino/</pre>
<pre># download Arduino IDE wget <a href="https://downloads.arduino.cc/arduino-1.8.19-linux64.tar.xz">https://downloads.arduino.cc/arduino-1.8.19-linux64.tar.xz</a></pre>
<pre># extract tar.xz tar -xvf ./<a href="https://downloads.arduino.cc/arduino-1.8.19-linux64.tar.xz">arduino-1.8.19-linux64.tar.xz</a></pre>
<pre># install cd <a href="https://downloads.arduino.cc/arduino-1.8.19-linux64.tar.xz">arduino-1.8.19</a>/ sudo ./install.sh</pre>
Jika menggunakan Windows, bisa download installernya di <a href="https://www.arduino.cc/en/software">https://www.arduino.cc/en/software</a>
Arduino-CLI bisa didownload di <a href="https://github.com/arduino/arduino-cli/releases/tag/0.13.0">https://github.com/arduino/arduino-cli/releases/tag/0.13.0</a>
<h3>Install Arduino Extension</h3>
Setelah Arduino IDE terinstall, kita perlu menginstall Extension yang dibutuhkan bernama <a href="https://marketplace.visualstudio.com/items?itemName=vsciot-vscode.vscode-arduino">Arduino</a>.
Buka Tab Extension (ctrl+shift+x) dan cari Arduino
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*kcnIrFWxKHqRdw_KYDs-Vg.png"><figcaption>Arduino Extension</figcaption></figure><h3>Konfigurasi VSCode</h3>
Setelah Extension terinstall, kita perlu mengatur path di VSCode. Buka command pallet (ctrl+shift+p) dan cari Preference: Open User Settings (JSON)
<figure><img alt="" src="https://cdn-images-1.medium.com/max/514/1*4rB4bIJrgHoUwL3g0iO6nQ.png"><figcaption>Preference User Settings</figcaption></figure>Tambahkan path menuju folder yang telah dibuat tadi
<pre>// Linux "arduino.path": "/home/user/arduino/arduino-1.8.19", "arduino.commandPath": "arduino"</pre>
<pre>// Windows "arduino.path": "C:\\Program Files (x86)\\Arduino", "arduino.commandPath": "arduino.exe"</pre>
Setelah itu pilih Serial Port Arduino kita dengan buka command pallet (ctrl+shift+p) cari Arduino: Select Serial Port
<figure><img alt="" src="https://cdn-images-1.medium.com/max/506/1*GBXCgm8OpIL14G2Q8nPHkA.png"><figcaption>Arduino Serial Port</figcaption></figure>Nama Serial Port juga bisa dilihat di Arduino IDE → Tools → Serial Port.
Kita juga perlu mengatur Arduino Board yang kita pakai. Pertama buka Command Pallet (ctrl+shift+p) lalu cari Arduino: Board Config
<figure><img alt="" src="https://cdn-images-1.medium.com/max/501/1*V2wF7SZgRy9Mo9LYXgYFBQ.png"><figcaption>Arduino Board Config</figcaption></figure>Pilih board yang digunakan
<figure><img alt="" src="https://cdn-images-1.medium.com/max/560/1*3F-YGEVaD3Z_sKRfPA3Xgw.png"><figcaption>Arduino Select Board Config</figcaption></figure>Sebelum mulai menulis kode, kita Initialize dahulu agar otomatis dibuatkan file-file yang dibutuhkan nantinya. Buka Command Pallet (ctrl+shift+p) dan cariArduino: Initialize.
Lalu, kita buat file dan pastikan Sketch menuju file saat ini, cara mengubahnya, buka Command Pallet (ctrl+shift+p) dan cariArduino: Select sketch.
Setelah itu kita buat function yang wajib ada yaitu
<pre>void setup(); void loop();</pre>
Kita Verify dahulu dengan membuka Command Pallet (ctrl+shift+p) dan Arduino: Verify.
Setelah tidak ada error, kita bisa mulai menggunakan VSCode untuk menulis kode Arduino. Verify, Upload dan command lainnya bisa dijalankan melalui Command Pallet dengan kata kunci Arduino: (command).
<h3>Tips</h3>
Agar proses compile lebih cepat, tambahkan build output path di .vscode/arduino.json
<pre>"output": "./build"</pre>
Hal tersebut harus ditulis manual, karena secara default opsi ini tidak di set.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c21662a606aa" width="1" height="1" alt="">

Ngoding Arduino di Visual Studio Code

<h3>Bad Code — Recursion</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Nrp2N6oDyuVBXOYYmEMyug.png"></figure>Fungsi rekursif adalah fungsi yang memanggil dirinya sendiri, hingga pada batasan tertentu akan berhenti lalu mengolahnya dan pada akhirnya akan mengembalikan nilai.
Hampir semua kasus yang dapat diselesaikan dengan perulangan (for, while, do while, dll), juga dapat diimplementasikan menggunakan fungsi rekursif.
Menulis perulangan menggunakan fungsi rekursif, setidaknya membuat kode terlihat lebih sederhana. Namun, dengan implementasi yang salah, fungsi rekursif dapat berjalan dengan lambat seiring dengan bertambahnya data.
<h3>Code</h3>
Dibawah ini adalah fungsi max()untuk mencari angka paling besar dari sebuah array.
<a href="https://medium.com/media/bcd439f7a77b07da12ff9e0eaa85d62a/href">https://medium.com/media/bcd439f7a77b07da12ff9e0eaa85d62a/href</a>arr.slice(1, arr.length)→ Menghapus element pertama dari array, dan mengembalikan sisanya.
<h3>How it works</h3>
Setiap fungsi rekursif memiliki base case yang merupakan batasan fungsi tersebut untuk berhenti memanggil dirinya sendiri.
Base case pada kode diatas ditunjukkan pada baris ke-6
<pre>if (arr.length === 1) return arr[0];</pre>
Base case ini akan melakukan pengecekan, apakah array hanya memiliki element 1? jika iya kembalikan element tersebut.
Jika tidak atau jika element array lebih dari 1, maka baris ke-6 akan dilewati, dan akan berlanjut ke baris ke-13
<pre>if (arr[0] &gt; max(arr.slice(1, arr.length))) { return arr[0]; }</pre>
Pada baris ke-13 dilakukan pengecekan ulang:
Apakah element pertama dari array lebih besar dari hasil max(arr.slice(1, arr.length)) ?
Sampai disini kita akan menunggu hasil dari max(arr.slice(1, arr.length)), inilah kenapa fungsi ini disebut rekursif, karena pada pengecekan kedua ini memanggil dirinya sendiri max().
Jika yang dihasilkan lebih kecil dari element pertama array tadi, maka akan mengebalikan element pertama dari array.
Jika tidak, prosesnya akan dilanjutkan pada baris ke-20
<pre>else { return max(arr.slice(1, arr.length)); }</pre>
Pada kode ini menjelaskan bahwa selain kondisi tadi atau jika element pertama dari array tidak lebih besar dari hasil max(arr.slice(1, arr.length)), maka akan mengembalikan max(arr.slice(1, arr.length))
Pada pengecekan baris ke-20 ini akan memanggil dirinya sendiri max()
<h3>Case</h3>
Contoh kasus, ketika kita memasukkan array [1, 2, 3, 4]kedalam fungsi max()maka prosesnya
<ol>
<li>Membandingkan element pertama dari array (1) dengan nilai paling besar dari sisanya ([2, 3, 4])</li>
<li>Menguraikan sisa dari array [2, 3, 4] dengan membandingkan element pertama dari array 2 dengan nilai paling besar dari sisanya [3, 4]</li>
<li>Menguraikan sisa dari array [3, 4] dengan membandingkan element pertama dari array 3 dengan nilai paling besar dari sisanya [4]</li>
<li>Ketika jumlah element dari array adalah 1, maka akan menyentuh base case yaitu akan mengembalikan nilai itu sendiri 4</li>
</ol>
Secara visual akan terlihat seperti dibawah ini
<figure><img alt="" src="https://cdn-images-1.medium.com/max/944/1*bRo3bcWtWd0HKCoXUMAEuQ.gif"><figcaption><a href="https://recursion.vercel.app/">https://recursion.vercel.app/</a></figcaption></figure>Meskipun kode diatas dapat dijalankan dengan baik, jika diperhatikan, kode tersebut memanggil frasa yang sama sebanyak dua kali max(arr.slice[1, arr.length]), sekali disetiap setengah dari pernyataan kondisionalnya.
<h3>Top-down</h3>
Kasus 1 — Array dengan 1 element
Ketika kita melempar array yang memiliki hanya satu element pada fungsi max(), katakanlah [4], maka fungsi max() akan mengembalikan element itu sendiri, yaitu 4
Hal ini dikarenakan kita menyentuh base case yang tertulis pada baris 6
<pre>if (arr.length === 1) return arr[0];</pre>
Kasus 2 — Array dengan 2 element
Apa yang terjadi ketika kita memasukkan array yang memiliki 2 element pada fungsi max()? anggap saja [3, 4]
Pada kasus array dengan 2 element, maka komputer tidak akan mengeksekusi pengecekan pertama (base case) if (arr.length === 1) return arr[0]
Pada pengecekan kedua if(arr[0] &gt; max(arr.slice(1, arr.length)) kita membandingkan 3 dengan hasil darimax([4]).
max([4]) adalah fungsi rekursif.
Karena 3 tidak lebih besar dari hasilnya, yaitu 4, maka akan memicu pengecekan kedua pada baris 21 yaitureturn max(arr.slice([1, arr.length])). Dalam hal ini mengembalikan max([4])
Sampai disini fungsi diatas sudah memanggil max([4]) sebanyak dua kali. Padahal ini array dengan 2 element, bagaimana jika array memiliki 5 element atau mungkin lebih?
<h3>Next step</h3>
Cara termudah untuk memperbaikinya adalah menyimpan panggilan rekursif ke dalam variabel.
<a href="https://medium.com/media/9e15fb736300f5233445927b3b329bbb/href">https://medium.com/media/9e15fb736300f5233445927b3b329bbb/href</a>Dengan melakukan perubahan tersebut, maka fungsi reskursif hanya dipanggil satu kali, dan meyimpan hasil nya pada satu variabel.
Jika digambarkan secara visual akan terlihat seperti dibawah ini
<figure><img alt="" src="https://cdn-images-1.medium.com/max/944/1*LIfzPle1lD3jO1Tk_8G8YA.gif"><figcaption><a href="https://recursion.vercel.app/">https://recursion.vercel.app/</a></figcaption></figure>Dengan memindahkan fungsi rekursif ke dalam variabel, komputer sudah menghilangkan beberapa proses dilakukan berulang.
<h3>Efficiency</h3>
Pada fungsi yang pertama, akan memanggil dirinya sendiri sebanyak dua kali disetiap prosesnya (kecuali jika element dari array hanya berjumlah 1).
Pada tabel dibawah ini, kita akan melihat berapa jumlah panggilan yang dilakukan setiap kita menambahkan data yang akan di eksekusi.
<a href="https://medium.com/media/c0f6afd821855f831b2fd132be551936/href">https://medium.com/media/c0f6afd821855f831b2fd132be551936/href</a>Dengan melihat tabel di atas, dapat dilihat bahwa pada fungsi pertama memiliki notasi O(2ⁿ), dimana notasi ini memiliki arti bahwa fungsi tersebut sangat lambat seiring bertambahnya data yang dieksekusi.
Pada versi kedua, fungsi tersebut memanggil dirinya sendiri sebanyak jumlah element dari array yang diinputkan. Maka pada versi kedua, memiliki notasi O(N).
Seperti yang kita ketahui O(2ⁿ) lebih lambat dibanding O(N).
<h3>Wrapping up</h3>
Menghindari panggilan fungsi rekursif berlebihan adalah kunci untuk menjaga fungsi rekursif tetap cepat.
Meskipun perbaikan diatas terlihat sederhana yaitu memindahkan fungsi rekursif kedalam variabel. Pada akhirnya hal inilah yang mengubah kecepatan fungsi kita dari O(2ⁿ) menjadi O(N).
<a href="https://learning.oreilly.com/library/view/a-common-sense-guide/9781680508048/f_0113.xhtml">A Common-Sense Guide to Data Structures and Algorithms, Second Edition, 2nd Edition</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=a81bb4295986" width="1" height="1" alt="">

Bad Code — Recursion

<figure><img alt="" src="https://cdn-images-1.medium.com/max/940/1*hFwS4nrYA-gf8UukwJyiTw.png"><figcaption>Tentang Tag Script di Dalam HTML</figcaption></figure>Tulisan ini saya buat untuk mengulas pertanyaan
<ul>
<li>Bagaimana praktik terbaik dalam mereferensikan / menulis kode JavaScript di dalam HTML?</li>
<li>Kenapa umumnya &lt;script&gt; diletakkan di akhir &lt;body&gt; ?</li>
</ul>
<h3>Penulisan Kode JavaScript</h3>
Salah satu alasan dipilihnya penulisan kode JavaScript biasanya mempertimbangkan terkait dengan semakin banyaknya kode yang ditulisakan dalam satu file (pengelolaan kode). Terdapat 2 cara yang umum digunakan
Pertama, menuliskan langsung di dalam tag &lt;script&gt; atau disebut dengan metode inline
<pre>&lt;script&gt;</pre>
<pre> // kode JavaScript</pre>
<pre>&lt;/script&gt;</pre>
Kedua adalah metode external, yaitu menuliskan kode JavaScript pada file terpisah. Sama seperti sebelumnya, menggunakan tag &lt;script&gt; tapi pada kasus ini perlu menambahkan attribute srcyang mereferensikan nama dari file JavaScript yang ingin dimuat, sehingga akan terlihat seperti ini:
<pre>&lt;script src="file.js"&gt;&lt;/script&gt;</pre>
<h3>Penempatan &lt;script&gt;</h3>
Salah satu alasan dipilihnya penempatan &lt;script&gt;biasanya mempertimbangkan terkait dengan urutan dimuat ketika halaman akan ditampilkan.
Terdapat 2 cara yang umum digunakan yaitu diletakkan di dalam tag&lt;head&gt; dan di akhir tag&lt;body&gt;
<pre>&lt;html&gt; &lt;head&gt;</pre>
<pre> // JavaScript di dalam &lt;head&gt; &lt;script src="file.js"&gt;&lt;/script&gt;</pre>
<pre> &lt;/head&gt; &lt;body&gt; &lt;div id="dom"&gt;&lt;/div&gt; </pre>
<pre> // JavaScript di akhir &lt;body&gt; &lt;script src="file.js"&gt;&lt;script&gt; </pre>
<pre> &lt;/body&gt; &lt;/html&gt;</pre>
<h3>Proses Parsing HTML</h3>
Faktanya, mengelola file JavaScript di browser cukup rumit, karena eksekusi kode memblokir proses lain pada browser, seperti UI painting. Setiap kali &lt;script&gt; ditemukan, halaman harus berhenti dan menunggu kode untuk diunduh (jika eksternal) dan dijalankan sebelum melanjutkan untuk memproses sisa halaman.
Hal tersebut dikarenakan sebagian besar browser menggunakan satu proses untuk pembaruan User Interface (UI) dan eksekusi JavaScript, jadi pada waktu yang sama hanya terjadi satu proses saja.
Contoh:
<pre>&lt;html&gt; &lt;head&gt; &lt;title&gt;Script Example&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt; &lt;script&gt; document.write("The date is " + (new Date()).toDateString()); &lt;/script&gt; &lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</pre>
Ketika browser mulai membaca satu persatu kode HTML dan menemukan &lt;script&gt; (seperti pada kode diatas) maka browser akan menunggu untuk melihat perilaku dari kode JavaScript yang disematkan.
Tanpa menunggu, browser tidak tahu apakah kode tersebut menambahkan konten, menambahkan elemen lain, atau bahkan menutup tag.
Setelah browser tahu perilaku dari kode tersebut, maka browser akan melanjutkan untuk me-parsing dan me-render halaman.
Hal yang sama terjadi untuk JavaScript yang dimuat dengan attribute src , browser harus terlebih dahulu mengunduh kode dari file eksternal, lalu me-parsing dan mengeksekusi kode.
<blockquote>Render halaman dan interaksi pengguna sepenuhnya di blokir selama waktu tersebut</blockquote>
Contoh lain:
<pre>&lt;html&gt; &lt;head&gt; &lt;title&gt;Document&lt;/title&gt; </pre>
<pre> &lt;script src="file1.js"&gt;&lt;/script&gt; &lt;script src="file2.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="styles.css"&gt; </pre>
<pre>&lt;/head&gt; &lt;body&gt; &lt;p&gt;Hello World!&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</pre>
<blockquote>Browser tidak akan merender apapun di halaman hingga menemui pembuka tag &lt;body&gt;</blockquote>
Menempatkan script di dalam tag &lt;head&gt; biasanya memperlihatkan proses yang cukup lambat, seringkali halaman hanya berwarna putih untuk beberapa saat, bahkan sebelum user dapat mulai membaca atau berinteraksi dengan halaman.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/558/1*FmggR0JjQSg4RLKEgZX_Vg.png"><figcaption>Eksekusi kode JavaScript memblokir unduhan file lainnya</figcaption></figure>Pada diagram waterfall diatas, file JavaScript pertama mulai diunduh dan memblokir file lain mana pun, untuk sementara.
Selanjutnya, terdapat penundaan ketika file1.js selesai diunduh dan ketika file2.js mulai diunduh. Ruang kosong tersebut merupakan waktu yang dibutuhkan kode yang berada di file1.js untuk dieksekusi sepenuhnya.
Setiap file harus menunggu hingga file sebelumnya telah diunduh dan dieksekusi, sebelum unduhan berikutnya dapat dimulai. Sementara itu, user akan melihat layar putih kosong karena file sedang diunduh satu per satu.
<h3>Masalah Penempatan</h3>
Sebelumnya, kita sudah mengetahui bahwa script dapat diletakkan pada head atau body
<pre>&lt;html&gt; &lt;head&gt; &lt;script&gt; // document.head is available // document.body is not! &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;script&gt; // document.head is available // document.body is available &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre>
Pada kode diatas kita melihat terdapat masalah dengan penempatan. Ketika kode JavaScript diletakkan di head , kode tersebut tidak dapat mengakses body , ini merupakan masalah serius jika kode tersebut memiliki fungsi untuk mengelola element di dalam body .
Seperti yang sudah dibahas sebelumnya, hal ini terjadi karena browser akan membaca satu persatu element HTML dari atas ke bawah, sehingga ketika script di dalam head dimuat, browser belum merender apapun element HTML di dalam tag &lt;body&gt; .
Solusi umum yang digunakan adalah meletakkan script di akhir body
<pre>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; // ... // ...</pre>
<pre> &lt;script&gt; // kode ... &lt;/script&gt; &lt;script src="file.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre>
Hal ini dilakukan agar browser memuat element HTML di dalam bodydahulu dan memuat script diakhir. Sampai titik ini kita dapat melihat bahwa solusi ini cukup menyelesaikan masalah sebelumnya.
Dengan solusi ini browser akan memperhatikan script dan mulai mengunduhnya hanya setelah mengunduh documen HTML secara lengkap.
Namun, hal ini dapat sedikit menimbulkan masalah untuk document HTML yang sangat panjang, hal tersebut dapat menyebabkan delay yang cukup lama.
Hal ini sebenarnya tidak akan terlihat jika koneksi internet sangat cepat, namun banyak orang yang masih memiliki kecepatan internet yang lambat dan menggunakan koneksi internet seluler yang jauh dari sempurna.
<h3>Defer</h3>
Sejak HTML 4, attribute baru untuk &lt;script&gt; ditambahkan, yaitu defer . Attribute defer digunakan untuk memberitahu browser agar tidak menunggu script .
Browser akan terus memproses HTML, membangun DOM. script dimuat di ‘background’, kemudian berjalan saat DOM sepenuhnya selesai dibuat.
script dengan attributedefer dapat diletakkan dimana saja di dalam HTML, namun defer tidak berfungsi dengan baik jika kode Javascript dituliskan inline atau internal
<pre>// defer berfungsi ketika menggunakan eksternal file &lt;script defer src="file.js"&gt; &lt;/script&gt;</pre>
<pre>// defer tidak berfungsi ketika dituliskan inline &lt;script defer&gt; // Kode.. &lt;/script&gt;</pre>
script dengan defer selalu dijalankan saat DOM sudah sepenuhnya dimuat, tapi sebelum event DOMContentLoaded
<pre>&lt;p&gt; ... &lt;/p&gt;</pre>
<pre>&lt;script&gt; document.addEventListener('DOMContentLoaded', () =&gt; alert("DOM siap setelah defer") ); &lt;/script&gt;</pre>
<pre>&lt;script defer src"file.js"&gt;&lt;/script&gt;</pre>
script dengan attributedefer akan dijalankan sesuai dengan urutannya, sama dengan script biasa.
<pre>&lt;script defer src"file1.js"&gt;&lt;/script&gt; &lt;script defer src"file2.js"&gt;&lt;/script&gt; &lt;script defer src"file3.js"&gt;&lt;/script&gt;</pre>
Browser akan memindai halaman untuk mencari scriptdan mengunduhnya secara paralel. Jadi pada contoh diatas, ketiga script diunduh secara paralel, hal ini memungkinkan file2.js atau file3.js selesai pertama kali sebelum file1.js
Namun, selain memberi tahu browser untuk tidak memblokir, attribute defer juga memastikan bahwa urutan relatif tetap terjaga.
Jadi, meskipun file2.js atau file3.js dimuat terlebih dahulu, browser akan menunggu dan menjalankannya sesuai urutan pada contoh kode diatas.
<h3>Async</h3>
Attribute async hampir sama dengan defer . asyncjuga memiliki fungsi agar script tidak memblokir proses lain, perbedaan mendasarnya adalah perilaku dari kedua attribute tersebut.
defer akan diunduh secara paralel, tapi pada akhirnya akan dimuat sesuai dengan urutan kode, dari atas ke bawah. Sedangkanasync tidak, async akan mengunduh dan memuat secara paralel, jadi async cocok digunakan ketika satu script dengan yang lain tidak memiliki ketergantungan (independen).
Selain itu, DOMContentLoaded dan async tidak saling menunggu, artinya keduanya tidak dapat dipastikan mana yang akan dimuat terlebih dahulu.
<h3>Browser Compatibility</h3>
Penting untuk mengetahui apakah async dan defer sudah didukung sepenuhnya oleh browser.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1019/1*lp9jaa12j3ekQiNVBR7wkw.png"><figcaption><a href="https://caniuse.com/?search=defer">https://caniuse.com/?search=defer</a></figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/977/1*ve972aMSBqLpG4pL0dZpyQ.png"><figcaption><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script</a></figcaption></figure>Dari gambar diatas, bisa kita lihat async dan defer hampir didukung secara penuh oleh kebanyakan browser saat ini, kecuali Opera Mini.
Kembali ke pertanyaan
<ul><li>Manakah cara yang baik untuk menuliskan / mereferensikan kode JavaScript di HTML?</li></ul>
— Menggunakan script di akhir body jika user yang ditargetkan memiliki koneksi internet yang baik.
— Menggunakan defer jika file satu dan file lain memiliki ketergantungan sehingga dimuat secara berurut merupakan kebutuhan.
— Menggunakan async jika file satu dan file lain tidak memiliki ketergantungan (independen)
—Menggunakan eventDOMContentLoaded jika kode JavaScript di tuliskan secara inline dan berada di dalam &lt;head&gt; , agar dimuat setelah DOM tersedia.
<ul><li>Kenapa umumnya &lt;script&gt; diletakkan di akhir &lt;body&gt; ?</li></ul>
Asumsi saya, hal ini dilakukan karena sebelumnya async dan defer belum berjalan dengan baik di semua browser, agar script dimuat setelah DOM di muat terlebih dahulu.
Dengan mengetahui hal di atas, jika menggunakan defer , async ataupun event DOMContentLoaded bukan tidak mungkin kita meletakkan script di dalam head bukan?
<pre>&lt;html&gt; &lt;head&gt;</pre>
<pre> &lt;script defer src="file1.js"&gt;&lt;/script&gt; &lt;script async src="file2.js"&gt;&lt;/script&gt; &lt;script&gt; document.addEventListener('DOMContentLoaded', () =&gt; { // kode.. }); &lt;/script&gt;</pre>
<pre> &lt;/head&gt; &lt;body&gt;</pre>
<pre> ... ...</pre>
<pre> &lt;/body&gt; &lt;/html&gt;</pre>
Catatan
Dengan menggunakan defer atau async , memungkinkan user akan melihat halaman sebelum script dimuat.
Pada beberapa kasus, tidak akan menampilkan beberapa komponen grafis sebelum JavaScript diinisiasi.
Dengan begitu, menampilkan animasi atau apapun itu yang menunjukkan bahwa halaman sedang loading, penting ditambahkan agar user melihat dengan jelas apa yang dilakukan oleh halaman, dan apa yang masih dipersiapkan.
async dan defer memiliki sifatnya masing masing, jika diilustrasikan dengan bagan, akan tampak seperti ini
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*h2IVVC-XTdCsDv1mioGqVw.png"><figcaption><a href="https://html.spec.whatwg.org/#the-script-element">https://html.spec.whatwg.org/#the-script-element</a></figcaption></figure>Tentu masih ada cara lain untuk menambahkan kode JavaScript di HTML, yang mungkin akan dibahas pada artikel lain.
<ul>
<li><a href="https://learning.oreilly.com/library/view/high-performance-javascript/9781449382308/ch01.html#deferred_scripts">High Performance JavaScript</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What's in the head? Metadata in HTML - Learn web development | MDN</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#script_loading_strategies">What is JavaScript? - Learn web development | MDN</a></li>
<li><a href="https://eager.io/blog/everything-I-know-about-the-script-tag/">Everything I Know About The Script Tag - Eager Blog</a></li>
<li><a href="https://javascript.info/script-async-defer">Scripts: async, defer</a></li>
<li><a href="https://www.html5rocks.com/en/tutorials/speed/script-loading/">Deep dive into the murky waters of script loading - HTML5 Rocks</a></li>
<li><a href="https://html.spec.whatwg.org/#the-script-element">HTML</a></li>
</ul>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=84bcfd317b95" width="1" height="1" alt=""><hr>
<a href="https://medium.com/javascript-indonesia-community/tentang-tag-script-di-dalam-html-84bcfd317b95">Tentang Tag Script di Dalam HTML</a> was originally published in <a href="https://medium.com/javascript-indonesia-community">JavaScript Indonesia Community</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Tentang Tag Script di Dalam HTML

<h3>Konsep props — Vue js</h3>
<blockquote>Pada dasarnya ‘props’ digunakan untuk berbagi data dari parent ke child (komponen).</blockquote>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*RdBJR_3EqkXBaQce7NGFVg.jpeg"></figure>Anggap saja ada 3 bagian: parent, elemen, dan child.
<ul>
<li>
Parent adalah penyedia data</li>
<li>
Elemen adalah perantara, dan</li>
<li>
Child yang membutuhkan data.</li>
</ul>
<blockquote>Parent → Elemen → Child</blockquote>
<ul><li>Parent</li></ul>
<pre>new Vue({ el: '', data: { anggur: 'ungu' } })</pre>
Pada kode di atas ‘parent’ mempunyai satu data yang bernama ‘anggur’ dengan value ‘ungu’. Ceritanya, ‘anggur’ ini akan dikirim ke child melalui elemen, oke lanjut ke elemen.
<ul><li>
Elemen ( ‘child’ sebagai nama properti, ‘parent’ sebagai value )</li></ul>
<pre>&lt;komponen buah="anggur"&gt;&lt;/komponen&gt;</pre>
‘anggur’ pada elemen komponen dimasukkan sebagai value dari properti ‘buah’.
Value dari properti buah ( ‘anggur’ ) adalah data yang akan dikirim ke child. Sedangkan nama properti ( ‘buah’ ) akan dimasukkan sebagai value dari props pada child.
<ul><li>Child</li></ul>
<pre>Vue.component({ props: [buah], })</pre>
Nama properti ( ‘buah’ ) dimasukkan sebagai value dari props ( dalam bentuk array ).
Pada bagian ini data sudah diterima oleh ‘child’, maka data tersebut sudah siap untuk digunakan.
<pre>Vue.component({ props: [buah],</pre>
<pre> template: ` &lt;div&gt; {{ buah }} &lt;/div&gt; ` })</pre>
<a href="https://docs.vuejs.id/v2/guide/components-props.html">Props - Vue.js</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=86e424ee90ee" width="1" height="1" alt="">

Konsep props — Vue js

Chrome extension (selanjutnya disebut ekstensi) merupakan zip bundles dari HTML, CSS, JavaScript, gambar dan file lainnya tergantung dari fungsi ekstensi tersebut.
Ekstensi memiliki banyak fungsional, seperti memodifikasi konten web dan berinteraksi dengan pengguna atau bahkan dapat memperluas dan mengubah perilaku browser itu sendiri.
<h3>Extension file</h3>
Setiap ekstensi yang dibuat wajib memiliki file manifest.json yang didalamnya berisi tentang informasi terkait ekstensi itu sendiri. Seperti nama, deskripsi, versi dan lainnya.
<pre>// manifest.json</pre>
<pre>{ "name": "My Extension", "version": "2.1", "description": "Gets information from Google.", "icons": { "16": "icon_16.png", "32": "icon_32.png", "48": "icon_48.png", "128": "icon_128.png" }, "background": { "persistent": false, "scripts": ["background_script.js"] }, "permissions": ["https://*.google.com/", "activeTab"], "browser_action": { "default_icon": "icon_16.png", "default_popup": "popup.html" } }</pre>
Ektensi juga wajib memiliki icon yang akan tampil pada menu ekstensi web browser. Pada umumnya ketika icon tersebut diklik akan muncul dashboard kecil yang disebut dengan popup.
<h3>Referring to files</h3>
File ekstensi dapat dirujuk dengan menggunakan relative URL, sama seperti file di halaman HTML biasa.
<pre>&lt;img src="images/my_image.png"&gt;</pre>
Selain itu, setiap file juga dapat diakses menggunakan absolute URL.
<pre>chrome-extension:///</pre>
<h3>Arsitektur</h3>
Arsitektur dari ekstensi akan bergantung pada fungsinya, semakin kompleks ekstensi tersebut akan semakin banyak menyertakan komponen di dalamnya.
<ul>
<li>Manifest</li>
<li>Background script</li>
<li>UI Elements</li>
<li>Content script</li>
<li>Options page</li>
</ul>
Background scripts
Background scripts ini merupakan event handler ekstensi, yang berisi listeners untuk events browser yang akan dieksekusi. Script ini akan dihentikan sampai ia selesai memproses sesuai dengan logika yang diinstruksikan.
Background scripts yang efektif hanya akan dimuat ketika dibutuhkan dan dihentikan ketika sudah selesai melakukan prosesnya.
UI Element
User Interface ekstensi harus memiliki fungsi dan minimalis. UI harus menyesuaikan atau meningkatkan pengalaman menjelajah user.
Sebagian besar ekstensi memiliki browser action atau page action, tetapi juga dapat berisi bentuk UI lain, seperti context menus, omnibox, atau pembuatan keyboard shortcut.
Halaman UI ekstensi, seperti popup, dapat berisi halaman HTML biasa dengan logika JavaScript. Ekstensi juga dapat memanggil tabs.create atau window.open() untuk menampilkan file HTML tambahan yang ada di ekstensi.
Ektensi yang menggunakan page action dan popup dapat menggunakan declarative content API untuk mengatur fungsi di background script saat popup tersedia untuk pengguna.
Ketika kondisi terpenuhi, background script berkomunikas dengan popup untuk membuat iconnya dapat diklik oleh pengguna.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/338/1*3LpXgcVAXjaK8zmNTipTbw.png"></figure>Content scripts
Content scripts berguna jika ekstensi memiliki fungsi untuk membaca dan menulis ke halaman web. Content scripts berisi JavaScript yang dijalankan dalam konteks halaman yang telah dimuat ke browser.
Content scripts mempunyai fungsi untuk membaca dan memodifikasi DOM halaman web yang dikunjungi browser.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/439/1*1FsRa4_DwyKMg2R-gh3kkQ.png"></figure>Content scripts dapat berkomunikasi dengan API ekstensi induknya dengan bertukar pesan dan menyimpan nilai menggunakan storage API.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/439/1*ysmpyxgEIOGViALvTRMS-g.png"></figure>Options page
Pada umumnya options page digunakan utuk menampilkan pengaturan ekstensi dan pengguna dapat memilih fungsionalitas apa yang relevan dengan kebutuhan mereka.
<h3>Menggunakan chrome API</h3>
Selain memiliki akses ke API yang sama dengan halaman web, ekstensi juga dapat menggunakan API khusus ekstensi sehingga memiliki integrasi erat dengan browser.
Ekstensi dan halaman web dapat mengakses window.open() yaitu metode standard untuk membuka URL, selain itu ekstensi juga dapat menentukan pada jendela mana URL harus ditampilkan dengan menggunakan chrome API dengan metode tabs.create .
Metode asynchronous vs synchronous
Sebagian besar metode Chrome API menggunakan asynchronous, yaitu metode yang langsung dieksekusi tanpa menunggu operasi selesai.
Jika ekstensi perlu hasil dari operasi asynchronous, ekstensi tersebut dapat meneruskan fungsi callback ke dalam method. Callback akan dijalankan setelah method selesai dieksekusi.
Jika ekstensi mempunyai fungsi untuk menavigasi tab yang saat ini dipilih pengguna ke URL baru, ekstensi tersebut harus mendapatkan ID tab saat ini dan kemudian memperbarui alamat tab tersebut ke URL baru.
Jika method tabs.query synchronous, akan terlihat seperti ini
<pre>//THIS CODE DOESN'T WORK var tab = chrome.tabs.query({'active': true}); //WRONG!!! chrome.tabs.update(tab.id, {url:newUrl}); someOtherFunction();</pre>
Pendekatan ini akan gagal karena query() bersifat asynchronous. Ia akan kembali tanpa menunggu pekerjaan selesai, dan tidak mengembalikan nilai. Metode asynchronous ketika parameter callback tersedia di signature-ya.
<pre>// Signature for an asynchronous method chrome.tabs.query(object queryInfo, function callback)</pre>
Untuk membuat tab query dengan benar dan memperbarui URL-nya, ekstensi harus menggunakan parameter callback.
<pre>//THIS CODE WORKS chrome.tabs.query({'active': true}, function(tabs) { chrome.tabs.update(tabs[0].id, {url: newUrl}); }); someOtherFunction();</pre>
Pada kode diatas, setiap baris akan dieksekusi dengan urutan: 1, 4, 2.
Fungsi callback yang ditentukan untuk query() dipanggil, kemudian mengeksekusi baris 2, tetapi hal tersebut hanya akan dilakukan setelah informasi tentang tab yang dipilih saat ini tersedia.
Hal ini terjadi beberapa saat setelah query() mengembalikan return. Meskipun update() asynchronous, kode tidak menggunakan parameter callback, karena ekstensi tidak melakukan apa pun dengan hasil dari operasi tersebut.
<pre>// Synchronous methods have no callback option and returns a type of string string chrome.runtime.getURL()</pre>
<h3>Komunikasi antar halaman</h3>
Komponen yang berbeda dalam sebuah ekstensi sering kali perlu saling berkomunikasi. Halaman HTML yang berbeda dapat menemukan satu sama lain dengan menggunakan method chrome.extension , seperti getViews() dan getBackgroundPage() .
Setelah halaman memiliki referensi ke halaman ekstensi lain, halaman pertama dapat menjalankan fungsi di halaman lain dan memanipulasi DOM-nya.
Selain itu, semua komponen ekstensi dapat mengakses nilai yang disimpan menggunakan storage API dan berkomunikasi melalui message passing.
<h3>Penyimpanan data dan mode penyamaran</h3>
Ekstensi dapat menyimpan data dengan menggunakan penyimpanan API, web storage API HTML5, atau dengan membuat server requests yang menghasilkan penyimpanan data.
Saat ekstensi perlu menyimpan sesuatu, yang perlu diperhatikan adalah apakah ekstensi tersebut berada di jenedela penyamaran. Secara default, ekstensi tidak berjalan di jendela penyamaran.
Mode penyamaran menjanjikan bahwa jendela tidak akan meninggalkan jejak. Saat menangani data dari jendela penyamaran, ekstensi harus memenuhi hal tersebut.
Jika ekstensi biasanya menyimpan riwayat penjelajahan, jangan simpan riwayat jika berada di jendela penyamaran. Namun, ekstensi dapat menyimpan preferensi pengaturan dari jendela mana pun, penyamaran atau tidak.
Untuk mendeteksi apakah jendela dalam mode penyamaran, dapat memeriksa properti incognito yang relevan dengan tabs.Tab atau objek windows.Window .
<pre>function saveTabData(tab) { if (tab.incognito) { return; } else { chrome.storage.local.set({data: tab.url}); } }</pre>
<a href="https://developer.chrome.com/docs/extensions/mv3/architecture-overview/">Architecture overview - Chrome Developers</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=5e99e2c27e68" width="1" height="1" alt="">

Arsitektur Chrome Extension V3

<blockquote>Secara sederhana, web browser memiliki 4 set tugas antara lain Fetch, Process, Display dan Storage.</blockquote>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VqgJEuT3K17Xmr8-o8ilHw.jpeg"></figure>Web browser merupakan perangkat lunak dengan fungsi yang dimilikinya sebagai penerima, pengakses dan penyaji berbagai informasi di internet.
Browser adalah mesin rendering. Salah satu tugas browser yaitu mengunduh halaman web dan merendernya dengan cara yang dapat dimengerti manusia.
Ketika pengguna memasukkan alamat di bilah browser, browser akan mendownload “dokumen” di URL tersebut dan merendernya.
Secara sederhana terdapat 4 set tugas pada browser:
<ul>
<li>Fetch</li>
<li>Process</li>
<li>Display</li>
<li>Storage</li>
</ul>
<h3>FETCH</h3>
Proses ini memainkan peran penting dalam mengambil data dari server web melalui internet.
<h4>Resolusi DNS</h4>
Setelah user memasukkan URL, browser akan memastikan server mana yang harus disambungkan. Browser akan memanggil server DNS untuk menemukan domain (misalnya, google.com) diterjemahkan menjadi 216.58.207.110, alamat IP yang dapat disambungkan oleh browser.
<h4>HTTP Exchange</h4>
Setelah browser mengindentifikasi server mana yang akan melayani permintaan user, browser akan memulai koneksi TCP dengannya dan memulai pertukaran HTTP.
Proses ini merupakan cara bagi browser untuk berkomunikasi dengan server untuk meminta apa yang dibutuhkan dan server akan mengembalikan data tersebut.
Namun pada proses ini, browser juga akan mencari ketersediaan cache pada memori lokal untuk URL yang diminta. Jika tidak, maka akan membuat paket HTTP dengan nama domain untuk meminta resource web melalui internet.
HTTP merupakan nama protokol paling populer untuk berkomunikasi di web dan sebagian besar browser berkomunikasi melalui HTTP saat berkomunikasi dengan server. Pertukaran HTTP melibatkan client (browser yang kita gunakan) yang akan mengirim Request, dan server yang akan mengembalikan Response.
Misalnya, setelah browser berhasil terhubung ke server google.com, maka browser akan mengirimkan Request yang terlihat seperti ini:
<pre>GET / HTTP/1.1Host: google.comAccept: */*</pre>
<ul>
<li>
GET / HTTP/1.1: baris ini, browser meminta server untuk mengambil dokuman di lokasi /, menambahakan bahwa sisa Request akan mengikuti protokol HTTP/1.1 (bisa juga menggunakan 1.0 atau 2)</li>
<li>
Host: google.com: ini merupakan satu-satunya header HTTP yang wajib ada di HTTP/1.1. karena server mungkin melayani beberapa domain klien (seperti google.com, google.co.uk, dll), pada baris ini menyebutkan bahwa request tersebut untuk host tertentu.</li>
<li>
Accept: */*: header opsional, dimana browser memberi tahu server bahwa ia akan menerima segala jenis response. Server dapat memiliki sumber daya yang tersedia dalam format JSON, XML atau HTML, sehingga dapat memilih format mana yang dibutuhkan.</li>
</ul>
Setelah browser selesai melakakun Request, selanjut server akan mengirimkan Response, yang terlihat seperti ini:
<pre>HTTP/1.1 200 OKCache-Control: private, max-age=0Content-Type: text/html; charset=ISO-8859-1Server: gwsX-XSS-Protection: 1; mode=blockX-Frame-Options: SAMEORIGINSet-Cookie: NID=1234; expires=Fri, 18-Jan-2019 18:25:04 GMT; path=/; domain=.google.com; HttpOnly</pre>
—
<pre>&lt;!doctype html&gt;&lt;html"&gt;......&lt;/html&gt;</pre>
Server memberitahu bahwa request itu berhasil (200 OK) dan menambahkan beberapa header ke response, misalnya, mengiklankan server apa yang memproses request (Server: gws), kebijakan respons tersebut (X-XSS-Protection), dan seterusnya.
Jika situs web yang diminta mengimplementasikan cache, salinan data akan di buat di App Cache atau Service Workers untuk digunakan ketika mengunjungi situs yang sama di waktu berikutnya.
Cache berguna untuk mengurangi waktu response dan menyimpan permintaan jaringan untuk kunjungan selanjutnya.
Proses ini memainkan peran penting dalam pengalaman pengguna. Jika cache tidak digunakan bisa menjadi penghambat dalam kinerja web, karena browser akan menunggu data atau konten jarak jauh tiba. Banyak teknik lain yang dapat digunakan untuk mengurangi dampak ini pada pengalaman pengguna.
Singkatnya pada proses ini klien dan server bertukar informasi dan mereka melakukannya melalui HTTP.
<h3>Process</h3>
Setelah menerima data dari server, yang bertugas selanjutnya yaitu rendering engine, JS engine, dan subsystem backend UI adalah bagian dari proses.
<h4>Rendering engine</h4>
Rendering engine akan memproses data dan menampilkan konten web di layar.
<pre>&lt;!doctype html&gt;&lt;html"&gt;......&lt;/html&gt;</pre>
Di body response, server menyertakan representasi respons sesuai dengan Content-Type header. Pada kasus ini, tipe konten diatur ke text/html, jadi browser mengharapkan markup HTML dalam response — persis seperti yang tercantum di body.
Secara default, hal ini dapat memproses file HTML, XML, dan gambar. Namun dapat extended untuk mengakomodasi bebagai tipe data melalui ekstensi.
Dengan rendering engine, browser akan mengurai HTML. Stylesheet diurai untuk menghasilkan aturan gaya untuk elemen HTML.
Render tree merupakan objek yang menggabungkan HTML dan CSS yang diurai. Setelah render tree dibuat, ia akan memproses tata letak dan painting, lalu menampilkan hasilnya di layar.
Proses painting mencakup filling tata letak dengan atribut gaya seperti warna, latar belakang, dan properti CSS lainnya.
JavaScript Engine
Pada proses ini browser akan mengurai kode JavaScript menjadi kode mesin dan kemudian mengeksekusinya.
Mesin ini mencakup dua kompunen
<ul>
<li>Memory heap</li>
<li>Call stack</li>
</ul>
Memory heap adalah tempat memori yang dialokasikan untuk variabel, fungsi, dan elemen JS lainnya.
Call stack merupakan antrian stack frame atau langkah-langkah berurutan yang dijalankan oleh browser.
JavaScript adalah single-threaded process dan setiap entri atau langkah eksekusi merupakan stack frame.
Mesin ini memiliki beberapa thread secara internal untuk melakukan berbagai tugas. Contoh:
<ul>
<li>Mengambil, menyusun dan menjalankan kode</li>
<li>Profilling thread untuk mengalisis fungsi dan komsumsi waktunya</li>
<li>Mengoptimalkan proses eksekusi</li>
<li>Pengumpul sampah</li>
</ul>
<h3>Display</h3>
Hal ini berkaitan dengan penyajian data kepada pengguna. User Interface dan Browser Engine bertanggung jawab atas penyajian data dan penanganan navigasi pengguna.
User Interface
User interface browser biasanya menyertakan bilah alamat untuk menerima URL web, dan tombol navigasi seperti back, forward, refresh, home dan bookmark.
User Interface berkomunikasi dengan subsistem lain di dalam browser untuk menampikan konten dan bertindak sesuai dengan fungsinya.
Browser Engine
Browser engine merupakan subsistem yang dapat disematkan yang menyediakan high-level interface ke rendering engine.
Hal ini memuat URL yang diberikan dan mendukung tindakan penjelajahan seperti menavigasi forward, back dan reload.
Browser engine juga memungkinkan untuk querying dan memanipulasi pengaturan mesin rendering.
<h3>Storage</h3>
Web browser memiliki sedikit kapasitas penyimpanan untuk melakukan beberapa tindakan, menyimpan data ke cache dan menyimpan data melalui browser untuk melakukan fungsionalitas browser lainnya.
Penyimpanan data
Data persistence dapat dicapai melalui berbagai API browser, beberapa diantaranya yaitu
<ul>
<li>Local storage</li>
<li>Session storage</li>
<li>Cookies</li>
<li>WebSQL</li>
<li>IndexedDB</li>
<li>FileSystem</li>
<li>AppCache</li>
<li>Service Workers</li>
</ul>
Local Storage dan session storage adalah pasangan key value yang dapat menyimpan objek dan fungsi JS apa pun di browser.
Session storage menyimpan data di browser selama sesi situs web aktif. Local storage adalah memory di browser. Data dari local storage akan dipertahankan sampai dihapus atau diubah secara eksplisit oleh pengguna atau kode JavaScript.
Batas penyimpanan session dan local web storage adalah 5MB per objek, dan 50MB per sistem.
Cookies adalah kumpulan data key value yang disimpan di memori browser. Cookies akan dikirim bolak balik antara klien dan server.
WebSQL, IndexDB, dan FileSystem memiliki kemampuan untuk menyimpan data di browser tergantung pada ukuran, kinerja dan kebutuhan.
App Cache menyimpan konten statis situs web dan menyajikan konten User Interface selama network downtime.
Service Worker adalah cara baru Google menyimpan data situs web untuk pengguna offline. Ini memiliki fitur yang signifikan dibandingkan dengan App Cache.
<ul>
<li><a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How browsers work</a></li>
<li><a href="https://www.freecodecamp.org/news/web-application-security-understanding-the-browser-5305ed2f1dac/">How Browsers Work</a></li>
<li><a href="https://hackernoon.com/how-do-web-browsers-work-40cefd2cb1e1">How Do Web Browsers Work? | Hacker Noon</a></li>
</ul>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b8d73d0819d8" width="1" height="1" alt="">