13关于大型网站技术演进的思考十三静态化处理csi

1、关于大型技术演进的思考（十三）-静态化处理CSI（5）讲完了 99/，+9/，下面就要讲讲 )9/ 了 ，)9/ 是浏览器端的动静整合方案，当我文章后有朋友就问我，)9/技术是不是就是通过 GPG 来加载数据啊，我当时的回答只是说你的理解有点片面，那么到底)9/ 技术了？这个其实要和动静资源整合的角度来定义。)9/ 技术其实是在页面进行动静分离后，将页面加载分为两个步骤完成，第一步是加载静态资源，静态资源加载完毕后进行第二步骤加载动态资源。不过这个定义还是表述的不全面，不全面的地方就是 要强调动静分离的目的， 把页面里的动静资源拆分出来是为了将静态资源做有效的缓存，这个静态资源可能是在静态 K

2、H容器上，也有可能是在 )*4 上，也有可能是在浏览器上，不管静态资源是如何缓存的， 的目的都是为了让静态资源加载的速度更快，如果 没有让静态资源加载变得高效，就算 使用了 )9/ 的形式来设计页面，其实也没有发挥 )9/ 的优点，反倒还会一不 引入 )9/ 的缺点。那 )9/ 的缺点呢？具体如下：)9/ 的缺点一：)9/ 不利于页面的 9+5 即搜索引擎优化。搜索引擎的网络爬虫一般是根据 XR 页面，获取页面的内容后去掉没用的信息例如：IYY 样式，PY ，然后分析剩下的文本内容，因此假如页面的一部分内容需要进行异步加载，那么这个加载控制肯定是由 PGGYIXOVZ 代码来完成的，因此网络爬

3、虫爬下来的页面里异步加载的操作是没法执行的（听说有些高级的爬虫可以执行异步的操作，抓取异步的内容，即便有这个技术，大部分主流的爬虫还是会忽略掉 PGGYIXOVZ 代码的也会忽略异步加载的内容的），这就会导致爬虫爬的页面里有部分信息丢失了，所以说 )9/ 对 9+5 不太友好。不过这个缺点 仔细分析下，可能并不会是那么严重，前面谈论了很多静态分离的策略，如果 动静分离策略做的好，那么动态资源基本都是不能被缓存的内容，经常发生变化的内容，这些变化的内容本来就不需要被网络爬虫爬到，就算真的被爬到，搜索引擎有个查询结果指向了这个页面， 点开这个页面结果也是在页面找不到被搜索的关键字，这种情形我相信很

4、多朋友在使用搜索引擎时候都会碰到过。不过 如果开发 没有正确使用 )9/，那么这块他们可能也不会处理的特别好，因此这个缺点还是很容易被引入的。)9/ 的缺点二： 那么费时费力想让自己的 静态化，目的就是想让页面加载更快点， 简简单单把页面加载分成了两个步骤进行，那么这么做就真的快吗？这可不一定啊，其实动静分离的做法和我上一个系列里讲到的数据库读写分离有类似之处，数据库读写分离 是通过拆分原表的读写之间的关联关系，从而达到解决读的瓶颈问题，而网页的动静分离是因为静态资源很容易被优化，所以 要拆分动静资源。所以当 对资源进行了动静分离，但是又没有优化静态资源，这个一看就知道 缺少一个加速页面加载速

5、度的操作，那么真的能让页面加载快点，还真的很难说了，而且异步加载需要执行 PGGYIXOVZ 代码才行，但是静态资源加载时候很容易造成 PGGYIXOVZ 被阻塞，如果阻塞的 正好是异步加载的部分，结果只会是比以前加载的更慢了。由此可见，我 面讲到的 99/ 和 +9/ 技术对于 在浏览器端发挥 )9/ 技术优点是非常有必要的，99/ 和+9/ 做好了能让动静分离出的静态资源加载的更加高效，这也就让 )9/ 操作的第一个步骤变得高效，第一个步骤处理好了 只要在页面控制好 阻塞对异步加载的影响，那么 就可以达到 整个页面加载效率的目的了。此外我觉得 )9/ 对 9+5 有 影响是个伪命题，假如使

