一个简单的弹出效果对于页面性能的改进

前两天本科母校老师联系我,让我改进一下原来做的一个小网站的首页加载速度,

网址:http://gh.snnu.edu.cn/

通过 Yslow 和 PageSpeed 两个工具的测试,发现了性能瓶颈主要在于页面中有两个文件体积比较大的JS文件,一个是jQuery,另一个是基于jQuery的thickbox.js,这个JS是用于制作弹出层效果的,与之对应页面中还有一个thickbox.css文件。进一步分析发现,页面中除了thickbox.js弹出插件以外,其他并没有功能应用了jQuery,也就是说,只是为了一个简单的弹出层效果而且使用了两个体积较大的JS文件和一个CSS文件,因此性能改进的重点就是在去掉这三个文件的基础上实现弹出层效果,改进后页面加载速度有了非常明显的提高,建议不要一味地去使用jQuery而不考虑页面加载性能,物尽其用即可,最终实现效果如下:

 

一个简单的弹出效果对于页面性能的改进

PS:这个弹出效果仍需要进一步改进,比如当页面出现滚动条时,如何确保用户能看到整个弹出菜单,而不是只看到一部分。

你可能感兴趣的:(性能)