Birden javascript / css dosyaları: en iyi uygulamalar?

7 Cevap php

Ben şimdi (çeşitli jQuery eklentileri sayesinde) ve 4-5 CSS dosyaları yaklaşık 7 Javascript dosyaları var. Ben bu belgede onlar yüklü olması gereken yerde de dahil olmak üzere ile başa çıkmak için en iyi uygulama ne kadar merak ediyorum? Sonunda yer - mümkünse - YSlow Javascript dosyaları olması gerektiğini söyler. Vücudun sonu? Bu delimeter onlar içeriği yazmak ister gibi görünüyor bahseder. Böylece (() hazır olduğunda tüm yapılır) Tamam olmalıdır Bütün Javascript dosyaları fonksiyonları ve jQuery kod vardır.

Yani bir CSS ve bir JavaScript dosyası içerir ve bu dinlenme dahil olmalıdır? Ben içine tüm dosyaları birleştirmek gerekir? Benim Belgenin en sonunda JavaScript Künyemi koymak gerekir?

Edit: FWIW evet bu PHP.

7 Cevap

Ben JS veya CSS dosyaları bir grup için tek bir HTTP isteği oluşturmanıza izin verir, PHP Minify kullanarak öneririm. Minify de istemci tarafında önbelleğe alma için Gzip Sıkıştırma, Sıkıştırma, ve HTTP Başlıkları işler.

Edit: Farklı sayfalar için farklı dosyaları içerir böylece Minify da kurulum isteği sağlayacaktır. Örneğin bazı sayfaları veya diğer sayfalarda sadece çekirdek JS dosyaları üzerinde özel JS kodu ile birlikte JS dosyaları bir dizi çekirdek.

Geliştirme normalde sonra yaptığınız ve tüm dosyalar dahil ederken üretim çalıştırmak küçültmek için geçiş daha yakın olsun ve tek bir HTTP isteği içine tüm CSS ve JS dosyalarını katılmak. Bu kurulum için gerçekten çok kolay ve çalışma olsun.

Ayrıca evet, CSS dosyaları kafasına ayarlanmış olmalıdır ve JS dosyaları sayfasına yazabilir ve büyük zaman aşımı sorunları neden olabilir beri JS dosyaları, altta görev yaptı.

Burada JS dosyaları içermelidir nasıl:

</div> <!-- Closing Footer Div -->
<script type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
</body>
</html>

Edit: Ayrıca Cuzillion sayfanızın kurmak gerektiğini nasıl görmek için kullanabilirsiniz.

İşte ne var: Ben iki JavaScript dosyalarına kadar kullanmak ve genellikle her sayfa için bir CSS dosyası. Ve sonra ben bunları birleştirmek ve jsmin-php kullanarak onları küçültmek ve - JS dosyaları (jQuery içeren dosyanın iyi bir aday olacağını bu yüzden bu kadar yakın ya da bunlardan yeterli) benim tüm sayfaları arasında ortak olacak anlamaya sonra birleşik dosyayı önbelleğe. Sadece bir sayfa özgü arta kalan herhangi bir JS dosyalar varsa, ben küçültmek, birleştirmek, ve de tek bir dosya içine önbelleğe. İlk JS dosyası bu bir veya belki bir kaç sadece ikinci, sayfaların bir dizi üzerinden çağrılır.

Eğer css-min ile istersen ben genellikle sadece CSS için bir dosya kullanmak bulmak olsa, CSS ile aynı kavramı kullanabilirsiniz. Ekstra bir şey, ben önbellek dosyası oluşturduğunuzda, ben zaten senin tasarrufların en alırsınız nerede aslında bir GZipped dosyası olarak hizmet için dosyanın başında küçük bir PHP kodu koymak. Ayrıca kullanıcının tarayıcı yanı dosyayı önbelleğe daha iyi bir şans olacak böylece sona erme başlığı ayarlamak isteyeceksiniz. Ben de Apache üzerinden Gzip Sıkıştırma etkinleştirebilirsiniz inanıyorum.

Önbelleğe alma için, ben dosya oluşturma zaman ben belirlenen zaman miktarından daha büyük olup olmadığını görmek için kontrol edin. Eğer öyleyse, aksi halde ben sadece varolan önbelleğe alınmış dosya olsun, önbellek dosyası yeniden ve servis yapın.

Muhtemelen şimdi bunun için en iyi uygulamalar öğreticiler yazdım olduğunu belirtmekte yarar var: Supercharging Javascript in PHP ve Supercharging CSS in PHP. Bu minifying, Gzip Sıkıştırma ve önbelleğe konuları kapsamaktadır.

Sen açıkça bir sunucu tarafı çözümü erişimi var, ama bunu varsayarak, ben her zaman aşağıdakileri yapmak için PHP kullanarak içeren bir yöntem ile gittin dedi değil:

jquery.js.php:

<?php
$jquery = ($_GET['r']) ? explode(',', $_GET['r']) : array('core', 'effects', 'browser', 'cookies', 'center', 'shuffle', 'filestyle', 'metadata');
foreach($jquery as $file)
 {
echo file_get_contents('jquery.' . $file . '.js');
 }
?>

Yerinde yukarıdaki pasajı ile, ben o zaman sadece ben normalde yaptığınız gibi dosyayı çağırır:

<script type="text/javascript" src="jquery.js.php"></script>

Ben ihtiyacım gidiyorum kesin işlevselliği hiç farkında değilim ve sonra, eğer ben sadece bir sorgu dizesi olarak benim gereksinimleri geçmek (jquery.js.php?r=core,effects). Dallı olarak onlar hiç eğer benim CSS gereksinimleri için aynı yapmak.

Ziyaretçi javascript devre dışı olup olmadığını, sayfa kullanılamaz olacak gibi ben senin css eklemek için (PHP küçültmek gibi) bir javascript tabanlı çözüm kullanarak tavsiye etmem.

Minifying ve dosyaları birleştirerek fikir harika.

Benim sitelerde de benzer bir şey yapmak ama gelişimini kolaylaştırmak için ben bu gibi görünüyor bazı kod öneririm:

if (evironment == production) {
  echo "<style>@import(/Styles/Combined.css);</style>"
} else {
  echo "<style>@import(/Styles/File1.css);</style>"
  echo "<style>@import(/Styles/File2.css);</style>"
}

Bu dosyalarınızı kolay yönetimi için dev sırasında ayrı tutmak ve hızlı sayfa yükler için dağıtım sırasında kombine dosyasını kullanmalısınız. Bu dosyaları birleştirmek ve dağıtmak sürecinin bir parçası olarak değişkenleri değiştirmek için yeteneği var varsayar.

JS düşük tutmak gibi bir somut sayfanın geri kalanı görünümünü etkileyen vardır ve çok hızlı hissediyor kesinlikle YUI tavsiyelere uygun olarak üst alt ve css adresinden js dahil içine bakmak.

Jquery.plugins.js ardından bağlantı: Ben de tek bir dosyaya yapıştırın + benim jquery tüm eklentiler kopyalamak eğilimi

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

gerçek jquery kitaplığı için.

etiketler