Saya tahu document.writedianggap praktik buruk; dan saya berharap untuk menyusun daftar alasan untuk tunduk kepada vendor pihak ke-3 tentang mengapa mereka tidak boleh digunakan document.writedalam implementasi kode analitik mereka.
Harap sertakan alasan Anda untuk mengklaim document.writesebagai praktik buruk di bawah ini.
Jawaban:
Beberapa masalah yang lebih serius:
document.write (selanjutnya DW) tidak berfungsi di XHTML
DW tidak secara langsung memodifikasi DOM, mencegah manipulasi lebih lanjut (mencoba untuk menemukan bukti tentang ini, tetapi paling baik situasional)
DW dijalankan setelah halaman selesai memuat akan menimpa halaman, atau menulis halaman baru, atau tidak berfungsi
DW dieksekusi ketika ditemui: ia tidak dapat menyuntikkan pada titik simpul tertentu
DW secara efektif menulis teks berseri yang bukan cara DOM bekerja secara konseptual, dan merupakan cara mudah untuk membuat bug (.innerHTML memiliki masalah yang sama)
Jauh lebih baik menggunakan metode manipulasi DOM yang aman dan ramah DOM
document.writedipanggil setelah dokumen selesai dimuat
Sebenarnya tidak ada yang salah dengan itu document.write. Masalahnya adalah sangat mudah untuk menyalahgunakannya. Terlalu, bahkan.
Dalam hal vendor yang memasok kode analitik (seperti Google Analytics) sebenarnya cara termudah bagi mereka untuk mendistribusikan cuplikan tersebut
Selama Anda tidak mencoba menggunakannya setelah dokumen dimuat , padadocument.writedasarnya tidak jahat, menurut pendapat saya.
addEventListener?
document.writepermintaan yang memasukkan skrip ketika kondisi tertentu terpenuhi.
Penggunaan sah lainnya document.writeberasal dari contoh HTML5 Boilerplate index.html .
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.3.min.js"><\/script>')</script>Saya juga melihat teknik yang sama untuk menggunakan json2.js JSON parse / stringify polyfill ( diperlukan oleh IE7 dan di bawah ).
<script>window.JSON || document.write('<script src="json2.js"><\/script>')</script>scriptelemen melalui manipulasi DOM, apakah itu dimuat secara sinkron? Kecuali itu, itu bukan pengganti.
onloadacara DOM untuk menentukan kapan skrip yang dimuat secara asinkron tersedia untuk digunakan.
src) . Kalau tidak, itu akan dieksekusi "sesegera mungkin", asinkron.
document.writepanggilan yang menyisipkan <script>tag jika pengguna menggunakan koneksi 2G. Lihat developers.google.com/web/updates/2016/08/…
Itu dapat memblokir halaman Anda
document.writehanya berfungsi saat halaman dimuat; Jika Anda memanggilnya setelah halaman selesai memuat, itu akan menimpa seluruh halaman.
Ini secara efektif berarti Anda harus memanggilnya dari blok skrip sebaris - Dan itu akan mencegah browser memproses bagian-bagian halaman berikutnya. Script dan Gambar tidak akan diunduh sampai blok penulisan selesai.
Pro:
Menipu:
document.writeyang membuat <script>tag dalam keadaan tertentu. developers.google.com/web/updates/2016/08/...
Inilah nilai dua kali lipat saya, secara umum Anda tidak harus menggunakan document.writeuntuk mengangkat berat, tetapi ada satu contoh di mana itu pasti berguna:
http://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
Saya menemukan ini baru-baru ini mencoba membuat galeri slider AJAX. Saya membuat dua div bersarang, dan menerapkan width/ heightdan overflow: hiddenke luar <div>dengan JS. Hal ini dimaksudkan agar seandainya browser menonaktifkan JS, div akan mengambang untuk mengakomodasi gambar-gambar di galeri - beberapa penurunan yang bagus.
Masalahnya, seperti dengan artikel di atas, pembajakan JS ini dari CSS tidak muncul sampai halaman dimuat, menyebabkan flash sesaat ketika div dimuat. Jadi saya perlu menulis aturan CSS, atau memasukkan lembar, saat halaman dimuat.
Jelas, ini tidak akan bekerja di XHTML, tetapi karena XHTML tampaknya seperti bebek mati (dan menjadikannya sebagai sup tag di IE), mungkin perlu mengevaluasi kembali pilihan DOCTYPE Anda ...
Itu menimpa konten pada halaman yang merupakan alasan paling jelas tapi saya tidak akan menyebutnya "buruk".
Itu tidak memiliki banyak kegunaan kecuali Anda membuat seluruh dokumen menggunakan JavaScript dalam hal ini Anda dapat mulai dengan document.write.
Meski begitu, Anda tidak benar-benar memanfaatkan DOM ketika Anda menggunakan document.write - Anda hanya membuang gumpalan teks ke dalam dokumen jadi saya akan mengatakan itu bentuk yang buruk.
div.innerHTML = "<label for='MySelect'>Choose One</label><select id='MySelect'><option value='foo' selected=''>foo</option><option value='bar'>bar</option></select>";? Sepertinya itu akan menghasilkan banyak kode yang tidak perlu dan kurang dapat dibaca. Ini juga kebalikan dari pendekatan John Resig dan pengembang JS lainnya.
Memecah halaman menggunakan rendering XML (seperti halaman XHTML).
Terbaik : beberapa browser beralih kembali ke rendering HTML dan semuanya berfungsi dengan baik.
Kemungkinan : beberapa browser menonaktifkan fungsi document.write () dalam mode rendering XML.
Terburuk : beberapa browser akan memunculkan kesalahan XML setiap kali menggunakan fungsi document.write ().
Dari atas kepala saya:
document.writeperlu digunakan dalam memuat halaman atau memuat tubuh. Jadi, jika Anda ingin menggunakan skrip di waktu lain untuk memperbarui dokumen konten halaman Anda. Menulis tidak berguna.
Secara teknis document.writehanya akan memperbarui halaman HTML bukan XHTML / XML. IE tampaknya cukup memaafkan fakta ini, tetapi browser lain tidak akan.
Chrome dapat memblokir document.writeyang menyisipkan skrip dalam kasus tertentu. Ketika ini terjadi, itu akan menampilkan peringatan ini di konsol:
Skrip pemblokiran, skrip asal-asal, ..., dipanggil melalui document.write. Ini dapat diblokir oleh browser jika perangkat memiliki konektivitas jaringan yang buruk.
.writedianggap sebagai pelanggaran browser karena menghentikan pengurai dari membuat halaman. Parser menerima pesan bahwa dokumen sedang diubah; karenanya, ia diblokir sampai JS telah menyelesaikan prosesnya. Hanya pada saat ini parser akan melanjutkan.
Konsekuensi terbesar dari penggunaan metode semacam itu adalah penurunan kinerja. Browser akan membutuhkan waktu lebih lama untuk memuat konten halaman. Reaksi yang merugikan pada waktu pemuatan tergantung pada apa yang ditulis ke dokumen. Anda tidak akan melihat banyak perbedaan jika Anda menambahkan <p>tag ke DOM sebagai lawan melewati array 50-beberapa referensi ke perpustakaan JavaScript (sesuatu yang saya lihat dalam kode kerja dan menghasilkan penundaan 11 detik - dari tentu saja, ini juga tergantung pada perangkat keras Anda).
Secara keseluruhan, yang terbaik adalah menjauhi metode ini jika Anda dapat membantu.
Untuk info lebih lanjut lihat Melakukan intervensi terhadap document.write ()
Berdasarkan analisis yang dilakukan oleh Audit Mercusuar Google-Chrome Dev Tools ' ,
Untuk pengguna dengan koneksi lambat, skrip eksternal yang secara dinamis disuntikkan melalui
document.write()dapat menunda pemuatan halaman dengan puluhan detik.
document.writeini merupakan praktik yang buruk adalah bahwa Anda tidak dapat menemukan skenario di mana Anda tidak dapat menemukan alternatif yang lebih baik.document.write.
Orang dapat menganggap document.write () (dan .innerHTML) sebagai mengevaluasi string kode sumber. Ini bisa sangat berguna untuk banyak aplikasi. Misalnya jika Anda mendapatkan kode HTML sebagai string dari beberapa sumber, akan sangat mudah untuk hanya "mengevaluasi" itu.
Dalam konteks Lisp, manipulasi DOM akan seperti memanipulasi struktur daftar, misalnya membuat daftar (oranye) dengan melakukan:
(cons 'orange '())Dan document.write () akan seperti mengevaluasi string, misalnya membuat daftar dengan mengevaluasi string kode sumber seperti ini:
(eval-string "(cons 'orange '())")Lisp juga memiliki kemampuan yang sangat berguna untuk membuat kode menggunakan manipulasi daftar (seperti menggunakan "gaya DOM" untuk membuat pohon parse JS). Ini berarti Anda dapat membangun struktur daftar menggunakan "gaya DOM", bukan "gaya string", dan kemudian jalankan kode itu, misalnya seperti ini:
(eval '(cons 'orange '()))Jika Anda menerapkan alat pengkodean, seperti editor langsung sederhana, sangat berguna untuk memiliki kemampuan untuk mengevaluasi string dengan cepat, misalnya menggunakan document.write () atau .innerHTML. Lisp ideal dalam hal ini, tetapi Anda dapat melakukan hal-hal yang sangat keren juga di JS, dan banyak orang melakukannya, seperti http://jsbin.com/
Kerugian dari dokumen. Menulis terutama tergantung pada 3 faktor ini:
a) Implementasi
Document.write () sebagian besar digunakan untuk menulis konten ke layar segera setelah konten itu diperlukan. Ini berarti itu terjadi di mana saja, baik dalam file JavaScript atau di dalam tag skrip dalam file HTML. Dengan tag skrip ditempatkan di mana saja di dalam file HTML seperti itu, adalah ide yang buruk untuk memiliki pernyataan document.write () di dalam blok skrip yang terkait dengan HTML di dalam halaman web.
b) Rendering
Kode yang dirancang dengan baik pada umumnya akan mengambil konten yang dihasilkan secara dinamis, menyimpannya dalam memori, terus memanipulasinya saat melewati kode sebelum akhirnya dimuntahkan ke layar. Jadi, untuk mengulangi poin terakhir di bagian sebelumnya, membuat konten di tempat mungkin membuat lebih cepat daripada konten lain yang mungkin diandalkan, tetapi mungkin tidak tersedia untuk kode lain yang pada gilirannya mengharuskan konten yang akan diberikan untuk diproses. Untuk mengatasi dilema ini, kita perlu menyingkirkan document.write () dan mengimplementasikannya dengan cara yang benar.
c) Manipulasi yang Tidak Mungkin
Setelah ditulis, selesai dan selesai. Kami tidak dapat kembali untuk memanipulasinya tanpa menggunakan DOM.
Saya tidak berpikir menggunakan document.write sama sekali bukan praktik yang baik. Dengan kata sederhana itu seperti tegangan tinggi untuk orang yang tidak berpengalaman. Jika Anda menggunakannya dengan cara yang salah, Anda akan matang. Ada banyak pengembang yang telah menggunakan ini dan metode berbahaya lainnya setidaknya sekali, dan mereka tidak pernah benar-benar menggali kegagalan mereka. Sebaliknya, ketika terjadi kesalahan, mereka hanya menyelamatkan, dan menggunakan sesuatu yang lebih aman. Mereka adalah orang-orang yang membuat pernyataan seperti itu tentang apa yang dianggap sebagai "Praktek Buruk".
Ini seperti memformat hard drive, ketika Anda hanya perlu menghapus beberapa file dan kemudian mengatakan "memformat drive adalah praktik yang buruk".
Saya pikir masalah terbesar adalah bahwa setiap elemen yang ditulis melalui document.write ditambahkan ke akhir elemen halaman. Itu jarang efek yang diinginkan dengan tata letak halaman modern dan AJAX. (Anda harus ingat bahwa elemen-elemen dalam DOM bersifat sementara, dan ketika skrip dijalankan dapat memengaruhi perilakunya).
Jauh lebih baik untuk menetapkan elemen placeholder di halaman, dan kemudian memanipulasi innerHTML-nya.