网站静态化处理。

本是古典何须时尚 2024-02-18 20:58 30阅读 0赞

*  [网站静态化处理——总述。][Link 1]

提到像hao123这样的导航网站只要它部署的web服务器数量足够，它可以承载超大规模的并发访问量，如果是一个动态的网站，特别是使用到了数据库的网站是很难做到通过增加web服务器数量的方式来有效的增加网站并发访问能力的。但是现实情况是像淘宝、京东这样的大型动态网站在承担高并发的情况下任然能保证快速的响应，这其中有什么样的技术手段可以达到动态网站支撑高并发的场景了，这也许是每个做web开发的朋友都很感兴趣的问题，今天我将写一个新的系列来探讨下这个问题，希望我的经验和研究能给大多数人以启迪。这里要说明下，本系列的写法和存储的瓶颈的写法有所不同，本系列开始部分主要是讲解原理，后面部分会针对原理讲解具体的实现手段，如果有朋友感觉这种写法不适应，还请谅解。

我个人总结下来，这些大型动态网站之所以可以做到能快速响应高并发，它们都是尽量让自己的网站静态化，当然这种静态化绝不是把网站就做成静态网站，而是在充分理解了静态网站在提升网站响应速度的基础上对动态网站进行改良，所以我这里首先要讨论下静态网站那些特点可以用于我们提升网站的响应速度。

静态网站非常简单，它就是通过一个url访问web服务器上的一个网页，web服务器接收到请求后在网络上使用http协议将网页返回给浏览器，浏览器通过解析http协议最终将页面展示在浏览器里，有时这个网页会比较复杂点，里面包含了一些额外的资源例如：图片、外部的css文件、外部的js文件以及一些flash之类的多媒体资源，这些资源会单独使用http协议把信息返回给浏览器，浏览器从页面里的src，href、Object这样的标签将这些资源和页面组合在一起，最终在浏览器里展示页面。但是不管什么类型的资源，这些资源如果我们不是手动的改变它们，那么我们每次请求获得结果都是一样的。这就说明静态网页的一个特点：**静态网页的资源基本是不会发生变化的**。因此我们第一次访问一个静态网页和我们以后访问这个静态网页都是一个重复的请求，这种网站加载的速度基本都是由网络传输的速度，以及每个资源请求的大小所决定，既然访问的资源基本不会发生变化，那么我们重复请求这些资源，自己在那里空等不是很浪费时间吗？如是乎，浏览器出现了缓存技术，我们开发时候可以对那些不变的资源在http协议上编写相应指令，这些指令会让浏览器第一次访问到静态资源后缓存起这些静态资源，用户第二次访问这个网页时候就不再需要重复请求了，因为请求资源本地缓存，那么获取它的效率就变得异常高效。

由于静态网站的请求资源是不会经常发生变化的，那么这种资源其实很容易被迁移，我们都知道网络传输的效率是和距离长短有关系的，既然静态资源很容易被迁移那么我们就可以把静态资源服务器按地域分布在多个服务节点上，当用户请求网站时候根据一个路由算法将请求落地在离用户最近的节点上，这样就可以减少网络传输的距离从而提升访问的效率，这就是我们长提的大名鼎鼎的CDN技术，内容分发网络技术。

网络传输效率还和我们传输资源的大小有关，因此我们在资源传输前将其压缩，减小资源的大小从而达到提升传输效率的目的；另外，每个http请求其实都是一个tcp的请求，这些请求在建立连接和释放连接都会消耗很多系统资源，这些性能的消耗时常会比传输内容本身还要大，因此我们会尽力减少http请求的个数来达到提升传输效率的目的或者使用http长连接来消除建立连接和释放连接的开销（长连接的使用要看具体场景，这个我会在后面文章讲到）。

其实雅虎提出的网站优化的14条建议大部分都是基于以上原理得出的，关于雅虎的14条件建议，本系列后面内容将做详细的讨论，这里就不展开了。

