Web开发高性能知识-游览器篇

在51上看了高性能WEB开发系列，感觉对我个人来说收获颇多，再此记下，以防以后忘记了。

知识点1：游览器首先将获得的HTML在内存中转换成DOM树，然后解析，当解析到IMG或CSS节点的时候就会问相应的IMG或CSS地址发送request，然后继续解析。但当遇见JS节点时，会发送一个request后一直等待response再去继续解析，因为JS很有可能改变DOM树的结构。这种现象称为JS的阻塞。

知识点2：JS的阻塞表现形式上可分为全部阻塞(嵌入JS)和后部分阻塞(外部JS)。

知识点3：重绘(指例如图片更换时的静态资源变化，不改变DOM树结构)和回流(指例如DOM树机构发生变化时)。

知识点4：减少请求数。通过合并文件(JS文件，图片等)。

知识点5：减少请求及响应内容。通过GZIP压缩(但是图片本身为压缩后格式，所以不能使用GZIP)。通过整理cookie的域名范围使cookie不被不需要cookie的请求带走。通过设置response为204达到无返回的目的，可以节省response的内容。

知识点6：由于tomcat处理静态资源的速度比较慢，所以使用HTTP服务器存储静态资源，现在比较流行的是nginx。

编译安装niginx：

./configure   
--without-http_rewrite_module   
--with-http_ssl_module   
--with-openssl=../../lib/openssl-0.9.8l   
--with-zlib=../../lib/zlib-1.2.3   
--with-pcre=../../lib/pcre-8.00  
--prefix=/usr/local/nginx  
make  
make install

nginx处理静态资源的配置：

#启动GZIP压缩CSS和JS  
     gzip  on;  
     # 压缩级别 1-9,默认是1，级别越高压缩率越大，当然压缩时间也就越长  
     gzip_comp_level 4;           
     # 压缩类型  
     gzip_types text/css application/x-javascript;  
 
     # 定义静态资源访问的服务，对应的域名:res.abc.com  
     server {  
        listen       80;  
        server_name  res.abc.com;  
 
# 开启服务器读取文件的缓存，  
open_file_cache max=200 inactive=2h;  
open_file_cache_valid 3h;  
open_file_cache_errors off;  
 
        charset utf-8;  
 
     # 判断如果是图片或swf，客户端缓存5天  
location ~* ^.+.(ico|gif|bmp|jpg|jpeg|png|swf)$ {  
   root   /usr/local/resource/;  
   access_log off;  
   index  index.html index.htm;  
   expires 5d;  
        }  
 
# 因JS,CSS改动比较频繁，客户端缓存8小时  
location ~* ^.+.(js|css)$ {  
   root   /usr/local/resource/;  
   access_log off;  
   index  index.html index.htm;  
   expires 8h;  
        }  
 
# 其他静态资源  
location / {  
   root   /usr/local/resource;  
   access_log off;  
   expires 8h;  
}  
    } 

niginx反向代理设置：

# 反向代理服务，绑定域名www.abc.com  
        server {  
    listen       80;  
    server_name  www.abc.com;  
     
    charset utf-8;  
     
    # BBS使用Discuz!   
    # 因反向代理为了提高性能，一部分http头部信息不会转发给后台的服务器，  
    # 使用proxy_pass_header 和 proxy_set_header 把有需要的http头部信息转发给后台服务器  
    location ^~ /bbs/ {  
       root   html;  
       access_log off;  
       index index.php;  
       # 转发host的信息，如果不设置host,在后台使用request.getServerName()取到的域名不是www.abc.com，而是127.0.0.1  
       proxy_set_header Host $host;  
       # 因Discuz! 为了安全，需要获取客户端User-Agent来判断每次POST数据是否跟第一次请求来自同1个浏览器，  
       # 如果不转发User-Agent,Discuz! 提交数据就会报"您的请求来路不正确，无法提交"的错误  
       proxy_pass_header User-Agent;  
       proxy_pass http://127.0.0.1:8081;  
    }  
     
    # 其他请求转发给tomcat  
    location / {  
       root   html;  
       access_log off;  
       index index.jsp;  
       proxy_pass http://127.0.0.1:8080;  
    }  
     
    error_page   500 502 503 504  /50x.html;  
            location = /50x.html {  
                root   html;  
            }  
        }  

nginx详细配置参考：http://wiki.nginx.org/

PS：如果安装提示GCC not found，运行下面命令安装就可以(apt-get install build-essential)，仅限debian

 知识点7：预加载图片处理。代码如下：

window.onload=function(){
   var img = new Image();
   img.src = "images/image.png";
   img = null;
};