Gdzie w pliku HTML należy umieścić Jquery i Bootstrap?

Zastanawiam się, gdzie mogę umieścić moje pliki Jquery i Bootstrap. Zalecają, aby zawsze umieszczać go na dole dla celów wydajności, ale kiedy sprawdzam witryny, które używają Jquery/Bootstrap, większość użytkowników zawsze umieszcza je na górze. Czy powinienem też ładować własne pliki JavaScript przed lub po plikach bootstrap/Jquery?Gdzie w pliku HTML należy umieścić Jquery i Bootstrap?

Zakładam, że najpierw załaduję mój plik css przed plikiem bootstrap, jeśli chcę nadpisać część jego stylu, czy to jest poprawne i czy to samo dotyczy plików javascript?

Źródło

2015-05-27 Mlbliner

Aby przesłonić styl bootstrap, powinieneś umieścić css ** po ** bootstrap. Więc nie rozumiem .. –

Nie chcesz załadować niestandardowego css i javascript PO frameworkach (jQuery/bootstrap), które importujesz – zgood

Ohhhhh, dziękuję bardzo. – Mlbliner

Zazwyczaj arkusze stylów w obrębie głowy i skryptów przed zamykającym </body> tagu:

<html> 
    <head> 
    <link rel="stylesheet" href="bootstrap.css"> 
    <link rel="stylesheet" href="your-other-styles.css"> 
    </head> 
    <body> 
    <!-- content --> 
    <script src="jquery.js"></script> 
    <script src="bootstrap.js"></script> 
    <script src="your-other-scripts.js"></script> 
    </body> 
</html>

będziemy chcieli plików pochodzących od dostawców, takich jak jQuery i Bootstrap zostać włączone przed twoje. Oznacza to, że:

CSS: Możesz zmienić swoje style własnymi *
Scripts: Masz dostęp do wszelkich obiektów dodanych do zasięgu globalnym, takich jak window (jQuery dodaje $, na przykład)

Jeśli jednak przed załadowaniem zawartości wymagany jest skrypt (na przykład Modernizr), umieszczenie go w urządzeniu <head> zapewnia jego gotowość przed dowolną treścią.

W tym skrypty na dole zapewniają, że rzeczywista treść strony zostanie załadowana jako pierwsza; kiedy skrypty zostaną wreszcie pobrane, zawartość (DOM) będzie gotowa do manipulowania skryptami.

* zakładając swoją specyficzność selektor jest co najmniej równe tym w swoim dostawcy CSS

Źródło

2015-05-27 16:36:20 Alex

jeśli to adresujesz: _Uprowadzam to, że ładuję mój własny plik css najpierw przed plikiem bootstrap, jeśli chcę przesłonić część ich stylu, czy to jest poprawne i czy to samo dotyczy plików javascript? _ Wtedy ta odpowiedź byłaby kompletny – zgood

To prawda, ale proszę również wyjaśnić, dlaczego jest to najlepsza praktyka. PO prosi nie tylko o to, jak zrobić to najlepiej, ale także o to, dlaczego pewne rozwiązanie jest preferowane. – connexo

@connexo większość frameworków takich jak jQM z przyjemnością umieszcza się w nagłówku dokumentu HTML. Bootstrap nie. bardzo dobre pytanie, które zadałeś, dlaczego? – Tasos

Spód najlepiej jest umieścić wszystkie swoje referencje skrypt na końcu strony przed </body>.

Mimo że w niektórych przypadkach może być konieczne załadowanie kodu JavaScript przed wczytaniem strony, jeśli jakakolwiek funkcja musi uzyskać dostęp do JavaScript przed wczytaniem strony. Szczególnie, jeśli pracujesz z JQuery UI And Bootstrap.

można ozdobić swoje tagi skryptu z atrybutem defer tak, że przeglądarka wie pobrać skrypty po HTML nie będzie już pobrane:

<script src="Jquery.js" type="text/javascript" defer="defer"></script>

lub

<script src="demo_async.js" async></script>

Kiedy obecny, określa, że skrypt zostanie wykonany asynchronicznie, gdy tylko będzie dostępny.

http://www.w3schools.com/tags/att_script_async.asp

Jeśli potrzebujesz dostępu do skryptu w stronie do użytku następnie skrypt trzeba dostępne przed użyciem.

JavaScript domyślnie blokuje wszelkie inne równoległe pliki do pobrania.Więc jeśli masz wiele tagów w głowie, wywoływanie wielu zewnętrznych skryptów blokuje ładowanie HTML, więc wita użytkownika pustym białym ekranem, ponieważ żadna inna treść na twojej stronie nie załaduje się, dopóki pliki skryptu java nie zostaną załadowane do końca. Kolejną zaletą ładowania skryptu na dole jest to, że każdy błąd spowodowany przez skrypt zewnętrzny nie zatrzyma strony z Ładowanie do przeglądarki.

Aby uzyskać dostęp do strony, styl css musi znajdować się na górze strony <Head>.

Źródło

2015-05-27 16:38:59 Garry

Atrybut "odroczenia" ma mieszane wsparcie. To może, ale nie musi być OK, w zależności od zakresu klientów WWW, których potrzebujesz do wsparcia. Zobacz http://caniuse.com/#feat=script-defer – PhilNicholas

To naprawdę zależy od tego, co chcesz osiągnąć, ale ogólnie JS jest umieszczony na dole i CSS w twojej sekcji głowy. Upewnij się, że biblioteka jQuery ładuje się przed biblioteką JS Bootstrap, a Twój niestandardowy plik css ładuje się po CSS Bootstrapa, więc zostanie zastąpiony. Możesz załadować CSS Bootstrapa z ich CND (lub innych, takich jak cloudflare - na przykład http://cdnjs.com/libraries).

Upewnij się, że zminimalizowana została cała ta kompilacja aktywacji & i nie powinieneś mieć problemów z wydajnością.

Zaawansowane techniki sugerują użycie najważniejszej części twojego CSS w obszarze głowy, a następnie wysłanie reszty CSS w dolnym obszarze. Lub mieć całą statyczną treść (CSS + JS) hostowaną na CDN.

Źródło

2015-05-27 16:41:15 designarti

Gdzie w pliku HTML należy umieścić Jquery i Bootstrap?

Odpowiedz

Powiązane problemy