大型网站之网站静态化（综合篇）

短命女 2022-04-17 00:11 256阅读 0赞

**分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangjunshow]**

**也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！**

原文：[http://blog.jobbole.com/84200/][http_blog.jobbole.com_84200]

[http://blog.jobbole.com/84328/][http_blog.jobbole.com_84328]

**一、简介**

网站的web前端要实现高效，第一个要解决的短板就是网络的延迟性对网站的加载效率的影响，当然很多人会说网速快不快这是网络运营商的问题，不是网站的问题，但是大家肯定也见过就算我们用上了千兆宽带也会有些网站加载速度慢的让人无法忍受，网站本身的确是没法控制网络速度的能力，但是如果我们不降低网络对页面加载效率的影响，其他任何优化网站的手段也就无从谈起，原因就是网络效率对于网页加载效率的影响是起到大头作用的，只有这个大头被解决了，那么解决其他的小头才能发挥作用。

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

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

CDN技术应该由三个步骤组成，首先是解析DNS，找到离用户最近的CDN服务器，接下来CDN要做一下负载均衡，根据负载均衡策略将请求落地到最合适的一个服务器上，如果CDN服务器上就有用户所需要的静态资源，那么这个资源就会直接返回给浏览器，如果没有CDN服务器会请求远端的服务器，拉取资源再把资源返回给浏览器，如此同时拉取的资源也被缓存在CDN服务器上，下次访问就不需要在请求远端的服务器了，CDN存储资源的方式使用的是缓存，这个缓存的载体是和apache，nginx类似的服务器，我们一般称之为http加速器，之所以成为http加速器是为了和传统静态web服务器区别开来，传统的静态资源服务器一般都是从持久化设备上读取文件，而http加速器则是从内存里读取，不过具体存储的计算模型会根据硬件特点做优化使得资源读取的效率更高，常见的http加速器有varnish，squid。Ngnix加上缓存模块也是可以当做http加速器使用的，不管使用什么技术CDN的服务器基本都是做一个就近的缓存操作  
  
**三、减少http请求**

网络传输效率还和我们传输资源的大小有关，因此我们在资源传输前将其压缩，减小资源的大小从而达到提升传输效率的目的；另外，每个http请求其实都是一个tcp的请求，这些请求在建立连接和释放连接都会消耗很多系统资源，这些性能的消耗时常会比传输内容本身还要大，因此我们会尽力减少http请求的个数来达到提升传输效率的目的或者使用http长连接来消除建立连接和释放连接的开销。  
  
**四、动静分离**  
  
  我常常认为最佳的性能优化手段就是使用缓存了，但是缓存的数据一般都是那些不会经常变化的数据，上文里说到的浏览器缓存，CDN其实都是可以当做缓存手段来理解，它们也是提升网站性能最为有效的方式之一，但是这些缓存技术到了动态网站却变得异常不好实施，这到底是怎么回事了？  
  
  首先动态网站和静态网站有何不同呢？我觉得动态网站和静态网站的区别就是动态网站网页虽然也有一个url，但是动态网站网页的内容根据条件不同是会发生改变的，而且这些变化的内容却是同一个url，url在静态网站里就是一个资源的地址，那么在动态网站里一个地址指向的资源其实是不同的。因为这种不同所以我们没法把动态的网页进行有效的缓存，而且不恰当的使用缓存还会引发错误，所以在动态网页里我们会在meta设定页面不会被浏览器缓存。  
   如果每次访问动态的网页该网页的内容都是完全不同的，也许我们就没有必要写网站静态化的主题了，现实中的动态网页往往只是其中一部分会发生变化，例如电商网站的菜单、页面头部、页面尾部这些其实都不会经常发生变化，如果我们只是因为网页一小部分经常变化让用户每次请求都要重复访问这些重复的资源，这其实是非常消耗计算资源了，我们来做个计算吧，假如一个动态页面这些不变的内容有10k，该网页一天有1000万次的访问量，那么每天将消耗掉1亿kb的网络资源，这个其实很不划算的，而且这些重复消耗的宽带资源并没有为网站的用户体验带来好处，相反还拖慢了网页加载的效率。那么我们就得考虑拆分网页了，把网页做一个动静分离，让静态的部分当做不变的静态资源进行处理，动态的内容还是动态处理，然后在合适的地方将动静内容合并在一起。  
  
  
**五、动静合并**

内容动静分离后，需要把他组合起来，即动静合并。动静合并的位置非常的关键，这个位置的选择会直接导致我们整个web前端的架构设计。

在java的web开发里，页面技术jsp本身就包含了将页面动静分离的手段，例如下面的代码：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;%@&nbsp;include file=”header.jsp” %&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>body</code> 
      <code>&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>……….</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&lt;%@&nbsp;include file=”footer.jsp” %&gt;</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

一般一个网站的头部和尾部都是一样，因此我们把头部的代码单独放置在一个header.jsp页面里，页面尾部的代码放置下footer.jsp页面里，这样技术人员在开发页面时候就不再需要重复编写这些重复的代码，只需要引用即可，这个做法最大的好处就是可以避免不同页面在相同代码这块的不一致性，假如没有这个统一引用的话，手动编写或者复制和粘贴，出错的概率是非常的高的。

但是这个做法有一个问题，问题就是这种动静分离其实都是作用于单个页面的，也就是说每个页面都要手动的重复这个动静分离的操作，大多数情况这种做法都不会有什么问题，但是对于一个大型网站而言这种做法就有可能会制造不必要的麻烦，这里我截取了一张京东的首页，如下图所示：

![Center][]

讲述前我要事先声明下，京东网站可能不存在我要讲述的问题，我这里只是使用京东网站的首页做例子来说明，看图里的首页和食品两个条目，有些公司做这样的网站时候这些导航进入的页面会是一个独立的工程，每个工程都是由独立的项目组开发维护的，虽然项目组不同但是他们页面的整体结构会是一致的，如果按照上面的动静分离手段，那么每个项目组都要独立维护一份相同的头部尾部资源，这个时候麻烦来了，如果该公司要新增个新的条目，那么每个项目组都要更新自己不变的资源，如果该企业一共分了5个项目组，现在又做了一个新的条目，那么其他与之无关的项目组都得折腾一次更改统一引用文件的工作，要是做的不仔细就有可能出现页面展示不一致的问题，为了解决这个问题，java的web开发里就会考虑使用模板语言替代jsp页面技术，例如模板语言velocity，这些模板语言都包含一个布局的功能，例如velocity就有这样的功能，我们看看velocity的布局模板实例，如下所示：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>html</code> 
      <code>&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>head</code> 
      <code>&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>meta</code> 
      <code>http-equiv</code> 
      <code>=</code> 
      <code>"Content-Type"</code> 
      <code>content</code> 
      <code>=</code> 
      <code>"text/html;&nbsp;charset=utf-8"</code> 
      <code>/&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>title</code> 
      <code>&gt;#springMessage("page_upop_title")&lt;/</code> 
      <code>title</code> 
      <code>&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>meta</code> 
      <code>http-equiv</code> 
      <code>=</code> 
      <code>"X-UA-Compatible"</code> 
      <code>content</code> 
      <code>=</code> 
      <code>"requiresActiveX=true"</code> 
      <code>/&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>meta</code> 
      <code>name</code> 
      <code>=</code> 
      <code>"keywords"</code> 
      <code>content</code> 
      <code>=</code> 
      <code>'#springMessage("page_upop_keywords")'</code> 
      <code>/&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>meta</code> 
      <code>content</code> 
      <code>=</code> 
      <code>'#springMessage("page_upop_description")'</code> 
      <code>name</code> 
      <code>=</code> 
      <code>"description"</code> 
      <code>/&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>head</code> 
      <code>&gt;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>body</code> 
      <code>oncontextmenu</code> 
      <code>=</code> 
      <code>"return&nbsp;false"</code> 
      <code>onselectstart</code> 
      <code>=</code> 
      <code>"return&nbsp;false"</code> 
      <code>&gt;</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

[http_blog.csdn.net_jiangjunshow]: https://blog.csdn.net/jiangjunshow/article/details/77338485
[http_blog.jobbole.com_84200]: http://blog.jobbole.com/84200/
[http_blog.jobbole.com_84328]: http://blog.jobbole.com/84328/
[Center]: /images/20220417/4f4b37e43f9a41148f1eb2859c357c31.png