**　　我常常认为最佳的性能优化手段就是使用缓存了**，但是缓存的数据一般都是那些不会经常变化的数据，上文里说到的浏览器缓存，CDN其实都是可以当做缓存手段来理解，它们也是提升网站性能最为有效的方式之一，但是这些缓存技术到了动态网站却变得异常不好实施，这到底是怎么回事了？

首先动态网站和静态网站有何不同呢？我觉得动态网站和静态网站的区别就是动态网站网页虽然也有一个url，但是我们如果传输参数不同那么这个url请求的页面并不是完全一样，也就是说动态网站网页的内容根据条件不同是会发生改变的，但是这些变化的内容却是同一个url，url在静态网站里就是一个资源的地址，那么在动态网站里一个地址指向的资源其实是不同的。因为这种不同所以我们没法把动态的网页进行有效的缓存，而且不恰当的使用缓存还会引发错误，所以在动态网页里我们会在meta设定页面不会被浏览器缓存。

如果每次访问动态的网页该网页的内容都是完全不同的，也许我们就没有必要写网站静态化的主题了，现实中的动态网页往往只是其中一部分会发生变化，例如电商网站的菜单、页面头部、页面尾部这些其实都不会经常发生变化，如果我们只是因为网页一小部分经常变化让用户每次请求都要重复访问这些重复的资源，这其实是非常消耗计算资源了，我们来做个计算吧，假如一个动态页面这些不变的内容有10k，该网页一天有1000万次的访问量，那么每天将消耗掉1亿kb的网络资源，这个其实很不划算的，而且这些重复消耗的宽带资源并没有为网站的用户体验带来好处，相反还拖慢了网页加载的效率。那么我们就得考虑拆分网页了，把网页做一个动静分离，让静态的部分当做不变的静态资源进行处理，动态的内容还是动态处理，然后在合适的地方将动静内容合并在一起。

这里有个关键点就是动静合并的位置，这个位置的选择会直接导致我们整个web前端的架构设计。我们这里以java的web开发为例，来谈谈这个问题。

java的web开发里我们一般使用jsp来编写页面，当然也可以使用先进点的模板引擎开发页面例如velocity，freemark等，不管我们页面使用的是jsp还是模板引擎，这些类似html的文件其实并不是真正的html，例如jsp本质其实是个servlet也就是一个java程序，所以它们的本质是服务端语言和html的一个整合技术，在实际运行中web容器会根据服务端的返回数据将jsp或模板引擎解析成浏览器能解析的html，然后传输这个html到浏览器进行解析。由此可见服务端语言提供的开发页面的技术其实是动静无法分离的源头，但是这些技术可以很好的完成动静资源中的动的内容，因此我们想做动静分离那么首先就要把静的资源从jsp或者模板语言里抽取出来，抽取出来的静态资源当然就要交给静态的web服务器来处理，我们常用的静态资源服务器一般是apache或ngnix，所以这些静态资源应该放置在这样的服务器上，那么我们是否可以在这些静态web服务器上做动静结合呢？答案是还真行，例如apache服务器有个模块就可以将它自身存储的静态资源和服务端传输的资源整合在一起，这种技术叫做ESI，这个时候我们可以把不变的静态内容制作成模板放置在静态服务器上，动态内容达到静态资源服务器时候，使用ESI或者CSI的标签，把动静内容结合在一起，这就完成了一个动静结合操作。这里就有一个问题了，我前面提到过CDN，CDN其实也是一组静态的web服务器，那么我们是否可以把这些事情放到CDN做了？理论上是可以做到，但是现实却是不太好做，因为除了一些超有钱的互联网公司，大部分公司使用的CDN都是第三方提供的，第三方的CDN往往是一个通用方案，再加上人家毕竟不是自己人，而且CDN的主要目的也不是为了做动静分离，因此大部分情况下在CDN上完成这类操作并不是那么顺利，因此我们常常会在服务端的web容器前加上一个静态web服务器，这个静态服务器起到一个反向代理的作用，它可以做很多事情，其中一件事情就是可以完成这个动静结合的问题。

