并不是所有元素都会被加载
我们先来测试图片，对图片设置隐藏属性，然后测试图片是否会被加载。
1.写在页面上的img标签，无论显示与否，图片都会被加载（所以试图通过对图片display:none来达到节省网络流量的做法就省省吧。。。）
2.经常使用backgroung-image等css属性为页面添加图片，这些图片是不是一定会被加载呢？
看例子：
测试结果：
结果如下：
我们可以发现图片0和4没有被下载，
0，是没有用到的CSS，不会被加载；
1，div默认block属性，尽管页面上图片不显示(没有设置当前块级元素的宽高)，但还是加载了；
2，div默认block属性，尽管页面上图片不显示(没有设置当前块级元素的宽高)，但还是加载了；
3，父容器的visibility属性设置为hidden属性，div默认block属性，尽管页面上图片不显示(没有设置当前块级元素的宽高)，但还是加载了；
4，父容器的display被设为none的情况，图片没有被加载。
我们在来对比一下display：none和visibility:hidden的区别：
display：none元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。