Yakın zamanda Yahoo Web Sitenizi Hızlandırmak için En İyi Uygulamalar manifestosunu okudum . Yapabildiğimizde JavaScript dahil etmeyi HTML kodunun altına koymanızı tavsiye ediyorlar.
Ama tam olarak nerede ve ne zaman?
Kapatmadan önce </html>mi yoksa sonra mı koymalıyız ? Ve her şeyden önce, onu ne zaman <head>bölüme koymalıyız ?
Yanıtlar:
Gerçekten göze batmayan komut dosyaları için iki olasılık vardır:
</body></html>)Orijinal Yahoo araştırması, bazı tarayıcıların komut dosyası etiketine tıkladıklarında komut dosyası dosyalarını yüklemeye çalıştıklarını ve bu nedenle, bitene kadar sayfanın geri kalanını yüklemediklerini gösterdiğinden, ikincisi daha hızlı olabilir. Bununla birlikte, komut dosyanız, DOM hazır olur olmaz çalıştırılması gereken 'hazır' bir bölüme sahipse, buna başlığa ihtiyacınız olabilir. Diğer bir sorun da düzendir - komut dosyanız, yüklenmesini istediğiniz sayfa düzenini olabildiğince erken değiştirecekse, böylece sayfanız kullanıcılarınızın önünde kendini yeniden çizmek için uzun zaman harcamayacaktır.
Harici komut dosyası sitesi başka bir etki alanında ise (harici widget'lar gibi), sayfanın yüklenmesini geciktirmekten kaçınmak için onu en alta koymaya değer olabilir.
Ve herhangi bir performans sorunu için kendi ölçütlerinizi yapın - bir çalışma yapıldığında doğru olabilecek şeyler, kendi yerel kurulumunuzla veya tarayıcılardaki değişikliklerle değişebilir.
Asla bu kadar kesik ve kuru değildir - Yahoo, komut dosyalarını kapanış </body>etiketinin hemen önüne koymanızı önerir ; bu, sayfanın boş bir önbelleğe daha hızlı yüklendiği yanılsamasını yaratır (çünkü komut dosyaları belgenin geri kalanının indirilmesini engellemeyecektir). Bununla birlikte, sayfa yüklenirken çalıştırmak istediğiniz bir kodunuz varsa, bu kod yalnızca tüm sayfa yüklendikten sonra yürütülmeye başlayacaktır. Komut dosyalarını <head>etikete koyarsanız, daha önce çalışmaya başlayacaklardır - bu nedenle, hazırlanmış bir önbellekte sayfa aslında daha hızlı yükleniyormuş gibi görünecektir.
Ayrıca, komut dosyalarını sayfanın altına koyma ayrıcalığı her zaman mevcut değildir. Görünümlerinize önceden yüklenmiş bir kitaplığa veya başka bir JavaScript koduna bağlı olan satır içi komut dosyalarını eklemeniz gerekiyorsa, bu bağımlılıkları <head>etikete yüklemeniz gerekir .
Sonuçta Yahoo'nun önerileri ilgi çekicidir ancak her zaman uygulanabilir değildir ve duruma göre değerlendirilmelidir.
<script>etiketler rahatsız edici javascript anlamına gelmez.
<script>etiketler işaretlemeden ayrıdır ve arayüzü geliştiren ancak gerekli olmayan kodla kullanılabilir. Dolayısıyla, satır içi <script>etiketlerin doğası gereği rahatsız edici hiçbir şey yoktur .
<script>bu değerleri javascript değişkenlerine kodlamak için etiketleri kullanabilirsiniz. satır içi düzenleme veya diğer benzer davranışlar.
Diğerlerinin de söylediği gibi, bunu kapanış gövde html etiketlerinin önüne yerleştirin .
Geçen gün, müşterilerimizden sitelerinin aşırı derecede yavaş olduğundan şikayet eden çok sayıda telefon aldık. Onları yerel olarak ziyaret ettik ve tek bir sayfayı yüklemelerinin 20-30 saniye sürdüğünü gördük. Kötü performans gösteren sunucular olduğunu düşünerek, oturum açtık - ancak hem web hem de sql sunucuları ~% 0 etkinlikti.
Birkaç dakika sonra, Javascript izleme etiketleri için bağladığımız harici bir sitenin çalışmadığını fark ettik. Bu, tarayıcıların sitenin baş kısmındaki komut dosyası etiketine vurduğu ve komut dosyasını indirmeyi beklediği anlamına geliyordu .
Bu nedenle, en azından 3. taraf / harici komut dosyaları için, bunları sayfaya son şey olarak koymanızı öneririm. Daha sonra, kullanılamazlarsa, tarayıcı en azından sayfayı o noktaya kadar yükler ve kullanıcı bundan habersiz olurdu.
Özetlemek gerekirse, yukarıdaki önerilere dayanarak:
</body>etiketinin önüne yerleştirin .</body>dosyalarını başa yerleştirmek için uç durum nedeniniz yoksa önüne yerleştirmeyi düşünün .Senaryolarınızın konumunu düzeltmek istiyorsanız, YSlow performansı iyileştirecek veya azaltacaksa size bir lezzet katmak için harika bir araçtır. Javascript'i belirli belge konumlarına koymak, sayfa yükleme sürelerini gerçekten öldürebilir.
Hayır, </html>geçersiz olacağı için sonrasına gelmemelidir . Komut dosyalarını yerleştirmek için en iyi yer,</body>
Bunun temel nedeni, çoğu tarayıcının sağladığınız komut dosyasını değerlendirirken sayfayı oluşturmayı bırakmasıdır. Bu nedenle, sayfanın herhangi bir yerine engelleyici olmayan kod koymak sorun değil ( onLoadolay bağlama etkili bir şekilde ücretsiz olacak kadar hızlı olduğundan , esas olarak olaya işlevler ekleyen şeyler düşünüyorum ). Buradaki büyük bir katil, sayfanın başında, reklamlar tamamen indirilmeden herhangi bir sayfanın yüklenmesini engelleyebilecek bazı reklam sunucusu komut dosyası yerleştirmektir, bu da sayfa yükleme sürelerinizi balon yapar.
En alta koyarsanız, en son yüklenir, dolayısıyla kullanıcının sayfayı görebileceği hız artar. Finalden önce olması gerekir, </html>aksi takdirde DOM'un bir parçası olmayacaktır.
Yine de koda anında ihtiyaç duyulursa, kafasına koyun.
Blog widget'ları gibi şeyleri en alta koymak en iyisidir, böylece yüklenmezlerse sayfanın kullanılabilirliğini etkilemez.