那么我们把这个动静结合点再往前推，推到浏览器，浏览器能做到这件事情吗？如果浏览器可以，那么静态资源也就可以缓存在客户端了，这比缓存在CDN效率还要高，其实浏览器还真的可以做到这点，特别是ajax技术出现后，浏览器来整合这个动静资源也就变得更加容易了。不过一般而言，我们使用ajax做动静分离都是都是从服务端请求一个html片段，到了浏览器后，使用dom技术将这个片段整合到页面里，虽然这个已经比全页面返回高效很多，但是他还是有问题的，服务端处理完请求最终返回结果其实都是很纯粹的数据，可是这些数据我们不得不转化为页面片段返回给浏览器，这本质是为纯粹的数据上加入了很多与服务端无用的结构，之所以说无用是因为浏览器自身也可以完成这些结构，为什么我们一定要让服务端做这个事情了？如是乎javascript的模板技术出现了，这些模板技术和jsp，velocity类似，只不过它们是通过javascript设计的模板语言，有了javascript模板语言，服务端可以完全不用考虑对页面的处理，它只需要将有效的数据返回到页面就行了，使用了javascript模板技术，可以让我们动静资源分离做的更加彻底，基本上所有的浏览器相关的东西都被静态化了，服务端只需要把最原始的数据传输到浏览器即可。讲到这里我们就说到了web前端最前沿的技术了：javascriptMVC架构了。

以下是具体内容：

*  [网站静态化处理——动静整合方案。][Link 2]
 *  [网站静态化处理——动静分离策略。][Link 3]
 *  [网站静态化处理——缓存。][Link 4]
 *  [网站静态化处理——CSI。][CSI]
 *  [网站静态化处理——前后端分离（上）。][Link 5]
 *  [网站静态化处理——前后端分离（中）。][Link 6]
 *  [网站静态化处理——前后端分离（下）。][Link 7]
 *  [网站静态化处理——满足静态化的前后端分离。][Link 8]
 *  [网站静态化处理——反向代理。][Link 9]
 *  [网站静态化处理——web前端优化（上）。][web]
 *  [网站静态化处理——web前端优化（中）。][web 1]
 *  [网站静态化处理——web前端优化（下）。][web 2]

转载： [https://www.cnblogs.com/sharpxiajun/p/4282789.html][https_www.cnblogs.com_sharpxiajun_p_4282789.html]

[Link 1]: https://blog.csdn.net/en_joker/article/details/80608402
[Link 2]: http://www.cnblogs.com/sharpxiajun/p/4285085.html
[Link 3]: http://www.cnblogs.com/sharpxiajun/p/4287011.html
[Link 4]: http://www.cnblogs.com/sharpxiajun/p/4289298.html
[CSI]: http://www.cnblogs.com/sharpxiajun/p/4291003.html
[Link 5]: http://www.cnblogs.com/sharpxiajun/p/4300441.html
[Link 6]: http://www.cnblogs.com/sharpxiajun/p/4304526.html
[Link 7]: http://www.cnblogs.com/sharpxiajun/p/4307203.html
[Link 8]: http://www.cnblogs.com/sharpxiajun/p/4307739.html
[Link 9]: http://www.cnblogs.com/sharpxiajun/p/4309976.html
[web]: http://www.cnblogs.com/sharpxiajun/p/4314387.html
[web 1]: http://www.cnblogs.com/sharpxiajun/p/4316840.html
[web 2]: http://www.cnblogs.com/sharpxiajun/p/4319444.html
[https_www.cnblogs.com_sharpxiajun_p_4282789.html]: https://www.cnblogs.com/sharpxiajun/p/4282789.html