Jakie są wady/problemy związane z dołączaniem skryptów do części strony, a nie do elementu głównego?

Zostało już opublikowane entry dotyczące zalet/wad umieszczania javascript w elemencie <head> vs. tuż przed tagiem zamykającym body (</body>).Jakie są wady/problemy związane z dołączaniem skryptów do części strony, a nie do elementu głównego?

Jednak widziałem czasami, że programiści umieścili kod JavaScript w dowolnych lokalizacjach na stronie HTML. Wydaje się, że jest to głównie spowodowane lenistwem. Jakie są wady osadzania kodu JavaScript w dowolnych lokalizacjach strony? Istnieje wiele oczywistych wad, takich jak brak buforowania, mniej ponownego użycia itp. Jakie inne wady można sobie z tym wyobrazić?

Dzięki w asdvance.

Źródło

2010-06-22 Behrang

Przeczytaj to:

http://groups.google.com/group/closure-library-discuss/browse_thread/thread/1beecbb5d6afcb41?hl=en&pli=1

Krótka historia jest to, że nie chcemy czekać na DOMContentReady (lub gorzej zdarzenie load), ponieważ prowadzi do zła doświadczenie użytkownika. Interfejs użytkownika nie jest zgodny z , dopóki cały DOM nie zostanie załadowany z sieci przez . Tak więc preferowanym sposobem jest użycie skryptów wbudowanych tak szybko, jak to możliwe.

<div id="my-widget">&lt;/div> 
<script> 
    initWidget(document.getElementById('my-widget')); 
</script>

Tak, to nie jest tak łatwe do utrzymania ale prowadzi do lepszej obsługi doświadczenia. Dzięki celowemu pozostawieniu przez nas wrapperów DOMContentReady mamy mogliśmy zapobiec używaniu Google Apps do na tym wzorcu.

I tak:

Using DOMContentReady considered anti-pattern by Google

Źródło

2010-06-22 14:34:49

+1 Szukałem * tego cytatu, ale nie mogłem go znaleźć. :-) Pamiętam, że byłem zaskoczony, że działa to niezawodnie w różnych przeglądarkach, ale jeśli ludzie Google Apps mówią, że tak jest, jestem pewien, że w to wierzę. –

@ T.J. Crowder ... Wciąż czekam na ten artykuł, który oni (Erik Arvidsson i przyjaciele?) Zamierzają opublikować na ten temat. :-) –

Tak, cóż, ludzie są zajęci. ;-) Czyniąc takie rzeczy, naprawdę trzeba użyć narzędzia do kompilacji lub czegoś, co wstępnie przetwarza pliki do wydania, prawda? Ostatnią rzeczą, którą chciałbyś zrobić, jest poprosić projektantów, aby pieprzyli swój HTML z tymi rzeczami ... –

Najbardziej oczywistą wadą jest to, że jeśli jest to framework, członkowie nie będą dostępni, dopóki nie zostanie pobrany i przeanalizowany. Rozważmy następujący scenariusz:

<html> 
    <head> 
    <script type="text/javascript"> 
     $(document).ready(function() { /* ... */ }); 
    </script> 
    </head> 
    <body> 
    <!-- rest of content --> 
    <script type="text/javascript" src="jquery.1.4.2.min.js"></script> 
    </body> 
</html>

Oczywiście, można dostać „$ jest niezdefiniowana” błąd. Cały kod bazujący na tym skrypcie musi podążać za nim w kolejności wykonywania (chyba że używasz timerów, atrybutu odroczenia lub zdarzenia window.onload).

Przeważają nad wadami, o ile widzę.

Źródło

2010-06-22 14:09:59

Po umieszczeniu elementu script na stronie, niezależnie od tego, gdzie się znajduje, chyba że korzystasz z defer or async attributes i przeglądarki, z której korzysta użytkownik, obsługuje ona wszystkie parsowania HTML i kontrola jest przekazywana do Interpreter języka JavaScript (oczekiwanie na pobranie pliku skryptu, jeśli skrypt znajduje się w oddzielnym pliku). Powoduje to renderowanie Twojej strony. Więc jeśli nie masz naprawdę dobrego powodu do umieszczenia tagu skryptu w innym miejscu, umieszczenie tagu skryptu na samym dole strony poprawi jego pozorny czas ładowania.

