Soru Google tarafından DOMContentReady dikkate alınan anti-desen kullanma


Bir Google Kapanış kütüphanesi ekip üyesi iddia DOMContentReady olayını beklemek kötü bir uygulamadır.

Kısa hikaye biz istemiyoruz   DOMContentReady (veya daha kötüsü beklemek için)   yük olayı)   kullanıcı deneyimi. UI değil   tüm DOM'a kadar duyarlı   ağdan yüklendi. Böylece   tercih edilen yol satır içi betikleri kullanmaktır   en kısa sürede.

Bu konuda hala daha fazla ayrıntı vermedikleri için, nasıl başa çıktıklarını merak ediyorum İşlemi Durduruldu IE'de iletişim kutusu. Bu iletişim kutusu DOMContentReady (veya yükleme) olayını beklemem için bildiğim tek kritik nedendir.

  1. Başka bir sebep biliyor musun?
  2. Bu IE sorunuyla nasıl baş ettiklerini düşünüyorsunuz?

21
2018-01-07 22:04


Menşei


Ayrıca, satır içi JavaScript kod bakım ve işbirliği açısından çok kötü bir şey olan HTML ile JS kodunu karıştırır. Çok garip bir tavsiye gerçekten ... - BYK
BYK, Google'ın insanların GWT'yi kullanmasını istediğini düşünürken daha az garip gelebilir. Google, bir uygulamanın "dokümanı" nın ne kadar karışıklık yarattığını gerçekten umursamıyor, bunların hepsi bir uygulamanın her karanlık köşesinden son bir saniyede sıkılıyor. Amaçları için bu çok anlam ifade eder. Diğer durumlarda, belki çok fazla değil. - eyelidlessness
@Marcel Korpel: İlk önce küçük bir yorum yapmak istedim. Ama sonra daha fazla konuşacağımı anladım. :) Cevap olarak gönderir ve yorumları kaldırır. - Shripad Krishna


Cevaplar:


İlk önce küçük bir açıklama: Satır içi JavaScript ile nokta, mümkün olan en kısa zamanda dahil etmektir. Ancak, bu "mümkün", bu betiğin bildirilmesini gerektiren DOM düğümlerine bağımlıdır. Örneğin, JavaScript gerektiren bazı gezinme menünüz varsa, HTML'de menü tanımlandıktan hemen sonra komut dosyasını eklersiniz.

<ul id="some-nav-menu">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
<script type="text/javascript">
    // Initialize menu behaviors and events
    magicMenuOfWonder( document.getElementById("some-nav-menu") );
</script>

Sadece bildirildiğini bildiğiniz DOM düğümlerini ele aldığınız sürece, DOM erişilemeyen sorunlara giremezsiniz. IE sorununa gelince, geliştirici, senaryolarını stratejik olarak içermeli ve böylelikle bu gerçekleşmez. Bu bir endişenin o kadar da büyük değil, ne de ele alınması zor. Bununla ilgili asıl sorun, aşağıda açıklandığı gibi "büyük resim" dir.

Elbette, her şeyin artıları ve eksileri vardır. 

Artıları

  1. Bir DOM öğesi kullanıcıya görüntülendiği anda, JavaScript tarafından eklenen tüm işlevler hemen hemen kullanılabilir (tüm sayfanın yüklenmesini beklemek yerine).
  2. Bazı durumlarda, Pro # 1 daha hızlı algılanan sayfa yükleme sürelerine ve geliştirilmiş bir kullanıcı deneyimine neden olabilir.

Eksileri

  1. En kötüsü, sunum ve iş mantığını karıştırıyorsunuz, en iyisi script Sununuz boyunca, her ikisini de yönetmek zor olabilir. Benim düşüncemde ve topluluğun büyük bir kısmı tarafından kabul edilemez.
  2. Gibi eyelidlessness betik eğer söz konusu betiğin harici bağımlılıkları varsa (örneğin bir kütüphane), o zaman bu bağımlılıklar önce yüklenmeli, bunlar ayrıştırılırken ve çalıştırılırken sayfa oluşturmayı kilitler.

