Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js][jQuery] Optymalizacja skryptów JavaScript?
Forum PHP.pl > Forum > Po stronie przeglądarki
starterrrrr
Witam.

Przeglądałem ostatnio mój skrypt na troszke gorszym komputerze i rzuciło mi sie w oczy, że nei dziąła on zbyt wydajnie.

Zasatanawiam sienad optymalizacją skryptów js, zauważyłem, że wiele skryptów dziąła nonstop, niezaleznie czy jest potrzebna czy nie w danym momencie.

Np mam w pliku ze skryptami taki kod:

Kod
$(document).ready(function() {
    //hiding tab content except first one
    $(".tabContent").not(":first").hide();
    // adding Active class to first selected tab and show
    $("ul.tabs li:first").addClass("active").show();  

    // Click event on tab
    $("ul.tabs li").click(function() {
        // Removing class of Active tab
        $("ul.tabs li.active").removeClass("active");
        // Adding Active class to Clicked tab
        $(this).addClass("active");
        // hiding all the tab contents
        $(".tabContent").hide();        
        // showing the clicked tab's content using fading effect
        $($('a',this).attr("href")).fadeIn('slow');

        return false;
    });

});


skrypt zakąłdek. Wykorzystuje to tylko w jednym wyskakującym okienku, cała reszta strony nie potrzebuje tego.
Patrzac na skrypt widać, że ukrywa on elementy, wyświetla inne, cały czas przekopuje strone, widze, że jest sporo takich skrypcików.

Jak sobie z tym radzicie?
mam zrobić 30 plików se skryptami js i doładowywac w odpowiednim czasie?
Comandeer
Nie wiem ile trzeba by było tego typu skryptów, żeby stały się niewydajne.

Może nie 30 plików ze skryptami, ale warto to np. podzielić na moduły (http://addyosmani.com/writing-modular-js/ ) i popakować je tak, żeby te, które są wykorzystywane razem, były w jednej paczce. Na początek wczytać główną paczkę, niezbędną do działania strony, resztę doczytywać w razie potrzeby.

Niemniej sam tego typu skrypt można zoptymalizować np. przepisując go na event delegation i cache'ując wszystkie możliwe elementy (jeśli liczba tabów nie zmienia się w trakcie życia strony, to warto je pobrać raz, wrzucić na zmiennej i operować na niej, a nie na nowo przeszukiwać DOM).
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.