并行处理系统结构如何全面提高网站网页的打开访问速度_勾瞧勒勾(3)

图3-4 触发加载页卡内容

图3-5 翻页触发动态加载

2.2.2 触发加载

一般来说，动态填充数据的前期判断有两种形式。

一种是使用条件语句，判断内容区域是否有内容，如果没有，填充内容。这种方式最容易想到，但每次触发的时候都会判断一次。

另外一种是的方式。我们触发的对象是否被点击，如果点击，就像目标对象填充内容，然后取消这个。

图3-6 判断的两种方式

很显然，第二种方式只需执行一次，测试结果也表明这种方式是最快的。

2.2.3 数据插入方式

我们的新闻系统在生成新闻列表的时候，会根据我们的模板同时生成html页面、xml文件（我们很少使用）、json文件，在选择将列表插入页面的时候，我们有两种方式。

一种是动态加载json文件，用JS生成内容，插入页面；另一种是使用XHR加载html文件，使用responseText获取内容，插入页面。

图3-7 html文件

图3-8 json文件

其实，使用第二种方法有明显的好处。第一是，html文件体积比json文件小，加载量减少；第二是直接使用html文件，减少了JS动态生成结构的开销。

2.3 延时加载

对于一组有加载时间间隔的资源，我们其实可以对其做加载延时，按照其前后出现的顺序，在时间间隔后即时加载下一个资源。例如轮播广告就很适合这么做。

图3-9 轮播广告

2.3.1 轮播广告

图3-10 轮播广告加载的请求瀑布图

其实我们可以这样，第一次加载第一张广告图片，当5秒后，判断第二张图片是否加载过，如果没有，加载第二张图片，以此类推。判断的方式很简单，我们只要在初期生成轮播广告结构的时候，不设置img标签的src属性，然后加载时判断这张图片是否有src属性，如果没有，加载图片并设置这个属性。

图3-11 判断方式

图3-12 优化后的请求瀑布图

第3章 其他方式

3.1 文件压缩

3.1.1 代码

老生常谈的方法。我们可以将代码里多余的空格，回车，无用标签删除，替换名字较长的变量名等等方式减少脚本文件大小。

图4-1 脚本压缩对比

3.1.2 多媒体

对于图片，不同格式，不同压缩率都会造成图片大小的千差万别。选择一个合适并且图片质量可以接受的压缩方式，可以节省很大一笔加载量。

图4-2 图片压缩对比

对于视频、音频、Flash来说，也都一样，码率、格式等等方面都会对大小造成影响。

图4-3 视频压缩对比

3.2 CSS 3

CSS 3是一个不算太新，但由于我朝浏览器限制而得不到大范围应用的技术。其实我们可以在一些效果表现不是很重要的页面使用CSS3来针对浏览器做一些差异化效果，已达到减少加载量的目的。

3.2.1 替换图片

对于移动端，或者一些PC页面，我们可以用CSS 3来替换一些图片效果，比如渐变、阴影、圆角等等。

图4-4 绿色按钮

例如图4-4中的绿色按钮，使用CSS 3渐变和图片所造成的加载量差距很大，在能使用CSS3的时候，尽量不要使用图片。

图4-5 CSS 3和图片的大小对比

3.2.2 替换JS

一些对象移动、宽高变换等效果，其实可以使用CSS 3来实现。例如使用CSS3和JS，来实现一个对象左右切换的效果，需要的代码量如图4-6所示。我们可以看到，CSS3的代码量极少，而且执行过程中没有JS那些复杂的运算。

图4-6 CSS 3和JS的代码量对比

3.3 服务器

3.3.1 GZIP

雅虎13条里的内容。其压缩比例很大，大部分网站都使用了。

图4-7 gzip效果

3.3.2 缓存

设置Expires、Cache-Control以减少页面加载量，使浏览器从本地读取缓存。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-69739-3.html