2011
Nov
01

网页前端效能优化

Tags:
繁中版

网页好读版


一个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 这件事。

网页好读版

This post was last modified by puritys

Copyright © 2014 PURITYS.COM. All rights reserved.