Pembangunan JavaScript asli selepas penjelajah internet

Selamat datang ke bahagian ketiga dan terakhir siri ini, di mana kami akan meneroka persaraan IE lama dan kesan kejadian ini di bidang pembangunan front-end. Setakat ini, kami telah menutup teknologi yang sudah lama dapat dibuang dengan selamat, serta sifat HTML5 dan CSS3 yang kini disokong sepenuhnya dalam penyemak imbas arus perdana. Hari ini, kami akan memberi tumpuan kepada teknologi JavaScript asli dan kandungan lain yang tidak termasuk dalam kategori di atas.

Terima kasih sekali lagi kepada Caniuse.com, ia adalah sumber yang sangat berharga. Saya juga akan mengulangi penafian terakhir:

Artikel ini tidak ada kaitan dengan sama ada untuk menyerahkan keputusan untuk menyokong

lama iaitu

. Anda mesti membuat keputusan sendiri berdasarkan butiran khusus laman web atau aplikasi anda.

Tanpa berlengah lagi, mari kita teruskan!

mata utama

Penggunaan API JavaScript moden: Dengan persaraan Internet Explorer, pemaju kini boleh menggunakan API JavaScript moden (seperti pengekodan BASE64 dan membina gumpalan) secara langsung dalam pelayar arus perdana tanpa polyfilling, dengan itu meningkatkan prestasi dan keserasian.

Keupayaan komunikasi yang dipertingkatkan: Ketersediaan API seperti pemesejan saluran dan websocket dalam pelayar moden menggalakkan komunikasi antara skrip yang lebih cekap dan sambungan berterusan antara pelayar dan pelayan.

• Pengenalan sintaks ES6: Sokongan untuk ciri-ciri ES6 seperti
dan
• untuk pengisytiharan pembolehubah peringkat blok dan populariti fungsi anak panah membolehkan pemaju menulis kod yang lebih bersih dan lebih cekap.
• Keselamatan dan Privasi Pertama: Web Cryptography API dan Dasar Keselamatan Kandungan (CSP) kini disokong sepenuhnya, menyediakan alat yang berkuasa untuk meningkatkan keselamatan aplikasi web. const let Pengoptimuman Prestasi: Ciri -ciri baru seperti API Penglihatan Halaman dan RequestAnimationFrame meningkatkan kecekapan aplikasi web dan mengoptimumkan penggunaan sumber dan prestasi animasi.
• Pembangunan Web Selamat Di Masa Depan: Dengan penyahaktifan Internet Explorer, pemaju dapat memanfaatkan potensi penuh HTML5, CSS3 dan JavaScript tanpa terhad kepada keserasian penyemak imbas warisan, sehingga menjadikannya lebih inovatif dan berpandangan ke hadapan aplikasi web .
JavaScript apis

