页面速度提升优化随讲v1

这里面主要讲的是，提高每个页面的访问响应速度

优化前提:
     1.熟悉html标签
     2.了解javascript编程
     3.熟悉FireBug工具

每个网页响应都由以下几部分组成:html页面加载时间 + js加载时间 + css加载时间 + 图片加载时间

我第一部分讲的是如何提高图片加载时间(其他前三部分后期慢慢讲到)

图片加载又可分为2部分类型图片加载:1.背景图片加载,2.网页img标签图片加载

对于图片加载，我们可以用我们程序编程中经常用到的熟语来解释,即"可见即可得"

对于页面访问者来说，页面最先呈现出来的图片，即为优先图片显示，尤其是页面多于一屏的时候(大部 分网页都是多于一屏呈现的)，

用户最先看到的是第一屏图片内容，那么其他屏的图片内容,我们无需加载到页面上去，这样就避免了过 多图片加载导致的页面响应速度过慢的情况，

当多于一屏的图片未背景图片时，此时这些图片大多是存在样式表中，对应的样式值(background- image)存储了对应的背景图片链接,网页加载情况是一但样式渲染完成

样式中对应的background-image内容也被加载到网页当中，因此当我们把多于一屏的样式值先移除掉， 样式值对应的背景图片也不会加载到

页面上来(这里有个前提，由于多于一屏的页面布局无需呈现给访问者，故移除多于一屏的样式值时，不 应该影响到最先呈现给访问者看到页面布局,如有则需要调整

页面原有样式表值，已适应图片延迟加载要求),然后通过javascript的window.onscroll事件,一旦访问 者触发(如果用户不想看多于一屏网页内容时,不会触发那么剩余的网

页内容将永远不会被加载,节省了网络流量!!!,可惜用户多半会滚动查看网页其他部分内容!)onscroll事 件，我们把对应的样式值赋值到对应的

html控件上即可(这里有个小诀窍,移除样式值，大多时候只需移除顶层样式值，因为样式值一般都是层 级结构，顶级样式值被移除，那么下级的所有样式值都将失效)

onscroll事件一触发,样式对应的背景图片被加载至浏览器,从而启到延迟加载网页背景图片的作用

现在再来说说多于一屏的网页img标签图片延迟加载操作,对于一些需要延迟加载的img图片，我们在对应 的地方放置input隐藏域控件，里面存储对应img标签的src值

还是当用户触发window.onscroll事件的时候，编写适当的javascript代码把对应的隐藏域src值赋值到 对应的img的src上即可

以上讲的都是一些简单方面优化，一些细节和需要注意的地方就不在此多讲,需要了解的可以直接RTX call me

你也可以访问我们的网站http://www.yoursuzhou.com,首页就用了大量图片延迟加载技术

 

-- Arison(20120703)