WinterHoliday

又是一个寒假, 2009年的春节, 比起去年似乎, 今年没什么感觉. 因为去年那时候特别不想回家, 又碰上雪灾, 可算是如愿以偿,,,,呵呵,好像这词不用在这儿. 反正不管了, 可能是因为2009年国家大事和我小事算是比较多, 所以被麻木了.

回家回家吧,,,总有一个可以待的地方.

这些天, 赶着总结整理, 该完成的完成掉. 该计划的则记下, 整理以后要做的事情.

有时, 真不知道自己在做什么.

回家吧~ 又一个开始!

HPWS(1)

Rule 1: Make Fewer HTTP Requests
减少HTTP请求次数

A simple way to improve response time is to reduce the number of components, in turn, reduce the number of HTTP requests.

• Images Maps. 当有多个小图片组成时, 可以将小图片放在一张图片上, 然后使用map定义区域范围. 例子在http://stevesouders.com/hpws/imagemap-no.php和http://stevesouders.com/hpws/imagemap.php, 对于导航工具栏中未使用和使用image map的两个例子.
  如< img usemap="#map1" border=0 src="/someimg.gif" >
  < map name="map1" >
  < area shape="rect" coords="0,0,31,31" href="#" >
  ...
  有个缺点是手工计算坐标比较麻烦,容易出错. ----这个也可以对同一张大图片, 通过设置各个小组件背景图片的background-position来实现类似的功能. 具体可以看下这个页面上对于各部份图片的设置
  
• CSS Sprints. 这个就是刚刚所说的使用background-position来调图片, 例子在http://stevesouders.com/hpws/sprites.php
  <a title="Home" href="javascript:alert('Home')">
  <span class="home"/>
  </a> //这里看到个好玩的, 原来 href还可以是一个js
  总之就是, 如果你有很多小图片, 就可以把它们联合起来(combination), 这样可以使得更少的请求.
• Inline Images. 使用URL scheme(有http:, ftp:, file:, mailto:, smtp:, pop:, dns:, whois:, finger:, daytime:, news:, urn:等). 这里用的是data: . 基于"allow inclusion of small data items as 'immediate' data." 基本格式为: data:[<mediatype>][;base64],<data>
  那么一个inline image可以表示成:
  <a title="Home" href="javascript:alert('Home')">
  <img border="0" src="data:image/gif;base64,R0lGODlh...s="/>
  </a > 例子在http://stevesouders.com/hpws/inline-images.php 但缺点是IE不支持, 大小限制, 对于FF1.5内联图片大小上限为100k.
  base64编码直接增加了图片大小, 而导致整个下载页面增大.
  比这种更好的方法是使用Inline CSS Images, http://stevesouders.com/hpws/inline-css-images.php就是将图片作为背景放到css文件中, 如: .home { background-image: url(data:image/gif;base64, Rol...);} 完整的inline css在http://stevesouders.com/hpws/inline-css-images-css.php ----不过这个base64怎么得到呢? 直接把一图片用base64表示? 如果是的话, 那一副图片岂不会有很长的base64编码?
• Combined Scripts and Stylesheets. Multiple scripts should be combined into a single script and multiple stylesheets should be combined into a single stylesheet. 但往往是很多个文件. The solution is to follow the model of compiled languages and keep the JavaScript modular while putting in place a build process for generating a target file from a set of specified modules. 怎么去合并使之尽量小?

这章总结就是一句话, Make fewer HTTP request. 这也是整本书的核心.

还有一句说的比较好的话: A fast response time on that first page view can make the difference between a user who abandons your site and one who comes back again and again.

HPWS

这博客真的好久没写了, 太惭愧了~
这次写点有用的:PPPPP

最近手头有本书, 叫《High Performance Web Sites》, 图书馆借了一直放在手边, 一直没心思看, 现在乘着还有几天时间, 仔细看看这书, 也顺便做个读书笔记, 记录在这, 希望对其他人有用.
首先找了下网上资源

• 《High Performance Web Sites》作者stevesouders的网站http://stevesouders.com/
  是不是我这儿网速太慢的问题, 这个网站打开也很慢~~ 还有他的博客http://www.stevesouders.com/blog/
• 这本书的在线课程, 含ppt和gdoc http://cs193h.stevesouders.com/

Foreword中第一句话
You're lucky to be holding this book. More importantly, your web site's users are lucky. ----Lucky, Lucky, and good starting
Preface中介绍组织结构, 里面主要有14条performance rules.

CHAPTER A介绍前台优化的重要性.
前台/后台优化
用户等待时间花费在哪里?
据下载yahoo.com首页分析得到统计图, 在无cache(缓存)情况下, 起始HTML页面(5%)->页面各部分下载(95%), 即是95%的时间是花费在等待下载页面的各个部分, 而对于HTML代码, scripts, stylesheets的解析是比较少的.
如果是primed cache下, HTML页面只占用12%的响应时间. 大多数页面部分不需要被下载下来, 因此节省了很多时间.
HTTP status codes and headers affect the brower's cache.

1. 缓存, the cache.
2. 并行地下载各个部分, Parallel Downloads
3. 在大多情况下, browers block additional HTTP requests while they download scripts.

The Performance Golden Rule

1. there is more potential for improvement in focusing on the frontend. 大概意思是说, 如果我们能够减少一半的后台响应时间, 那最终用户会在整体上只减少5~10%的等待时间. 但是如果我们能够减少一半的前端时间, 那么可以降低整体响应时间的40~45%
2. 前端性能的提高粗要更好的时间和更少的资源. less time and fewer resources.(如改变web服务器配置;将scripts和css in certain places within the page; 联合图片,scripts,css等) 而后端性能的提高可能会涉及到整个应用体系架构的改变, 代码改变, 分布式数据库, 或硬件修改..这需要更长的时间.
   
3. frontend perfomance tuning has been proven to work.

如何减少 80~90% of end user response time. ----这是本书核心!

CHAPTER B HTTP介绍
请求类型有GET, POST, HEAD, PUT, DELETE, OPTIONS, TRACE
一个HTTP响应对象包含status code, headers, body.

1. 如果浏览器和服务器都支持compression(压缩) 那么, Accept-Encoding会显示为压缩的格式, 如gzip, deflate(请求) gzip(响应)
2. Conditional GET Requests 如果缓存中的副本仍然有效, 则使用它. 这里头部中有个If-Modified-Since日期. -> "304 Not Modified" 跳过传输新的文件. 另外的标志有ETag和If-None-Match.
3. Expires到期.
4. Keep-Alive保持连接. "persistent connections" It lets browsers make multiple requests over a single connection. Http头的Connection: keep-alive Connection:close表关闭.
   
5. 还有一个叫Pipelining, allows for sending multiple requests over a single socket without waiting for a response.优于persistent connections, 但它不被IE支持, 而在FF中默认是关闭的, 在FF中开启可以通过在地址栏中输入about:config, 修改network.http.pipelining为True.