高性能WEB开发

1.用Get而不是Post

IE对Get和Post的ajax提交性能差异非常大,几乎是300倍以上的差异。firefox和chrome大概是接近1倍。getajax性能高。默认全部ajax请求为Get,只有超过URL限制(2K)的请求才采用Post(这种场景比较少)。

2.减少请求次数

http请求数量最多的,其实不是ajax,也不是业务的请求。而是对资源的请求,包括图片,js,css等。

虽然默认前端有IE缓存,但http请求还是会下发(304),虽然比较下来数据没有变化,请求还是下发了,遇到拦截/*的配置,还是会把拦截器的逻辑走一遍,导致性能极差。

所以重要的不是减少业务的请求,或ajax的请求次数,而是减少不必要的304请求次数。采用Cache-Control策略可以解决这一问题。

3.压缩网络流量

在tomcat连接器上配置gzip

tomcat压缩http协议传输层的带宽,从而提高吞吐量。不压缩png,gif等图片。在connector中配置下述的1),2),4)

1)compression="on"打开压缩功能

2)compressionMinSize="2048"启用压缩的输出内容大小,这里面默认为2KB

3)noCompressionUserAgents="gozilla,traviata"对于以下的浏览器,不启用压缩

4)compressableMimeType="text/html,text/xml"

4.优化图片/JS/CSS大小

采用Firefox下的插件Firebug以及GooglePageSpeed插件完成图片的自动优化。根据插件的建议,插件已经帮你压缩好了,另存为即可。

可用beyondCompare的图片比较能力,比较修改前后的图片是否失真。

根据经验,可压缩UCD提供的图片大小50%以上,默认要求所有小图片不超过0.5K,所有大图片不超过5K。

JS和CSS可分开发态和运行态,开发态可使用原生的JS,运行态则使用压缩的JS/CSS,可以极大的减少体积(80%以上的压缩率,因为都是文本),而且采用变量混淆替换原则,减少了前端代码泄露的风险;但可定位能力有所下降。

相关推荐