网站效率优化小技巧

一些网站效率优化小技巧，给你的网站+速，+速，再+速，附带具体实现的伪代码

使用union联合查询多个相似结果，给用于排序字段加上数据库索引。

C# code

var 体育新闻 = Db.新闻表.Where(q => q.类型 =="体育新闻").OrderByDescending(q => q.EditTime).Take(10);var 娱乐新闻 = Db.新闻表.Where(q => q.类型 =="娱乐新闻").OrderByDescending(q => q.EditTime).Take(10);//把数据合并，一次性加载到内存中var 首页的新闻 = 体育新闻.Union(娱乐新闻).ToList();//然后再使用List在内存中把数据分开var 分离体育新闻 = 首页新闻.Where(q => q.类型 =="体育新闻").OrderByDescending(q => q.EditTime).Take(10);

效果：★★★， 难度：中等， 缺点：合并又拆分，挺烦人……。


服务端缓存，使用Asp.net 的 Cache对象的，你懂得。

C# code

//可以把刚才的首页新闻List缓存住，下次还能用哦。var 首页新闻=Cache["首页新闻"] as List<新闻>;if(首页新闻==null){ //用上一部的union查询，加载首页新闻 Cache["首页新闻"]=首页新闻;}//运行到这里，首页新闻还是要被拆(- -)。

效果：★★★★， 难度：容易， 缺点：占用内存，不宜用太多。


客户端缓存，使用http头告诉IE，这个页面可以在客户端缓存，这个缓存效果是最最最明显的。

C# code

//缓存20分钟，age是用秒做单位的Response.AddHeader("Cache-Control", "max-age=1200");

效果：★★★★， 难度：容易， 缺点：不适合动态内容。


加载懒图片，用户在第一个屏幕看不到的图片就先不加载，留给js动态加载。

HTML code

<!--这里的src=javascript没别的意思，就是让浏览器别去加载它--><img alt="图片" src="javascript:img.jpg"/>

JScript code

window.οnscrοll=function(){ if(img.top>scrolltop+clientHeight){ img.src='img.jpg'; }}

效果：★★★， 难度：中等， 缺点：网络环境不好的话，图片加载会不流畅。


整合js和css文件，一个也页面如果加载的js或者css文件太多是很占用网络的。
效果：★★★， 难度：容易， 缺点：文件里面如果东西太多，要调试的时候会头晕。


使用Gzip压缩，减少网络传输量。

C# code

//可以通过重写render方法，把Page生成的HTML拦截下来，用gzip发送。庞大大页面的不建议这么做。protectedoverridevoid Render(HtmlTextWriter writer){//判断客户端是否接受gzip压缩if (Regex.IsMatch(Request.Headers["Accept-Encoding"]??"", @"\bgzip\b",RegexOptions.IgnoreCase)){ //获取页面生成的HTMLvar tw =new StringWriter(); var hw =new HtmlTextWriter(tw); base.Render(hw); var html = tw.ToString(); //告诉IE，我用gzip啦 Response.AddHeader("Content-Encoding", "gzip"); var gz =new GZipStream(Response.OutputStream, CompressionMode.Compress); var bytes= Encoding.UTF8.GetBytes(html); gz.Write(bytes, 0, bytes.Length);//这里当然也能改成写入别的字节流，比如读取文件流 gz.Close(); Response.End();}else{ base.Render(writer);}}

效果：★★★★， 难度：比较难， 缺点：用CPU滴，虽然用的不多。


把js放到页面的尾部，IE执行js的时候，会停下来执行完了再做其他事儿，一不小心，就会把页面卡住。
效果：★★， 难度：容易， 缺点：有时候在页面中间就需要js操作了，不能这么做。


css Sprite，用css把小图片整合到一个大图片里面，减少请求数量。

CSS code

/*先把2个图片整合到一个图片里面*/.img1{background:url(bg.jpg) -0px -0px no-repeat;}.img2{background:url(bg.jpg) -100px -0px no-repeat;}/*通过背景图片+背景位置偏移，就能把2个图片分开了*/

效果：★★★， 难度：中等， 缺点：操作比较麻烦


延迟加载内容，不到必要不加加载。

HTML code

可以参考我的网站右边框的小游戏，只是一张图片，通过onmouseover触发加载iframe。

效果：★★★， 难度：中等， 缺点：累啊，又要js啦。

 

觉得比较好的是
1、全站静态化
2、图片预加载
3、适当缓存
4、css Sprite
5、还有很多 取决于编码人员。 服务器硬件架构等等