Замерьте скорость рендеринга с помощью Инструментов Разработчика Google Chrome. Это очень относительное утверждение.
Скорость рендеренинга страницы - не совсем верный термин. Вы замеряете время:
1. За которое получаете ответ от сервера на ваш запрос
2. За которое браузер скачивает все файлы для построения страницы
3. За которое браузер показывает первые полезные данные (не loader)
4. За которое браузер полностью рендерит страницу
В случае с Django:
1. Запрос проходит через Nginx - на wsgi
2. Wsgi ищет правильную привязку URL
3. Wsgi запускает все Middleware
4. Wsgi запускает view
5. После того, как отработал view, HTML код возвращается через все Middleware
6. Браузер получает код целой страницы со всеми ссылками на файлы и изображения. Допустим, 20 килобайт страница и ещё около сотни ссылок на ней.
В случае с Vue.js:
1. Запрос приходит в nginx
2. Nginx ищет нужный html файл и отдаёт его.
3. В браузер приходит небольшой файл с одним js. Там ничего нет по сути, кроме скрипта vue.js и пустого html файла.
Что это всё значит?
1. Django всегда запускает свои Middleware чтобы получить HTML код. Плюс, сама вьюха
2. Django возвращает уже готовый HTML страницы. Это много кода и много ссылок в коде
3. Современные браузеры загружают файлы по ссылкам в коде параллельно. То есть, загрузка и рендеринг 100 файлов параллельно будут происходить быстрее, чем загрузка и рендеринг одного файла.
Здесь, правда, стоит поспорить: Загрузка 100 файлов для рендеринга страницы происходит быстрее, чем, скажем, 5 файлов потому, что эти файлы сразу начинают отображаться после загрузки. Часть страницы можно вообще не рендерить и подгрузить позже. В случае с классическим рендерингом страницы средствами браузера, эти 5 файлов будут качаться сразу, и мы будем ждать каждый из этих файлов.
Разумеется, если брать копирование данных или тот же FTP, загрузка 100 мелких файлов никогда не будет быстрее загрузки одного файла, поскольку каждая загрузка будет создавать запрос к серверу и ждать ответ.
Итак, в браузер пользователя пришёл HTML код с одной ссылкой на Vue.js. Пришёл быстрее, чем код с Джанги. Теперь Vue.js начинает грузить дополнительные данные с сервера (многопоточно) и рендерить их. Рендеринг происходит на стороне клиента, и именно от скорости клиентской машины зависит окончательное время рендеринга. В любом случае, Vue.js уже получил преимущество: он быстрее скачал данные для отображения первичного контента, он может качать страницу частями параллельно.
Можно посоветовать:
1. Сделать оптимизацию своего кода Django. Используй кеширование страниц, где это возможно. Используй быстрый Redis Cache.
from django.views.decorators.cache import cache_page
pages_urls = [
re_path(
r'^account/',
cache_page(
60 * 60 * 24 * 30
)(
TemplateView.as_view(
template_name='base.html'
)
),
name='account'
),
]
2. С этим подходом можно включить gzip сжатие страниц перед кешированием, чтобы снизить их вес.
3. Уменьши число Middleware
Правда, твой товарищ может сделать то же самое для Vue.js, и у него будет более значительный прирост в скорости рендеринга страницы.
Выводы:
Vue.js не то чтобы быстрее Django. Просто сама архитектура позволяет ему за одинаковое с Django время грузить страницы бОльшего объёма. Vue.js готова показать первый контент на странице раньше чем, Django сделает это. Vue.js грузит части страниц и контент параллельно в несколько потоков. Vue.js при получении статических HTML, JS, CSS файлов не ждёт, пока сервер выполнит python или php код, работая напрямую с nginx. Так что, при равных условиях это будет быстрее, чем получать всю страницу от Django.
Также, следует помнить, что браузер будет ждать от Django полной загрузки основного HTML контента перед тем, как его отрендерить. За это время Vue.js уже покажет первый контент. После чего, Vue.js спокойно догрузит оставшиеся файлы. Если сжать все js в один файл и все css в один файл, то браузер будет ждать их загрузки. Vue.js может сначала отрендерить страницу, а потом уже догрузить недостающий код.
Средний
