Динамческий DOM без HTML и CSS

206

26 ноября 2016, 17:57

Нужен ответ от знающих людей а еще лучше примеры, ссылки, статьи и прочее куда копать и где почитать.

Собственно будет ли страница загружаться быстрее при условии, что мы будем генерировать весь dom через js по сути у нас не будет html разметки и css кода в файлах а весь дом будет строиться через js по сути у нас будет 1 файл забитый js кодом.

Быстрее ли такой подход чем стандартный с файлами html/css Желательно развернутые ответы(как, почему и тд)

Answer 1

Прежде всего Вы должны думать о пользователях. А пользователи заходя на Ваш сайт хотят одного - увидеть контент, да как можно быстрее. Они не хотят смотреть на белый экран.

Поэтому ответ на Ваш вопрос будет осознание того что Вам дороже - трафик или пользователи.

Если у Вас в index.html будет только ссылка на .js, то такой файл загрузится быстрее и не удивительно, размер сократился ровно на .html. Но генерироваться dom будет медленнее и до того момента, как весь файл будет загружен, до момента когда пользователь сможет увидеть контент, будет белый экран.

Альтернатива этому - полноценный .html, контент которого пользователь увидит сразу же, как только загрузит dom дерево. А скрипты нужно поместить в самый низ body для того чтобы начать загружаться после формирования отображения. Но при таком случаи не будет моментального отклика приложения, так как скрипты ещё грузятся, а после загрузки будут выполнятся.

Но лично я склоняюсь ко второму варианту, если рассматривать стандартное вэб приложение.

Answer 2

Неплохой вариант - это делать некий preloader, который будет показывать пользователю более-менее легкий прогессбар или картинку, пока подгружается остальной контент сайта. Для этого достаточно код, стили и скрипт прелоадера поместить выше всего в index.html, тогда пользователь даже со слабым интернетом увидит страницу полностью загруженной и не будет расстроен белым экраном и т.д. Вот есть неплохая библиотечка для организации прелоадера, который будет показывать реальный прогресс загрузки PreloadJS