Dynamic and static separation of dynamic websites
1. Dynamic and static integration of static WEB servers (apache, ngnix)
SSI 、 ESI
After the static resource server receives the return from the server or cache server, inserts it into the page, and then returns the complete page to the browser
2. Browser-side dynamic and static integration
CSI
load twice
In the last article, I briefly introduced the evolution process of website static. Some friends may think that this knowledge is a bit too commonplace, and the technical basis of website static is not so advanced and difficult to understand, so it is in line with the ever-changing web Compared with the front-end technology, it seems nondescript. In fact, before I planned to write this series, I personally felt that there was a point in the web front-end that many people knew was important, but there was something that was often underestimated, and that was how the web front-end and the web server were integrated. When we want to make a large-scale, high-concurrency, and fast-response website, it plays an important role in the evolution of web front-end architecture technology.
If the web front end of a website is to be efficient, the first shortcoming to be solved is the impact of network latency on the loading efficiency of the website. Of course, many people will say that the network speed is not fast or not. This is the problem of the network operator, not the website. , but you must have seen that even if we use gigabit broadband, the loading speed of some websites is unbearably slow. The website itself does not have the ability to control the speed of the network, but if we do not reduce the efficiency of the network on page loading The impact of , any other means of optimizing the website is impossible to talk about, the reason is that the impact of network efficiency on the efficiency of web page loading plays a major role.
Going back to the key point of static and dynamic separation of the website mentioned above, the essence of solving this key point is to reduce the impact of network speed on website loading efficiency, but the different strategies we take when dealing with the problem of dynamic and static separation will affect our entire The website architecture has a major impact, especially after the web page is divided into dynamic and static, the static resources are pushed to the browser side as much as possible, which leads to the front-end architecture of the MVC model that was only available on the server side, which leads to the web front-end architecture. There have been qualitative changes. For example, some technologies that were originally suitable for heavy clients such as flash have also been adopted by the traditional web front-end. The MVC model has further evolved in the web front-end. As a result, the MVP (Model-View-Presenter) model appeared, MVVM (Model-View-ViewModel) pattern. Maybe some people in the last article have a little objection to the principle of separation of static and dynamic, but today's ever-changing web front-end technology is the continuous evolution of these common technologies. This is what I want to express in the last article. I think the characteristics of this series should be details. , which is different from the previous series of storage bottlenecks.
The most difficult part of dynamic website separation is the page. Other static resources such as pictures, external script files, etc. are basically the same as static websites. In fact, the industry has paid attention to the dynamic and static separation of dynamic websites for a long time . The dynamic and static separation schemes of the system have been summarized, and today I will introduce these technologies. The working language of my web server is java, so the following example of the server is explained using the web technology of java. Other languages such as php have corresponding technologies, so those who do not use java as the working language of the server can make an analogy Learn.
In the web development of java, the page technology jsp itself includes the means to separate the dynamic and static pages of the page , such as the following code:
<%@ include file=”header.jsp” %>
<body>
……….
<%@ include file=”footer.jsp” %>
Generally, the head and tail of a website are the same, so we put the code of the head in a header.jsp page separately, and the code at the end of the page is placed in the footer.jsp page, so that the technical personnel will not be able to develop the page. If you need to write these repeated codes repeatedly, you only need to cite them. The biggest advantage of this method is that it can avoid the inconsistency of different pages in the same code. The probability is very high.
But there is a problem with this method. The problem is that this dynamic and static separation actually acts on a single page, that is to say, each page must manually repeat this dynamic and static separation operation . In most cases, this method will not have any effect. Problem, but for a large website, this approach may cause unnecessary trouble. Here I intercepted a homepage of Jingdong, as shown in the following figure:
讲述前我要事先声明下，京东网站可能不存在我要讲述的问题，我这里只是使用京东网站的首页做例子来说明，看图里的首页和食品两个条目，有些公司做这样的网站时候这些导航进入的页面会是一个独立的工程，每个工程都是由独立的项目组开发维护的，虽然项目组不同但是他们页面的整体结构会是一致的，如果按照上面的动静分离手段，那么每个项目组都要独立维护一份相同的头部尾部资源，这个时候麻烦来了，如果该公司要新增个新的条目，那么每个项目组都要更新自己不变的资源，如果该企业一共分了5个项目组，现在又做了一个新的条目，那么其他与之无关的项目组都得折腾一次更改统一引用文件的工作，要是做的不仔细就有可能出现页面展示不一致的问题，为了解决这个问题，java的web开发里就会考虑使用模板语言替代jsp页面技术，例如模板语言velocity，这些模板语言都包含一个布局的功能，例如velocity就有这样的功能，我们看看velocity的布局模板实例，如下所示：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>#springMessage("page_upop_title")</title>
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>
<meta name="keywords" content='#springMessage("page_upop_keywords")'/>
<meta content='#springMessage("page_upop_description")' name="description"/>
</head>
<body oncontextmenu="return false" onselectstart="return false">
#if($pageHead)
#parse($pageHead)
#end
$screen_content
#parse($page_footer)
</body>
</html>
页面里我们可以引入这个布局格式，这个布局文件其实就是页面里不变的东西抽取了出来，它完成了页面动静分离，页面只要应用这个布局文件即可，到了这里这个布局文件和前面的include方式区别不大，那么我们再看看下面的代码：
<property name="layoutUrl" value="layout/default.vm"/><!--指定layout文件-->
这是布局文件的引用方式，我们可以把布局文件放置在网络上，项目里应用这个文件所在地址即可，这样我们就把项目里不变的静态资源抽取在同一个地方，如果在碰到布局要做修改，那么我们只需要改一个地方即可。
不管服务端采取何种动静分离，动静资源的整合都是有服务端完成，按照上文提到网站静态化的思想，这些做法不会给网站性能提升带来任何好处，它们只是给开发，运维提供了便利而已，按前文的思路，我们要把动静分离往前移，服务端往前移碰到的第一个点就是静态的web服务器例如apache或ngnix。
在讲解静态的web服务器动静分离前我要先讲一下为什么我们要在服务端前面加个静态web服务器的道理。我个人觉得在每个服务端之前都布置一个静态web服务器，该服务器起到一个反向代理的作用，而且我觉得不管我们是否使用CDN，最好都这么做，这么做有如下好处：
好处一：方便日志的记录。
好处二：在服务端之前设立了一个安全屏障，即静态web服务器可以在必要时候过滤有害的请求。
好处三：可以控制流入到服务端的请求个数，当并发很高时候，可以利用静态web服务器能承担更高并发的能力来缓冲服务端的压力，这里我补充一些实践技巧，以java里常用的web容器tomcat为例，一般官方给出它的最大并发数应该不会超过200，如果我们在tomcat前放置了一个apache服务器，那么我们可以把apache的最大并发数设置为无效大，把并发数的控制放置在apache这边控制，这么做会给我们系统运维带来很大的好处，tomcat虽然有一个建议最大并发数，但是实际运行里java的web容器到底能承受多大并发其实要看具体场景了，因此我们如果可以动态控制apache的并发数，这个操作很方便的，那么我们就可以动态的调整tomcat这样容器的承载能力。
好处四：可以便于我们做动静分离。
这里我们以apache为例子讲解将动静分离前移到apache的一些做法，apache有一个功能叫做SSI，英文全称是Server Side Include，页面上我们一般这样使用SSI，SSI有一种标签，例如：
<!--#include file="info.htm"-->
页面一般使用注释的方式引入，这个和jsp的引入有点区别的，SSI的做法其实和服务端的引入类似，只不过使用SSI将本来服务端做的动静整合交由了apache完成了，我们可以把静态文件直接放置在Apache这里，如果这个静态web服务器上升到CDN，那么这些静态资源就可以在靠近用户的地方使用，SSI说白了就是像apache这样的静态资源服务器接收到服务端返回后，将一部分内容插入到页面了，然后将完整页面返回至浏览器。这个做法如果优化的得当，可以很好的提升网站的加载效率。
Apache这样的静态资源服务器还支持一种动静整合的技术，这个技术就是ESi，它的英文全称叫做Edge Side Includes，它和SSI功能类似，它的用法如下所示:
<esi:include src="test.vm.esi?id=100" max-age="45"/>
它和SSI区别，使用esi标签获取的资源来自于缓存服务器，它和SSI相比有明显的性能优势，其实网页特别是一个复杂的网页我们做了动静分离后静态的资源本身还可以拆分，有的部分缓存的时间会长点，有点会短点，其实网页里某些动态内容本身在一定时间里有些资源也是不会发生变化的，那么这些内容我们可以将其存入到缓存服务器上，这些缓存服务器可以根据页esi传来的命令将各个不同的缓存内容整合在一起，由此我们可以发现使用esi我们会享受如下优点：
优点一：静态资源会存放在缓存里，那么获取静态资源的效率会更高。
优点二：根据静态资源的时效性，我们可以对不同的静态资源设置不同的缓存策略，这就增加了动静分离方案的灵活性。
优点三：缓存的文件的合并交由缓存服务器完成，这样就减少了web服务器本身抓取文件的开销，从而达到提升web服务器的并发处理能力，从而达到提升网站访问效率的目的。
(友情提示：ESI这块我还了解的不太深入，听说它其实可以直接使用在jboss上，相关知识我还要继续收集资料学习)
SSI and ESI are the means by which static web servers handle dynamic and static resource integration. Then we move the dynamic and static integration operation forward, and at this time it comes to the browser side . The browser-side dynamic and static integration technology is called CSI, and the full English name is called Client Side Includes . This technology is the means adopted by javascriptMVC, MVVM and MVP technology. The realization of CSI is generally carried out by asynchronous requests, and ajax technology has not yet appeared. In the era, we generally adopted the iframe method, but using CSI technology page loading will be artificially divided into two times, one is to load static resources, and after the static resources are loaded, an asynchronous request is started to load dynamic resources, which will indeed happen. The mentioned loading delay problem, we can use appropriate strategies to solve this delay. The use of CSI is the focus of this series, and I will focus on explaining it in later articles.