2008年8月27日
<收藏>提高Web性能的14条法则（详细版）

 

Steve Souders这个家伙写了一本书叫做：High Performance Web Sites: Essential Knowledge for Front-End Engineers

 

这本书里定义了14条让你的网页加速的方法，分别如下：

1.         Make fewer HTTP requests

2.         Use a CDN

3.         Add an Expires header

4.         Gzip components

5.         Put CSS at the top

6.         Move JS to the bottom

7.         Avoid CSS expressions

8.         Make JS and CSS external

9.         Reduce DNS lookups

10.     Minify JS

11.     Avoid redirects

12.     Remove duplicate scripts

13.     Turn off ETags

14.     Make AJAX cacheable and small

 

 

1. Make fewer HTTP requests

-减少Image的Request次数

-使用CSS Sprites技巧http://alistapart.com/articles/sprites

-使用Image Map技巧

-使用Inline Image技巧( data: ) http://tools.ietf.org/html/rfc2397

P.S.可以开发一个Inline Image产生器！

PS建议将Inline Image快取在CSS档案中，这样可避免HTML太大

-减少CSS / JavaScript的Request次数

-整合多个分开的CSS / JavaScript

 

2. Use a CDN

         N/A

3. Add an Expires header

-加入Expires Header到Image, CSS, JavaScript档案里

 

4. Gzip components

-压缩HTML, JavaScript, StyleSheet, XML, JSON，但切记「不要压缩Images, PDF档案」！

-设定方法

Apache 2.x:使用mod_deflate：

AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

 

IIS 6.0

Enabling HTTP Compression (IIS 6.0)

http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/502ef631-3695-4616-b268-cbe7cf1351ce.mspx?mfr=true

            

             Using HTTP Compression for Faster Downloads (IIS 6.0)

http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/25d2170b-09c0-45fd-8da4-898cf9a7d568.mspx?mfr=true

Enabling HTTP Compression in IIS 6.0

http://dotnetjunkies.com/Article/16267D49-4C6E-4063-AB12-853761D31E66.dcik

            

             IIS Compression in IIS6.0

             http://weblogs.asp.net/owscott/archive/2004/01/12/57916.aspx

 

         IIS 5.0

HOW TO：启用IIS中的ASPX压缩

             http://support.microsoft.com/kb/322603

             

- HTTP Header Style

HTTP request

Accept-Encoding: gzip, deflate

 

         HTTP response

Content-Encoding: gzip

             Vary: Accept-Encoding (这行是给Proxy Server看的)

 

-其他注意事项    

         -个人化的页面要加上==> Cache-Control: Private        

         -移除ETags (Rule 13)

 

5. Put CSS at the top

-一定要将CSS放在<head>区段载入!

-使用<LINK>标签，不要使用@import语法

- Avoid Flash of Unstyled Content (FOUC) in IE

http://www.bluerobot.com/web/css/fouc.asp/

<!-- Hack to avoid flash of unstyled content in IE -->

                <script type="text/javascript"> </script>

 

6. Move JS to the bottom

-一定要将所有JavaScript都摆在页面最下方</body>之前

所有在JavaScript Include以下的HTML在JS还没读完前，都不会显示画面

    

-把JavaScript的Code都放在onload执行！ ！

 

7. Avoid CSS expressions

-不要使用CSS expressions

可能这段expression会在每一次mouse move, resize, scroll, key press时执行!

    

-要使用EventHandler去执行这些Expression (JS Code)

 

8. Make JS and CSS external

-反正JS跟CSS拉到外面成独立档案就是好的，但「首页」可以例外！

-使用Post-onload download技巧

         download external files after onload

         window.onload = downloadComponents;

         function downloadComponents() {

             var elem = document.createElement("script");

             elem.src = "http://.../file1.js";

             document.body.appendChild(elem);

             ...

         }

        

        范例：http://stevesouders.com/hpws/dynamic-inlining.php

        作法：

1.在Server-side判断使用者Browser有设定Cookie["hasPostOnloadDownload"]

1.1.若没有，就使用post-onload download动态下载CSS & JS

1.2.若有用，就直接用<script src="xxxx.js"></script>下载，Browser会抓取Cache的版本

P.S. cookie expiration date is key

 

9. Reduce DNS lookups

-在一个页面中，不要超过2 - 4个Hostname，不然会降低页面载入速度

-开启Keep-Alive支援

 

10. Minify JS

- jsmin : http://crockford.com/javascript/jsmin

下载后更名成jsmin.zip解压缩出jsmin.exe即可执行,jsmin.exe < input.js > output.js (注意：所有UTF-8编码的js档会变成ANSI as UTF-8编码)

 

- dojo compressor : http://dojotoolkit.org/docs/shrinksafe

 

11. Avoid redirects

-参考资料：http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

