2011
Nov
01

网页好读版


一个end user 下载html通常只占总时间的 10~20%,其他80~90%的时间,都在下载相关的library,component,image,所以我们要想办法减少这些 library 的下载与载入时间 。

Http Request

Http request类型有 GET,POST,HEAD,DELETE,PUT,OPTIOS,TRACE,其中最常用到的就是 Get and POST,这里就给一个 Http Get Request 的范例。

Example
  1. //Http request example
  2. Get /index.html HTTP/1.1
  3. Host www.yahoo.com.tw
  4. User-Agent Mozilla/5.0 (Windows NT 5.1; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
  5. Accept-Encoding gzip, deflate
Example
  1. //Http response example
  2. HTTP/1.1 200 OK
  3. Content-Type: application/x-javascript
  4. Last-Modified: Wed, 23 Jan 2011 05:05:15 GMT
  5. Content-Length: 255
  6. Content-Encoding: gzip
  • http request & response 压缩
  • Accept-Encoding: 代表 browser 可接收的压缩方式
  • Content-Encoding: 代表Web伺服器的压缩方式

Cache (http status : 304 Not Modified)

Browser会自动检查目前要 Request 的 file 是否已有cache,若是已经有cache file,而且尚未过期,Browser 就会询问伺服器, Request file是否需要更新,这里有两个比对是否需要更新的机制,Expired Date 和 Etag ,我们先来看看 check Cache 的Request and Respose吧。

Example
  1. // Request Example
  2. GET /xxx.css HTTP/1.1
  3. Host: www.yahoo.com.tw
  4. User-Agent: Mozilla/5.0 ...
  5. If-Modified-Since: Sun, 23 Oct 2011 09:32:39 GMT
  6. If-None-Match: "60034-24c6-4aff3fcc2382d"
  7. Cache-Control: max-age=0
Example
  1. // Response Example
  2. HTTP/1.1 304 Not Modified
  3. Date: Mon, 31 Oct 2011 15:52:07 GMT
  4. Server: Apache/2.2.19 (Unix) PHP/5.2.17
  5. Etag: "60034-24c6-4aff3fcc2382d"
  6. Expires: Thu, 10 Nov 2011 15:52:07 GMT
  7. Cache-Control: max-age=864000
  • Expires : Browser 会送出 If-Modified-Since 时间,去伺服器比对是否要有过期,若是时间没有过期,伺服器会回传 「304 Not Modified 和 新的 Expires」,代表档案没有更新,Browser就会直接读取本机端的暂存档。
  • Etag : 这是一个不重覆的字串,就相当於 url 的版本,当版本未更新,Browser就不需要下载新的 file 。当 Request 发生,Browser会先送出目前url 的 Etag,并使用 If-Modified-Since方式传给伺服器,伺服器比对后,若是档案没有更新,就会回传「304 Not Modified」,Browser就会直接读取本机端的暂存档,

keep-alive : Persistent Connections

Http Request 有一个语法是 Connection:keep-alive ,因为早期的Browser 一 Http Request 必须建立一个 Socket Connection,后来发展一个比较有效率的Request方式,可以让多个 Request 透过同一个 Socket来传输,这就是connection keep-alive。

  • Connection:keep-alive 可以告欣server保持永久连线,直到timeout。
  • Browser 可以传送Connection: close 指令,close socket connection。
  • Pipelining : 是指多个 Http request同时在一个socket 上传输,并且没有先来后到的顺序, request 和 response 同时进行,不过通常伺服器会有限制一个 connections的 request上限。
Example
  1. //连续传送多个 Request
  2. GET /image1.jpg HTTP/1.1
  3. Host: www.yahoo.com.tw
  4. Connection: Keep-Alive
  5.  
  6. GET /image2.jpg HTTP/1.1
  7. Host: www.yahoo.com.tw
  8. Connection: Keep-Alive
  9.  
  10. GET /image3.jpg HTTP/1.1
  11. Host: www.networkerror.org
  12. Connection: Keep-Alive
  13. Connection: Close

把Scripts放在网页html最下方

brower 下载 script时,动作和下载图片不一样,图片可以一次下载很多张,因为没有顺序的问题,但是script必须按照顺序一个一个下载并执行,所以当browser碰到script时,网页就得停下来等他,解决办法就是把 script 语法放在网页的最下面显示。

手动压缩 JS , css

Javascript 与 CSS 这两种档案都是纯文字档,因为是单纯的文字档,所以这是可以事先压缩的,缩小后的档案有利於线上传输,可以减少网路传输的时间,不过若你是使用自我解缩的方式,压缩 Javascript 的话,解压的时间也要算到效能喔,目前网页的瓶颈,大多是网路传输最慢,所以不太需要考虑解压的时间,到是 JQuery 不知他加压的方式为何,竟然碰到解压时间大於传输时间。

Javascript & CSS 压缩工具如下

只能对 Javascript 压缩的工具

只能对 CSS 压缩的工具

伺服器 GZip , deflate

大部分的网页伺服器都有支搜 GZip 档案压缩工具,每次伺服器将网页内容回应给 Browser 时,都会先进行压缩,然后 Browser 再解压缩。

Browser 在发出 Request 时,在 HTTP Header 会加上 「accept-encoding: gzip,deflate」,这句的意思是代表说,Browser 可以支援的压缩模式有 gzip 与 deflate ,而伺服器看到这个 Header 之后,就会选择一个最佳的方式来压缩。

如果你是使用 Apache Web Server ,又想要支援 gzip , deflate 等等的压缩方式的话,你必需先确认有安装以下的 Module 。

  • mod_gzip
  • mod_deflate

DNS resolve

前端页面需要去下载 CSS., JS, 图片还有 AJAX Request ,这些网址的 Domain 如果不同於主网站,那么浏览器就会先去对各个不同的 Domain 做一次 DNS Resolve,去取得每个 Domain 的 IP ,这个动作也是很花时间的,我们可以在 HTML Head 加上 dns-prefetch ,让浏览器提早做 DNS Resolve 这件事。

网页好读版