BlogJava-BearRui(AK-47) 的Blog-随笔分类-高性能WEB开发

了解CSS的查找匹配原理，让CSS更简洁、高效

BearRui(AK-47) — Mon, 07 Jun 2010 14:53:00 GMT

摘要: 用了这么多年的CSS，现在才明白CSS的真正匹配原理，不知道你是否也跟我一样？看1个简单的CSS：DIV#divBox p span.red{color:red;}，按习惯我们对这个CSS 的理解是，浏览器先查找id为divBox的DIV元素，当找到后，再找其下的所有p元素，然后再查找所有span元素，当发现有span的class为red的时候，就应用该style。多么简单易懂的原理，可是这个理解却是完完全全相反、错误的阅读全文

BearRui(AK-47) 2010-06-07 22:53 发表评论

高性能WEB开发(11) - flush让页面分块,逐步呈现

BearRui(AK-47) — Wed, 19 May 2010 14:38:00 GMT

摘要: 在处理比较耗时的请求的时候，我们总希望先让用户先看到部分内容，让用户知道系统正在进行处理，而不是无响应。一般大家在处理这种情况，都使用ajax，先把html输出到客户端，然后再用ajax取加载比较耗时的资源。用ajax麻烦的地方是增加了请求数，而且需要写额外的js代码、和js调用的请求接口。针对这种情况，还有一种处理方法，就是让response分块编码进行传输。response分块编码，可以先传输一部分不需要处理的html代码到客户端，等其他耗时代码执行完毕后再传输另外的html代码。阅读全文

BearRui(AK-47) 2010-05-19 22:38 发表评论

WEB高性能开发(10) - 疯狂的HTML压缩

BearRui(AK-47) — Sun, 16 May 2010 09:16:00 GMT

摘要: 上一篇随笔中网友 skyaspnet 问我如何压缩HTML，当时回答是推荐他使用gzip，后来想想，要是能把所有的html，jsp(aspx)在运行前都压缩成1行未免不是一件好事啊。一般我们启动gzip都比较少对html启动gzip，因为现在的html都是动态的，不会使用浏览器缓存，而启用gzip的话每次请求都需要压缩，会比较消耗服务器资源，对js,css启动gzip比较好是因为js,css都会使用缓存。我个人觉得的压缩html的最大好处就是一本万利，只要写好了一次，以后所有程序都可以使用，不会增加任何额外的开发工作。阅读全文

BearRui(AK-47) 2010-05-16 17:16 发表评论

该如何加载google-analytics(或其他第三方)的JS

BearRui(AK-47) — Thu, 13 May 2010 02:10:00 GMT

摘要: 很多网站为了获取用户访问网站的统计信息，使用了google-analytics或其他分析网站(下面的讨论中只提google-analytics,简称ga)。注册ga后，ga就会生成一段js脚本，很多人直接把这段js复制到的最后面就完事(包括博客园、CSDN、BlogJava)。可是ga自动生成的这段JS真的就是最合理的吗？阅读全文

BearRui(AK-47) 2010-05-13 10:10 发表评论

高性能WEB开发(8) - 页面呈现、重绘、回流。

BearRui(AK-47) — Mon, 10 May 2010 09:24:00 GMT

摘要: 页面呈现流程

回流与重绘

什么操作会引起重绘、回流

聪明的浏览器

如何减少回流、重绘

实例测试阅读全文

BearRui(AK-47) 2010-05-10 17:24 发表评论

高性能WEB开发(7) - JS、CSS的合并、压缩、缓存管理

BearRui(AK-47) — Tue, 04 May 2010 05:28:00 GMT

摘要: 本篇文章主要讨论下目前JS,CSS 合并、压缩、缓存管理存在的一些问题，然后分享下自己项目中用到的1个处理方案，并提供1个实例下载。阅读全文

BearRui(AK-47) 2010-05-04 13:28 发表评论

高性能WEB开发(6) - web性能测试工具推荐

BearRui(AK-47) — Wed, 28 Apr 2010 04:57:00 GMT

