未加星标

I hate Font Awesome like I hate jQuery

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

First off, if you don’t know me then you might be offended or enraged by that statement. Please, keep reading.

Font Awesome is a truly great collection of icons that can be easily deployed with a simple CSS or JS include. A ton of work has gone into it to make it as small as possible and they’ve even encouraged use of things like subresource integrity which is just great to see. Font Awesome is truly awesome.

I guess to be fair, I don’t actually hate Font Awesome, I hate that people use it blindly.

Once again, if you don’t know me, I’m a penny pincher when it comes to HTTP requests, DNS lookups and bytes crossing the wire. When someone says “pull the data in with AJAX” I say “can you just inline the data on the server-side in a JS block?” When someone else says “here’s how to do something with jQuery” I’ll always come back with the vanilla JS version. Just load the jQuery from a CDN because the user might have it cached already? Nope, I’d rather host myself. One less DNS lookup and TLS handshake to worry about, not to mention a potential point of failure.

Back to Font Awesome, including it the way that most people blindly use it you’ll end up with a minimum of two calls, one for the CSS and one for one of the font files. But, how I usually see it is that someone wants a Twitter icon , and exclamation mark , and a check mark , which, if you don’t already know actually causes three font files to download ! The Twitter logo is part of the brand fonts, the exclamation mark is solid fonts and the check mark is part of the regular fonts. In total you’ve added 150 KB to the page, just for those three icons that could have been inlined for probably 2 or 3 KB (and that’s not counting compression.)

Now, if you don’t care about 150 KB on your initial request, that’s fine, I’m not judging you. But 150 KB for X plus another 100 KB for Y starts to add up over time. And sites never shrink over time, they always grow. Tomorrow or next week or next year you’ll add a new feature which adds another 100 KB for feature Z .

My further hatred of how people use it, and you’ll see this very often in the WordPress world, is that every plugin requests their own copy of Font Awesome, some on version 4, some on version 5, so you end up with multiple downloads of Font Awesome. On a recent site we audited we found 500 KB of Font Awesome data on the home page! That’s half of a megabyte! For icons!

Anyone still reading? Probably not.

I just had to say something, it was bugging me. Font Awesome is a great way to get started for fast designs. It is also a great tool if you have dynamic or unknown data entering your site that you need to support. And further, if you defer or lazy load things you can ease the burden even more. But just don’t use it blindly.

On the off-chance that someone actually reads this I turned comments off because I don’t care, I just wanted to rant.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:I hate Font Awesome like I hate jQuery
本站链接:https://www.codesec.net/view/620889.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(11)