210

Diyelim ki 100kb ya da daha büyük bir boyuta sahip oldukça ağır bir JavaScript dosyam var. Dosya ile demek istediğim bu, üzerinden bağlanacak harici bir dosya<script src="..."> , HTML'nin kendisine yapıştırılmamış .

Bunu HTML'ye koymak için en iyi yer neresi?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

Seçeneklerin her biri arasında herhangi bir işlevsel fark olacak mı?

javascript html optimization

— nickf
kaynak

Olası yinelenen HTML biçimlendirme içinde <script> etiketleri koymalıyız Nerede?

— Ivar

175

Yahoo! Olağanüstü Performans ekibi , tarayıcıların bileşenleri indirme biçimi nedeniyle sayfanın altına komut dosyaları yerleştirmenizi önerir .

Tabii Levi'nin yorumu "ihtiyacınız olmadan ve daha erken değil" gerçekten doğru cevaptır, yani "duruma bağlıdır".

— Walter Rumsby
kaynak

4

Örneğin, bir grup jQuery işi yapacaksanız, kitaplığı gerçekten kullanmaya çalışmadan önce yüklenmiş kitaplığa ihtiyacınız olacaktır.

— BryanH

58

Ayrıca, Yahoo EPT'nin JS'nin altına yerleştirilmesini önermesinin nedeni, JS yüklenip yürütülürken tarayıcının tek iş parçacıklı moda girmesi gerektiğidir. Komut dosyası içeriğin başında veya ortasındaysa, tarayıcı JS ile ilgilenirken "duraklar". JS en alta yerleştirildiğinde, içerik yüklenir ve genel olarak görünür olur; böylece kullanıcı, tarayıcı hâlâ JS ile uğraşırken okumaya başlayabilir.

— BryanH

1

Selam. $(function () {...})Sayfanın altına da bunun gibi bir kod koyar mıyız yoksa içeride olması gerekir <head>mi?

— Thang Pham

7

Umarım "sayfanızın alt kısmından" bahsetmek ötesinde değildir </body>?

— Mr_Green

1

Modern tarayıcılar "erteleme" özelliğini de okuyabilir. <body> öğesinin altında olmayan komut dosyası etiketlerinde defer = "defer" ayarını yapabilirsiniz ve tarayıcı bunları gördüğünde, ilk önce html'nin geri kalanını yüklemeyi bitirir ve ardından geri dönüp içeriğini yorumlar. komut dosyası etiketi. Sayfanın tam kontrolüne sahip olmadığınız bir tür çerçeve kullanıyorsanız bu yararlı olur. Bu makaleyi inceleyin ve bunun canlı bir belge olduğunu ve bu nedenle bilgilerin bir kısmının modası geçmiş olduğunu unutmayın: stackoverflow.com/questions/5250412/…

— LinuxDisciple

75

Bunun için en iyi yer hemen önce ve daha erken.

Ayrıca, kullanıcılarınızın fiziksel konumlarına bağlı olarak, Amazon'un S3 hizmeti gibi bir hizmet kullanmak, kullanıcıların sunucunuzdan fiziksel olarak kendilerine daha yakın bir sunucudan indirmelerine yardımcı olabilir.

Js betiğiniz jQuery veya prototip gibi yaygın olarak kullanılan bir lib mi? Öyleyse, Google ve Yahoo gibi dağıtılmış bir ağda bu dosyaları sağlamak için araçlara sahip olan birkaç şirket vardır.

— Levi Rosol
kaynak

60

Genel bir kural olarak, <script>etiketleri koymak için en iyi yer , </body>etiketten hemen önce sayfanın alt kısmıdır. Bunun gibi bir şey:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

Neden?

Komut dosyalarının neden olduğu sorun paralel indirmeleri engellemesidir. HTTP / 1.1 belirtimi, tarayıcıların ana makine adı başına paralel olarak en fazla iki bileşen indirmesini öneriyor. Resimlerinizi birden çok ana bilgisayar adından sunuyorsanız, paralel olarak ikiden fazla indirme gerçekleştirebilirsiniz. Ancak bir komut dosyası indirilirken, tarayıcı farklı ana bilgisayar adlarında bile başka herhangi bir indirme işlemi başlatmaz. Daha...

CSS

Biraz konu dışı, ama ... Stil sayfalarını en üste koyun.

Yahoo! 'Daki performansı araştırırken, stil sayfalarını HEAD belgesine taşımanın sayfaların daha hızlı yüklenmesini sağladığını keşfettik. Bunun nedeni, stil sayfalarının HEAD'e yerleştirilmesinin sayfanın aşamalı olarak oluşturulmasına izin vermesidir. Daha...

daha fazla okuma

Yahoo, bir web sitesini hızlandırmak için en iyi uygulamaları listeleyen gerçekten harika bir rehber yayınladı. Kesinlikle okumaya değer: https://developer.yahoo.com/performance/rules.html

— Martynas
kaynak

1

"Komut dosyalarının neden olduğu sorun paralel indirmeleri engellemesidir." - Bu artık geçerli değil: w3.org/TR/html5/scripting-1.html#attr-script-async

— Quentin

4

100k Javascript ile bunu asla dosyanın içine koymamalısınız. Harici bir komut dosyası Javascript dosyası kullanın. Cehennemde, bu miktarda kodu yalnızca bir HTML sayfasında kullanma şansınız yoktur. Muhtemelen Javascript dosyasını nereye yüklemeniz gerektiğini soruyorsunuz, bunun için zaten tatmin edici cevaplar aldınız.

Ancak, modern tarayıcıların gzip ped Javascript dosyalarını kabul ettiğini belirtmek isterim ! Sadece x.jsdosyayı gzip edin x.js.gzve srcözniteliğe işaret edin. Yerel dosya sisteminde çalışmaz, çalışması için bir web sunucusuna ihtiyacınız vardır. Ancak aktarılan baytlardaki tasarruflar muazzam olabilir.

Firefox 3, MSIE 7, Opera 9 ve Google Chrome'da başarıyla test ettim. Görünüşe göre Safari 3'te bu şekilde çalışmıyor.

Daha fazla bilgi için, bu blog gönderisine ve yine de yararlı olan başka bir çok eski sayfaya bakın , çünkü web sunucusunun bir tarayıcının gzip edilmiş Javascript'i kabul edip edemeyeceğini tespit edebildiğine işaret eder. Sunucu tarafınız gzip veya düz metni dinamik olarak göndermeyi seçebiliyorsa, sayfayı tüm web tarayıcılarında kullanılabilir hale getirebilirsiniz.

— baronet
kaynak

8

OP'nin sorusunu yanlış anladınız. HTML'de komut dosyası etiketini nereye koyacağını soruyordu. Zaten harici bir dosya kullanıyordu, senaryoyu satmıyor. Kuşkusuz, bu, Nisan '09'da soruyu düzenlemeden önce daha az açıktı. Belki de bu cevabı sil?

— Mark Amery

@Leandro Sanırım insanlar her zaman asıl soruyu akılda tutmazlar, ancak yine de bunun gibi cevapları düşünürler. Yine de, bu cevabı ise mutlaka alakalı kullanışlı değil. Oylama araç ipucu daha açık ifadeler içeriyorsa daha iyi sonuç verebilir, örn. 'Bu cevap yararlı ve alakalı'.

— WynandB

1

Gzipped Javascript'te: Web sunucunuzu sıkıştırmak için de yapılandırabilirsiniz ... (Veya nginx'in gzip_static modülü / seçeneği gibi bir şey kullanın) (ve diğer istemciler için gunzip olanı) En azından doğru içerik türü başlığını göndermelidir, kodlama gzip olarak işaretlendi, muhtemelen daha da iyi tarayıcı desteği ile sonuçlandı

— Gert van den Berg

4

Javascript'i en üste koymak daha temiz görünebilir, ancak işlevsel olarak HTML'den sonra gitmek daha iyidir. Bu şekilde, javascriptiniz çalışmayacak ve yüklenmeden önce HTML öğelerine başvurmaya çalışmayacaktır. Bu tür bir sorun genellikle sayfayı gerçek bir internet bağlantısı üzerinden, özellikle de yavaş bir bağlantı üzerinden yüklediğinizde ortaya çıkar.

Ayrıca, javascript'i diğer javascript kodundan bir başlık öğesi ekleyerek dinamik olarak yüklemeyi deneyebilirsiniz, ancak bu yalnızca tüm kodu her zaman kullanmıyorsanız anlamlıdır.

— Matthias Wandel
kaynak

3

Kullanılması cuzillion "HTML etiketleri", dış inline, "document.write", "JS DOM öğesini", "iframe" ve "XHR eval": Farklı yöntemler kullanarak komut dosyası etiketlerinin farklı yerleştirme sayfa yüklemesinde etkiler test edebilirsiniz . Farklılıkların açıklaması için yardıma bakın . Ayrıca stil sayfalarını, görüntüleri ve iframe'leri test edebilir.

— Sam Hasler
kaynak

1

Cevap, javascript nesnelerini nasıl kullandığınıza bağlıdır. Daha önce işaret ettiği gibi, javascript dosyalarının başlıktan ziyade altbilgiye yüklenmesi kesinlikle performansı artırır ancak kullanılan nesnelerin altbilgiden yüklendiklerinden daha sonra başlatılmasına dikkat edilmelidir. Bir başka yol da, tüm dosyalar tarafından kullanılabilecek klasöre yerleştirilen 'js' dosyalarını yüklemektir.