摘要: WEB性能测试工具主要分为三种，一种是测试页面资源加载速度的，一种是测试页面加载完毕后页面呈现、JS操作速度的，还有一种是总体上对页面进行评价分析，下面分别对这些工具进行介绍。阅读全文

BearRui(AK-47) 2010-04-28 12:57 发表评论

高性能WEB开发系列

BearRui(AK-47) — Mon, 26 Apr 2010 15:55:00 GMT

摘要: 准备写一系列关于高性能WEB开发的日记，主要是跟前端技术相关的(html,http,js,css等)，将自己了解的一些知识做1个总结和记录并分享，希

望大家能喜欢，也喜欢自己能坚持写下去。当然因个人技术水平有限，写作能力更是非常差，所以如果有什么地方写得不好的，请大家都指点指点。阅读全文

BearRui(AK-47) 2010-04-26 23:55 发表评论

高性能WEB开发(5) - 减少请求，响应的数据量

BearRui(AK-47) — Mon, 26 Apr 2010 11:53:00 GMT

摘要: 上一篇文章中说到了如何减少请求数，这次说说如何减少请求、响应的数据量(即在网络中传输的数据量)，减少传输的数据量不仅仅可以加快页面加载速度，更可以节约服务器带宽，为你剩不少钱。
GZIP压缩
别乱用cookie
妙用204状态阅读全文

BearRui(AK-47) 2010-04-26 19:53 发表评论

高性能WEB开发 - 为什么要减少请求数，如何减少请求数!

BearRui(AK-47) — Sun, 18 Apr 2010 10:58:00 GMT

摘要: http请求头的数据量
http连接开销
如何减少请求数
1. 合并文件
2. 合并图片
3. 把JS、CSS合并到1个文件
4. 使用Image maps
5. data嵌入图片阅读全文

BearRui(AK-47) 2010-04-18 18:58 发表评论

高性能web开发 - 如何加载JS，JS应该放在什么位置？

BearRui(AK-47) — Thu, 08 Apr 2010 08:08:00 GMT

摘要: 外部JS的阻塞下载

外部js文件应该放在什么位置

嵌入JS的阻塞下载

嵌入JS导致CSS阻塞加载的问题

嵌入JS应该放在什么位置阅读全文

BearRui(AK-47) 2010-04-08 16:08 发表评论

高性能WEB开发 - 图片篇

BearRui(AK-47) — Mon, 22 Feb 2010 08:53:00 GMT

摘要: 1、缩小图片大小
2、合并图片和拆分图片
3、透明图片处理
4、多域名下载图片
5、IE6下缓存背景图片
6、预加载图片阅读全文

BearRui(AK-47) 2010-02-22 16:53 发表评论

高性能WEB开发 - HTTP服务器篇

BearRui(AK-47) — Fri, 29 Jan 2010 07:42:00 GMT

新产品为了效果，做的比较炫，用了很多的图片和JS，所以前端的性能是很大的问题，分篇记录前端性能优化的一些小经验。

第一篇：HTTP服务器

因tomcat处理静态资源的速度比较慢，所以首先想到的就是把所有静态资源(JS,CSS,image,swf)

提到单独的服务器，用更加快速的HTTP服务器，这里选择了nginx了，nginx相比apache，更加轻量级，

配置更加简单，而且nginx不仅仅是高性能的HTTP服务器，还是高性能的反向代理服务器。

目前很多大型网站都使用了nginx,新浪、网易、QQ等都使用了nginx，说明nginx的稳定性和性能还是非常不错的。

1. nginx 安装(linux)

http://nginx.org/en/download.html 下载最新稳定版本

根据自己需要的功能先下载对应模板，这里下载了下面几个模块：

openssl-0.9.8l，zlib-1.2.3，pcre-8.00

编译安装nginx:

./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

2、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;

}

3、nginx 反向代理设置

# 反向代理服务，绑定域名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

BearRui(AK-47) 2010-01-29 15:42 发表评论