Bu tekniği kullanır mıyım? Hayır. Tüm komut dosyasını sayfanın sonunda, kapanıştan hemen önce yüklemeyi tercih ederim </body> etiket. Hemen hemen her durumda, bu efektlerin ve olay işleyicilerinin algılanan ve fiili başlatma performansları için yeterince hızlıdır.

Başkalarının kullanması iyi mi? Geliştiriciler istedikleri işi / işi yapmak ve / patronlarını / pazarlama departmanlarını mutlu etmek için ne gerekiyorsa yapacaklar. Satış noktaları var ve bunları anladığınız ve yönetdiğiniz sürece, her iki şekilde de iyi olmalısınız.


29
2018-01-07 22:35





Satır içi komut dosyalarındaki en büyük sorun, düzgün bir şekilde önbelleğe alınamamasıdır. Tüm betikleriniz bir js dosyasında (derleyici kullanılarak) küçültülmüş bir dosyada saklanıyorsa, bu dosya tarayıcı tarafından tüm site için bir kez önbelleğe alınabilir.

Siteniz meşgul olma eğilimindeyse, uzun vadede daha iyi bir performansa yol açar. Komut dosyalarınız için ayrı bir dosyaya sahip olmanın bir başka avantajı, "kendinizi tekrar etmeyiniz" ve yeniden kullanılabilir işlevleri olabildiğince bildirmemenizdir. DOMContentReady, kötü kullanıcı deneyimine yol açmaz. Kullanıcıya kullanıcı için büyük bir kapanma haline gelebilecek UI'nin yüklenmesini beklemek yerine, kullanıcıya önceden içerik sağlar.

Ayrıca, satır içi komut dosyalarının kullanılması, kullanıcı arayüzünün DOMContentReady ile kullanıldığında bundan daha duyarlı olmasını sağlamamaktadır. Ajax aramaları yapmak için satır içi komut dosyalarını kullandığınız bir senaryo düşünün. Para cezasını vermek için bir formunuz varsa. Birden fazla forma sahip olursunuz ve ajax çağrılarınızı tekrarlamanız gerekir. Bu nedenle her defasında aynı betiği tekrarlar. Sonuçta, tarayıcı, DOM hazır olduğunda yüklenen bir js dosyasında ayrılmışsa, daha fazla javascript kodu önbelleğe almasına yol açar.

Satır içi komut dosyalarına sahip olmanın diğer bir dezavantajı, iki ayrı kod tabanını korumanız gerektiğidir: biri geliştirme için diğeri ise üretim için. Her iki kod tabanının senkronizasyonda tutulmasını sağlamalısınız. Geliştirme sürümü kodunuzun küçültülmüş olmayan sürümünü içerir ve üretim sürümü küçültülmüş sürümü içerir. Bu gelişme döngüsünde büyük bir baş ağrısıdır. Tüm kod parçacıklarınızı, hantal html dosyalarında gizli olarak, küçültülmüş sürümle el ile değiştirmeniz gerekir ve son olarak da hiçbir kodun kırılmadığını umarsınız! Bununla birlikte, geliştirme döngüsü sırasında ayrı bir dosyaya bakarken, yalnızca bu dosyayı üretim kod tabanında derlenmiş küçültülmüş sürümle değiştirmeniz gerekir.

YSlow kullanıyorsanız, şunu göreceksiniz:

Harici JavaScript ve CSS kullanma   dosyalar genellikle daha hızlı sayfalar oluşturur   çünkü dosyalar önbelleğe   tarayıcı. JavaScript ve CSS   HTML belgelerinde satır içi olsun   HTML dokümanı her yüklendiğinde   talep edildi. Bu sayıyı azaltır   HTTP istekleri ancak artırır   HTML belge boyutu. Diğer yandan,   JavaScript ve CSS içeriyorsa   tarayıcı tarafından önbelleğe alınmış harici dosyalar,   HTML belge boyutu küçültülmüş   HTTP sayısını arttırmadan   istekleri.

