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

Expires和Cache-Control

max-age均用于检测文件是否过期，如果没有，浏览器读取本地缓存。Expires是HTTP1.0的内容，需要返回一个304NotModified，并且过期时间是GMT时间，一旦客户端日期不准确，可能导致失效。Cache-Control是HTTP1.1的内容，使用文件自身的age值来做和请求时间对比，相对稳定。

图4-8 304 Not Modified

3.3.3 优图

优图是公司开发的，用于图片无损压缩的系统。目前互娱已经接入，在图片上传到服务器时，自动进行无损压缩，加载量减少的效果非常明显。

图4-9 优图

第4章 三个话题

4.1 对比

在以前一次分享文档中，有同学提问为啥要抛开浏览器与服务器的缓存机制，自己实现一套本地存储机制，有没有什么特别的优势。其实相对与传统缓存来说，本地存储的好处有4点。

一是，对于存储需要处理的数据来说，本地存储可以在第一次加载的时候就将处理的数据存在本地，而传统缓存策略需要每次加载的时候都处理一次数据。

二是，本地存储相对稳定，有独立的存储空间，一般不会向服务器发送请求，而传统缓存时常会丢失。

三是，相对于传统缓存策略，本地存储的读取速度要更快些。当然，也有例外，Chrome的本地存储读取速度要慢于缓存文件的加载。

四是，对于iOS设备，Safari在重启后（包含本身的重启，或者设备的重启），缓存会被清空，而本地存储和离线存储不会。

4.2 SEO

4.2.1 Landing Page

对于互娱这边的游戏，客户端会有一个LandingPage，上面包含了最新的新闻，活动等等信息，玩家每次启动客户端都会看到这个页面。

根据监控，LandingPage平均每天给官网带来250w左右的PV，而官网平均每日PV大约1000多万。这个量应该完全填补了SEO的损失。而且游戏官网的用处一般仅限于给玩家提供游戏的功能服务、新闻、活动信息等等，玩家查询游戏攻略、资料一般会去媒体站，而不是游戏官网。

图5-1 《英雄联盟》的Landing Page

4.2.2 内页链接

在某些内容需要动态加载的时候，我们可以写一个到内页的链接，让搜索引擎爬虫顺着这个链接到内页去记录信息。

图5-2 到内页的链接

例如页卡中的新闻列表需要动态填充，如果不做处理，爬虫可能无法获取这些列表中的新闻链接。我们可以像图5-2的那两种方式，写一个到列表页的链接，这样爬虫就可以顺着这个链接到列表页去抓取信息。

4.3 效果

4.3.1 健康度

健康度是我们以前接的加载时间检测系统，最近我们换用了OZ系统。使用了以上方法的网站，在3秒健康度上，有了很大的提升。

图5-3 3秒健康度

4.3.2 请求减少

采用以上方式减少加载量，虽然会造成整个网页的全部请求量有少许增加，但因为是按需加载，所以可以大大减少首屏请求量。

图5-4 首屏请求量

图5-5 整页请求量

4.3.3 带宽消耗

在我们接入优图后，图片服务器的带宽消耗大大减少。在图片压缩一半后，我们的带宽消耗减少了4G。

图5-6 图片压缩一半后服务器带宽消耗趋势图

由于公司系统只能针对服务器做带宽消耗监控，所以我们看不到做文件存储和按需加载后的带宽减少情况，但我们可以大概算算。如果一个游戏官网全部页面平均每天有PV1500w，用户平均每次加载页面节省10KB，假设第1天正常加载，后29天全部读缓存，每月可以节省带宽488MB。对于有几十款游戏产品的我们来说，这是一个很可观的量。

结束语

正如开篇所说的那样，介绍的这些方法，有部分会伤害SEO，增加脚本开销。所以大家在使用的时候需要进行一个合理的选择。

例如对于一个新产品，SEO相对更加重要些，这个时候可以适当选用一些减少加载量的方法；当产品成熟，有大量用户的时候，可以考虑进行更加深入的加载量优化。

希望此文档能帮助到今后做网站加载量优化的同学。

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