关于大型网站技术演进的思考（十三）--网站静态化处理—CSI（5）

　　讲完了SSI，ESI，下面就要讲讲CSI了 ，CSI是浏览器端的动静整合方案，当我文章发表后有朋友就问我，CSI技术是否是就是经过ajax来加载数据啊，我当时的回答只是说你的理解有点片面，那么到底什么是CSI技术了？这个其实要和动静资源整合的角度来定义。

　　CSI技术实际上是在页面进行动静分离后，将页面加载分为两个步骤完成，第一步是加载静态资源，静态资源加载完毕后进行第二步骤加载动态资源。不过这个定义仍是表述的不全面，不全面的地方就是咱们要强调动静分离的目的，咱们把页面里的动静资源拆分出来是为了将静态资源作有效的缓存，这个静态资源多是在静态web容器上，也有多是在CDN上，也有多是在浏览器上，无论静态资源是如何缓存的，咱们的目的都是为了让静态资源加载的速度更快，若是咱们没有让静态资源加载变得高效，就算咱们使用了CSI的形式来设计页面，其实也没有发挥CSI的优势，反倒还会一不当心引入CSI的缺点。那什么是CSI的缺点呢？具体以下：

　　CSI的缺点一：CSI不利于页面的SEO即搜索引擎优化。搜索引擎的网络爬虫通常是根据url访问页面，获取页面的内容后去掉没用的信息例如：css样式，js脚本，而后分析剩下的文本内容，所以假如页面的一部份内容须要进行异步加载，那么这个加载控制确定是由javascript代码来完成的，所以网络爬虫爬下来的页面里异步加载的操做是无法执行的（据说有些高级的爬虫能够执行异步的操做，抓取异步的内容，即使有这个技术，大部分主流的爬虫仍是会忽略掉javascript代码的也会忽略异步加载的内容的），这就会致使爬虫爬的页面里有部分信息丢失了，因此说CSI对SEO不太友好。不过这个缺点咱们仔细分析下，可能并不会是那么严重，前面咱们谈论了不少静态分离的策略，若是咱们动静分离策略作的好，那么动态资源基本都是不能被缓存的内容，常常发生变化的内容，这些变化的内容原本就不须要被网络爬虫爬到，就算真的被爬到，搜索引擎有个查询结果指向了这个页面，咱们点开这个页面结果也是在页面找不到被搜索的关键字，这种情形我相信不少朋友在使用搜索引擎时候都会碰到过。不过我想若是开发人员没有正确使用CSI，那么这块他们可能也不会处理的特别好，所以这个缺点仍是很容易被引入的。

　　CSI的缺点二：咱们那么费时费力想让本身的网站静态化，目的就是想让页面加载更快点，咱们简简单单把页面加载分红了两个步骤进行，那么这么作就真的快吗？这可不必定啊，其实动静分离的作法和我上一个系列里讲到的数据库读写分离有相似之处，数据库读写分离咱们是经过拆分原表的读写之间的关联关系，从而达到解决读的瓶颈问题，而网页的动静分离是由于静态资源很容易被优化，因此咱们要拆分动静资源。因此当咱们对资源进行了动静分离，可是又没有优化静态资源，这个一看就知道咱们缺乏一个加速页面加载速度的操做，那么真的能让页面加载快点，还真的很难说了，并且异步加载须要执行javascript代码才行，可是静态资源加载时候很容易形成javascript脚本被阻塞，若是阻塞的脚本正好是异步加载的部分，结果只会是比之前加载的更慢了。

　　因而可知，我在前面讲到的SSI和ESI技术对于咱们在浏览器端发挥CSI技术优势是很是有必要的，SSI和ESI作好了能让动静分离出的静态资源加载的更加高效，这也就让CSI操做的第一个步骤变得高效，第一个步骤处理好了咱们只要在页面控制好脚本阻塞对异步加载的影响，那么咱们就能够达到提高整个页面加载效率的目的了。此外我以为CSI对SEO有重大影响是个伪命题，假如使用CSI形成了SEO效果不佳，那么确定是咱们CSI方案设计的不到位。

　　有人认为CSI还会有个缺点，不过笔者我并不认为这是一个缺点，这实际上是一个设计问题，好与坏是根据我的的操做习惯所决定的。这个别人认为的缺点是什么呢？它就是使用CSI技术时候，虽然页面很快的被加载出来了，可是动态内容那部分可能会显示一个正在加载的提示，那么这就致使页面用户友好性下降，其实这种同步和异步加载混搭操做实在太常见了，几乎全部大型门户网站，电商网站还有一大堆数不尽的网站都是采用同步和异步混搭的加载方式，假如这些网站不这么作，我相信这些网站例如首页加载必定会慢的让人吐血，由于它们不少网页里面内容实在太多，图片也都有点爆棚了，因此它们不得不使用同步和异步混搭的加载方式，甚至不少静态资源例如图片，flash这些东西也会采起异步加载方式。说到这里，估计有人仍是以为不服气，他就是不喜欢页面加载时候还要出现个正在加载提示，可是网页里又很是须要CSI带来的好处，那么咱们该如何解决这个问题呢？这个问题很好解决，首先愿意使用CSI技术也就说明用户仍是很愿意使用异步的加载技术的，不喜欢则是正在加载的提示，这说明用户想要在作同步加载操做时候不要掺杂异步操做，虽然如今ajax技术大行其道，可是ajax技术有个同步加载是没有办法解决的，那就是咱们在浏览器地址栏里输入网站url请求页面 ，因此面对上面的需求咱们只要保证这种同步操做只是一个纯粹的同步操做而不要掺杂异步加载便可，这个方案仍是很好实施的，这里我就再也不累述了。

　　动静分离后咱们会把静态资源进行缓存，前面文章里讲了一大堆都是在讲服务端的静态资源缓存，如今讲到了CSI已经到了浏览器端，那么咱们就得谈谈浏览器的缓存操做。页面的缓存操做就是使用http的expires和cache-control，咱们首先看看下面的写法：

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

 

　　这是我如今作的java的web项目里，jsp和vm文件都会使用的meta配置，它的目的就是让页面不要被浏览器缓存，可是若是使用CSI技术，同时动静分离作的很好，那么在页面头部其实咱们能够再也不这么写了，咱们可让页面在合理的时间范围内被浏览器缓存，若是该页面作了缓存操做，那么之后咱们再访问该页面，网页的加载效率就会变得更高了。

　　这里还有个问题，在雅虎优化网站的建议里，为了充分利用网页并行加载的特色，咱们每每会把图片，外部的js和css文件放置在单独的静态web容器或CDN上，那么这些文件每每也是能够被浏览器缓存，这个咱们又如何设置才能让浏览器知道要缓存它们呢？这里咱们以apache为例，为了让静态资源被浏览器缓存，apache须要使用mod_expires模块，而后在apache的配置文件里添加以下配置：

 

<FilesMatch "\.(gif|jpg|png|js|css">ExpiresDefault "access plus 10 years"</FilesMatch>

　　那么浏览器访问此apache上的静态资源后，浏览器就会把图片和该服务器上的js和css文件缓存在浏览器里。

　　咱们看看被缓存的静态资源是如何被使用的，以下图所示：

 

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

　　好了，CSI主题内容讲完了，讲到CSI技术和浏览器咱们就能够开始本系列另外一个重要内容先后端分离了，这将是我下篇的主题，我在本身博客里屡次讲到先后端分离，立刻又要再次讲了，此次讲是我这么长时间作先后端分离研究的大总结了。

　　最后，祝你们新年快乐，新的一年喜气洋洋，开开心心哦。