1. Dalam bahagian ini, kami akan memperkenalkan banyak ciri JavaScript, API, dan ciri -ciri. Apa persamaan mereka? Tiada seorang pun daripada mereka yang boleh digunakan untuk IE lama, memerlukan penggunaan pelbagai polyfills, atau perlu mencapai kesannya melalui pelbagai rangka kerja dan perpustakaan lain, jika boleh. Dalam persekitaran semasa (kelebihan IE11), mereka mempunyai sokongan asli yang dibina ke dalam penyemak imbas, yang bermaksud mereka boleh digunakan secara langsung.

   pengekodan dan penyahkodan base64 (btoa dan atob)

   BASE64 adalah alat yang sangat berguna di web. Ramai daripada anda mungkin menggunakannya untuk membenamkan fon atau imej ke dalam CSS. Satu lagi penggunaan biasa adalah untuk menangani pelbagai sumber yang biasanya mengganggu protokol penghantaran. Contoh yang baik ialah Pengesahan Akses Asas, di mana Nama Pengguna: Pasangan Kata Laluan dibungkus menggunakan Base64 dan kemudian dihantar ke pelayan. Sokongan asli untuk pengekodan/operasi penyahkodan bermakna mereka boleh dilaksanakan dengan lebih cepat. Berikut adalah beberapa sumber pengantar:

   • atob () dan btoa () dokumen pada mdn
   • base64.js polyfill

   Blob Build

   Objek besar atau gumpalan binari adalah koleksi data mentah yang disimpan dalam entiti tunggal dalam sistem pengurusan pangkalan data. Ia boleh menjadi klip audio atau imej dan disimpan dalam format Base64. Atau satu set imej. Dalam banyak kes, medan gumpalan digunakan untuk data yang struktur datanya tidak begitu ketat seperti yang dinyatakan oleh jadual biasa atau skema jadual seperti objek JSON. Ada di antara kamu yang mungkin ingat nenek moyang antara muka gumpalan, iaitu blobbuilder. Walau bagaimanapun, pendekatan ini telah ditutup dan sangat disyorkan bahawa semua operasi gumpalan perlu dilakukan melalui antara muka baru.

   yang paling penting, kerana koleksi ini sangat mirip dengan fail, antara muka asli objek Blob telah digunakan sebagai asas untuk antara muka fail (). Oleh itu, terdapat ciri yang bagus yang dipanggil "URL Blob" yang membolehkan pemaju membuat URL untuk objek gumpalan yang boleh digunakan di mana sahaja fail boleh digunakan. Dengan itu, sokongan asli kini meliputi semua pelayar arus perdana, yang sangat dihargai.

   • gumpalan pada mdn
   • url gumpalan pada mdn
   • Pengenalan kepada JavaScript Blob dan Fail Interfaces

   Pemesejan saluran

   Biasanya, dua skrip yang berjalan dalam konteks penyemak imbas yang berbeza dilarang berkomunikasi antara satu sama lain untuk mengelakkan banyak perangkap keselamatan. Walau bagaimanapun, kadang -kadang komunikasi tersebut bukan sahaja diperlukan, tetapi benar -benar diperlukan. Di sinilah API Pemesejan Saluran dimainkan. Antara muka ini membolehkan dua skrip kami berkomunikasi antara satu sama lain melalui saluran paip dua arah. Ia seperti memberi semua orang walkie-talkie di saluran yang sama. Sangat pandai, bukan?

   • Pengenalan kepada pemesejan web HTML5 di dev.Opera
   • MessageChannel pada mdn

   pembolehubah peringkat tetap dan blok

   const dan biarkan dua cara baru untuk menentukan data dalam ES6. Walaupun VAR mentakrifkan pembolehubah yang mempunyai skop global atau fungsi, kandungan baru mempunyai skop peringkat blok. Ini bermakna skop pembolehubah yang dibuat dengan const dan biarkan terhad kepada pasangan pendakap yang menentukannya.

   Walaupun LET mentakrifkan pembolehubah (kecuali skop) yang berkelakuan sama seperti pemboleh ubah klasik, pemalar (const) adalah rujukan baca sahaja kepada nilai. Ia tidak boleh ditugaskan semula, tidak boleh ditakrifkan semula, dan tidak dapat berkongsi nama yang sama dengan pembolehubah atau fungsi lain dalam julat yang sama. Satu -satunya pengecualian adalah apabila pemalar adalah objek dengan sifatnya sendiri. Ciri -ciri ini tidak dilindungi oleh perubahan dan berkelakuan seperti pembolehubah biasa.

   Dengan yang dikatakan, lihat cara menggunakan pembolehubah tetap dan blok dengan betul dalam kod anda:

   • malar pada mdn
   • biarkan
   pada mdn
   • Persediaan pada SitePoint ECMAScript 6: Let and Const
   • wes bos 'es6 biarkan vs const variable

   Pembalakan konsol

   Kebanyakan pemaju front-end akan bersetuju bahawa konsol web adalah salah satu alat yang paling berguna di tangan apabila skrip berkelakuan tidak normal. Walau bagaimanapun, Internet Explorer pada dasarnya lambat untuk mengintegrasikannya, dan hanya versi 10 mula memberikan sokongan penuh. Sekarang, dengan persaraan yang lama iaitu , tidak ada yang dapat menghalang kita daripada memanfaatkan ciri ini. Jika anda perlu menyegarkan pengetahuan anda dan juga mencari cara baru untuk menggunakan konsol, lihat spesifikasi berikut:

   Konsol pada MDN
   Beberapa perkongsian sumber sumber
   Perkongsian Sumber Cross-Origin (CORS) adalah API HTML5 yang membolehkan permintaan sumber dari luar domainnya sendiri. Ia menerangkan satu set tajuk HTTP yang membolehkan pelayar dan pelayan meminta sumber terpencil apabila memberikan keizinan tertentu. Sumber -sumber berikut adalah titik permulaan yang baik untuk belajar bagaimana menggunakan ciri ini dengan betul:
   Kawalan Akses DOM menggunakan Perkongsian Sumber Sumber Cross-Origin di Dev.Opera
   Kawalan Akses HTTP (CORS) pada MDN
   pemahaman yang mendalam mengenai CORS di Sitepoint
   Web Cryptography API
   Keselamatan dan privasi adalah dua ciri yang paling dicari dalam mana -mana aplikasi hari ini, yang bermaksud penyulitan yang baik (dan cepat) sangat bernilai. Sekarang semua pelayar arus perdana secara konsisten menyokong API Cryptography Web, kecuali IE11 (yang melaksanakan spesifikasi versi lama) dan safari (yang memerlukan awalan crypto.webkitsubtle). Nasib baik, beberapa fungsi tertentu, seperti penjanaan nilai rawak, dilaksanakan dengan lebih baik. Oleh itu, lebih mudah dari sebelumnya untuk melaksanakan unsur -unsur yang disulitkan menggunakan sokongan asli. Berikut adalah beberapa panduan bagaimana untuk melakukan ini dengan betul:
   objek crypto pada mdn
   getRandomvalues ​​pada mdn
   API Cryptography Web untuk Pelayar Legacy di GitHub Shim
   Pengantarabangsaan
   Kelaziman akses internet hari ini bermakna pelawat ke laman web anda boleh datang dari seluruh dunia. Oleh kerana orang mempercayai perkara yang lebih biasa, lebih baik untuk membentangkan semua maklumat dalam bahasa mereka dan dalam format yang digunakannya. Di sinilah anda memerlukan pengantarabangsaan (juga dikenali sebagai I18N) dan penyetempatan (atau L10N). Adakah bunyi ini seperti karut? Mari sebut Aurelio de Rosa dalam artikelnya tentang bagaimana untuk mencapai pengantarabangsaan (i18n) dalam javascript:

   Pengantarabangsaan (juga dikenali sebagai I18N) adalah proses mencipta atau menukar produk dan perkhidmatan supaya mereka dapat dengan mudah menyesuaikan diri dengan bahasa dan budaya tempatan tertentu. Penyetempatan (juga dikenali sebagai L10N) adalah proses menyesuaikan perisian antarabangsa untuk rantau atau bahasa tertentu. Dalam erti kata lain, pengantarabangsaan adalah proses menyesuaikan perisian anda untuk menyokong pelbagai budaya (format mata wang, format tarikh, dll.), Walaupun penyetempatan adalah proses melaksanakan satu atau lebih budaya.

   Sokongan penyemak imbas sedikit lebih baik daripada pada awal tahun ini, dan Safari v10 menyertai pangkat pada bulan September. Adakah kedengarannya menarik? Berikut adalah beberapa sumber untuk membuat anda berada di landasan yang betul:
   • API Antarabangsa pada MDN
   • JavaScript Internationalisation API - PENGENALAN Singkat
   • bagaimana untuk mencapai pengantarabangsaan dalam javascript (i18n)

   Pemprosesan pertanyaan media

   Reka bentuk web responsif adalah standard semasa untuk laman web yang cekap, dan ciri utama yang memungkinkan adalah kewujudan pertanyaan media. MatchMedia memperkenalkan pertanyaan media dari CSS ke JavaScript, menyediakan pemaju dengan fleksibiliti yang lebih besar untuk mengoptimumkan kandungan di pelbagai peranti. Contoh yang baik ialah mengendalikan perubahan dari mod potret ke mod landskap dan mod terbalik untuk telefon bimbit dan tablet. Walaupun terdapat API yang mengendalikan pengesanan orientasi peranti, kebanyakan sokongan penyemak imbas adalah sebahagian, dan hanya Microsoft Edge memberikan sokongan penuh. Berikut adalah beberapa sumber pengenalan mengenai topik ini:

   • pertanyaan media ujian pada mdn
   • window.matchmedia pada mdn
   • Cara Menggunakan Pertanyaan Media di JavaScript di Sitepoint

   Sumber Sumber Media

   Sambungan Sumber Media (MSE) menambah fungsi tambahan kepada elemen video dan audio tanpa menggunakan plugin. Ini memberikan anda streaming media adaptif, streaming masa nyata, video jahitan dan penyuntingan video. YouTube telah menggunakan MSE dalam pemain HTML5 sejak September 2013. Sokongan penyemak imbas juga agak baik, hanya iOS Safari dan Opera Mini kekurangan ciri ini. IE11 disokong sepenuhnya hanya apabila digunakan pada Windows 8. Malangnya, pengguna IE11/Win7 tidak boleh mendapat manfaat daripada teknologi ini. Sama ada anda hanya ingin tahu atau benar -benar mahu mula menggunakan API ini, anda akan mendapati sumber -sumber berikut sangat berguna:

   • MediaSource API di MDN
   • Pelanjutan sumber media pada MSDN
   • HTML5 Media Sumber Extension: Membawa video pengeluaran ke web (Smashing Magazine)

   Observer Mutational

   Aplikasi JavaScript menjadi semakin kompleks setiap hari. Sebagai pemaju, anda perlu mengawal perubahan yang berlaku pada halaman, terutamanya apabila pokok Dom berubah atau "bermutasi". Keperluan untuk pemantauan semacam ini bukanlah sesuatu yang baru, tetapi sebenarnya ada penyelesaian - peristiwa mutasi. Masalah dengan antara muka ini adalah bahawa sebagai peristiwa, kedua -duanya segerak (dicetuskan apabila panggilan dan boleh menghalang peristiwa lain daripada dicetuskan) dan juga mesti ditangkap atau menggelegak melalui DOM. Ini seterusnya mencetuskan peristiwa -peristiwa lain, melampaui benang JavaScript dan menghasilkan kegagalan keseluruhan cascade dalam beberapa kes khas, menyebabkan penyemak imbas itu terhempas.

   Oleh itu, peristiwa mutasi telah ditolak dan digantikan dengan pemerhati mutasi. Anda mungkin bertanya, apa perbezaannya? Pertama dan yang paling penting, pemerhati tidak segerak. Mereka tidak akan menghalang skrip anda daripada berjalan. Mereka tidak dicetuskan pada setiap mutasi, tetapi diluluskan batch selepas aktiviti utama selesai. Lebih penting lagi, anda boleh menyempurnakan pemerhati untuk memerhatikan semua perubahan pada nod atau hanya memerhatikan perubahan pada kategori tertentu (seperti perubahan kepada hanya sublists atau hanya atribut, dll.). Gunakan sumber -sumber berikut untuk mula belajar bagaimana melakukan ini:
   • MutationObserver pada mdn
   • memahami pemerhati mutasi
   • Varian baru yang sedang berkembang di SitePoint

   Keterlihatan halaman

   Pelayaran tab telah mengubah cara kita berinteraksi dengan rangkaian. Ia tidak biasa bagi ramai orang untuk membuka puluhan halaman pada masa yang sama. Setiap halaman melakukan tindakannya sendiri, menjalankan skripnya, memuat turun sumber yang dimilikinya, dan banyak lagi. Walaupun hanya satu tab yang boleh diaktifkan pada satu masa, semua halaman terbuka menggunakan masa CPU dan jalur lebar. Sesetengah aplikasi boleh menghantar dan menerima kemas kini secara berkala melalui sambungan. Tetapi jika anda tidak membuka aplikasi dalam tab Aktiviti, adakah ia perlu dikemas kini setiap x saat di latar belakang? Nampaknya sedikit sisa, bukan? Terutama dalam peranti mudah alih dan pelan data, setiap sumber adalah berharga.

   Ini adalah di mana API Penglihatan Halaman dimainkan. Antara muka ini membolehkan pemaju mengetahui sama ada aplikasi mereka berada di tab aktif atau di latar belakang. Mari kita ambil permohonan yang saya sebutkan tadi yang melakukan kemas kini sebagai contoh. Menggunakan API Keterlihatan Halaman, anda boleh mengesan apabila aplikasi berada di latar belakang dan kemudian bukannya melakukan kemas kini setiap 5 atau 10 saat, anda melakukannya setiap 60 saat atau kurang. Sebaik sahaja halaman dapat dilihat lagi, anda boleh beralih ke kadar kemas kini biasa. Sangat sejuk, bukan?

   Jadi, tunggu apa lagi? Lihat panduan berikut untuk mula melancarkan aplikasi anda untuk penglihatan halaman. Pengguna anda akan mengucapkan terima kasih:

   • Page Visibility API di MDN
   • Pengenalan kepada API Penglihatan Halaman di SitePoint

   acara penukaran halaman

   Adakah anda pernah menggunakan borang web yang muncul apabila anda cuba meninggalkan atau menutup halaman, mendorong anda agar anda mempunyai data yang tidak diselamatkan? Ini adalah perkara biasa hari ini di halaman di mana anda menukar tetapan, butiran profil, dan banyak lagi. Bagaimana skrip di halaman tahu anda akan pergi? Mereka mendengar acara Pagehide.

   Pagehide dan halaman rakan -rakannya adalah protagonis utama peristiwa penukaran halaman. Kami telah melihat di atas apa yang pertama digunakan terutamanya. Tujuan utama halaman adalah untuk menentukan sama ada halaman dimuatkan dari cache atau terus dari pelayan. Ini bukan penggunaan yang paling biasa, tetapi jika anda memerlukan ciri -ciri sama ada, lihat sumber berikut:

   • Pageshow pada mdn
   • Pagehide pada mdn

   RequestAnimationFrame

   Animasi di web telah datang jauh dari awal <marquee></marquee> dan <blink></blink> untuk animasi GIF, kesan jQuery, kepada CSS, SVG, kanvas dan animasi WebGL semasa. Satu pemalar semua kaedah ini adalah keperluan untuk mengawal aliran animasi dan menjadikannya lancar mungkin.

   Kaedah awal menggunakan SetInterval dan SetTimeout untuk mengawal langkah -langkah animasi. Masalahnya ialah hasilnya tidak konsisten, dan animasi biasanya kasar. Inilah sebabnya mengapa antara muka baru direka - RequestAnimationFrame. Kelebihan utama pendekatan ini adalah bahawa penyemak imbas secara bebas dapat memadankan permintaan ke kitaran lukisannya sendiri, dengan itu melicinkan dengan ketara animasi. Bersama -sama dengan rakan sejawatnya, kedua -dua kaedah ini adalah asas animasi JavaScript moden.

   Seperti biasa, berikut adalah beberapa sumber yang akan membuat anda mula menguasai ciri ini.
