改变加载顺序加快页面载入速度

导语

网站首页打开是否快速，影响到用户体验也关系到推广的难易度。我们很难想象一个打开会产生白屏或者需要半分钟以上才能出现首页文字的网站可以在初期快速的被人接受。

本文将对于目前富媒体网页的载入优化进行一些探索。

图片最频繁，也最耗资源

文章开始之前，我们先来看下面两张中国知名网站的截图：

 

杭州19楼的首页

淘宝的首页

你可以很明显的发现，图片等非文本媒体占据了页面的大部分，他们是产生焦点的大户，同时也是资源大户。可能会有人说，削减这部分的载入将有效的提升速度。这句话没错，但那是放P，这个道理谁都知道，要是能减早就减了。

对于孜孜不倦在硬广的营销部门和永远有搞不完的活动的运营部门的支撑下，首页图片位只会更多，不会更少！

看看别人是怎么做的

这里我不打算介绍任何网站的做法，事实上绝大部分的网站依然是采用HTML直接堆图片，或者用CSS加载图片，这样做很好也很规范，没必要为了优化去打破这样的习惯。

所以，我们要借鉴浏览器，看看他们是怎么对付日渐臃肿的首页的。

对于目前的IE8\OPERA10\FireFox 3.*而言，对于图片都有自己独特的渲染方式,这里我通过跟踪总结了三款浏览器的优先级。

IE8:

Text=CSS>JS

备注：线性加载，如果JS卡住，则会先执行JS,然后继续下载别的部分进行渲染。

FireFox

Text=CSS>JS

备注：线性加载，如果JS卡住，则会先执行JS,然后继续下载别的部分进行渲染。

Opera：

Text>CSS>JS

备注：非线性加载，可以同时先全部下载，然后按照自己的顺序进行渲染。

这里我比较看好Opera的处理方式，虽然在下载过程中他并不占优势，但处理方式很值得借鉴，他会让用户先看到文字，从而得到内心的安慰——哦，这网站打开了。

将浏览器的方式运用到页面上

虽然Text>JS这部分我们没法强制做到，但是让图片延迟加载还是可以做的。

方法一：通过Jquery的lazyload进行延迟加载

方法：

在header部分添加lazyload的相关代码，例如：

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.lazyload.mini.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function() {
        $("img").lazyload({placeholder : "grey.gif", effect : "fadeIn"});
    });
</script>

效果：仅显示加载第一屏中的图片，随着鼠标移动按需加载。如果首页超过1屏高度，则效果十分明显。

不足之处：lazyload插件和Jquey1.3.*版本有冲突，在IE中将无法正常使用。如果网站并不是基于Jquery编写的，为了这个效果加载Jquery和lazyload插件对于网站本身就存在很大压力。

方法二：用display属性强制改变加载顺序

方法：

在部分添加如下内容:

    <style  type="text/css" media="screen">#main img{display:none;}</style>

然后在页面的footer部分加入如下内容：

    <style  type="text/css" media="screen">#main img{display:inline;}</style>

效果:强制页面的HTML图片元素等待页面载入完成后加载，先让用户看到文字，避免白屏。

不足之处：这个代码需要更具实际情况改写，同时部分img的display属性有可能是block等，需要在footer重新定义。