Web应用中图片预加载技术设计与实现.docVIP

Web应用中图片预加载技术设计与实现 　　摘 要：教务系统有别于其他的应用系统，每学期学生都要进行大规模选课，短时间内访问量突增，多数学生在选课期间，都会遇到打开系统显示区为白色的现象，这是图片、文本加载过慢造成的。本文根据教务系统的特殊性分析，结合多种预加载技术的实验，提出性能优化解决方案。 　　关键词：预加载；负载均衡；缓存应用 　　中图分类号：TP393 　　1 引言 　　Web技术的发展日新月异，它的发展同时也推动了网络的不断发展，从而影响到社会及个人的生活。Web网页里存在着无数的精彩内容，如打开网页可以浏览文字和图片、听美妙的音乐、观看视频等，然而Web应用程序与桌面应用程序的区别在于及时的响应速度。响应速度可以直接影响到用户对Web站点的体验感受，进而影响到该站点的受欢迎程度。因此，构建一个高性能的Web网站对于网站管理者是至关重要的。本文结合教务系统的设计与实现，对构建高性能Web站点技术进行了较为深入的研究。 　　2 研究背景 　　沈阳师范大学教务系统为在校两万多师生的日常教务计划查询和正常教务的运行提供了极大的便利，但在每学期的选课及成绩查询期间，由于短时间内高访问量情况的发生，给服务器带来极大的负担，而且容易造成长时间服务器无响应甚至系统崩溃等情况。为缓解选课及成绩查询期间系统的压力，教务处在每学期期末要求学生按年级分批次进行下一学期的选课。即便如此，仍然无法避免上述情况的发生。因此，为了给老师及同学提供更好的服务，教务处决定对已有系统进行合理性改造。 　　3 原因分析 　　图1展示了用Firebug对某网站进行Http请求的时间组成。由图可知，客户端对服务器的一个完整请求可分为域名解析--建立连接--发送请求--等待响应--接收数据等几个部分，而等待响应阶段所花费的时间相对其他阶段要长很终端用户响应的时间中，有80%用于下载各项内容，终端用户向服务器端发出的请求大致可以分为以下几类（参见图2）： 　　（1）URL地址请求服务：该过程获得相应的页面Html，请求需要服务器相应的业务逻辑处理，然后生成页面，花费时间较长； 　　（2）样式资源的请求：终端浏览器接受到请求的Html页面后，需要请求页面引入的样式（如JS脚本、CSS样式等），此时请求过程是并行连接； 　　（3）其他外部资源：终端浏览器接收到JS、CSS等样式资源后，需要为它们中引入其他外部的资源（如常见的图片资源）再次发送请求，所有的图片请求也是并行连接的，与此同时也会进行页面的渲染工作。 　　在服务器端接收到资源请求后，会根据请求需求从数据库提取所需数据，如果页面内容相对充实，就会增加提取数据的时间，给用户带来相对较长时间的等待，如果能够减少服务器与数据库交互的时间或在用户请求前提前准备好数据资源，会大幅度的缩短用户等待的时间长度。4 性能优化解决方案 　　为了提高教务系统的性能，秉承沈阳师范大学教务处“竭诚为学生服务”的宗旨，教务处决定将考试成绩查询功能集成在门户网站，缓解选课网站因数据库信息量大，数据冗余较大而造成的系统性能下降的不足。在对成绩查询方案进行具体分析后，最终采用资源预加载、动态资源静态化以及IIS与Tomcat集成技术来提高系统性能，提供高质量的体验感受。 　　4.1 资源预加载 　　所谓预加载，就是通过一定的编程方法，使浏览器在空闲的时候，在后台通过HTTP请求访问某些资源。当用户在一段时间后真正使用这些资源的时候，能够比一个完整的请求更快地获得这些资源，从而改善在需求时完整请求所带来的时间浪费的不足。 　　资源预加载可以提升用户体验，如果每次用户打开页面都要加载图片、js样式、css样式等资源，会直接影响到服务器响应的时间，给用户带来的是漫长的时间等待。因而，我们可以在用户阅读已加载完的页面的时间空隙里把下一个页面所用的资源提前加载过来，在用户请求下一个页面的时候，可以直接读缓存里的资源，快速的将页面呈现出来，这样就可以在一定程度上改善用户的体验。 　　常见的资源预加载方法有以下几种： 　　（1）CSS Sprites预加载图片。CSS sprites技术可以用来减少页面产生的HTTP请求数。它是把所有的图型状态（比如按钮的默认状态，悬停及激活等状态）保存到一张图片中，并依据元素的状态，使用CSS对图片进行相应的定位、切割。不过这样有个重要的缺点――需要提前加载的图片不适用这项技术。一些后面才需要显示的图片并没有被加载，这可能会导致一个延迟。因此，此技术一般适合静态站点，主要用来减少图片加载数。 　　（2）JavaScript预加载图片。使用JavaScript的image对象，先把网站中使用的每个图片的地址放到一个数组中，然后遍历这个数组，根据图片地址创建各自的image对象。这样可以保证所有的图片都能被浏览器缓存，用