6、用 )9/ 造成了 9+5 效果不佳，那么肯定是 )9/方案设计的 。有人认为 )9/ 还会有个缺点，不过笔者我并不认为这是一个缺点，这其实是一个设计问题，好与坏是根据个人的操作 所决定的。这个别人认为的缺点是什么呢？它就是使用 )9/ 技术时候，虽然页面很快的被加载出来了，但是动态内容那部分可能会显示一个正在加载的提示，那么这就导致页面用户友 降低，其实这种同步和异步加载混搭操作实在太常见了，几乎所有大型门户 ， 还有一大堆数不尽的 都是采用同步和异步混搭的加载方式，假如这些 不这么做，我相信这些 例如首页加载一定会慢的让人吐血，因为它们很多网页里面内容实在太多， 也都有点爆棚了，所以它们不

7、得不使用同步和异步混搭的加载方式，甚至很多静态资源例如 ，LRGYN 这些东西也会采取异步加载方式。说到这里，估计有人还是觉得 气，他就是不喜欢页面加载时候还要出现个正在加载提示，但是网页里又非常需要 )9/ 带来的好处，那么 该如何解决这个问题呢？这个问题很好解决，首先愿意使用 )9/ 技术也就说明用户还是很愿意使用异步的加载技术的，不喜欢则是正在加载的提示，这说明用户想要在做同步加载操作时候不要掺杂异步操作，虽然现在 GPG 技术大行其道，但是 GPG在浏览器地址栏里输入url 请求页面 ，所以面对上面的需技术有个同步加载是没有办法解决的，那就是求只要保证这种同步操作只是一个纯粹的同步操作

8、而不要掺杂异步加载即可，这个方案还是很好实施的，这里我就不再累述了。动静分离后会把静态资源进行缓存，前面文章里讲了一大堆都是在讲服务端的静态资源缓存，现在讲到了 CSI 已经到了浏览器端，那么就得谈谈浏览器的缓存操作。页面的缓存操作就是使用 http 的 expires 和的写法：cache-control，首先这是我现在做的 java 的 web 项目里，jsp 和 vm 文件都会使用的 meta 配置，它的目的就是让页面不要被浏览器缓存，但是如果使用 CSI 技术，同时动静分离做的很好，那么在页面头部其实们可以让页面在合理的时间范围内被浏览器缓存，如果该页面做了缓存操作，那么以后可以不再这

9、么写了，我再该页面，网页的加载效率就会变得更高了。这里还有个问题，在雅虎优化的建议里，为了充分利用网页并行加载的特点，往往会把，外部的 js 和 css 文件放置在单独的静态 web 容器或 CDN 上，那么这些文件往往也是可以被浏览器缓存，这个又如何设置才能让浏览器知道要缓存它们呢？这里以 apache 为例，为了让静态资源被浏览器缓存，apache需要使用 mod_expires 模块，然后在 apache 的配置文件里添加如下配置：ExpiresDefault ac yearss plus 10那么浏览器此 apache 上的静态资源后，浏览器就会把里。看看被缓存的静态资源是如何被使用的

10、，如下图所示：和该服务器上的 js 和 css 文件缓存在浏览器当 http 的响应码是 304 的时候，那么浏览器就会从缓存里资源了，这里有的朋友可能会感到奇怪为什么缓存的资源还要发送个 http 请求了？理解这个既然是临时保存，那么就应该有个保存的有效期，就要了解下缓存的机制，缓存的含义是临时保存某些东西，定义缓存的方式是通过 http 完成的，那么按道理检查缓存是否过期也应该是 http 来决定的，因此每次使用缓存时候要发个请求到服务端，服务端会检查下资源是否过期了，如果没有过期，服务端返回个 304 的响应码，304 的返回响应是没有 http 报文体的，所以这个 http请求的返回数据是非常小的，因此这个 http 效率还是很高的，如果服务端发现资源过期了那么服务端就会把新资源返回给浏览器了，其实这个检测资源是否过期的请求有个专有名词叫做条件 Get 请求。至于服务端是如何完成检查操作，本系列在讲 web 前端优化时候会详细阐述，这里就不深入了。看到这里估计有朋友又有疑问了，为什么缓存是否过期不能在浏览器端来做了？这主要是浏览器做这个检查非常，因为用户的电脑时钟不一定准确，或者用户电脑时钟和服务端不一致，如果再加上时区那么就更加麻烦了，所以缓存失效最好是在服务端进行，这样缓存的有效期的准确性才能得到保证。html5 的出现，浏览器缓存的能力大大增强了，不过使