Java Web 高性能开发,第 1 部分_ 前端的高性能.pdfVIP

Java Web 高性能开发 ，第 1 部分: 前端的高性能 魏 强, 研究生, 东北大学 简介 ： Web 发展的速度让许多人叹为观止 ，层出不穷的组件、技术 ，只需要合理的组合、恰当的设置 ，就可以 让 Web 程序性能不断飞跃 。所有 Web 的思想都是通用的 ，它们也可以运用到 Java Web。这一系列的文章 ， 将从各个角度 ，包括前端高性能、反向代理、数据库高性能、负载均衡等等 ，以 Java Web 为背景进行讲述 ，同 时用实际的工具、实际的数据来对 比被优化前后的 Java Web 程序 。第一部分 , 主要讲解网页前端的性能优化 ， 这一部分是最直接与用户接触的。事实证 明，与其消耗大量时间在服务器端 ，在前端进行的优化更易获得用户的 肯定 。 发布 日期 ： 20 11 年 10 月 24 日 级别 ： 中级 访问情况 ： 17642 次浏览 评论 ： 10 (查看 | 添加评论 - 登录) 平均分 (92个评分) 为本文评分 引言 前端的高性能部分 ，主要是指减少请求数、减少传输的数据以及提高用户体验 ，在这个部分 ，图片的优化显得至关 重要。许多网站的美化 ，都是靠绚丽的图片达到的 ，图片恰恰是占用带宽的元凶。每个 img 标签 ，浏览器都会试 图发起一个下载请求。本文就详细介绍 了图片优化的几种方式 ，介绍 了使用的工具以及优化后的结果。 图片压缩 减少图片的大小 ，可以明显的提高性能 ，而对于已有图片 ，要想减少图片的大小 ，只能改变图片的格式 ，这里推荐 的是 PNG8 的格式 ，它可以在基本保持清晰度的情况下 ，减少图片的大小 。知道这个原理以后 ，可以用 Windows 的画图工具、以及 PhotoShop 工具逐个的改变。但是这样做的缺点是单张处理 ，效率太慢 。本文推荐一个在线转 换工具 Smush.it ，可以批量的进行压缩与转换 。它的地址是 ：/ysmush.it。打开后效果如下图 所示 。 图 1. Yahoo 提供的在线压缩工具 我们上传 了一张大小为 3790K 的图片 ，待在线程序处理完毕后 ，点击 Download Smushed Images 下载查看结 果。下载界面如下图所示 。 图 2. 压缩后的结果 打开下载下来的压缩包 ，查看结果可以看到 ，图片从 3790 减少到了 3344 ，就如下图所示 。对于大批量的图片网 站 ，这个方法会帮助快速实现批量图片压缩。 图 3. 压缩后的结果 图像合并实现 CSS Sprites CSS Sprites 是一个吸引人的技术 ，它其实就是把 网页中一些背景图片整合到一张图片文件 中，再利用 CSS 的 “background-image” ， “background- repeat” ， “background-position”的组合进行背景定位 ， background-position 可以用数字能精确的定位出背景图片的位置。利用 CSS Sprites 能很好地减少网页的 HTTP 请求 ，从而大大的提高了页面的性能 ，这也是 CSS Sprites 最大的优点 ，也是其被广泛传播和应用的主要原因。 CSS Sprites 能减少图片的字节 ，由于图像合并后基本信息不用重复 ，那么多张图片合并成 1 张图片的字节往往总 是小于这些图片的字节总和 。同时 CSS Sprites 解决 了网页设计师在 图片命名上的困扰 ，只需对一张集合的图片上 命名就可以了，不需要对每一个小元素进行命名 ，从而提高了网页的制作效率。更换风格方便 ，只需要在一张或少 张图片上修改图片的颜色或样式 ，整个网页的风格就可以改变。维护起来更加方便 。同时 ，由于将图片合并到一张 图片 ，因此图片的请求数就被缩减到 1 个。其他的请求都可以用到本地缓存 ，不需要访问服务器 。下图是一个合 并以后的图片。它将很多小图标都拼到了一起 。 图 4. 合并后的图片 这里介绍一个小工具 “CSS Sprites 样式生成工具 2.0” ，可以从 这里下载。这是一个简单免费的小工具 ，用该 工具打开上面的图片 ，选中图片