Pozycjonowanie plików w ASP.NET MVC

Jednym z problemów wielu aplikacji jest to, że chociaż szybko ładują zawartość, nie są one szybko widoczne w przeglądarce użytkownika, to znaczy przeglądarka zakończyła ładowanie całej zawartości, wszystkich obrazów i wszystkich CSS Tak JS, ale istnieje niewielkie opóźnienie między tym, co ładujemy, a tym, co widzimy.
Wynika to w dużej mierze z pozycji przesyłanych plików w HTMLczyli prawdopodobnie mamy CSS i JS mieszane, co utrudnia przeglądarce wyświetlanie wszystkiego tak, jak podczas ładowania pliku JS musisz go przetworzyć przed przejściem do następnego pliku.
Pierwszym zaleceniem jest zawsze umieszczanie plików stylów jako CSS na górze naszego kodu HTML, co pozwala nam na progresywne wyświetlanie strony aplikacji w przeglądarce tak szybko, jak to możliwe.
W ten sposób unikamy oglądania pustej strony przez wiele sekund przed zobaczeniem wszystkiego, co się załadowało, jeśli nie widzimy, jak strona jest stopniowo budowana, służy to jako ulga dla użytkowników, zwłaszcza tych, którzy mają wolniejsze połączenie z siecią lub Internetem .
Jeśli arkusze stylów lub CSS są na dole, przeglądarki zwykle nie ładują informacji, aby uniknąć konieczności zmiany stylu, gdy osiągną ten punkt, powodując, że użytkownik nic nie widzi.
Celem tego jest to, że przeglądarka może kontynuować ładowanie zasobów strony, ponieważ jeśli znajdzie plik JS, dopóki nie załaduje go bez błędów, nie przystąpi do pobierania innych zasobów, nawet jeśli znajdują się one w CDN.
Gdzie umieścić pliki JS?W tym celu umieszczamy pliki JS tak daleko wstecz jak możemy w naszym HTML, chociaż zdarzają się przypadki, że nie jest to możliwe ze względu na strukturę aplikacji, wtedy możemy umieścić atrybut odraczać za pomocą którego mówimy przeglądarce, że może ją załadować na końcu wszystkiego.
Problem z atrybutem odraczać jest to, że nie wszystkie przeglądarki interpretują go w ten sam sposób, więc czasami nie może zrobić tego, co myślimy, jednak jeśli uda nam się umieścić plik, ten atrybut oznacza, że ​​można go przenieść na koniec.
Zobaczmy na poniższym obrazku, jak wygląda proces ładowania strony, w pierwszej części wszystkie pliki są na górze i w dowolnej kolejności, w drugiej części są CSS w górę i JS na dół:

Tam, gdzie jest oko, jest punkt w procesie, w którym użytkownik widzi stronę aplikacji, wtedy zauważamy, że w pierwszej części strona jest widziana znacznie później niż to, co widzimy w drugiej części.
Na tym kończymy ten samouczek, możemy teraz dodać nowy element, aby poprawić szybkość i wydajność naszej aplikacji, a także skrócić czas oczekiwania użytkownika, aby zobaczyć, co ładuje jego przeglądarka.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt