#javascript #html #css #font-awesome
#javascript #HTML #css #шрифт -потрясающий
Вопрос:
Я использую библиотеку font-awesome 5.6.1 для заполнения таблицы множеством строк и столбцов. На каждую строку приходится около трех шрифтов. Шрифт обычно определяется как таковой:
<a href="#" class="d-inline" title="Lock Event" onclick=lockEvent()><i class="fas fa-lock"></i></a>
Однако я заметил значительное снижение производительности примерно после 50 значков на экране. Загружаемые таблицы иногда содержат до 1000 строк, что равно примерно 3000 значкам. Загрузка браузера Chrome занимает около 30 секунд, если он не завершается полным сбоем (только шрифты).
Является ли то, что я испытываю, реалистичной производительностью для библиотеки FA? Или я делаю что-то не так?
Обновить
Дальнейшее исследование показывает, что шрифты на самом деле были сгенерированы как svg. Пытаюсь выяснить, почему это произошло, поскольку я указываю css-шрифты как таковые:
cell1.innerHTML = `<a href="#" class="d-inline" title="Unlock Event" onclick=unlockEvent()><i class="fas fa-unlock"></i></a>`;
Обновить
Что произошло, так это то, что я указал на оба файла FA CSS и JS. Таким образом, браузер использовал JS-код для генерации SVG-файлов. Убедитесь, что у вас есть только CSS!
Комментарии:
1. Я бы предположил, что это было бы нормально, поскольку браузеру должно хватить 3000 значков для обработки. Хотя я не могу ответить на ваш вопрос, я бы посоветовал поискать либо систему асинхронной загрузки, либо какую-нибудь систему подкачки, поскольку пользователь все равно не может просматривать все 1000 строк одновременно. Это должно улучшить работу вашего приложения, по крайней мере, немного.
2. Спасибо за ваше предложение. Для меня это просто странно, поскольку я могу легко загрузить 3000 небольших изображений без проблем. Однако при использовании FA это огромная проблема. Почему такое снижение производительности?
3. Просто чтобы исключить очевидное — возвращается ли производительность к ожидаемой после удаления значков? Рендеринг таблицы с 1000 строками сам по себе может быть медленным. В любом случае, может помочь что-то вроде
react-virtualized(или эквивалент для выбранной вами платформы), так что вам нужно отображать только те строки, которые видны в данный момент.4. У меня здесь 10000 отрисовок: jsfiddle.net/tkmap42z/1 и производительность кажется нормальной, хотя я не уверен, что это полностью соответствует вашему варианту использования
5. @ceds Это зависит от того, как создаются иконки, они могут быть либо в формате svg, либо в виде шрифта, документация font awesome по этому поводу предполагает, что шрифты css выполняются быстрее
Ответ №1:
Как вы добиваетесь потрясающего шрифта? Если вы просто включите в своей голове:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
Вы сможете делать то, что делаете, без проблем, и это не приведет к созданию svg.
Комментарии:
1. Как бы прост ни был ваш ответ, он правильный. Что в основном произошло, так это то, что я включил ссылки как на css, так и на javascript, не зная, что javascript — это то, что генерирует svg. удаление ссылки javascript сделало свое дело. Поэтому я отмечу это как правильное
Ответ №2:
Включите его в свою таблицу стилей, а иногда также помогает загрузка шрифта на ваш сервер. Он остается на сервере, поэтому его загрузка становится быстрее, но опять же, это зависит от вашего сервера и т.д.