布局篇前端教程H5、CSS3怎么让文字内容都垂直居中?弹性布局( 二 )

减少iframe数量
之前，我们讲过怎么使用iframe，但是在实际的项目中，我们在使用的时候请先注意它的优缺点。
优点：
可以用来加载速度较慢的内容，脚本可以并行下载
缺点：
使用iframe内容为空时也会消耗加载时间并会阻止页面加载
避免404
404就是常见的没有找到服务器资源，一是：影响用户体验，打开一个返回无用信息的页面。二是网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成Javascript去解析。
CSS
将样式表置顶
【布局篇前端教程H5、CSS3怎么让文字内容都垂直居中?弹性布局】 由于网页内容从上往下的加载方式，我们尽可能的将CSS样式放在网页的head中会让网页显得加载速度更快，对于内容比较多的网页非常重要，至少不会让用户一直等待一个白屏上，这样的用户体验也是相当好的。
假如我们把样式表放在底部的话，就是出现一种情况，浏览器会拒绝渲染已经下载的网页，因为多数浏览器在实现时都努力避免重新绘制。所以这一样也是一个重点。
避免CSS表达式
有一些基础CSS3的小伙伴们一直很仰慕它强大的二开能力，喜欢用一些CSS表达式来动态的设置CSS属性，在IE5~IE8中支持，其他浏览器中表达式会被忽略。
其它CSS表达式的问题在于它被重新计算的次数远比我们想象的要多，所以我们还是尽量避免使用它来防止使用不当造成的性能开消过多。
用link标签代替@import
在网页的设计中，请尽量使用link标签来引用CSS，避免使用@import来引用，原因很简单，您可以理解为就是将CSS样式放在网页中的内容底部就可以了。
图片
优化图像
在网页的制作中，我们会发现，banner这一类的图片加载起来非常的慢，同时也影响网站的速度，少者几百K，大者几M 。那么究竟这样的图片还有没有优化的空间呢！？
今天我给大家推介一个图片优化的平台，它就是设计师们经常去的智图网
大家可以看到，原图和优化过后的（智图）图片，相差了500多K，如果对于图片比较多的网站，我们把整站的图片都用来优化一下，那么可以想象一下，这是要节省多少流量呀！所以这些图片优化我要强力推荐一下了。
避免空的图片src
我们在使用img标签的时候，尽量避免使用空的图片src，因为空的图片src仍然会使浏览器发送请求到服务器，这样完全是浪费时间，而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候，这种空请求造成的伤害不容忽略
优化CSS Sprite
Spirite中水平排列图片，垂直排列会增加文件大小；
Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。
不要在HTML中缩放图片
避免使用大图实现图片大小缩放来适应页面，如果你需要小图片，就直接使用小图片吧。原因很简单，针对不同的设备可以做到最好的效果，而不是加载就大的图，来整体实现效果，如果是手机端用户，这个开消还是挺大的，毕竟这是一个讲流量的时代。
使用小且可缓存的favicon.ico
一般企业网站或站长都喜欢加一个图标文件favicon.ico，不管你服务器有还是没有，浏览器都会去尝试请求这个图标。所以我们要确保这个图标存在并且文件尽量小，最好小于1k 设置一个长的过期时间

布局篇 前端教程H5、CSS3怎么让文字内容都垂直居中?弹性布局( 二 )

布局篇前端教程H5、CSS3怎么让文字内容都垂直居中?弹性布局( 二 )