J'utilise la bibliothèque font-awesome 5.6.1 pour remplir une table avec de nombreuses lignes et colonnes. Pour chaque ligne, il y a environ trois polices. Une police est généralement définie comme telle :

<a href="#" class="d-inline" title="Lock Event" onclick=lockEvent()><i class="fas fa-lock"></i></a>

Cependant, j'ai remarqué un énorme impact sur les performances après environ 50 icônes à l'écran. Les tableaux en cours de chargement contiennent parfois jusqu'à 1000 lignes, ce qui équivaut à environ 3000 icônes. Cela prend environ 30 secondes au navigateur Chrome pour se charger, s'il ne plante pas complètement (les polices uniquement).

Est-ce que ce que je vis est une performance réaliste pour la bibliothèque FA ? Ou est-ce que je fais quelque chose de mal ?

MISE À JOUR

Une enquête plus approfondie montre que les polices ont en fait été générées en tant que svg. J'essaie de comprendre pourquoi cela s'est produit alors que je spécifie les polices CSS en tant que telles :

 cell1.innerHTML = `<a href="#" class="d-inline" title="Unlock Event" onclick=unlockEvent()><i class="fas fa-unlock"></i></a>`;

MISE À JOUR

Ce qui s'est passé, c'est que j'ai indiqué les fichiers FA CSS et JS. Ainsi, le navigateur a utilisé le code JS pour générer les SVG. Assurez-vous que vous n'avez que le CSS !

4
ceds 14 mars 2019 à 17:23

2 réponses

Meilleure réponse

Comment tirez-vous dans Font Awesome ? Si vous incluez simplement dans votre tête :

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Vous pourrez faire ce que vous faites sans problème et cela ne générera pas de svg.

0
thatgibbyguy 14 mars 2019 à 14:56

Incluez-la dans votre feuille de style, ou parfois télécharger la police sur votre serveur aide également. Il reste sur le serveur, donc le chargement devient plus rapide, mais là encore, cela dépend de votre serveur, etc.

0
A Hus 14 mars 2019 à 16:21