Сценарии применения
Проще говоря, экран-скелет — это страница изhtml загрузка завершенаДля завершения загрузки js и выполнениявизуализация данныхСхема временного рендеринга базовой структуры страницы между этими двумя моментами времени.
Насколько я понимаю, существуют определенные сценарии оптимизации экрана скелета, включая, помимо прочего, следующие ситуации:
- Маршрутизация SPA с механизмом ленивой загрузки
- Рендеринг домашней страницы для многостраничных программ
- Маршрутизация без ленивой загрузки в SPA, но объем данных большой, и полная загрузка и рендеринг данных занимает много времени
На приведенном выше рисунке наглядно показано переключение между двумя многостраничными программами с использованием Skeleton Screen для оптимизации внешнего вида пользователя.
Рендеринг скелета находится вВремя компиляции внешнего проектаЗавершено, что соответствует тому факту, что компонент визуализируется в DOM в режиме реального времени во время выполнения браузера, что технически находится на стороне сервера.Предварительный рендеринг макета компонента и данных в строки htmlИ вставьте его в html-файл. Для этого требуется поддержка рендеринга на стороне сервера (ssr). Фронтенд-фреймворки, такие как react и vue.js, которые полагаются на виртуальную модель DOM, естественным образом поддерживают рендеринг на стороне сервера. Потому что для простого создания виртуального дома и сопоставления его с деревом DOM требуется только среда выполнения JavaScript на стороне сервера (например, движок V8). Рендеринг на стороне сервера на основе виртуального дома, созданного в ответ, вы можете обратиться ктехнический блог поразительно
Рендеринг на стороне сервера
Рендеринг на стороне сервера используется в качестве основного стека технологий каркасного экрана.Вы можете обратиться к официальным документам каждой внешней среды, таким какvue-ssr guide, В основном зависитvue-server-rendererЭта библиотека реализует
Возьмите компонент Vue.js, визуализируйте HTML-строку в Node.js, вы можете просто разделить шаги:
// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
// el: 是不需要的，因为一旦设置目标 el，就会涉及document 操作
template: `<div>Hello World</div>`
})
// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">Hello World</div>
})
Официальная демонстрация выше очень проста, определите компонент vue непосредственно в файле скрипта nodejs. Однако в практических приложениях наши компоненты, как правило, более сложны, это может быть запись app.vue, которая зависит от нескольких компонентов, поэтому нам нужно представить ее по-другому.Объект vm, созданный новым Vue.Этот объект vm в качестве первого параметра функции renderer.renderToString является ядром. На самом деле, отслеживая исходный код vue-server-renderer, ssr по-прежнему полагается на функцию рендеринга компонента vue для выполнения большей части работы, которая является основной функцией компонента vue.
| installSSRHelpers(component);
renderToString -> createRenderFunction -> | normalizeRender(component); // get component render function
| renderNode(component._render(), true, context);
// call component render to VNode.
несколько ям
- document not defined
рендеринг на стороне сервера иНе эквивалентно запуску процесса браузера на стороне сервера., поэтому глобальные объекты, такие как окно, документ и т. д., в форме браузера получить нельзя. Как только операция с документом будет задействована в js-скрипте, отображаемом на стороне сервера, будет сообщено об этой ошибке документа, не определенной.
Таким образом, либо в компоненте vue, либо во всех зависимостях, где используется документ, должно быть выполнено обнаружение, либо глобальный объект должен быть добавлен в определение документа перед рендерингом на стороне сервера.github issue
- unexpected token =
Во время выполнения vue-server-renderer предоставляет API для рендеринга компонентов vue в html-фрагменты и вставки их в HTML-шаблон.При создании рендерера передается шаблон. Позже выяснилось, что шаблон ssrНе может содержать такие символы, как <% ddd>Да, то есть шаблон должен иметьСовместим с синтаксисом шаблона vue..
// 最后ssr 就会输出 Vue 组件的内容，并且注入到template 中 注释 <!--vue-ssr-outlet--> 的地方
const renderer = createRenderer({
template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
const context = { title: 'Hello' }
renderer.renderToString(app, context, (err, html) => {
// 页面模板中 {{ title }} 将会是 "Hello"
})
конкретная ссылкаssr использует шаблоны страниц. Поскольку некоторые бэкенд-программисты привыкли к синтаксису шаблонов asp или jsp, использование <% vue ssr.>
написать на обороте
Подводя итог, на этот раз я просто кратко проанализировал и записал первую часть реализации каркасного экрана Skeleton, которая представляет собой рендеринг на стороне сервера, который является технической предпосылкой предварительного рендеринга. На самом деле такое бэкенд-сращивание Html-строк живет в эпоху PHP, на сервере python и даже на сервере node.js, мы это уже делали (ejs или jade).По сути, объединение строк Html для улучшения SEO и отклика на первый экран..
На Github есть много генераторов статических веб-сайтов или инструментов для ведения блогов, основанных на рендеринге на стороне сервера, которые могут обеспечить относительно плавный просмотр, например:vuepress.
Что касается реализации каркасного экрана, то в индустрии уже есть очень зрелые решения, как на основе ssr, так и непосредственно на основе ядра браузера для запуска процесса пререндеринга, которые вообще не используют стек технологий Vue ssr. В следующий раз я поделюсь последним подробно
Справочное чтение:
Вторая серия разработки Vue.js: функция рендеринга
essential-guide-to-improve-seo-in-single-page-application-vuejs