Oczywiście mogą istnieć naprawdę dobre powody. Na przykład, jeśli skrypt ma używać document.write do wyprowadzania HTML na stronę (tak jak robi wiele skryptów reklamowych), to oczywiście musi znajdować się w miejscu, w którym musi iść HTML. Podobnie, jeśli masz przycisk w interfejsie użytkownika i podpinacie handler'a do przycisku, który wywołuje twój skrypt, jeśli skrypt znajduje się niżej na stronie, może to być okno z możliwością kliknięcia przycisku przez użytkownika zanim pojawi się skrypt obsługujący kliknięcie, albo nie robiąc nic, albo otrzymując błąd, który negatywnie wpływa na wygodę użytkownika.

Jeśli twoja strona jest w pełni funkcjonalna bez żadnego skryptu (dobra praktyka w przypadku większości stron internetowych ogólnego przeznaczenia), a skrypt po prostu poprawia wrażenia, umieść skrypt na dole. Jeśli skrypt ma kluczowe znaczenie dla funkcjonalności witryny (całkowicie dopuszczalna praktyka dla niektórych witryn, a na pewno dla wielu aplikacji internetowych), najlepiej, aby proces budowania łączył wszystkie niestandardowe skrypty JavaScript w jednym pliku, zminimalizował go i łącze to w head, tak że trzymasz rzeczy tak krótko, jak to możliwe. (Jeśli twój skrypt opiera się na bibliotekach, możesz załadować je niezależnie od CDN w celu przyspieszenia lub dodać do niestandardowego kodu, w zależności od oceny, która będzie szybsza dla twoich użytkowników.)

To wszystko prędkość/Postrzegany argument prędkości. Z punktu widzenia separacji problemów upewnij się, że wszystkie JavaScript są w oddzielnych plikach (przynajmniej oddzielne pliki źródło; możesz mieć proces kompilacji, który połączy twój kod JavaScript z kodem HTML, aby utworzyć plik ouput do wyświetlenia użytkownikowi bez naruszania separacji obaw, ale wtedy nie można uzyskać buforowania JavaScriptu, jeśli używasz go na więcej niż jednej stronie).Gdy masz już osobny plik JavaScript, będziesz musiał połączyć się ze skryptem gdzieś na, nie sądzę, że to naprawdę robi dużą różnicę w stosunku do separacji obaw o punkt widzenia gdzie, o ile nie masz mieć elementy skryptu zaśmiecone na całym źródle HTML.

Edit: Zobacz też David Murdoch's answer cytując Google od wartości bloków skryptu inline do podłączenia interfejsu. Chciałem to odnieść, ale nie mogłem go znaleźć; on zrobił. To jest ból, ponieważ (chyba że robisz to za pomocą skryptu budującego), to naprawdę psuje oddzielenie obaw. Z drugiej strony nie powinno być tak trudno zrobić z tagami i skryptem budowania ...

Źródło

2010-06-22 14:11:35

+1. Umieszczanie skryptów u dołu strony poprawia komfort użytkownika, poprawiając jego wydajność. –

Ta sama zasada, dla której stworzono CSS. W sposobie oddzielania prezentacji i znaczników przy użyciu arkuszy stylów z kodem HTML funkcje i znaczniki powinny być oddzielone przez włączenie javascript na zewnątrz, zamiast wstawiania elementów HTML.

Również mniej przepisywania kodu. Poważnie, kto chce pisać dla każdego elementu wejściowego, gdy łatwiej jest raz napisać tę funkcję?

$('input[type="text"]') 
    .focus(function() { $(this).css('background', 'yellow'); }) 
    .blur(function() { $(this).css('background', 'white'); });

Źródło

2010-06-22 14:16:02 Michal

Jakie są wady/problemy związane z dołączaniem skryptów do części strony, a nie do elementu głównego?

Odpowiedz

Powiązane problemy