Web前端性能优化——网页秒加载

前言：我是这样秒加载网页的。用了1.4秒。可以再优化的。就分享大家怎么优化自己的前端网站，后端优化就是业务代码能删则删，能不访问数据库尽量不访问，能用缓存就用缓存。现在，分享一些前端优化给大家，也欢迎补充，当然大部分优化都是百度出来的。。。自己会了也不要吐槽小编。

1、减少请求数量 与 减小请求大小。

千万不要学我72个请求，能用分页就用分页，假设每页请求10个，速度快7倍，0.2秒可打开网页。
虽然有72个，但每个请求的大小是几百B，没错是几百B，不是KB，MB，所以每个请求控制在十几毫秒，不是十几秒。这里我是用了css合并并压缩和js合并并混淆压缩的。html上线也要压缩到没空格字符。

2、小图标合并成sprite图 与 iconfont字体文件

阿里巴巴矢量图标库官网：http://iconfont.cn/

3、图片用base64 与 延迟加载

<script type="text/javascript" src="${pageContext.request.contextPath}/resource/js/lazyload/jquery.lazyload.js"></script>
<script type="text/javascript">
    var Img = "${pageContext.request.contextPath}/resource/img/lazyload.gif";
    var jQuery_lazyload = $.noConflict(true);
    jQuery_lazyload(document).ready(function(){
        jQuery_lazyload(".load_img").lazyload({placeholder:Img,effect:"fadeIn"});
    });
</script>

4、使用浏览器缓存
之前教过大家用js实现浏览器缓存文件http://blog.csdn.net/sinat_15153911/article/details/77101181
在某些时候，静态资源文件变化需要及时应用到客户端浏览器，这种情况，可通过改变文件名实现，即更新javascript文件并不是更新javascript文件内容，而是生成一个新的JS文件并更新HTML文件中的引用。

5、CSS放在页面最上部，javascript放在页面最下面
浏览器会在下载完成全部CSS之后才对整个页面进行渲染，因此最好的做法是将CSS放在页面最上面，让浏览器尽快下载CSS。如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕，所以可以考虑将CSS放在HEAD中。

源码下载：链接：http://pan.baidu.com/s/1bHz9ro 密码：upo1