网站加载量优化:网页加载性能优化详解

2012-11-15 00:31:33  来源:腾讯IGIdeas 
Webjx.Com提示:加载,不只是少一点点【2012版】.
对于加载精简来说,最大的好处莫过于对页面的加速。加速有两点:第一是由于资源加载量减少,对于页面首屏加载速度的提升;第二是某些加载精简的方法,会在一定程度上加快页面的渲染速度。同时,由于加载量的减少,剩下了一些带宽,从而减少了带宽费用。 当然,事情都有两面的地方。加载精简会在一定程度上影响页面的SEO;部分方法也会造成一些额外的脚本开销。 寻找合适你的方法很重要,毕竟每个网站性质、用处、节点都可能不同。比如项目初期,可能宣传和扩散知名度方面重要些,这时候建议不要大量使用动态生成内容的方式,影响SEO。 第1章 存储资源 1.1 离线存储 1.1.1 为了移动 由于浏览器支持情况不同,离线存储在PC端没有大量的使用,反而在移动端的支持情况越来越好,如今Android、iOS都能使用离线存储,所以离线存储广泛的使用于离线APP应用。 对于离线存储,最重要的便是manifest文件。我们将需要缓存的文件列入cache段,将不需要缓存的内容列入network段即可。 图2-1 manifest文件示例 当浏览器加载页面时,发现manifest文件后,会检查它的内容是不是有修改,如果是,重新下载cache段的文件并缓存;如果不是,则跳过。 图2-2 更新离线缓存 需要注意的是,当我们使用离线存储时,浏览器会强行只读离线缓存的文件。我们需要将页面使用到的所有的资源都列入manifest文件中,不论是在cache段,还是network段。否则浏览器将报错,说找不到文件。 图2-3 未将所有文件列入的加载报错情况 1.1.2 更新 对离线存储的资源更新,需要修改manifest文件的内容。当然,我们一般不会随意修改文件名已达到修改manifest文件内容的目的。一般的做法是,在文件内新增一行注释,注释中写明目前的版本号,以后每次需要更新的时候,修改版本号就行了。 图2-4 第二行即为注释的版本信息 另外,我们可能需要功能更加强大的离线存储缓存更新的机制。试想一个新闻类的APP,我们需要在手机离线时读取本地存储的数据,当APP发现用户联网后,将读取在线的内容,更新本地的数据和页面信息。 对于图2-5,我们使用HTML5新提供的online时间在页面加载的时候判断手机是否在线。监听window的online和offline时间,可以判断手机是不是已经联网。一旦检测到手机联网,我们就可以调用applicationCache对象的update方法,去检测manifest文件是否有更新,如果有,下载新的版本。当updateready时,使用swapCache方法刷新缓存。 当然swapCache不能刷新页面的内容,只是把离线存储的文件更新成我们下载的新内容,我们还需要再使用JS替换页面的内容。 图2-5 离线存储进阶应用 1.1.3 残缺美 在使用离线存储的时候,总有些感到不是很爽的地方,列出来吐吐槽。 首先是两个更新的问题。我们知道,修改manifest文件后,浏览器会重新下载文件,而且是全部重新下载。这其实很蛋疼,有时候我们只需要更新其中一个文件,有点儿殃及池鱼的感觉。另外,在更新manifest文件后,我们需要刷新两次页面才能将最终的新内容呈现在页面上。 然后,如果我有很多文件要存储,需要把文件一个一个列入cache段里,就算使用程序生成,出来的manifest文件也有一定的体积。对于一个需要缓存300个文件的页面,使用相对路径,生成的manifest文件也有4K。在碰上更新的话,下载量有点儿大。 图2-6 APP有200多个小图标需要缓存 最后,对于同一个页面的带参URL路径,离线存储会当成不同的新文件进行缓存。如果您有100个不同的参数需要穿,而用户竟然访问过这100个文件,那就…… 图2-7 如果您有100个不同的传参 1.2 本地存储 1.2.1 本地存储的方法 userData是IE提供的一个本地存储方法,他将需要存储的内容放置在本地的一个XML文件中,并在页面的一个元素中设置一个调用的锚点。具体使用方法为:使用getElementById获取页面内的一个元素,使用addBehavior(“#default#userData”)对其添加本地存储的行为;使用setAttribute将需要存储的内容对其进行赋值,并用save(“XXX”)方法将内容存储在名为XXX的XML文件中;使用load(“XXX”)方法加载本地的XXX.xml文件,并用getAttribute获取已经存储的内容。 图2-8 IE的本地存储数据 关于HTML5本地存储localStorage的详细方法,请参见我的翻译文章《网络应用程序本地存储的前世今生》。 图2-9 Chrome的本地存储数据 对于IE浏览器,使用IE提供的userData方法;对于支持HTML5的浏览器(Firefox、Chrome、Safari、Opera等),使用localStorage提供的方法;对于其他浏览器使用常规方法加载内容。 图2-10 判断流程
共3页: 上一页 1 [2] [3] 下一页
更多
钱柜娱乐