Najlepsza praktyka - przed wydrukiem HTML w dokumencie z wyświetlaczem: brak lub utworzyć za pomocą JS?

Question

Zajmuję się tworzeniem aplikacji HTML5 na dużą skalę i naprawdę zastanawiam się nad tym problemem. Będę miał wiele okien dialogowych i zakładek, które będą otwierane przez interakcje użytkownika.

Zastanawiam się, jaka jest najlepsza praktyka - zapisywanie wszystkich okien dialogowych i zakładek w dokumencie HTML z wyświetlaczem: brak dla wszystkich z nich lub tworzenie tych sekcji HTML w locie za pomocą JS lub jQuery za każdym razem, gdy użytkownik tworzy odpowiednia interakcja.

Co jest lepsze pod względem wydajności, łatwości rozwoju, czytelności itp.?

Każda pomoc zostanie doceniona.

Answer 1

Postaram się odpowiedzieć na to pytanie tak dobrze, jak tylko mogę.

1 - Jak już wspomniałem w komentarzach, Unikaj wbudowanej stylizacji. Przede wszystkim dlatego, że wbudowana stylizacja wywiera wrażenie DRY. Ciągłe powtarzanie tego samego jest bardzo szkodliwe dla konserwacji i programowania, ponieważ zamiast zmieniać kod, trzeba zmienić go w ~ 100 miejscach.

2 - Unikanie inline stylizacji jest również dobre dla ułatwienia dostępu, niektóre czytniki ekranu i roboty indeksujące indeksują pracę i czytanie w oparciu o selektory css, a zatem używanie wbudowanej stylizacji zmusza je do zignorowania lub niewłaściwego zmyślenia.

3 - Pracując jako programiści, łatwo jest tworzyć styl inline "tylko dla zabawy", ale to, co aktualnie robisz, to mieszanie problemów. HTML to treść, a CSS to projekt. Mieszanie tych dwóch zwykle prowadzi do bólów głowy i wykonywania mojej pracy jako programisty, który przychodzi po tobie w bólu w dupie, ponieważ nie mam pojęcia, co jest stylizowane i jak.

Teraz, na wydajność.

Kiedy używasz wbudowanych stylów, to co mówisz przeglądarce jest w zasadzie "hej, dla każdego widoku strony strony zastosuj te style do wszystkich tych elementów." Teraz stało się jasne, dlaczego to jest złe. Nie masz możliwości przechowywania w pamięci podręcznej i przechowywania plików CSS iw zasadzie zmusza przeglądarki do ponownego zgłaszania stylów za każdym razem. Używanie zewnętrznego pliku CSS pomoże Ci przyspieszyć działanie witryny, ponieważ przeglądarka przechowuje ją w pamięci podręcznej.

To było dla części css.

Javascript, o który pytałeś.

Jak już powiedziałem, ukryj rzeczy za pomocą css i pokaż w javascript. Dlaczego chcesz to zrobić zamiast wciągać wszystko? Cóż, możesz zrobić jedno i drugie. Jeśli jesteś tylko przeglądarką internetową, możesz to zrobić, to nie ma znaczenia. Ja sam wolę mieć rzeczy w DOM, ponieważ odnosi się do treści i jeśli jesteś dużą aplikacją mającą dziesiątki dziesiątek wywołań ajaxowych, tylko utrudni to konserwację. Wierzę, że jeśli masz do rzeczy ajax, upewnij się, że to się liczy i jest logiczne, a nie tylko dla kopnięć (myślę, że to dotyczy, jeśli tylko masz jQuery i zwykły javascript do twojej dyspozycji).

Jeśli pracujesz na przykład z backbone.js, bazuje ono na widokach i wprowadza w twoim interfejsie jakąś formę "MVC", co pozwala mieć widoki z subviews, które mogą pobierać zawartość z serwera.

Mam nadzieję, że pomoże to w podjęciu decyzji! :)

Answer 2

Powiedziałbym, że to zależy od tego, ile zakładek ma twoja aplikacja i jak duże są.

• Duża zawartość wewnątrz zakładek oznacza, że ​​po uruchomieniu aplikacja długo się ładuje i zużywa dużo pamięci RAM. Jeśli tak jest, przypuszczam, że załaduję je w razie potrzeby.
• Mała zawartość wewnątrz kart zostanie wczytana szybko, więc załaduj wszystko naraz, aby zwiększyć wydajność po kliknięciu kart.

Nie zapomnij przeprowadzić testów na starszych komputerach z wolnym łączem internetowym, aby sprawdzić, jak działa aplikacja. Nie każdy ma najnowszy i najszybszy sprzęt.