大家都知道好的设计应该简单，而且始终可以提供最佳性能。
我们前端要让用户在使用产品时有更快更舒适的浏览体验，这算是一种前端工程师的自我修养。
说起优化好像对于新手的我们来说很遥远；其实并不是；当我们可以做一个静态页面的时候就可以有很多的优化了；今天我们说一下其中的一大块：
图片优化
怎么样才能让页面加载更快呢？答：可以减少发送请求的次数。
base64编码图片替换url图片
就是能不发请求的就不要发，对于一些小图标（我这做法是把8K以下的图标都转换成base64）之类的，可以将图片用base64，来减少请求的发送。尤其是在移动端，请求显得特别珍贵，在网速的不好的情况下，请求就是珍贵中的珍贵。
怎么样才能让页面加载更快呢？答：减少加载资源的体积。
图片压缩
对于整个网站来说，图片是最占流量的资源之一，能不使用就不适用，图标可是使用base64编码，字体图标代替，SVG等来代替，使用就要选择最合适的格式，合适的尺寸，然后压缩--这里推荐腾讯推出的智图。
PS：过度压缩图片大小影响图片显示效果，可能会使得图片变得模糊，一般来说，品质在60左右就差不多了！
雪碧图
即css sprites， 就是把很多小图片制作成一个大图，然后作为背景图片使用，定位即可。
优点： 很明显： 减少了大量的http请求。
缺点： 背景定位较为麻烦，其实不算缺点。
怎么样才能让页面加载更快呢？答：上菜先上凉菜。
图片懒加载
首屏加载，直接影响用户的体验，上菜先上凉菜就是：建议将非首屏的图片资源放到用户需要时才加载。这样可以大大优化首屏加载，减少首屏加载所需要的时间！
ps：懒加载要使用js频繁操作dom，期间会导致大量重绘渲染，影响性能。
图片显示优化
有时候由于图片比较大， 所以下载的过程会比较慢，所以出现的情况就是，刚开始只显示一个背景层，紧接着图片开始一点一点的加载出来，而不是完全加载出来， 这样的用户体验并不是很好。
我们需要首先，固定图片外层div的高度和宽度，然后img设置为100%（宽高都是如此），背景颜色要有，这样，即使没有显示出来，也是可以看得。重要，设置图片的 onload 事件，首先要设置图片为display: none； 然后当图片onload之后，我们再将之加载出来，并且加载时透明度可以是一个递增的过程。
img还是background
图片的展示方式有两种，一种是以图片标签显示，一种是以背景图片显示！下面写了这两者的区别。
img:html中的标签img是网页结构的一部分会在加载结构的过程中和其他标签一起加载。
background：以css背景图存在的图片background会等到结构加载完成（网页的内容全部显示以后）才开始加载
也就是说，网页会先加载标签img的内容，再加载背景图片background引用的图片。引入一张图片，那么在这个图片加载完成之前，img后的内容不会显示。而用background来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，网页内容能正常浏览，但是看不到背景图片。至于这两种，大家按照习惯，需求等权重因素选择！
其实上面所说的，我们有些是不是已经可以做到了？不积跬步无以至千里，不积小流无以成江河。知识都是积累的过程；在平时的练习中我们就可以用到上面的点，来优化我们的页面
网友评论