无外链的CSS开发策略

作者 | 张鑫旭

来源 | https://www.zhangxinxu.com/wordpress/2019/08/css-no-external-link/

一、拜拜IE8&＃xff0c;苹果香蕉大西瓜

想想看现在都什么年代了&＃xff0c;我家小朋友都已经会打酱油了&＃xff0c;CSS中的一些开发策略也需要发生改变了。

如果你的项目不需要兼容IE8浏览器&＃xff0c;则试试贯彻下面这条CSS开发策略。

CSS代码中无外链&＃xff01;

也就是不要有任何的http/https请求从CSS文件中发出。

例如我们以前显示一个小图标背景&＃xff0c;CSS代码会是这样&＃xff1a;

.icon-arrow-down { background-image: url(./images/arrow-down.svg);
}

贯彻无外链的CSS开发策略则是这样&＃xff1a;

.icon-arrow-down { background-image: url("data:image/svg&＃43;xml,%3Csvg xmlns&＃61;&＃39;http://www.w3.org/2000/svg&＃39; viewBox&＃61;&＃39;0 0 24 32&＃39;%3E%3Cpath d&＃61;&＃39;M12.012 19.676l-8.508-8.508-2.502 2.502 11.011 11.011 11.011-11.011-2.502-2.502z&＃39;%3E%3C/path%3E%3C/svg%3E");
}

原本外链的图形全部内联。

二、没有但是&＃xff0c;就是这样&＃xff0c;是时候了

肯定有人会疑问&＃xff1a;“但是你这样明显增加了CSS文件体积啦。”

没有但是&＃xff01;现在什么年代了&＃xff0c;5G时代都要来了&＃xff0c;宽带速度多块&＃xff0c;一个小小CSS文件&＃xff0c;再怎么狂妄&＃xff0c;其增加的体积抵得上一个短视频吗&＃xff0c;抵得上一张图片吗&＃xff1f;

20K的CSS文件和50K的CSS文件完全就没有区别&＃xff0c;如果你真的对流量很在意&＃xff0c;好好把你网站的图片压缩压缩&＃xff0c;那个才是大头&＃xff0c;才是真省钱。

再说了&＃xff0c;一次CSS总的请求和之前分开的请求的总大小并没有变化&＃xff0c;相反&＃xff0c;有些素材变成字符后反而可以GZIP&＃xff0c;体积更小才是。

还有人会疑问&＃xff1a;“但是你这样会影响CSS文件的渲染性能啦。”

没有但是&＃xff01;现在什么年代了&＃xff0c;芯片都是7nm的了。渲染都很快的&＃xff0c;再说50ms的渲染和100ms的渲染有差异吗&＃xff1f;如果真的对性能很在意&＃xff0c;什么React.js什么鬼的都删掉&＃xff0c;那可真是立竿见影。

所以&＃xff0c;是时候了&＃xff0c;技术上完全支持&＃xff0c;硬件环境也支持&＃xff0c;为何不使用好处多多的无外链的CSS开发策略呢&＃xff01;

其他但是&＃xff0c;源自评论

“请求不是能缓存吗&＃xff1f;缓存的话是不是就更节省资源了呢&＃xff1f;”

没有但是&＃xff0c;CSS也可以缓存&＃xff0c;取一个缓存肯定比取多个缓存更快哟。

“但我有http2啊”

没有但是&＃xff0c;CSS无外链和http2不冲突哦&＃xff0c;同样是http2&＃xff0c;CSS无外链肯定比有很多链接快哟&＃xff0c;如今这个时代&＃xff0c;小文件的性能的瓶颈不是网速&＃xff0c;而是发起和接收请求。内联一定速度最快。当然&＃xff0c;差异并不会有多明显&＃xff0c;CSS无外链最重要的优点还是独立无耦合迁移与引用方便。

三、无外链的CSS开发策略的好处

1. 节约了大量的请求

你会发现页面的渲染和呈现速度快了很多&＃xff0c;因为页面渲染的瓶颈往往在于http/https请求上&＃xff0c;不是什么CSS渲染时间哦&＃xff0c;我们平常开发的网页是如此的简单&＃xff0c;那点CSS代码量的渲染再怎么蹦上天也没什么本质区别的。

节约了大量请求也意味着大大减轻了服务器的压力&＃xff0c;例如阿里云的https CDN是请求数给钱的&＃xff0c;这样处理是不是省了很多的钱&＃xff1f; 

如果有小图标以外的其他图形也是类似处理。

五、告别代码精神洁癖

CSS文件中会多处出现好几K的内联图标代码&＃xff0c;很多人会看了难受。其他CSS属性都是短短的&＃xff0c;就你长长的&＃xff1b;其他CSS属性都看得懂&＃xff0c;就你不知所云&＃xff0c;给人感觉代码很不协调。

这种感受人之常情&＃xff0c;可以理解。

但是&＃xff0c;我们都已经是成熟的前端开发了&＃xff0c;我们追求的是收益&＃xff0c;追求的是价值&＃xff0c;美感和艺术都是次要的。这种不协调放宽心&＃xff0c;忍一忍就过去了。

当然&＃xff0c;如果你实在看不下去&＃xff0c;也不是没有什么解决办法&＃xff0c;可以把内联的一串字符折叠起来&＃xff0c;这样不就眼不见心不烦了。

六、结束语

无外链的CSS开发策略需要一个外链资源都没有&＃xff0c;只要有一个出现&＃xff0c;其最大的转移方便优点就不复存在。

这种策略适合常规的功能性的产品开发&＃xff0c;也就是我们平时使用的各种应用&＃xff0c;对于花里胡哨的运营活动这种场景就不适合&＃xff0c;有太多的大大的背景图片了。

另外&＃xff0c;虽然很多资源都内联在了CSS文件中&＃xff0c;但是&＃xff0c;原始的图形资源还是需要保存与归档。这样方便日后的维护&＃xff0c;比方说你把某个小图片变成了base64&＃xff0c;谁要在再原成原始图片&＃xff0c;还是需要点时间折腾下的&＃xff0c;但是如果原始素材就在项目中&＃xff0c;则显然无需这样折腾。

与时俱进&＃xff0c;拥抱变化&＃xff0c;为了更快更强&＃xff0c;无外链CSS开发走起&＃xff01;