-避免Redirect产生的方式

*网址若省略档名时，最后面一定要加上/结尾

*追查Log档

-查看Log Referer

    

12. Remove duplicate scripts

-这一点虽然很呆，不过连MSN Space, Yahoo都有类似的情况！

-在ASP.NET的元件中(UserControls, WebControls)，请多使用Page.ClientScript.RegisterScriptInclude的方式！

 

13. Turn off ETags

-基本格式

* unique identifier returned in response

ETag: "c8897e-aee-4165acf0"

             Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT

* used in conditional GET requests

If-None-Match: "c8897e-aee-4165acf0"

             If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT

 

- if ETag doesn't match, can't send 304

- ETag format

Apache: ETag: inode-size-timestamp

IIS: ETag: Filetimestamp:ChangeNumber

 

- IIS设定方式

自动设定方式

ETagFix - keep IIS eTags from changing http://www.snapfiles.com/get/etagfix.html              

            原创公司：ISAPILab http://www.isapilabs.com/              

            安装http://www.isapilabs.com/downloads/ETagFix-setup.exe之后会重新启动IIS之后就没问题了！  

             Related: http://www.snapfiles.com/Freeware/server/fwiis.html

            

             Note:              

                在IIS 5.0可以正常运作                

                在IIS 6.0必须要执行在Isolate Mode才可以使用ISAPI，预设是不能用的！

    

手动设定方式

*如果不是用Windows Server 2003 SP1要先安装Hotfix 900245 http://support.microsoft.com/kb/900245/        

*先安装IIS 6.0 Resource Kit

http://www.microsoft.com/downloads/details.aspx?FamilyId=56FC92EE-A71A-4C73-B628-ADE629C89499&displaylang=en        

*使用Metabase Explorer开启LM " W3SVC新增DWORD to 2039其Value="0" (每一台WebFarm底下的电脑都要这样设定)

*重新启动IIS

net stop iisadmin /y

net start w3svc

net start smtpsvc

 

参考资料

*您可能会当您使用Internet Explorer 6，试着存取Web应用程式所装载在Internet Information Services 6.0 Web效能非常低

               http://support.microsoft.com/kb/922703/

 

- Apache设定方式

FileETag none

 

14. Make AJAX cacheable and small

- XHR, JSON, iframe, dynamic scripts都一样可以被快取(Cached)、最小化(minified)和压缩(gzipped)

-个人化的页面回应时，一样要做快取，但是针对「该使用者」做快取(Cache-Control: private)

-在使用XHR时，URL可以加上「最近的修改时间」在QueryString里。

         GET /yab/[...]&r=0.5289571053069156 HTTP/1.1

-回传资料时的Header可以用Cache-Control: private + Last-Modified，使用者就不会一直连到网站抓网站了!!

设定Cache Header注意事项:

*个人化的页面一定要设定Response.Cache.SetCacheability(HttpCacheability.Private);

        *如果要Cache页面或External Reference档案(CSS/JS)一定要加上Response.Cache.SetLastModified(DateTime.Now);

*如果不加上MaxAge的话，将会无限时间的Cache直到下次Reload或开新Browser手动输入网址进入网页

*如果要指定Cache的时间要加上

Response.Cache.SetMaxAge(new TimeSpan(0, 0, 0, 10));

Response.Cache.SetExpires(DateTime.Now.AddSeconds(10));

*如果不要页面被Cache的话

Response.Cache.SetMaxAge(TimeSpan.Zero);

Response.Cache.SetExpires(DateTime.MinValue);

posted @ 2008-08-27 22:45 sun@live 阅读(87) | 评论 (0) | 编辑
2008年8月5日
MOSS与业务系统的集成 之 单点登录

前面MOSS与业务系统的集成 之 自定义Membership实现Forms方式验证文章中，我们实现了两系统的用户集成，下面要解决的是两系统间的单点登录问题。