Satır içi komut dosyaları için kefil olabilir ve eğer kod o kadar sık ​​değişiyorsa, ayrı bir js dosyasında olması önemsizdir ve sonuçta bu satır içi betiklerinkiyle aynı etkiye sahiptir. Yine de, bu komut dosyaları tarayıcı tarafından önbelleğe alınmamıştır. Tarayıcının komut dosyalarını önleyebilmesinin tek yolu, harici bir js dosyasında etag.

Ancak, bu JQuery ve Google'ın herhangi bir şekilde kapanması değildir. Kapanış kendi avantajları vardır. Ancak kapatma kütüphanesi, tüm betiklerinizi harici dosyalarda bulundurmayı zorlaştırır (ancak imkansız olmasa da, sadece zorlaştırır). Yalnızca satır içi komut dosyalarını kullanma eğiliminiz var.


1
2017-07-12 02:51



“Tarayıcının komut dosyalarını önleyebilmesinin tek yolu, bir etag içeren harici bir js dosyasında saklanıp saklanmamasıdır. Cache-Control: max-age=3155760000 Tarayıcıyı sayfayı yeniden doğrulamaksızın bir dosyayı çok uzun bir süre saklamak için (bkz. Önbellek Denetimi Direktifleri Demystified). Bu HTTP üstbilgisini URL'deki bir sürüm numarasıyla birlikte kullanırsanız (ör., Script.js? V = 23), dosyayı değiştirdiğinizde sürüm numarasını yalnızca artırabilirsiniz. Ayrıca bkz. developer.yahoo.com/performance/rules.html#etags - Marcel Korpel
Evet, ancak yeni bir sayfaya her vurduğunuzda komut dosyalarının hala önbelleğe alınması gerekecek, değil mi? Dolayısıyla, önbellek kazanma kazançları yalnızca yeniden ziyaret edilen sayfalarda elde edilir, ancak dış bağlantı ile global JS'niz site ziyareti başına bir kez önbelleğe alınır. - Erik Reppen


Görüntü yükleri dikkate alınmaksızın düzeni (yükün hangi noktada ateşleneceği) ayrıştırmak, yüklemek ve renderlemek için gereken süre çok uzun sürüyorsa, fark edilir UI gecikmesine neden oluyorsa, muhtemelen bu sayfayı gerçekten çirkin bir şekilde oluşturuyorsunuzdur. arka uç ve bu senin gerçek problemin.

Ayrıca, sayfanın sonundan önce JavaScript, JS ayrıştırılıp değerlendirilene kadar HTML ayrıştırma / DOM değerlendirmesini durdurur. Google, JavaScript konusunda öneride bulunmadan önce Java'larına bakmalıdır.


1
2017-08-22 20:45





Satır içi komut dosyalarından kaçınmanın bir nedeni, herhangi bir bağımlılık kitaplığını belgede kendilerinden önce yerleştirmenizi gerektirmesidir; bu, satır içi komut dosyalarının performans kazanımlarını muhtemelen olumsuz etkileyecektir. Tanıdığım en iyi uygulama, tüm komut dosyalarını (tek bir HTTP isteğinde!) Belgenin sonundaki hemen yerleştirmektir. </body>. Bunun nedeni, komut dosyası yüklemesi, komut istemi tamamen yüklenene, ayrıştırılmaya ve çalıştırılıncaya kadar geçerli isteği ve tüm alt istekleri engeller.

Sihirli bir değnek kısacası, her zaman bu alıştırmaları yapmak zorundayız. Neyse ki, HTML belgesinin kendisi giderek daha az yoğun kaynak gerektiren istek haline gelecektir (büyük gibi aptalca şeyler yapmıyorsanız) data: URL'ler ve büyük satır içi SVG belgeleri). Bana göre, HTML belgesinin sonunu beklemenin en belirgin seçeneği en belirgin seçenek olarak görünüyor.


0
2018-01-07 22:18





