java web 高性能开发,第 1 部分_ 前端的高性能

《java web 高性能开发,第 1 部分_ 前端的高性能》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、JavaWeb高性能开发，第1部分:前端的高性能魏强,研究生,东北大学简介：Web发展的速度让许多人叹为观止，层出不穷的组件、技术，只需要合理的组合、恰当的设置，就可以让Web程序性能不断飞跃。所有Web的思想都是通用的，它们也可以运用到JavaWeb。这一系列的文章，将从各个角度，包括前端高性能、反向代理、数据库高性能、负载均衡等等，以JavaWeb为背景进行讲述，同时用实际的工具、实际的数据来对比被优化前后的JavaWeb程序。第一部分,主要讲解网页前端的性能优化，这一部分是最直接与用户接触的。事实证明，

2、与其消耗大量时间在服务器端，在前端进行的优化更易获得用户的肯定。发布日期：2011年10月24日级别：中级访问情况：17642次浏览评论：10(查看

3、添加评论-登录)平均分(92个评分)为本文评分引言前端的高性能部分，主要是指减少请求数、减少传输的数据以及提高用户体验，在这个部分，图片的优化显得至关重要。许多网站的美化，都是靠绚丽的图片达到的，图片恰恰是占用带宽的元凶。每个img标签，浏览器都会试图发起一个下载请求。本文就详细介绍了图片优化的几种方式，介绍了使用的工具以及优化后的结果。图片压缩减少图片的大小，

4、可以明显的提高性能，而对于已有图片，要想减少图片的大小，只能改变图片的格式，这里推荐的是PNG8的格式，它可以在基本保持清晰度的情况下，减少图片的大小。知道这个原理以后，可以用Windows的画图工具、以及PhotoShop工具逐个的改变。但是这样做的缺点是单张处理，效率太慢。本文推荐一个在线转换工具Smush.it，可以批量的进行压缩与转换。它的地址是：www.smushit.com/ysmush.it。打开后效果如下图所示。图1.Yahoo提供的在线压缩工具我们上传了一张大小为3790K的图片，待在线程序

5、处理完毕后，点击DownloadSmushedImages下载查看结果。下载界面如下图所示。图2.压缩后的结果打开下载下来的压缩包，查看结果可以看到，图片从3790减少到了3344，就如下图所示。对于大批量的图片网站，这个方法会帮助快速实现批量图片压缩。图3.压缩后的结果图像合并实现CSSSpritesCSSSprites是一个吸引人的技术，它其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-p

6、osition”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。利用CSSSprites能很好地减少网页的HTTP请求，从而大大的提高了页面的性能，这也是CSSSprites最大的优点，也是其被广泛传播和应用的主要原因。CSSSprites能减少图片的字节，由于图像合并后基本信息不用重复，那么多张图片合并成1张图片的字节往往总是小于这些图片的字节总和。同时CSSSprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个

7、小元素进行命名，从而提高了网页的制作效率。更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。同时，由于将图片合并到一张图片，因此图片的请求数就被缩减到1个。其他的请求都可以用到本地缓存，不需要访问服务器。下图是一个合并以后的图片。它将很多小图标都拼到了一起。图4.合并后的图片这里介绍一个小工具---“CSSSprites样式生成工具2.0”，可以从这里下载。这是一个简单免费的小工具，用该工具打开上面的图片，选中图片中的某块。如下图的“绿色大拇指”部分，工具

8、会计算出这个部分的长、宽、距离左上角的距离。勾选复制类名、复制宽、复制高，再点击“复制当前样式”按钮。这样生成的样式会被复制到剪切板上。图5.小工具的使用生成的CSS代码如清单1所示。清单1.小工具生成的CSS代码.div_6148{width:18px;height:20px;background-position:-17px-209px;}将这段代码运用在网页上，它的代码如下清单所示。清单2.测试CSSSprites代码