充分享受异步延迟加载带来的网页浏览快感
2011-10-26 01:10
对于一个普通的个人博客的建设而言，我并不是很在意网络上弥漫的各种SEO优化解决方案，但却十分注重网页的布局和加载速度，因为良好的布局和色彩搭配能够给访问者一种舒适的感觉，而较快速的加载速度则能够增强用户体验度，更有利于留住网民，有助于将其培养成你的忠实的访问者。
为提高我的博客的网页加载速度，之前我经常使用Google实验的Page Speed Online测试网页的加载元素，也曾根据其提供的优化建议极力压缩图片质量和大小，优化样式文件，JS文件和模板文件，尽量减少冗余的和不需要代码，以及尽量地减少数据库查询次数，甚至重构模板代码，例其更倾向于符合网页的各种标准，以此来提高网页的加载速度，提升用户体验度。
昨夜，夜空阴霾，透过窗户仰头望，一片漆黑，许是应景，我失眠了……辗转反侧，忽然想起前段时间在进行Page Speed Online测试时，其提供的一条优化建议：暂缓JavaScript解析，意思是讲将JS文件放至网页文档的末端以加速网页主体代码的解析，从而达到提升网页打开速度的效果。之前在一些技术类博客中也看到一些关于延迟加载图片等网页元素使网页主体内容能够更迅速地显示的文章，于是我就在想，既然可以通过JS来使网页部分元素延迟加载，那么网页载入之初不加载类似于大图片类的网页元素，待需要浏览时再加载有关元素实现起来亦非难事（事后，我把它统称为按需异步加载）。有鉴于此，迫于求知，便起床来以我的博客文章列表中的缩略小图为实验对象加以实践。
我的博客首页及各分类面的文章列表中均右上角处均有一小图（起初是为了而已好看不单调），虽看起来是小图，但其实并不小，几乎每张图都在50K以上，如果在网页载入之初就加载这些图片的话就需要多加载500K的图片，大大降低了网页的载入速度，如果不加载这些图片的话，网页的打开速度必定会有质的提升！
我的思路是将图片的真实地址赋值给图片标签中的一个属性，然后图片标签中的源图片地址则用一张比较小的图片（例如Loading小图标）加以代替，待浏览者点击显示该标题显示文章摘要和图片时再通过JS加载真实图片，实现按需索图，异步加载的效果。值得一提的是，许多博客在介绍异步加载图片时会在图标标签中构造一个自定义属性用来存放图片的真实地址，个人认为这样做是不太好的，因为自己构造的属性不符合W3C的有关标准，不利于实现网页的标准化。因此，鼓励大家使用标签中原有的属性对其进行赋值。