WEB性能优化系列一

最近一直在看Google Page Speed中介绍的Web Performance Best Practices以及Yahoo!的
Best Practices for Speeding Up Your Web Site,并且浏览了很多其他叙述有关WEB性能优化的文章后有一点感悟:当新技术新思想引进国内的时候,国外已经发展相对比较或者绝对成熟、研究有一定深度而且最主要的是理念已经被广为传播开来并为大家所熟知。而联想到国内当前的技术环境和理念创新方面,还是有待提高的。下面是我在浏览了众多有关WEB性能优化方面的论述后的一个总结,因为内容比较多,而且翻译总结时间比较长点,所以初步打算是逐步逐步共享一下自己的心得,后续的将会陆陆续续推出,说的有不正确的地方,欢迎指正~

因为总结是写在word文档里的,所以就顺便保存了一份pdf格式的文件,需要的童鞋可以自行下载:《WEB性能优化系列一》。

  1. Serve resources from a consistent URL:使用一个确定的URL来引用资源
  2. Serve scaled images:衡量图片的大小缩放
  3. Optimize images:优化图片
  4. 拆分初始化负载
  5. Minify HTML
  6. Minify CSS
  7. Minify JavaScript
  8. Remove unused CSS:删除无用的CSS
  9. Enable compression:允许压缩
  10. Minimize request size:最小化request请求头信息的大小
  11. Serve static content from a cookieless domain:减小静态资源的cookie的大小
  12. Optimize the order of styles and scripts:优化js和css文件的加载顺序

(全文…)

简化Cookie的操作

对于很多新手来说,cookie的添加、删除、更新等等都是很迷糊的。确实,Cookie里众多的参数让人望而生畏,包括我在内,有时候都会为Cookie这恼人的操作而烦恼。鉴于本人的性格呢,是喜欢化复杂为简单,化抽象为具体的。所以我也就对cookie的一连串的操作进行了封装,而无需为cookie的实际操作而烦恼了,下面是它的一个Example:

//Example:
var cookie = new Cookie("sha", "Hello;; ,sha");
//调用addCookie方法写入cookie
cookie.addCookie();
//调用getCookie方法读取cookie
alert(cookie.getCookie());
//调用updateCookie方法更新cookie
cookie.updateCookie("Update Cookie is successsful.")
alert(cookie.getCookie());

上面的操作简单明了,虽然算不上好与不好,至少减少了我以后操作cookie的烦恼吧。下面提供Cookie类的源码:

/**
 * @param {Cookie} name
 * @param {Cookie} value
 * @param {Cookie} expire : cookie过期时间,以小时为单位
 * @param {Cookie} path   : 指定可访问cookie的路径
 * @param {Cookie} domain : 指定可访问cookie的主机名
 */
var Cookie = function(name, value, expire, path, domain){
    this.name = name;
    this.value = value;
    this.expire = expire || null;
    this.path = path || null;
    this.domain = domain || null;
}
Cookie.prototype.addCookie = function(){
    var cookieString = this.name + "=" + escape(this.value);
    if (this.expire) {
        var date = new Date();
        date.setTime(date.getTime + this.expire * 60 * 60 * 1000);
        cookieString += "; expires=" + date.toGMTString();
    }
    if (this.path) {
        cookieString += "; path=" + this.path;
    }
    if (this.domain) {
        cookieString += "; domain=" + this.domain;
    }
    document.cookie = cookieString;
}
Cookie.prototype.getCookie = function(){
    if (new RegExp(this.name + "=([^;]*)").test(document.cookie)) {
        return unescape(RegExp.$1);
    }
    return "";
}
//Update cookie's value only.
Cookie.prototype.updateCookie = function(value){
    if (new RegExp(this.name + "=([^;]*)").test(document.cookie)) {
        document.cookie = document.cookie.replace(RegExp.$1, value);
    }
}
Cookie.prototype.deleteCookie = function(){
    document.cookie = this.name + "=v; expires=FRI,02-Jan-1970 00:00:00 GMT";
}