前端图片上传一直都是绕不开的话题☑，对于大图片的上传又会增大服务器压力，降低用户体验，本文用最浅显的语言带你走进canvas压缩，了解base64的转换原理

个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 工欲善其事，必先利其器。在判断元素是否在可视区域实现简单的原生懒加载前，我们先简单回顾下以下几个关键的概念。 ps： 如果你对这些概念已经比较熟悉了，可以直接跳到第五点查看关键代码示例。 1. 偏移量 偏移量(offset …

CSS Sprites在国内很多人叫css精灵/css雪碧图(啥都行)，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。加速的关键，不是降低质量，而是减少个数 …

也许你瞧不起以前的 css ，但是你不该再轻视眼下的 css 。近年来 css 的变量系统已逐步得到各大浏览器厂商支持，自定义选择器等强势袭来，嵌套系统/模块系统也在路上...为了更好的掌握 css 这门语言，很有必要把之前零零散散的 css 知识回炉重造下。 css 作为一门…

在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必…

Grid-layout不是为了取代flex-layout，它是flex的补充。grid擅长二维布局，flex擅长一维布局。他们需要各司其职。 千呼万唤始出来的grid-layout终于在2017年3月开始支持得到了部分浏览器的支持。 flex并不能满足我们对于页面整体布局的需求…

本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。 鉴于时不时有童鞋翻我以前的沸点，因此，本系列收集了个人目前发过的所有CSS知识点动图，以便阅读。 两个月前，曾发过一篇《你未必知道的49个CSS知识点》，已有3000多赞，这里，老姚真心谢谢大家的支持。 …

循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。 欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。 有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。但是总…