Optymalizacja stronki

0

Witam
Jako że jestem początkującym webmasterem:) mam pytanie do bardziej doświadczonych programistów. Robię stronkę która będzie korzystała z ajax. Chodzi mi o to czy mogę w jednym pliku js wrzucić kilka funkcji która będzie obsługiwać ogłoszenia, forum, logowanie, rejestracje, dodawaniehumoru. Czy do każdego skryptu php np forum funkcje obsługujące ją wrzucam do 1 pliku js a np ogłoszenia do drugiego. To samo jeśli chodzi o css. Może być jeden plik czy musi być kilka?
Pozdrawiam i czekam na odpowiedzi

0

Wszystko zależy od stopnia skomplikowania skryptów i stylów, a nawet od preferencji programisty. Nie ma jednej odpowiedzi.

W przypadku arkuszy stylów generalnie odpowiedź brzmi "nie": raczej nie dzieli się ich w ten sposób, jeśli wszystkie działy bazują na tym samym layoucie (dość ważne założenie). Kod CSS zwykle nie jest ani na tyle wielki, ani na tyle skomplikowany by go tak rozbijać na pliki. Poza tym CSS nie zapewnia hermetyczności i, hmm, "sztywnej granularności". Cały dołączony do strony kod CSS się liczy i jest wykonywany, chyba że ograniczysz dany plik czy fragment CSS do danego medium. I w takim wypadku już powinieneś utrzymywać arkusze stylów dla poszczególnych mediów ("screen" dla ekranu, "print" dla wydruku itd.) w osobnych plikach.

Możesz też umieścić style resetujące -- jeśli takich używasz -- w osobnym pliku i użyć @import, by zaimportować je do głównego arkusza stylów.

Główne style określające elementy strony umieszcza się jednak na ogół w jednym pliku. Chyba że są bardzo duże -- wtedy można je rozbić tak, jak mówiłeś. Wątpię jednak, byś miał taki przypadek. Generalnie i 500-1000 linii CSS, gdy reguły zapisuje się w kilku linijkach, to nie jest dużo.

Co jednak powinieneś zrobić, to podzielić główny arkusz stylów na wyraźne sekcje. Możesz to zrobić dokładnie tak, jak powiedziałeś: forum, logowanie, rejestracja. Sekcje oznaczasz komentarzami, o tak:

/* Wspólne dla wszystkich podstron
----------------------------------------------- */
#naglowek {
...
}

#zawartosc {
...
}

#stopka {
...
}


...

/* Forum
----------------------------------------------- */
#forum .przyklad {
  ...
}

#forum .wpis {
  ...
}

...

/* Rejestracja
----------------------------------------------- */
#rejestracja form {
  ...
}

#rejestracja .costam {
  ...
}

Ja sobie dzielę też "Wspólne" na osobne działy, tj. reguły związane z nagłówkiem mam razem, ze stopką razem itd.

Trzymanie wszystkiego w jednym pliku podzielonym na sekcje dotyczy jednak tylko sytuacji, w której wszystkie działy strony mają generalnie ten sam interfejs (w różnych widokach). Jeśli u Ciebie layout forum jest zupełnie inny niż strony głównej, tj. layoutu te nie mają ze sobą nic wspólnego, to daj im oddzielne arkusze stylów. Mi się czasem zdarza, że CMS strony jest podzielony na wyraźną część frontendową (dla użytkowników przeglądających witrynę) i backendową (dla administratorów witryny). I one mają zupełnie inne layouty. Wtedy wypada umieścić je w osobnych plikach (ale wciąż wszystkie strony frontendu są w jednym pliku).

Tyle o CSS.

JavaScript to trochę inna bajka. Tu sporo zależy od kontekstu.

Jeśli kod jest złożony i definiuje wiele konstruktorów (nie chcę używać słowa "klas", bo w JavaScripcie klas nie ma), to wtedy najczęściej go rozdrabniam. Czasem nawet bardzo. Mogę Ci tu coś powiedzieć na konkretnym przykładzie: dosłownie teraz wykańczam pewną aplikację javascriptową. Jak dla Ciebie (tj. początkującego) jest ona skomplikowana: zrobiona w architekturze MVC, zawiera ponad 20 konstruktorów (ehm, "klas"), a liczbę linii kodu liczy się w (co prawda małych) tysiącach. Podzieliłem ją na ponad 25 plików -- każdy przechowuje maksymalnie jedną "klasę". Mogłem sobie jednak na to pozwolić z dwóch powodów. Po pierwsze, aplikacja będzie pracowała lokalnie i wydajność nie jest tu najmniejszym problemem. Po drugie, cała aplikacja działa asynchronicznie i jest oparta na zdarzeniach, a ja jestem na tyle przypakowany, że zrobiłem wszystko tak, że wystarczy dołączyć tylko jeden plik, a reszta dołączy się sama w razie potrzeby (więc nikt nie musi zapamiętywać skomplikowanych zależności "który plik wymaga którego" -- one same to wiedzą i same dbają, by dołączyć swoje poprzedniki).