BatalAnimationFrame pada mdn
animasi mudah menggunakan requestanimationframe di sitepoint
Tonton di SitePoint: Gunakan RequestAnimationFrame untuk ujian prestasi
Timed API
Prestasi dalam talian adalah topik hangat hari ini, dan semua orang berusaha sebaik mungkin untuk mengurangkan sumber, mengoptimumkan skrip dan memanfaatkan semua alat yang mereka ada. Terdapat dua cara utama untuk menyelesaikan masalah ini: prestasi rangkaian (kelajuan penghantaran tapak dan sumber) dan prestasi pengguna (kelajuan pelaksanaan aplikasi sendiri).
Prestasi rangkaian disampaikan oleh dua API: masa navigasi dan masa sumber. Mereka semua menyediakan semua jenis maklumat yang berkaitan dengan prestasi rangkaian, seperti DNS, CDN, permintaan dan masa tindak balas, dll. Satu -satunya perbezaan ialah masa navigasi mensasarkan halaman HTML itu sendiri, sementara masa sumber mengendalikan semua sumber lain (imej, skrip, media, dll.).
Dari segi prestasi pengguna, kami mempunyai API: Masa Pengguna. API ini mengendalikan dua konsep utama, yang dipanggil Mark (timestamp yang sangat terperinci) dan mengukur (selang masa antara dua tanda). Gunakan konsep -konsep ini untuk mengukur kelajuan berjalan kod dan mengenal pasti di mana ia perlu dioptimumkan. Malangnya, Safari masih tidak menyokong API ini, jadi polyfill mungkin diperlukan.
Menguasai penggunaan antara muka ini adalah penting untuk memastikan prestasi optimum laman web atau aplikasi anda. Inilah sebabnya kami memberikan anda beberapa bahan pembelajaran:

Masa navigasi
• API masa navigasi pada mdn
  menganalisis pemuatan halaman menggunakan API pemasaan navigasi di sitepoint
  API Masa Navigasi di SitePoint: Cara Menganalisis Page Loading
  • dengan cekap
Masa Sumber
• API Masa Sumber di MDN
  Ukur Prestasi Rangkaian Menggunakan API Masa Sumber di Google Developer Blog
  Pengenalan kepada API Masa Sumber di SitePoint
Masa Pengguna
• Cari API Masa Pengguna di SitePoint
  API Masa Pengguna di HTML5ROCKS
  pengguna-timing-rum.js dan usertiming.js polyfill pada github

Arahan tipikal

tatasusunan yang ditaip javascript adalah objek seperti array dan menyediakan cara untuk mengakses data binari mentah. Untuk fleksibiliti dan kecekapan maksimum, pelaksanaan dilakukan di sepanjang dua konsep: penampan (blok data mentah) dan pandangan (menyediakan konteks yang dapat mentafsir data penampan). Terdapat banyak API web yang menggunakan tatasusunan yang ditaip, seperti WebGL, Canvas 2D, XMLHTTPREQUEST2, Fail, Sumber Media, atau WebSockets binari. Jika kod anda mengendalikan teknik tersebut, anda mungkin berminat dengan sumber -sumber berikut:

array taip javascript pada mdn
Arahan biasa: Data binari dalam penyemak imbas (html5rocks)

WebSockets

Kami membincangkan pemesejan saluran lebih awal dan bagaimana ia menjadikan dua skrip berbeza berkomunikasi secara langsung antara satu sama lain. WebSockets serupa dengan ini, dengan lebih banyak ciri. Gunakan API ini untuk membuat saluran komunikasi yang berterusan antara penyemak imbas dan pelayan web.

Seperti http, protokol WebSocket juga mempunyai dua versi: tidak selamat (ws: // ...) dan selamat (wss: // ...). Ia juga menganggap pelayan proksi dan firewall, di mana terowong dibuka. Malah, sambungan WebSocket bermula dengan sambungan HTTP biasa, memastikan keserasian dengan infrastruktur sedia ada.

WebSockets adalah teknologi yang menarik (mereka juga mempunyai laman web yang berdedikasi) dan banyak yang perlu dipelajari. Untuk membantu anda memulakan, berikut adalah beberapa sumber terpilih:

• mengenai WebSocket di WebSocket.org
• WebSockets pada mdn
• Pengenalan kepada HTML5 WebSockets API di SitePoint

Pekerja Web

Secara lalai, semua tugas JavaScript dijalankan dalam benang yang sama. Ini bermakna bahawa semua skrip dalam halaman mesti berkongsi giliran masa pemprosesan yang sama. Ini baik dan mudah apabila pemproses hanya mempunyai satu teras. Walau bagaimanapun, CPU moden mempunyai sekurang -kurangnya dua teras, dan beberapa model bahkan mencapai 4, 6 atau 8 teras. Bukankah itu bagus jika beberapa tugas dapat dipindahkan ke benang berasingan yang dapat diproses oleh biji tambahan yang ada? Inilah sebabnya mengapa pekerja web dicipta.

Menggunakan API Pekerja Web, pemaju boleh mewakilkan fail skrip yang dinamakan kepada pekerja yang berjalan dalam benang berasingan. Pekerja hanya bertindak balas terhadap skrip yang menciptanya, berkomunikasi dalam dua arah melalui mesej, boleh menjalankan panggilan XMLHTTPREQUEST dan tidak berinteraksi dengan beberapa kaedah lalai dan sifat objek DOM atau Window. Dalam kategori pengecualian, kita boleh menyebut mekanisme penyimpanan data seperti WebSockets (yang boleh menetapkan pengurusan sambungan WebSocket kepada pekerja) atau IndexedDB. Mempunyai pembantu anda sendiri untuk mengendalikan tugas sekunder, sementara benang utama memberi tumpuan kepada menjalankan keseluruhan aplikasi, tidak ada yang lebih baik daripada ini.

untuk memulakan dengan ciri ini (termasuk senarai fungsi dan kelas yang tersedia untuk pekerja web), lihat sumber -sumber berikut:

• API Pekerja Web di MDN
• fungsi dan kelas yang tersedia untuk pekerja web di MDN
• javascript threading menggunakan pekerja web html5 di sitepoint

XMLHTTPREQUEST Ciri -ciri Lanjutan

Penggunaan XMLHTTPREQUEST menunjukkan era pembangunan web baru. Data kini boleh ditukar antara penyemak imbas dan pelayan tanpa memuatkan semula keseluruhan halaman. Ajax adalah standard baru yang membolehkan semua orang mempunyai aplikasi halaman tunggal.

Teknologi berguna ini akan dibangunkan lagi, yang normal. Ini adalah bagaimana XHR mendapat ciri -ciri baru, seperti muat naik fail, pemindahan maklumat kemajuan, atau menghantar data borang secara langsung. Semua ciri -ciri ini (sedikit pengecualian dalam kes IE11 atau lebih tua Android) disokong oleh pelayar arus perdana selepas bersara. Untuk maklumat lanjut, sila semak sumber -sumber berikut:

• formdata pada mdn
• memudahkan Ajax menggunakan antara muka HTML5 FormData di SitePoint

2. Fungsi lain

Web moden lebih daripada HTML, CSS dan JavaScript. Terdapat banyak wira yang tidak kelihatan (dan tidak diprediksi) di belakang tabir yang bekerja keras untuk membuat pengalaman dalam talian kami seberapa besar mungkin. Di bawah ini, kita akan membincangkan beberapa ciri -ciri ini yang, seperti di atas, tidak boleh digunakan pada pelayar IE yang lebih tua (mereka terkenal dengan kelemahan keselamatan mereka dan kekurangan sokongan untuk ciri -ciri moden). pemuatan javascript yang tidak menyekat menggunakan "async" dan "menangguhkan"

Setiap pemaju web mengetahui bahawa skrip adalah "beban menyekat" dan akan menyekat seluruh halaman sehingga ia dimuatkan. Kita semua ingat cadangan memuatkan jQuery sebelum

. Walau bagaimanapun, dalam hal aplikasi halaman tunggal, pendekatan ini tidak berguna kerana semua tingkah laku laman web didorong oleh JavaScript. Ini membawa kita kembali ke titik permulaan.

Tetapi sebenarnya adalah bahawa dalam kebanyakan kes laman web atau aplikasi anda hanya memerlukan sebahagian daripada semua JavaScript yang dimuatkan. Selebihnya akan diperlukan kemudian, atau mereka melakukan operasi yang tidak menjejaskan DOM. Cara yang jelas adalah untuk memuatkan hanya skrip utama dengan cara yang biasa, dan memuatkan selebihnya dengan cara yang tidak menjejaskan permohonan secara negatif. Malah, terdapat dua kaedah pemuatan sedemikian.

Kaedah pertama adalah menggunakan atribut penangguhan, yang digunakan untuk menandakan skrip yang tidak menjejaskan DOM dan bertujuan untuk dilaksanakan selepas menguraikan dokumen. Dalam kebanyakan kes, skrip ini mengendalikan interaksi pengguna, jadi mereka boleh dimuatkan dengan selamat dengan cara ini. Kaedah kedua menggunakan atribut Async dan menandakan skrip yang, semasa dimuatkan selari, akan dilaksanakan dengan segera selepas muat turun. Walau bagaimanapun, tidak dijamin bahawa perintah pemuatan adalah sama dengan perintah pelaksanaan.

Semua manfaat kedua -dua parameter ini, mereka menjadi alat penting untuk meningkatkan laman web dan prestasi aplikasi. Semak sumber berikut untuk maklumat lanjut mengenai bagaimana dan bila menggunakan teknologi ini:

Keluarkan JavaScript menyekat JavaScript di Google Developer

Memuatkan JavaScript yang tidak menyekat menggunakan async HTML5 dan menangguhkan di SitePoint
• Dasar Keselamatan Kandungan

Dari awal, keselamatan di web dibina di sekitar model "homolog", yang bermaksud bahawa hanya skrip dari domain yang sama dapat berinteraksi dengan halaman tertentu. Walau bagaimanapun, dari masa ke masa, kita perlu mengintegrasikan skrip pihak ketiga ke halaman kami: perpustakaan JavaScript dari CDN, widget media sosial dari Facebook, Google atau Twitter, dan kes-kes lain yang serupa. Ini bermakna kami membuka pintu dan membenarkan skrip "tetamu" masuk ke halaman metafora kami. Masalahnya timbul apabila skrip jahat juga menyelinap masuk dan dilaksanakan seperti skrip lain-kaedah serangan yang kita semua tahu, yang dipanggil skrip lintas tapak atau XSS.

Strategi Keselamatan Kandungan adalah senjata utama terhadap XSS. Mekanisme ini mengandungi satu set dasar dan arahan yang menentukan skrip mana yang dibenarkan untuk dilaksanakan, di mana sumber boleh dimuatkan, sama ada gaya atau skrip sebaris boleh dijalankan, dan sebagainya. CSP didasarkan pada ahli putih, yang bermaksud bahawa secara lalai semuanya ditolak dan hanya sumber yang ditentukan dapat diakses. Ini bermakna apabila peraturan itu disesuaikan dengan halus, ia tidak akan dilaksanakan walaupun skrip jahat dimasukkan ke dalam laman web kami.

Berikut adalah beberapa sumber yang dapat membantu anda memahami mekanisme ini dengan lebih baik:

• Rujukan Dasar Keselamatan Kandungan
• Gunakan dasar keselamatan kandungan di sitepoint untuk meningkatkan keselamatan web
• Pengenalan kepada dasar keselamatan kandungan pada html5rocs

protokol http/2

Dari awal, web telah dijalankan pada protokol HTTP. Walau bagaimanapun, sementara yang pertama telah berkembang dengan pesat, HTTP tetap sama. Dalam ekosistem kompleks laman web dan aplikasi moden, HTTP boleh menjadi hambatan prestasi. Sudah tentu, terdapat beberapa teknik dan amalan yang dapat mengoptimumkan proses ini, tetapi hanya banyak yang dapat dilakukan.

Ini adalah mengapa lelaran kedua protokol telah dibangunkan, yang dipanggil HTTP/2, yang berdasarkan protokol SPDY Google. Ia telah diluluskan pada bulan Februari 2015 dan spesifikasi dikeluarkan sebagai RFC 7540 pada Mei 2016. Setakat ini, penyemak imbas arus perdana menyokong HTTP/2 hanya melalui sambungan yang disulitkan, dan kemungkinan besar ia akan tetap seperti itu untuk masa depan yang boleh dijangka untuk menggalakkan pemilik tapak beralih ke HTTPS.

pengangkatan http/2 bukan sekadar mengubah beberapa tetapan konfigurasi. Beberapa amalan terbaik untuk meningkatkan prestasi HTTP boleh menjejaskan prestasi pada HTTP/2. Untuk menentukan sama ada laman web anda bersedia menggunakan HTTP/2, anda boleh merujuk sumber berikut:

• Bersedia untuk http/2: Panduan untuk pereka dan pemaju web (Smashing Magazine)
• bagaimana http/2 mengubah amalan terbaik untuk prestasi web (blog relik baru)
• http/2 untuk pemaju web (Blog Cloudflare)

Tips Sumber: Prefetch

Prestasi web adalah topik hangat hari ini, dan untuk alasan yang baik. Oleh kerana semua kakitangan di lapangan tahu, sebahagian besar masa pemuatan halaman diambil oleh muat turun sumber. Bukankah itu bagus jika anda boleh menggunakan masa selepas halaman memuatkan sumber untuk langkah -langkah seterusnya? Inilah yang diminta oleh sumber.

Prompt sumber adalah satu siri arahan yang memberitahu penyemak imbas untuk menyediakan sumber khusus yang diperlukan pada masa akan datang. Senarai ini mengandungi lima arahan seperti berikut:

• dns-prefetch
• preconnect
• prefetch
• preload
• Prerender

dari lima pilihan yang mungkin, satu -satunya dengan sokongan penyemak imbas yang baik pada masa ini adalah prefetch. Prompt ini memberitahu penyemak imbas kepada dokumen cache yang pengguna mungkin meminta selepas halaman semasa. Ini mengehadkan penggunaannya kepada unsur -unsur yang boleh di -cache. Menggunakannya dengan jenis sumber lain tidak akan berfungsi.

Jika anda berminat dalam topik ini, berikut adalah beberapa sumber yang memberikan maklumat lanjut:

• Artikel Tips Sumber pada Sederhana
• prefetch, preload, pratonton pada css-tricks
• Petua Sumber di KeyCdn Blog

Keselamatan Transmisi Ketat

HTTPS menjadi standard pelayaran baru, dan lebih banyak lagi laman web hanya menerima sambungan yang selamat. Sambungan biasa (pada HTTP) biasanya diarahkan ke versi HTTPS dan perkara -perkara seperti biasa. Walau bagaimanapun, pendekatan ini terdedah kepada serangan "Man-in-the-Middle", di mana pengalihan sebaliknya berlaku pada klon spoofed laman web yang anda mahukan (biasanya laman web perbankan) untuk mencuri kelayakan log masuk anda.

Ini adalah di mana tajuk keselamatan penghantaran yang ketat dimainkan. Kali pertama anda menyambung ke laman web yang dikehendaki menggunakan HTTPS, tajuk akan dihantar ke penyemak imbas. Kali berikutnya anda menyambung, walaupun anda hanya menggunakan versi HTTP URL, penyemak imbas akan terus ke versi HTTPS tanpa melalui kitaran redirect. Oleh kerana tiada sambungan ditubuhkan pada HTTP, serangan yang diterangkan di atas tidak akan berlaku.

Untuk maklumat lanjut mengenai pengepala keselamatan yang ketat, sila lihat laman web berikut:

http keselamatan penghantaran ketat pada mdn

nisbah pixel peranti

window.devicepixelratio adalah harta baca sahaja yang mengembalikan nisbah saiz (menegak) piksel fizikal pada peranti paparan semasa ke saiz piksel CSS. Dengan cara ini, pemaju dapat mengesan skrin berkepadatan tinggi (seperti paparan retina Apple atau skrin Android mewah). Apabila digunakan dengan pertanyaan media dan Matchmedia (kami dibincangkan di atas), harta ini membolehkan sumber yang dioptimumkan untuk pengalaman terbaik.

window.devicepixelratio pada mdn

trek teks video web

Trek teks video web (atau Webvtt) adalah format yang digunakan untuk menandakan sari kata teks sumber multimedia. Ia digunakan dengan elemen HTML5

dan membolehkan untuk menambah sari kata, terjemahan, tajuk atau penerangan kepada aset media (audio atau video) secara serentak. Kehadiran maklumat teks ini menjadikan sumber media lebih mudah untuk diakses. <track></track>

Untuk arahan bagaimana untuk memulakan dengan ciri ini, sila lihat sumber -sumber berikut:

webvtt pada mdn
Pengenalan kepada Webvtt dan
• pada dev.Opera <track></track>
pemula elemen trek pada html5rocs

Ringkasan

Kami ada di sini, pada akhir siri ini, yang bermula dengan senaman intelektual yang mudah: "

old ie hilang! Mari kita meraikan! (... beberapa jam kemudian ... ...) apa yang perlu dilakukan sekarang ? ". Kami meliputi pelbagai topik, dari teknik dan amalan yang tidak lagi diperlukan untuk semua yang baru yang kini kami bebas lakukan tanpa polyfill, sama ada HTML, CSS atau JavaScript asli. Kami juga menyentuh pelbagai topik seperti pengoptimuman prestasi dan keselamatan yang dipertingkatkan.

Sekiranya anda memulakan refactoring semua kod anda sekarang? Mungkin tidak. Keputusan sedemikian mesti dibuat berdasarkan keseimbangan antara kos yang direkabentuk dan kos hutang teknikal. Walau bagaimanapun, jika anda memulakan projek baru, pastikan untuk membinanya untuk masa depan, bukan untuk masa lalu.

Soalan Lazim (Soalan Lazim) mengenai Pembangunan JavaScript asli selepas persaraan Internet Explorer

Apakah kepentingan pembangunan JavaScript asli selepas persaraan Internet Explorer?

Pembangunan JavaScript asli selepas Internet Explorer adalah kritikal kerana ia membolehkan pemaju membuat aplikasi web yang lebih cekap dan cekap. Dengan penyahaktifan Internet Explorer, pemaju tidak lagi terhad kepada masalah kekangan dan keserasian yang biasanya dikaitkan dengan penyemak imbas itu. Mereka kini boleh menggunakan keupayaan penuh JavaScript, termasuk ciri dan kemas kini terkini, untuk membina aplikasi web yang lebih dinamik, interaktif dan mesra pengguna.

Bagaimana untuk membolehkan JavaScript dalam penyemak imbas saya?

Membolehkan JavaScript dalam penyemak imbas adalah proses yang mudah. Bagi kebanyakan penyemak imbas, anda boleh mencari pilihan untuk membolehkan atau melumpuhkan JavaScript dalam menu Tetapan atau Keutamaan. Biasanya, ini melibatkan menavigasi ke bahagian "keselamatan" atau "privasi" dan mencari pilihan yang berkaitan dengan JavaScript. Pastikan untuk membolehkannya untuk pengalaman melayari yang lebih baik.

Apakah perbezaan antara Internet Explorer dan JavaScript dalam pelayar lain?

Ya, terdapat perbezaan yang signifikan dalam bagaimana JavaScript berfungsi di Internet Explorer dan pelayar lain. Internet Explorer mempunyai enjin JavaScript yang berbeza, yang sering membawa kepada isu dan batasan keserasian. Pelayar moden seperti Chrome, Firefox, dan Safari menggunakan enjin JavaScript yang lebih maju yang menyokong ciri dan piawaian JavaScript terkini, yang meningkatkan prestasi dan mengurangkan masalah keserasian.

Apakah faedah menggunakan JavaScript asli dan bukannya perpustakaan atau kerangka?

Menggunakan JavaScript asli mempunyai banyak faedah berbanding menggunakan perpustakaan atau kerangka. Ia membolehkan prestasi yang lebih baik kerana tidak ada overhead pemuatan dan penguraian kod yang tidak perlu. Ia juga menyediakan lebih banyak kawalan ke atas kod, kerana pemaju tidak terikat oleh perpustakaan atau kerangka tertentu. Di samping itu, pemahaman dan menggunakan JavaScript asli dapat memberi anda pemahaman yang lebih mendalam tentang bahasa dan ciri -cirinya.

Bagaimanakah melumpuhkan Explorer Internet mempengaruhi pembangunan JavaScript?

Deaktivasi Internet Explorer mempunyai kesan yang signifikan terhadap pembangunan JavaScript. Pemaju tidak lagi perlu menulis kod tambahan atau berbeza untuk memastikan keserasian dengan Internet Explorer. Ini membawa kepada proses pembangunan yang lebih cekap dan keupayaan untuk memanfaatkan fungsi penuh JavaScript. Ia juga membawa kepada pengalaman pengguna yang lebih konsisten di seluruh pelayar.

Apakah beberapa ciri terkini yang boleh saya gunakan JavaScript dalam pembangunan?

JavaScript sentiasa dikemas kini dan telah menambah ciri dan penambahbaikan baru. Beberapa ciri terkini termasuk Async/menunggu untuk mengendalikan operasi asynchronous, sintaks yang dilanjutkan untuk memperluaskan array atau objek lain yang boleh dimakan, dan fungsi anak panah untuk sintaks fungsi yang lebih ringkas. Ciri -ciri ini dapat meningkatkan perkembangan JavaScript anda dan membolehkan anda menulis kod yang lebih cekap dan mudah dibaca.

Bagaimana untuk memastikan kod JavaScript saya serasi dengan semua penyemak imbas?

Memastikan keserasian penyemak imbas adalah aspek penting dalam pembangunan JavaScript. Salah satu cara untuk mencapai matlamat ini ialah menggunakan pengesanan ciri, yang melibatkan memeriksa sama ada penyemak imbas pengguna menyokong ciri sebelum menggunakannya. Pendekatan lain ialah menggunakan Polyfill, skrip yang menyediakan fungsi yang lebih baru untuk pelayar yang lebih tua yang tidak menyokong mereka.

Apakah masa depan pembangunan JavaScript selepas Internet Explorer bersara?

Masa depan pembangunan JavaScript selepas Internet Explorer bersara kelihatan menjanjikan. Dengan penyahaktifan Internet Explorer, pemaju kini boleh memberi tumpuan kepada memanfaatkan keupayaan penuh JavaScript tanpa perlu risau tentang isu keserasian. Ini digabungkan dengan kemas kini yang berterusan dan penambahbaikan bahasa, mengadakan masa depan di mana JavaScript lebih cekap, lebih berkuasa dan lebih serba boleh.

Apakah sumber yang baik untuk mempelajari lebih lanjut mengenai pembangunan JavaScript asli?

Terdapat banyak sumber yang hebat untuk mengetahui lebih lanjut mengenai pembangunan JavaScript asli. Beberapa platform dalam talian yang popular termasuk Rangkaian Pemaju Mozilla (MDN), FreeCodeCamp, dan Codecademy. Platform ini menyediakan panduan dan tutorial yang komprehensif mengenai JavaScript, yang meliputi segala -galanya dari asas -asas kepada topik yang lebih maju.

bagaimana untuk debug kod JavaScript secara berkesan?

Debugging adalah sebahagian daripada pembangunan JavaScript. Kebanyakan pelayar moden datang dengan alat pembangunan terbina dalam yang boleh digunakan untuk debugging. Alat ini membolehkan anda melangkah melalui kod, periksa pembolehubah, dan melihat sebarang kesilapan atau pengecualian yang berlaku. Di samping itu, menggunakan amalan pengekodan yang baik, seperti menulis kod bersih dan ringkas dan memberi penjelasan kod, juga boleh membuat proses debugging lebih mudah.

Atas ialah kandungan terperinci Pembangunan JavaScript asli selepas penjelajah internet. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!