— GustyWind
kaynak

0

Diğerlerinin söylediği gibi, büyük olasılıkla harici bir dosyaya gitmelidir. Bu tür dosyaları <head /> sonuna eklemeyi tercih ederim. Bu yöntem makine dostu olmaktan daha insan dostudur, ancak bu şekilde her zaman JS'nin nerede olduğunu biliyorum. Komut dosyası dosyalarını başka bir yere eklemek imkansız değildir (imho).

Ben gerçekten her son ms dışarı sıkmak gerekir sonra muhtemelen Yahoo söylediklerini yapmak gerekir.

— çılgın
kaynak

0

Komut dosyaları gövde etiketinin sonuna dahil edilmelidir, çünkü bu şekilde HTML tarayıcı tarafından ayrıştırılır ve komut dosyaları yüklenmeden önce görüntülenir.

— José Salgado
kaynak

0

Sorunun cevabı bağlıdır. Bu durumda 2 senaryo vardır ve uygun senaryoya göre bir seçim yapmanız gerekir.

Senaryo 1 - Kritik komut dosyası / Gerekli komut dosyası olmalı

Kullandığınız komut dosyasının web sitesini yüklemek için önemli olması durumunda, HTML belgenizin en üstüne yerleştirilmesi önerilir; <head> . Bazı örnekler - uygulama kodu, önyükleme, yazı tipleri vb.

Senaryo 2 - Daha az önemli / analitik komut dosyaları

Ayrıca web sitesinin görünümünü etkilemeyen komut dosyaları da vardır. Bu tür komut dosyalarının, tüm önemli bölümler yüklendikten sonra yüklenmesi önerilir. Ve bunun cevabı belgenin alt kısmı, yani <body>kapanış etiketinden önceki altınız olacaktır. Bazı örnekler - Google analitiği, hotjar vb.

Bonus - zaman uyumsuzluk / erteleme

Tarayıcılara komut dosyası yüklemesinin başkalarıyla aynı anda yapılabileceğini ve komut dosyası kodundaki bir erteleme / zaman uyumsuz bağımsız değişken kullanılarak tarayıcının seçimine göre yüklenebileceğini de söyleyebilirsiniz.

Örneğin. <script async src="script.js"></script>

— Praveen Thirumurugan
kaynak

-1

Javascript bağlantılarınız başın içine veya vücut etiketinin sonuna gelebilir, bağlantıyı vücut etiketinizin sonuna koyarak performansın arttığı doğrudur, ancak performans bir sorun olmadıkça, kafaya yerleştirmek daha iyidir insanların okumak ve bağlantıların nerede olduğunu biliyor ve onlara daha kolay başvurabilirsiniz.

— Timothy Trousdale
kaynak

-1

Javascript kodu ile ulaşmak için planlanan aslında bağlı olduğunu söyleyebilirim:

JS komut dosyalarınızı harici olarak eklemeyi planladıysanız, sayfanın başında en iyi yer
sayfaları akıllı telefonlarda kullanmayı planladıysanız, sayfanın altında, etiketten hemen önce.
ancak, HTML ve JS kombinasyonunu (örneğin dinamik olarak oluşturulmuş ve doldurulmuş HTML tablosu) yapmayı planladıysanız, ihtiyacınız olan yere koymanız gerekir.

— Ludus H
kaynak

Eksi hak etmek için ne dedim !? Tanrım.

— Ludus H

Harici olmanın senaryoyu kafaya koymakla ne ilgisi var? Sayfanın altı neden akıllı telefonlar için özel olarak komut dosyaları koymak için iyi bir yer? JS'den dinamik olarak HTML oluşturma hakkındaki ifadeniz, yalnızca kullanmamanız document.writegerektiğinde doğrudur .

— Quentin

Ne düşündüğümü "varsaydınız" ve cevabımın eksi olması nedeniyle? Muhtemelen varsayımınızın açıklamamdan daha iyi olduğunu düşünüyorsunuz, değil mi? Kısa bir açıklama yapmayı planladım, eğer birisi anlayamazsa daha fazla bilgi isteyecektir. Yorumumda, JS'nin akıllı telefonlar ve tabletler için sayfanın sonuna, vücudun sonundan hemen önce koyulmasını önerdim çünkü tarayıcının "tek iş parçacığı" moduna geçmesi gerekmediğinden sayfanın tamamı daha hızlı yükleniyor, sayfa içeriği görünmeye başlayacak ekranda ... ama muhtemelen bunu biliyorsun.

— Ludus H

Bir HTML dosyasına JavaScript nereye yerleştirilir?

Neden?

CSS

daha fazla okuma