部署在两台不同的服务器上的系统，要实现单点登录，最好的办法就是使用Cookie共享来实现了。只要将两系统使用同一根域名，并且用户保存用户登录票据的Cookie名称，以及Cookie加解密密钥一致即可。

  1. 业务系统的写cookie方式
     1 protected static void WriteCookie(string userName, bool isPersistent)
     2 {
     3             FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(
     4                 1,
     5                 userName,
     6                 DateTime.Now,
     7                 DateTime.Now.AddMinutes(80),
     8                 isPersistent,
     9                 userName,
    10                 FormsAuthentication.FormsCookiePath);
    11             // Encrypt the ticket.
    12             string encTicket = FormsAuthentication.Encrypt(ticket);
    13             HttpCookie myCookie = new HttpCookie(FormsAuthentication.FormsCookieName, encTicket);
    14              
    15            //如果用户使用域名访问ADC，则在cookie上增加域名信息
    16               if (IsValidDomain(HttpContext.Current.Request.Url.Host))
    17             {
    18                 myCookie.Domain = FormsAuthentication.CookieDomain;
    19             }
    20 
    21             if (isPersistent)
    22             {
    23                 myCookie.Expires = ticket.Expiration;
    24             }
    25             // Create the cookie.
    26             HttpContext.Current.Response.Cookies.Add(myCookie);
    27 }
    28 
    29 protected static bool IsValidDomain(string strIn)
    30 {
    31             string strPattern = @"^\w+([-.]\w+)*\.\w+([-.]\w+)*$";
    32             return System.Text.RegularExpressions.Regex.IsMatch(strIn, strPattern);
    33 }
    34 
         
  2. 业务系统的web.config修改
    <!--Cookie名称与根域名需一致-->
    <authentication mode="Forms">
              <forms name="CookieName"  domain=".domain.com" path="/" ></forms>
    </authentication>
  3. Moss站点的web.config修改 
    <!--将MOSS站点web.config中machineKey配置复制到业务系统中，两系统保持一致即可 -->
    <machineKey validationKey="C57043728999BCF9537BA55F5978F50722C91B26A0F9D34F"
       decryptionKey    ="C57043728999BCF9537BA55F5978F50722C91B26A0F9D34F"
       validation    ="SHA1" />

    <!--Cookie名称与根域名也需一致-->
    <authentication mode="Forms">
              <forms name="CookieName"  domain=".domain.com" path="/" ></forms>
    </authentication>
posted @ 2008-08-05 16:35 sun@live 阅读(46) | 评论 (0) | 编辑
MOSS与业务系统的集成 之 自定义Membership实现Forms方式验证
     摘要: 最近项目中发现，MOSS系统中的某些功能（如文档管理等）非常不错，决定进行现有系统进行集成。 现有系统基本情况： 用户信息使用SQL Server 2005数据库 使用表单方式进行登录验证 MOSS平台的基本信息： 可使用Windows集成方式验证 也可以使用.net类库中的AspNetSqlMembershipProvider或ADMembershipProvider来实现Forms方式验证。 ... 阅读全文
posted @ 2008-08-05 16:14 sun@live 阅读(92) | 评论 (0) | 编辑
2008年7月3日
手机归属地数据—采集
     摘要: 在网上找了几天，能免费下载到的手机归属地数据库信息不是很全，不过网站http://www.ip138.com:8080/search.asp上查询到的数据还是比较全面，可惜拿不到他的数据库，只能想想其它办法了。 方法一：入侵此网站，将此网站数据拿来？这可是非法的行当，行不通。。。打住 方法二：在此网站将所有号码段一个个进行查询，记下相应信息？算了下，联通与移动现在好像有160000个号码段，一个个... 阅读全文
posted @ 2008-07-03 11:36 sun@live 阅读(214) | 评论 (2) | 编辑
2007年10月27日
.Net数据源自定义参数
1.web控件源码
namespace ControlLibrary {
    using System;
    using System.Data;
    using System.Configuration;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;


    public class PagePropertyParameter : Parameter {

        private String _key;

        public String Key {
            get {
                return _key;
            }
            set {
                _key = value;
            }
        }

        protected override object Evaluate(HttpContext context, Control control) {
            Type t = control.Page.GetType();
            System.Reflection.PropertyInfo pi = t.GetProperty(Key, System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.NonPublic);
            return pi.GetValue(control.Page, null);
        }
    }

    public class ViewStateParameter : Parameter {

        private String _key;

        public String Key {
            get {
                return _key;
            }
            set {
                _key = value;
            }
        }

        protected override object Evaluate(HttpContext context, Control control) {
            Type t = control.Page.GetType();
            System.Reflection.PropertyInfo pi = t.GetProperty("ViewState", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic);
            StateBag pageViewState = pi.GetValue(control.Page, null) as StateBag;
            return pageViewState[Key];
        }
    }

    public class RequestParameter : Parameter
    {
        private String _key;

        public String Key
        {
            get
            {
                return _key;
            }
            set
            {
                _key = value;
            }
        }

        protected override object Evaluate(HttpContext context, Control control)
        {
            return context.Request.Params.Get(_key);
           // return base.Evaluate(context, control);
        }
    }
}
2.使用方法
  <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:pubsConnectionString1 %>"
            ProviderName="<%$ ConnectionStrings:pubsConnectionString1.ProviderName %>" SelectCommand="SELECT [stor_id], [stor_name], [stor_address], [city], [state], [zip] FROM [stores] WHERE ([stor_name] LIKE '%' + @stor_name + '%')">
            <SelectParameters>
                <%--<cc1:ViewStateParameter Name="stor_name" Key="TestState" Type="String" />--%>
               <%-- <cc1:PagePropertyParameter Name="stor_name" Key="TestValue" Type="String" />--%>
                <cc1:RequestParameter Name="stor_name" Key="Name" Type="String" />
            </SelectParameters>
        </asp:SqlDataSource>
