从前端出发，如何让页面打开速度闪亮双眼

上周发帖子介绍了一下自己弄的网站后台架构，被隐藏了。

帖子里很多坛友说到我的网站页面打开速度飞快，闪到了自己的眼睛，今天再发一帖说下自己的前端处理经验。

说到前端，就不得不提 YSLOW ，Page Speed这些个大牛级的插件，这两个东西都可以直接装在firebug上。

Page Speed还提供了在线版。可以先用这些东西分析一下页面，把 High priority的内容做到就差不多了。

本人经验如下：

 

首先，最重要的是请求数。

尽可能的减少请求。如何减少，就是合并。这里有个合并图片的技巧有 css sprite，通过css定位，合并多个背景图。剩下的多个js能合并的就合并，css类似。

请求实在没法减少的时候肿么办？利用浏览器并发。也就是多域名资源分布。大致原理是因为浏览器对单一域名并发下载有限制（不同浏览器数字不同），所以为了让浏览器一次下载更多资源，把内容分布到多个二级域名。

本人网站暂时用了三个 www img 和 img0。 www 就是下载文档，img是js、css和css背景图，img0就是电影图片。

 

 

其次是缓存。

要充分利用浏览器本身的缓存策略。让用户打开过一次页面之后，访问其余页面更快，再次访问秒杀。具体HTTP协议的缓存策略这里就不展开，只说一下我的网站配置，Nginx版

 

 

        location ~ .*\.(js|css|swf)$ {
                expires      60d;
        }
        location ~ .*\.(gif|jpg|jpeg|png|bmp|ico)$ {
                #valid_referers blocked *.fqxn.com;
                #if ($invalid_referer) {
                        #rewrite ^ http://www.fqxn.com/403.jpg last;
                #}
                expires      8d;
        }

 

 

加了过期时间之后，普通链接点击（在过期时间内）就不会再发起新的请求，直接使用本地缓存。关于F5 和 Ctrl + F5的情况，请求是都会发出。

不过F5是这样的：请求头加入If-Modified-Since 和 Cache-Control: max-age=0，意思是说，我不管浏览器缓存中的文件过期没有，都去询问一下有没有更新，相当于上次HTTP响应的Expires暂时失效。服务器的响应处理流程很简单，如果确实没有改动，直接返回一个304，并不发送真正的图片内容。意思是说没有过期，用你自己本地的吧。下面是F5的情况（本人已经打开过首页，然后chrome下按F5 查看网络面板截图）

 

而 Ctrl + F5的情况，请求头中会加入Cache-Control换成了no-cache，(Pragma:no-cache行是为了兼容HTTP1.0)，而没有加入 If-Modified-Since 。这次就和初次访问一样了，服务器老老实实的返回200状态码，同时响应头中多了个Content-Length 这次就真的产生了数据流量，服务器重新发送内容到浏览器。下面是Ctrl+F5

最后是压缩。

这里主要是说GZIP，至于js 、css mini这个东西不做讨论。由于GZIP之后相差不大，所以本人没有进行js、css mini，另外：一是方便自己修改和阅读，二是没有混淆的必要，不怕别人看，三就是自己比较懒。

现在主流浏览器都支持gzip压缩，压缩一下文本一般能节省原大小的 60%~80%，节省的带宽可不小，重要的是速度！

通过站长工具看下本站首页的压缩情况：

下面是Nginx配置压缩

 

    gzip  on;
    gzip_min_length 1024;
    gzip_types text/plain text/css application/x-javascript application/xml;
    

 

以上就是本人网站在前端部分进行的优化经验总结~分享给大家，希望有帮忙！

最后，相关链接:

1.隐藏帖传送门 http://www.iteye.com/topic/1122481

 

2.在线版Page Speed  https://developers.google.com/pagespeed/

 

3.Firebug Yslow https://addons.mozilla.org/zh-cn/firefox/addon/yslow/

最后，顺便用在线版PS分析了下网站