Ale Ty pytasz o "funkcje". Jeśli masz funkcje ogólnego przeznaczenia, albo też jest ich stosunkowo niewiele, to możesz zastosować pojedynczy plik. Ja u siebie mam cały mały pakiecik z funkcjami ogólnego przeznaczenia -- kilka niewielkich plików z konstruktorami i jeden większy z obiektem utils zawierającym funkcje ogólnego przeznaczenia. Taki jeden wielki worek, do którego wrzucasz wszystkie śmiecie nie jest generalnie zbyt fajny, ale mi udało się utrzymać jego rozmiar w granicach 400-500 linii. Nie uważam, by było to dużo i myślę, że i Ciebie skrypty tej wielkości nie powinny zniechęcać. Nie trzeba ich dzielić na wiele plików.

W przypadku szczególnie Ajaxu jest jedna bardzo ważna sprawa: funkcje administracyjne (używane tylko przez administratorów) NIE powinny być widoczne dla każdego. Możesz mieć jeden plik zbiorczy ze wszystkimi funkcjami, ale nie wrzucaj tam funkcji, z których korzystać będą tylko administratorzy (bo używane są tylko przez widok administracyjny). Eksponowanie takich funkcji każdemu ułatwia życie włamywaczom.

Jeśli chodzi o wydajność, to tu generalnie nie ma wątpliwości: pojedyncze pliki królują. Mniej plików = mniej żądań http do serwera = mniejsze obciążenie serwera i szybsze działanie strony. Jeśli ja miałbym przerobić moją kilkudziesięcioplikową aplikację tak, by działała w Internecie, to na pewno scaliłbym wszystkie pliki w jeden. A potem jeszcze skompresował. Bo asynchroniczne ściąganie ponad 20 plików (w dodatku nie całkiem równoległe) powodowałoby konkretne opóźnienia.

edit: Pamiętaj, że podział kodu to generalnie kwestia Twojej wygody. Potencjalnie nie tylko Twojej, ale i innych, którzy będą nad tym kodem pracowali. Robisz teraz jakąś stronę samodzielnie? Są szanse, że za 3 lata trzeba będzie coś w niej zmienić, ale Tobie nie będzie się chciało / będziesz zasypany innymi zleceniami.

Najpierw miej na uwadze własną wygodę -- ale nie tylko w samym pisaniu, ale szczególnie modyfikowaniu i debugowaniu kodu. Prędkość klepania kodu też się liczy, może nawet bardzo się liczy. Ale chodzi o czas od rozpoczęcia do zakończenia. Nie chodzi o to, byś jak najszybciej był w stanie dodawać nowe linijki. Normą jest, że podczas tworzenia strony coś musisz zmienić (bo np. coś działa źle, lub jeszcze nie jest gotowe i dopiero nad tym pracujesz). Generalnie znacznie więcej czasu spędza się nad czytaniem i modyfikowaniem kodu niż samym pisaniem nowego. Trzeba to wziąć pod uwagę przy podziale kodu.

Co do wydajności... Tę możesz zawsze zapewnić po prostu scalając kilka plików w jeden -- już po ich ukończeniu. Możesz nawet sobie sam napisać odpowiednie narzędzie, czy wręcz skrypt stale działający po stronie serwera. Ty masz wszystko ładnie posegregowane w 5 plikach, ale skrypt powiedzmy w PHP łączy te 5 plików i robi z nich jeden. Po drodze może go jeszcze skompresować. A plik wynikowy może buforować. Wtedy masz i wydajność i czytelność, najlepsze z obu światów.

0

Ok. Dzięki za wyjaśnienia. Pracuję nad swoją pierwszą stronką:) I co tutaj dużo mówić, nie mam jeszcze doświadczenia. Ale dziękuje za pomoc. Pozdrawiam

1 użytkowników online, w tym zalogowanych: 0, gości: 1