Bu tavsiyenin gerçekten yararlı olmadığını düşünüyorum. DOMContentReady sadece kötü bir uygulama olabilir, çünkü şu anda aşırı kullanılıyor (belki de jquery'nin kullanımı kolay hazır olayından dolayı). Birçok kişi bunu "başlangıç" etkinliği olarak kullanıyor herhangi Javascript eylemi. JQuery'nin hazır () olayının bile DOM manipulasyonları için başlangıç ​​noktası olarak kullanılması amaçlanmıştı.

Inferential, sayfa yükündeki DOM manipülasyonları kötü kullanıcı deneyimine yol açar! Çünkü onlar gerekli değilSunucu tarafı sadece ilk sayfayı tamamen oluşturabilirdi.

Yani, belki de kapatma ekibi üyeleri tam tersi yönde yönlendirmeye çalışırlar ve insanların sayfa yüklemesinde DOM manipülasyonları yapmasını engellerler.


0
2018-01-07 22:27



Aşamalı geliştirme sırasında farklı bir kullanıcı arayüzü sağlarsanız, sayfa yüklemesinde DOM manipülasyonları gereklidir. Örneğin, bir sıralanabilir liste düşünün. Tamamen statik işlevli bir kullanıcı arabirimi, listeyi yeniden sıralamak için sunucuya gönderilen yukarı / aşağı düğmeleri sağlar. Aşamalı olarak geliştirilmiş bir UI, bunun yerine "kıskaçlar" sağlayabilir ve bu düğmeleri gizleyebilir. Bu, sayfanın yüklenmesini mümkün olan en erken noktada istenebilir. Açıkçası bu küçük örnek, bir sınıf anahtarıyla basitçe başarılabilir, ancak oradan nasıl daha karmaşık hale geldiğini düşünmek zor değildir. - eyelidlessness
DOM manipülasyonları, sunucu tarafı tarafından yapılamayan olayları ve diğer şeyleri içerir. - thorn
@eye, @thorn: İkiniz de haklısınız, sonuca biraz fazla hevesliyim. - Frunsi


HTML'nizi kendi başınıza atmanız gerekiyorsa, Googles yaklaşımı çok garip görünüyor. Derlenmiş yaklaşımı kullanırlar ve kendi uygulamalarının karmaşık kullanıcı arabirimi göz önüne alındığında beyin döngülerini diğer konularda harcayabilirler. Daha rahat gereksinimleri olan bir şeye yönelseniz (okuyun: hemen hemen her şey), belki de bu çabaya değmez.

GWT'nin sadece Java ile konuştuğu üzücü.


0
2018-01-05 23:40





Muhtemelen Google’ın Javascript’iniz yoksa umursamadığı, yaptıklarının hemen hemen hepsini gerektirmesidir. Eğer zaten çalışır durumda olan web sitenizin üstüne ek olarak Javascript kullanırsanız ve betikleri DOMContentReady'ye yüklemeniz yeterlidir. Buradaki nokta, kullanıcının deneyimini geliştirmek için Javascript kullanmaktır, eğer sahip olmadıkları takdirde bunları gizlemez.


-1
2018-01-07 22:13



Bu soru, ilerici geliştirme için javascript kullanıp kullanmamanız değil, kullandığınız JavaScript'in nasıl uygulanacağı hakkındadır. - Justin Johnson
Justin Johnson, "zarif bozulma" veya "aşamalı geliştirme" nin kullanılıp kullanılmayacağı sorusu, kullandığınız Javascript'in nasıl uygulanacağı sorusunun sonucunu etkilemektedir. - eyelidlessness
O zaman bunu tekrar söyleyeyim. Sorun, zaten çalışan bir siteyi JavaScript ile geliştirip yükseltmemenin veya sitenin JavaScript gerektirip gerektirmediğiyle ilgili değildi. @ Shawn'un cevabı, yalnızca DOMContentReady kullanarak, incelikle ayrıştırabiliriz. Durum bu değil. Aşamalı geliştirme DOMContentReady veya onload olayları etrafında dönmez ve zarif bozulmayı korurken satır içi komut dosyaları ile elde edilebilir. Diğer bir deyişle, zarif bozulma JavaScript ile ilgili değildir. JavaScript değilbu yüzden bu cevabın nasıl uygulandığını veya OP ile ilgili olduğunu göremiyorum. - Justin Johnson