十一月16
就在不久前Google大神决定把页面载入速度加入PageRank指数的一个指标. 本人比较赞同, 有多少人愿意等10-20秒去载入一个不知道是否有自己所需要的内容的页面? 我不会, 如果一个页面10秒内还没出现我要的信息, 我一定会直接关闭找下一个搜索结果去.
但是同时作为网页编写者我也深知页面载入速度70%在于,网络速度, 客户和服务器的距离, 编程者能做的确是不多, 而换一个更快的服务器开销也不是人人都可以受得起.
虽然情况如实但是作为编写者我们还是可以为载入速度做一点努力的. 这里就介绍一个提速的小方法. 对网页源码的精简是必须的, 更好的逻辑, 更少的数据库查询等等都可以帮助网页载入速度的提高做出贡献. 但是毕竟这样的提速方法是有限的. 网页速度最大的问题是什么? 不是代码, 不是计算, 而是图片, flash,媒体等. 随便打开一个大网站什么东西最先看到, 什么最后? 很多人的感觉都是最先出现的一定是文字, 而最后慢慢载入的一定是图片和Flash. 就技术上来说PHP,ASP等后台语言是通过服务器计算, 通常服务器都有强大的CPU所以大量计算不是问题. 而JS是客户端语言在电脑上计算也不会很慢. (当然对于计算Integral之类微积分问题除外.) 慢的永远是图片的载入, 一场图片100K左右, flash在500K左右, 如果用200k每秒速度去载入10张图片5张flash也需要7秒. 而如果你做的不是图片或者是Flash网站,那么很多时候这些图片都是装饰,或者辅助类的, 是否完全载入对于客户来说影响并不大.
说了那么多其实就是一条, 图片和Flash其实不需要和网页一起载入. 对于有些浏览器, 例如opera,chrome等, 开发者已经意识到这点, 如果你观察的仔细你会发现opera刚载入的一张页面的时候, 页面内的图片是模糊的, 然后才慢慢的清晰. 其实开发者这么做就是为了提速, 先载入重要文字, 计算等信息于此同时载入低清晰的图片,把网页的轮廓做出来, 最后再载入完整的图片. 这样做就会让客户先查看他们需要东西同时不破外网页的格局而又不需要等待网页完全载入完那么久.
那么有了这个思路作为网页开发者的我们也可以用相同的方法提速, 而且可以做到一些浏览器无法做到的,同时还可以提速PageRank. 方法是用JS的readystatus来异步载入, 此方法有点类似AJAX. 大概逻辑如下. 首先我们载入所有最重要的内容, 例如文章标题,内容等, 然后等所有重要的东西都载入完了再载入图片. 这样做的好处是不单单用户体验得到了提升, PageRank也可以得到提升. 应为当你载入完所有重要内容后PageRank的系统记录你已经载入完成, 那么计时也停止了, 虽然你的图片还没载入. 但是这些图片并不影响整体页面. 这样的话虽然是同一个页面, 但是载入时间在PageRank那却不一样, 用户体验也大大提升.
那么如何实现呢? 其实很简单, 代码如下
window.onload=function ()
{
//载入图片. 用getElementsById()等方法.
}
这里你可以写一些代码自己看看效果. 例如可以用两张不同图片image1和image2(差不多大小.), 代码中你把image1写在image2前面,在image后门写了一些文字代码, 接着改变image2的载入方法, 然后观察哪些先出现在浏览器上. 如果不用以上方法, 你应该看到的顺序是, 文字->图片1-(同时或者之后)>图片2. 也许图片2先载入完, 但是图片2不会比图片1先开始载入. 而用了上面的方法你应该先看到, 文字和图片2, 等图片2完全载入完后才看到图片1. 这样我们的目的就达到了. 在实际应用中图片2也许是比较重要的图片信息, 而图片2可能是比较不重要的辅助图片或者装饰,背景等. 同时如果你够细心你会发现浏览器的状态栏在图片2载入完的同时显示页面已经载入完了, 但是图片1还在载入中.
代码很简单但是如果用得好效果非凡. 某些图片可以之后载入某些则需要同时载入, 而作为网页编程者我们可以灵活的转变, 这点事浏览器做不到的. 所以合理的安排你网页上的图片和媒体, 给用户最佳的体验这才是一个好的网页编程者所需要做的.
最后: 请不要滥用这个方法, 例如把所有东西都搬进onload,用来欺骗PR提高网速等. 这里的方法对搜索引擎收录的影响尚不知, 但是如果仅仅运用在图片上相信影响几乎没有. 所以请大家善用此方法.