高性能网站建设指南总结

 

 

性能黄金法则：只有10%～20%的最终用户响应时间花在了下载HTML文档上，其他的80%～90%时间花在了下载页面中的全部组件。

一、  减小Http请求：减小HTML文档中所引用的组件（图片，脚本，样式表，Flash等）
       主要用到的技术有：图片地图、Css Sprites、内联图片（data：URL）、图片加载延迟lazyLoad、脚本和样式表合并。
　    内联图片：ie67不支持，大小受限制，不缓存（内联CSS图片可缓存）。
       内联CSS图片PHP模板展现：http://stevesouders.com/hpws//inline-css-images-css.php
二、  内容发布网络(Content Delivery Network)：将静态组件备份在CDN上，是客户端用户离服务器更接近，须要保证CDN的实时性
三、  添加Expires头：控制web组件的缓存时间，要求服务器与客户端时间同步，
　    HTTP 1.1支持Cache-Control:max-age=毫秒，可同时设置这两个头
　    要想浏览器获取更新文件，则改变文件名
四、  压缩组件gzip：主要是脚本和样式表。须要在服务器那里做配置。
五、  样式表放在顶部(head)：在使用样式表时，页面逐步呈现会被阻止，浏览器在加载完样式表后会重绘DOM。
六、  脚本放在底部(</body>以前)：脚本会阻塞下载，缘由是脚本可经过document.write修改页面内容，
       浏览器阻塞并行下载还能够确保脚本可以按照正确的顺序执行
七、  避免CSS表达式
八、  使用外部的javascript和css：最佳方式--动态脚本加载是非阻塞下载的

　　 动态加载脚本源码以下：　　 

/*
 *  异步加载外部脚本的方法
 *  defer属性：只支持IE
 *  async属性：html5
 */
function asyncLoadScript(url,callback){
    var script = document.createElement("script");
    script.type = "text/javascript";
    if(script.readyState){//ie
        script.onreadystatechange = function(){
            if(script.readyState == "loaded" || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        }
    }else{//other
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.body.appendChild(script);
}

九、  减小DNS查询：域名解析
十、精简javascript：对javascript源代码进行精简
十一、避免重定向：寻找一种避免重定向的方法
十二、移出重复脚本：确保脚本只被包含一次
1三、配置或移出实体标签(ETag)
1四、使用ajax可缓存：确保ajax请求遵照性能指导，尤为应具备长久的Expires头