【高性能web开发】 网络传输环节

【高性能web开发】将会是一个系列.

从html,js,css等前端,到HTTP/TCP等网络传输环节.

从Asp.net等应用服务器语言到数据库优化.

从架构设计到第三方组件和解决方案的应用.

之后大约还有4-5篇Blog和高性能web开发有关.
 

【高性能web开发】 网络传输环节

1.减少请求数.

• 缓存，使用Expires 等设置过期时间；如果内容没有过期就不发送请求
• 合并小体积内容，例如吧数量众多的小图片放在一个图片，之后用css部分呈现（大体积的内容就别合并了）
• 延迟加载；部分内容，例如图片在页面呈现的时候才加载 （常用的就是滚动条到了以后才加载）；减少不必要的请求 
• 合并重复内容和文件
• 考虑使用第三方CDN资源，例如jQuery有免费的CDN，有些用户已经在其他网站访问过该内容了，那么到我们的网站加载就更快了 (而且使用CDN降低对我们服务器的压力)
• 使用HTML5 中的Local Storage等保存数据

2.减少响应内容的体积.

• 适当的时候只返回响应头304 （HTTP缓存，如ETag等）
• 使用Gzip等压缩文件内容
• 使用免费的第三方工具，压缩css，js和html等文件的大小 (例如我们常见的 jquery.min.js)
• 适当使用Ajax操作
• 在适当的时候，将样式,HTML和数据分离 (数据量很大的时候极大减小文件体积)

<ul id="id">
    <li style="一大堆的样式">数据 </li>
    <li style="一大堆的样式">数据 </li>
    <li style="一大堆的样式">数据 </li>
</ul>
分成HTML 样式 和数据3部分

HTML
<ul id="id">
    <li></li>
    <!-- 如果使用数据模板等方式 只需要保留一个Li 否则需要多个 -->
</ul>

样式保存在CSS文件中
一些基本的小常识 虽然有很多个li 不用给每个li指定class

数据
使用JSON返回 （如果觉得麻烦也可以嵌入在页面中）

• 选择体积更小的数据格式，例如JSON一般就比XML体积来的小 (都经过压缩以后还是更小)
• 在设计上，只传送变化的部分数据 （例如要获取100条数据，可能已经加载了90条，那么再加载10条就好了）
• 移除请求和响应中不必要的HTTP Header (例如WCF Restful service中有的时候要传递表明当前数据是JSON还是XML的HTTP Header)
• 部分功能,如压缩会消耗CPU, 如ajax等会增加开发工作量,请谨慎选择

3.增加请求并发数.

• RFC中，浏览器对于同一个域名下的资源只能使用2个线程同时进行访问（很多新的浏览器支持6个或者更多）；解决方法是使用子域名，例如1.abc.com 2.abc.com

• <img src ="1.abc.com/1.png" />
  <img src ="1.abc.com/2.png" />
  <img src ="2.abc.com/3.png" />
  <img src ="2.abc.com/4.png" />
  <img src ="3.abc.com/5.png" />
  <img src ="3.abc.com/6.png" />
  <img src ="4.abc.com/7.png" />
  <img src ="4.abc.com/8.png" />

• 将一个超大的文件（例如有些人喜欢吧整个网站的js都放在一个文件）拆成一系列的中小文件 （有利于并发加载和缓存!）这个文件大小的Size选择很重要 我个人建议是10k-200k (依赖于网络)
• 上一条并没有和1-2冲突，文件太小太多也不行，文件太少太大也不行，这是一个平衡的问题
• 通过分拆文件,使得最常用页面(例如首页)的加载速度变快了
• 控制加载顺序，例如先加载页面大体结构，然后多个javascript异步请求加载数据（把一个大的html变为多个小的html片段）

4.其他特殊技术.

• 利用HTTP 1.1的长连接特性，使得在一定程度上，服务器可以主动推送数据（减少了很多不必要的轮询）

5.工具.

• Fiddler (Free)
• FireDebug (Free)
• HttpWatch

部分内容引用自MSDN和其他第三方文章．．

因本人水平有限,如有遗漏或谬误,还请各位高手指正