Краткое изложение решения каркасного экрана переднего плана

внешний интерфейс SVG React.js Ajax

Скелетонный экран

В последнее время потребности каркасного экрана время от времени использовались в проекте, поэтому я нашел время, чтобы исследовать схему каркасного экрана.Существует уже много практик каркасного экрана, и многие люди ввели свои собственные решения.Здесь по личному разумению я сделал сводку и классификацию и поделился ею со всеми.

Об экране скелета (введение)

Скелетный экран должен показывать пользователю общую структуру страницы перед загрузкой данных страницы, а затем отображать страницу до тех пор, пока не будут возвращены запрошенные данные, и дополнять содержимое данных, которое необходимо отобразить. Он часто используется для страниц списков с правилами относительного сравнения, таких как списки статей и страницы динамических списков. Во многих проектах есть приложения: например: версия Ele.me h5, Zhihu, facebook и другие сайты имеют приложения.
Возьмите картинку в качестве примера:

image

Два типа использования

Введение объясняет цель, но может продолжать подразделять:

  1. Как загрузку маршрутной коммутации в спа, она используется в сочетании с жизненным циклом компонента и временем возврата ajax-запроса.
  2. В качестве оптимизации для рендеринга над сгибом.

Использование категории 1

Для первого типа использования вам нужно написать свой собственный экран-скелет Мы рекомендуем два решения для настройки компонентов svg, которые являются зрелыми и удобными для настройки в качестве экранов-скелетов.

Рендеринг как первый экран (автоматизированное решение)

Эта схема представляет собой набор схем, обобщённых Ele.me в практике каркасного экрана:

  1. Конфигурация cssUnit: вам нужно использовать адаптивный модуль, выбрать его в соответствии с диапазоном выбора, указанным в документе, и использовать его напрямую.pxПолученный масштаб будет неуместным
  2. puppeteer имеет около 80M, и он не может быть успешно загружен за один раз во время установки.
  • принцип:
通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面，在等待页面加载
渲染完成之后，在保留页面布局样式的前提下，通过对页面中元素进行删减或增添，对已有元素通过层叠样
式进行覆盖，这样达到在不改变页面布局下，隐藏图片和文字，通过样式覆盖，使得其展示为灰色块。然后
将修改后的 HTML 和 CSS 样式提取出来，这样就是骨架屏了.

自动生成骨架屏

Другие варианты

Привязка SSR Render / Prerender используется:

  1. Заранее напишите скелет компонента экрана и внедрите его в html-файл через синтаксический анализ рендеринга ssr (за исключением того, что вам нужно написать его самостоятельно, процесс аналогичен приведенному выше решению автоматизации)Справочная статья

  2. Предварительно написанные каркасные компоненты экрана в 1 могут быть заменены картинками (svg) или разработаны дизайнером.

Каркас экрана апплета

  1. Концепции предварительного рендеринга не существует, но вы все равно можете предварительно написать компонент каркаса экрана и поместить его на страницу, а также обновить страницу после того, как асинхронно запрошенные данные будут возвращены.

Широкая реклама

Эта статья была опубликована вЕженедельный выпуск Mint Front End, Добро пожаловать в Watch & Star ★, пожалуйста, указывайте источник при перепечатке.

Добро пожаловать, чтобы обсудить, поставить лайк и перейти ｡◕‿◕｡～

Категории