网站静态化处理

简介:

       动静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来,动静资源做好了拆分以后,我们就可以根据静态资源的特点将其做缓存操作,这就是网站静态化处理的核心思。由此可见,网站静态化处理的核心就是动静分离和缓存两大方面。


1908_1.jpg?_=2192817


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


       静态网站非常简单,它就是通过一个url访问web服务器上的一个网页,web服务器接收到请求后在网络上使用http协议将网页返回给浏览器,浏览器通过解析http协议最终将页面展示在浏览器里,有时这个网页会比较复杂点,里面包含了一些额外的资源例如:图片、外部的css文件、外部的js文件以及一些flash之类的多媒体资源,这些资源会单独使用http协议把信息返回给浏览器,浏览器从页面里的src,href、Object这样的标签将这些资源和页面组合在一起,最终在浏览器里展示页面。


     但是不管什么类型的资源,这些资源如果我们不是手动的改变它们,那么我们每次请求获得结果都是一样的。这就说明静态网页的一个特点:静态网页的资源基本是不会发生变化的。因此我们第一次访问一个静态网页和我们以后访问这个静态网页都是一个重复的请求,这种网站加载的速度基本都是由网络传输的速度,以及每个资源请求的大小所决定,既然访问的资源基本不会发生变化,那么我们重复请求这些资源,自己在那里空等不是很浪费时间吗?


       如是乎,浏览器出现了缓存技术,我们开发时候可以对那些不变的资源在http协议上编写相应指令,这些指令会让浏览器第一次访问到静态资源后缓存起这些静态资源,用户第二次访问这个网页时候就不再需要重复请求了,因为请求资源本地缓存,那么获取它的效率就变得异常高效。


image

浏览器缓存原理


image


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


扩展:
       Squid是一种用来缓冲Internet数据的软件。它是这样实现其功能的,接受来自人们需要下载的目标(object)的请求并适当地处理这些请求。

      也就是说,如果一个人想下载一web页面,他请求Squid为他取得这个页面。Squid随之连接到远程服务器(比如:http://squid.nlanr.net/)并向这个页面发出请求。然后,Squid显式地聚集数据到客户端机器,而且同时复制一份。当下一次有人需要同一页面时,Squid可以简单地从磁盘中读到它,那样数据迅即就会传输到客户机上。当前的Squid可以处理HTTP,FTP,GOPHER,SSL和WAIS等协议。但它不能处理如POP,NNTP,RealAudio以及其它类型的东西。


如何做网站动静分离?

  在服务器层面:为静态资源准备专门的服务器,调优参数,与动态资源服务器分开。让静态资源分布在全国不同的服务器上,就近缓存到最近的服务器上。不再请求原有的真实的服务器,分担源服务器的压力。提高就近访问的速度。
而动态内容,反向拉取即可。这是我认为的服务器层面。
 
程序层面:让一次数据没有变化,查询没有变化的时候。属于将文件静态化了,一段时间不发生变化。 一个文章没有修改, 直接存于缓存。一个发布,不需要修改的,直接写成.shtml文件。我们都可以称之为临时静态化或者是持久静态化。
 
文件层面:将静态资源放至专门的域名,header头中不发送我cookie等信息。静态文件,单独存储,静态文压缩发送。

本文转自写个博客骗钱博客51CTO博客,原文链接http://blog.51cto.com/dadonggg/1952725如需转载请自行联系原作者


菜鸟东哥

相关文章
静态网页html+css的真ikun网站
静态网页html+css的真ikun网站
|
4月前
|
数据采集 开发框架 搜索推荐
静态网页与动态页面
静态网页与动态页面
24 1
|
8月前
|
前端开发 搜索推荐 JavaScript
前端SEO优化的实用指南
前端SEO优化的实用指南
225 0
|
存储 NoSQL 前端开发
4、页面静态化
Freemarker是一个用Java开发的模板引擎,用来生成输出文本的工具 模板+数据模型=输出
144 0
4、页面静态化
|
数据采集 分布式计算 大数据
爬虫识别-关键页面访问量-实现代码及效果|学习笔记
快速学习爬虫识别-关键页面访问量-实现代码及效果。
76 0
|
消息中间件 缓存 开发框架
网站页面静态化(一)初识
本文分析了网站静态化处理的优缺点,帮助你在做系统架构时做一个参考
295 0
|
数据库 开发者
|
前端开发 JavaScript 应用服务中间件
网站如何动静分离-网站性能优化(1)
网站的动静分离实践(动静分离) 1. 动静分离的实现思路 动静分离是将网站静态资源(HTML,JavaScript,CSS,img等文件)与后台应用分开部署,提高用户访问静态代码的速度,降低对后台应用访问。
1303 0
|
SEO
SEO网站内容页优化技巧
SEO网站内容页优化技巧有很多,包括但不限于关键词密度,关键词位置,页面本身的质量度,内容的稀缺性,内容的受众程度等。
1601 0
|
Web App开发 缓存 搜索推荐
艾伟_转载:谈*静态页*(或网页*静态化*)
  “静态页”,在Web应用程序开发中是很常见的概念。只是我发现目前还是有相当部分的朋友,在这方面的存在一定的误区。因此现在独立写一篇文章,也想把一些问题讲讲清楚,以后在讨论的时候也好有个准。   不久前有朋友写了一篇题为《提供生成静态页核心代码》的文章,介绍了一种“向硬盘写入页面文件”的方式。
1012 0

热门文章

最新文章