posted @ 2007-10-27 19:43 sun@live 阅读(54) | 评论 (0) | 编辑
2007年10月9日
JavaScript和CSS速查手册
JavaScript对象、方法、函数、属性速查：

CSS属性速查：
posted @ 2007-10-09 09:49 sun@live 阅读(244) | 评论 (0) | 编辑
2007年4月16日
序列化一个字符串到CDATA元素(.NET 1.1)
 

public class CDATA : IXmlSerializable

{

private string text;

public CDATA()

{}

public CDATA(string text)

{

this.text = text;

}

public string Text

{

get { return text; }

}

XmlSchema IXmlSerializable.GetSchema()

{

return null;

}

void IXmlSerializable.ReadXml(XmlReader reader)

{

this.text = reader.ReadString();

}

void IXmlSerializable.WriteXml(XmlWriter writer)

{

writer.WriteCData(this.text);

}

}

 

[Serializable]

public class ErrorMessage

{

private CDATA message; 

….

[XmlElement("message", Type=typeof(CDATA))]

public CDATA Message

{

get { return message; }

set { message = value; }

}

….

}

posted @ 2007-04-16 14:29 sun@live 阅读(214) | 评论 (1) | 编辑
2006年9月4日
Sandcastle工具SandcastleBuilder
     摘要: Sandcastle工具SandcastleBuilder  阅读全文
posted @ 2006-09-04 17:03 sun@live 阅读(950) | 评论 (2) | 编辑
2006年8月15日
清除字符串数组中,重复元素

一、JS实现(收藏)

<script language="JavaScript">
<!--
var arrData=new Array();
for(var i=0; i<1000; i++)
{
arrData[arrData.length] = String.fromCharCode(Math.floor(Math.random()*26)+97);
}
//document.write(arrData+"<br/>"); 

//方法一，普通遍历
function myArray_Unique(myArray)
{
//var myArray=new Array("a","a","c","a","c","d","e","f","f","g","h","g","h","k");
var haha=myArray;
for(var i=0;i<myArray.length;i++)
{
for(var j=0;j<myArray.length;j++)
{
temp=myArray[i];
if((i+j+1)<myArray.length&&temp==myArray[i+j+1]) //如果当前元素与后一个元素相等
haha.splice(i+j+1,1); //然后就移除下一个元素 
}
}
return haha;
} 

//方法二
function getUnique(someArray)
{
tempArray=someArray.slice(0);//复制数组到临时数组
for(var i=0;i<tempArray.length;i++)
{
for(var j=i+1;j<tempArray.length;)
{
if(tempArray[j]==tempArray[i])
//后面的元素若和待比较的相同，则删除并计数；
//删除后，后面的元素会自动提前，所以指针j不移动
{
tempArray.splice(j,1);
}
else
{
j++;
}
//不同，则指针移动
}
}
return tempArray;
} 

//方法三 正则表达式 -- 适用于字符型数组
function getUnique2(A)
{
var str = "\x0f"+ A.join("\x0f");
while(/(\w+)[^\1]*\1/.test(str))
str = str.replace("\x0f"+ RegExp.$1, "");
return str.substr(1).split("\x0f");
} 

//方法四 关联结构
Array.prototype.unique = array_unique;
function array_unique()
{
var o = new Object();
for (var i=0,j=0; i<this.length; i++)
{
if (typeof o[this[i]] == 'undefined')
{
o[this[i]] = j++;
}
}
this.length = 0;
for (var key in o)
{
this[o[key]] = key;
}
return this;
} 

var d = new Date().getTime();
document.write(myArray_Unique(arrData));
d = new Date().getTime()-d;
document.write("<br/>2000元素 方法一算法计耗时 "+ d +" 毫秒!<br/><br/>"); //大约370ms~390ms左右 

var d = new Date().getTime();
document.write(getUnique(arrData));
d = new Date().getTime()-d;
document.write("<br/>2000元素 方法二算法计耗时 "+ d +" 毫秒!<br/><br/>"); //大约360ms~380ms左右 

var d = new Date().getTime();
document.write(getUnique2(arrData));
d = new Date().getTime()-d;
document.write("<br/>2000元素 正则表达式 方法三算法计耗时 "+ d +" 毫秒!<br/><br/>");//大约80ms左右 

var d = new Date().getTime();
document.write(arrData.unique());
d = new Date().getTime()-d;
document.write("<br/>2000元素 关联结构 方法四算法计耗时 "+ d +" 毫秒!<br /><br />");//大约0ms~10ms左右 

//-->
</script> 

 

二、巧用.net的NameValueCollection实现(原创)