精华内容
下载资源
问答
  • 一个全存储过程的 新闻发布系统 新闻子页页面静态化
  • 大型网站的页面静态化

    万次阅读 多人点赞 2019-07-10 20:21:38
    目录 前言 ... 伪静态 布局样式模板化 应用层nginx ...很多小伙伴们就会提出他们都采用了静态化的方案,这样用户请求直接获取静态数据html,就不需要访问数据库了,性能就会大大提高;而且提高网站SE...

    目录

    1. 前言
    2. 方案一:网页静态HTML化
    3. 伪静态
    4. 布局样式模板化
    5. 应用层nginx
    6. 分发层nginx

    前言

    我们小伙伴们在访问淘宝、网易等大型网站时有没有考虑到,网站首页、商品详情页以及新闻详情页面是如何处理的?怎么能够支撑这么大流量的访问呢?

    很多小伙伴们就会提出他们都采用了静态化的方案,这样用户请求直接获取静态数据html,就不需要访问数据库了,性能就会大大提高;而且提高网站SEO优化。那今天老顾就带着大家聊一下静态化。把老顾之前工作场景中静态化方案遇到的问题,以及如何演变的,分享给小伙伴。

    关于相关的静态文件的CDN技术,老顾就不在这边讲了。这个大型网站肯定都会用到的,什么是CDN,小伙伴们可以在网上查询看一下,比较简单;我们这边注重看技术方案。

    方案一:网页静态HTML化

    这个方案是老顾最早使用的方案,我们就拿CMS系统举例,类似网易的新闻网站;核心流程图

    你了解大型网站的页面静态化吗?

     

    上图的核心思想:

    1)管理后台调用新闻服务创建文章成功后,发送消息到消息队列

    2)静态服务监听消息,把文章静态化,也就是生成html文件

    3)在静态服务器上面安装一个文件同步工具,此工具的功能可以做到只同步有变动的文件,即做增量同步(老顾用久没用了,忘了工具的名称)

    4)通过同步工具把html文件同步到所有的web服务器上面

    这样的话就达到了,用户访问一些变化不大的页面时,是直接访问的html文件,直接在web服务器那边直接返回,不需要在访问数据库了,系统吞吐量比较高。

    这个方案的问题:

    1、网页布局样式僵化,无法修改

    如果产品经理觉得新闻详情页面的布局要调整一下,现在的不够美观,或者加个其他模块,那就坑爹了,我们需要把所有的已经静态html化的文章全部重新静态化。这个是不现实的,因为像网易这么大的体量,新闻量是很大的,会被搞死。

    2、页面会出现暂时间不一致

    会出现用户刚刚再看最新的新闻,刷新一下又不存在了。这个是因为同步工具在同步到web服务器是要有时间的,同步到web服务器A上面了,但web服务器B还没有来得及同步。用户在访问的时候通过nginx进行负载均衡,随机把请求分配给web服务器的导致的。当然可以调整nginx负载均衡策略去解决。

    3、Html文件太多,无法维护

    这个是很明显的问题,html文件会越来越多,对存储空间要求很大,而且每台web服务器都一样,浪费磁盘空间;将来迁移维护也会带来很大的麻烦。

    4、同步工具的不稳定

    因为文件一旦多之后,同步工具稳定性就出现了问题

    这个方案应该是比较传统的(不推荐)

    方案二:伪静态化

    什么是伪静态?

    举个例子:我们一般访问一个文章,一般的链接地址为:http://www.xxx.com/news?id=1代表请求id为1的文章。不过这种链接方式对SEO不是太友好(SEO对网站来说太重要了);所以一般进行改造:http://www.xxx.com/news/1.html 这样看上去就是个静态页面。一般我们可以采用nginx对url进行rewrite。小伙伴如何有兴趣可以自行了解,比较简单。

    之所以是伪静态其实也是需要动态处理的。

    针对方案一上面问题,方案进一步的演化,如下图

    你了解大型网站的页面静态化吗?

     

    此方案的核心思想

    1)管理后台调用新闻服务创建文章成功后,发送消息到消息队列

    2)缓存服务监听消息,把文章内容缓存到缓存服务器上面

    3)用户发起请求,web服务器根据id,直接查询缓存服务器

    4)获取数据返回给用户

    此方案就解决了方案一的一个大问题,就是html文件多的问题,因为不需要生成html,而且用缓存的方式,解决不需要访问数据库,提升系统吞吐量。

    不过此方案的问题:

    1、网页布局样式维护成本比较高,因为此方案照样是把所有的内容放到了缓存中,如果需要修改布局,需要重新设置缓存。

    2、分布式缓存压力比较大,一旦缓存故障就导致所有请求会查询数据库,导致系统崩溃

    还有个小问题,就是实时数据处理,就是页面中如价格,库存需要到后台读取的。当然小伙伴也许就会说,也可以处理啊,用户把商品内容请求到后,然后在用浏览器发送异步的ajax请求获得商品数量就好了啊。这样就是无形的增加了一次请求。(此问题可以忽略)

    此方案类似很多公司都在使用,如:同程旅游等

    方案三:布局样式模板化

    针对方案二的问题,我们可以采用openresty技术方案进行,利用http模板插件lua脚本进行解决,这里老顾不会介绍openresty+lua技术,有兴趣的小伙伴,可以到访问https://www.roncoo.com/view/139 这个视频课程。

    如下图:

    你了解大型网站的页面静态化吗?

     

    这里说明一下上图中我们小伙伴不需要全部都要了解,这个是比较全的商品详情页的解决方案,涉及到了三级缓存这个概念,在这里老顾就不深入讲三级缓存了

    我们主要看的是上面怎么会有两层ngnix,分发层和应用层,这个是什么意思?

    应用层nginx

    老顾先介绍一下应用层nginx是什么意思?nginx一般被用做负载均衡,其实nginx还有很多的功能,尤其他的openresty扩展 + lua脚本语言结合起来可以完成很多功能,小伙伴可以理解为lua脚本语言就是类似java语言,可以动态处理业务,如:本地缓存处理,远程http访问,访问redis等。

    应用层nginx就是利用了http模板 + 缓存通过lua脚本完成的网页渲染

    http模板

    你了解大型网站的页面静态化吗?

     

    1)应用层nginx通过lua脚本语言先获取本地商品数据,然后和http模板进行渲染,形成最终商品详情页返回给用户

    2)如果应用层nginx本地的缓存没有此商品数据,就通过lua脚本发起http请求访问web服务器,获取商品数据。

    3)web服务器会向redis或本机的ehcache请求商品数据(这里涉及三级缓存概念),如果存在此商品数据,直接返回给用户;如果不存在则请求微服务访问数据库

    这个思路就是通过http模板,解决了方案二中的布局样式的问题,如果需要调整布局,只要改一下模板就行了,非常方便也解决了实时性问题。这边涉及到的nginx本地缓存其实就是为了保证不需要访问数据库,提升系统吞吐量。小伙伴只要了解一下思路,如果不了解openresty和lua可以自行上网了解,也可以联系老顾。

    分发层ngnix

    为什么上面还有一层分发层呢?这个是因为大型网站的商品数太多了,应用层nginx的本地缓存是有限的,不可能把所有的商品数据缓存在同一个服务器的本地缓存;一台应用层nginx只能缓存部分商品数据,说到这里小伙伴是不是应该就知道为什么了吧?就是利用hash一致性算法,根据商品id路由分发到同一个应用层ngnix服务器。

    你了解大型网站的页面静态化吗?

     

    分发层ngnix的作用就是hash策略的负载均衡,保证了商品id路由到固定的应用层服务器。

    三级缓存保证了系统的稳定性,即使redis缓存崩溃,还有其他2个缓存保障。

    总结:

    1. 方案三是比较完整的方案,很多大厂都在使用,能够承受亿级流量,但系统比较复杂。
    2. 如果对实时性要求不高,布局样式调整不频繁,可以考虑方案二,系统比较简单
    展开全文
  • 网站优化---页面静态化技术

    千次阅读 2018-03-14 21:07:49
    页面静态化技术

    一:

    首先先区分一下动态页面和静态页面的区别

    动态文件:PHP脚本、Java脚本等

    动态文件的执行过程:词法、语法分析 -> 编译 -> 渲染输出

    静态文件:HTML文件

    从加载速度上可以看出,静态文件明显比动态文件速度快

    二:静态文件的分类

    真静态:真正的静态文件(访问时候的地址是动态地址,但实际上是静态文件),目的是为了减轻数据库服务器的压力,提高访问速度

    伪静态:不是真正的静态文件,(但是访问的时候的网址是静态网址,但实际访问的是动态文件),目的是为了SEO推广,方便百度搜索引擎进行搜索,

    三:实现方法

    真静态:OB缓冲技术;模板替换术

    伪静态:使用PHP脚本进行实现;通过web进行配置实现

    四:实现方法及原理

    OB缓存

     1实现原理

      PHP执行过程中,存在一个缓冲区output_buffering

      oboutput_buffering(输出缓存),用于缓存响应主体的数据内容。

    第一种方式:在php.ini文件中,

    第二种方式:在页面中使用ob_start()函数,来开启。

    两种方式的区别是,ob_start()只在当前页面有效,推荐第二种方式来完成。

    常用函数

    ob_start( );开启

    ob_get_contents();获取ob缓存里面的数据内容。

    ob_clean();//清空ob缓存里面的数据,不关闭ob缓存。

    ob_end_clean();//清空ob缓存里面的数据,并关闭ob缓存。

    ob_flush();//ob缓存里面的数据给刷新(移动,推送)到程序缓存,不关闭ob缓存。

    ob_end_flush();//ob缓存里面的数据给刷新(移动,推送)到程序缓存,并关闭ob缓存。

    3、实现页面静态化的三种方式

      ①访问时生成静态文件(不推荐)

         控制好静态文件的更新时间

      ②在后台手动生成静态文件

         后台手动更新

      ③使用定时任务定期生成静态文件(推荐使用)

    最佳做法:②③的结合体,先后台手动生成一次静态文件,然后定时更新,如果在更新的时间内,定时脚本没有运行,就手动清除缓存(删除缓存文件)


    模板替换技术

    1、实现方式:

    1)在添加新闻内容的时候,生成对应的新闻详情的静态页面。

    2)在修改新闻内容的时候,要重新生成新闻详情的静态页面。

    3)在访问新闻详情页面的时候,直接访问生成的静态页面

    真静态的应用场景

    1)网站页面访问比较频繁的,但是更新不是很频繁,比如一些新闻类型的网站详情页及网站的首页

    2)不适合于要求实时更新的一些网站,比如股票及银行类型的网站

    3)一般来说后台不用做真静态


    伪静态

    先来看一个网址:

    http://jingyan.baidu.com/article/90bc8fc804f4faf652640c6c.html  

    从形式上看是一个静态地址,实际上还是访问的动态地址,

    比如:访问:http://www.abc.com/news-sport-id123.html

    实际上是:http://www.abc.com/news.php?type=sprot&id=123;

    作用:主要是利于seo推广,静态页面的方式,比较容易被搜索引擎给搜集


    第一种:apache的重写机制

    实现原理:

    使用apache/nginxrewrite机制(就是一个url的重写机制

    在apache/conf/httpd.conf开启(开启重写模块

    配置方式:直接在配置虚拟主机处进行配置 ,每次修改apache的文件都需要重启apache

    在配置虚拟机时给对应的域名开启重写机制

    权限控制   先拒绝后允许

    在需要重写机制的文件夹的下面新建文件    .htaccess   并在.htaccess中写入重写规则

    比如:

    重启apache

    CI框架中的重写规则

    第一步:在虚拟主机开启  AllowOverride All

    第二步: //配置伪静态时 在CI框架的配置文件config中 修改URL协议为

    $config['uri_protocol']= 'PATH_INFO';


    nginx的重写机制

    2.在需要重写机制的文件夹写新建   .htaccess  文件  并在文件中写入相应的规则

    比如:

    3.在ngniz的配置文件ngnix.conf  或者 引入的.conf文件中引入重写规则的文件<文件放在server内location外>


    4.重启nginx  .php-fpm

    伪静态的使用遵循原则

    主要是为了搜索引擎的收集

    只要url不要过长,过多的参数,同时不要让蜘蛛陷入链接黑洞,现在的搜索引擎技术对待动态链接和静态链接基本没有区别。因此,如果不方便动态链接静态化的站长朋友,也没必要将太多精力花在这方面。另外,伪静态是通过服务器配置将动态映射成静态页面,多了一个映射步骤,伪静态处理更加占用服务器cpu资源。

    如何选择真静态和伪静态?

    网站实时性要求高,不要使用静态化(真静态,伪静态均不适宜)。

    如果网站访问量较小,没有必要使用静态化技术(网站后台)

    如果数据项目文件不多,但是访问频率极大,建议使用真静态,比如新浪新闻频道。

    如果数据项目海量(论坛),使用真静态会生成海量的html静态页面,建议使用伪静态。

    在一个大型网站中,静态化技术是综合使用的,这个需要大家经验的积累,多做项目。(

    网站:新闻频道,真静态,基金频道:伪静态,管理后台:不使用静态技术)

    后台:  管理控制前台生成真静态或者更新静态页面


    展开全文
  • 页面静态化

    万次阅读 多人点赞 2017-04-08 21:34:34
     如果每次访问动态的网页该网页的内容都是完全不同的,也许我们就没有必要写网站静态化的主题了,现实中的动态网页往往只是其中一部分会发生变化,例如电商网站的菜单、页面头部、页面尾部这些其实都不会经常发生...

    原文:http://blog.jobbole.com/84200/

    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本身就包含了将页面动静分离的手段,例如下面的代码:

    1
    2
    3
    4
    5
    6
    7
    <%@ include file=”header.jsp” %>
     
    < body >
     
              ……….
     
    <%@ include file=”footer.jsp” %>

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    < 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方式区别不大,那么我们再看看下面的代码:

    1
    < property name = "layoutUrl" value = "layout/default.vm" /> <!--指定layout文件-->

    这是布局文件的引用方式,我们可以把布局文件放置在网络上,项目里应用这个文件所在地址即可,这样我们就把项目里不变的静态资源抽取在同一个地方,如果在碰到布局要做修改,那么我们只需要改一个地方即可。

    不管服务端采取何种动静分离,动静资源的整合都是有服务端完成,按照上文提到网站静态化的思想,这些做法不会给网站性能提升带来任何好处,它们只是给开发,运维提供了便利而已,我们要把动静分离往前移,服务端往前移碰到的第一个点就是静态的web服务器例如apache或ngnix。

    (1)web服务器的动静合并

    java的web开发里我们一般使用jsp来编写页面,当然也可以使用先进点的模板引擎开发页面例如velocity,freemark等,不管我们页面使用的是jsp还是模板引擎,这些类似html的文件其实并不是真正的html,例如jsp本质其实是个servlet也就是一个java程序,所以它们的本质是服务端语言和html的一个整合技术,在实际运行中web容器会根据服务端的返回数据将jsp或模板引擎解析成浏览器能解析的html,然后传输这个html到浏览器进行解析。由此可见服务端语言提供的开发页面的技术其实是动静无法分离的源头,但是这些技术可以很好的完成动静资源中的动的内容,因此我们想做动静分离那么首先就要把静的资源从jsp或者模板语言里抽取出来,抽取出来的静态资源当然就要交给静态的web服务器来处理,我们常用的静态资源服务器一般是apache或ngnix,所以这些静态资源应该放置在这样的服务器上,那么我们是否可以在这些静态web服务器上做动静结合呢?答案是还真行,例如apache服务器有个模块就可以将它自身存储的静态资源和服务端传输的资源整合在一起,这种技术叫做ESI、SSI,这个时候我们可以把不变的静态内容制作成模板放置在静态服务器上,动态内容达到静态资源服务器时候,使用ESI或者SSI的标签,把动静内容结合在一起,这就完成了一个动静结合操作。

    为什么我们要在服务端前面加个静态web服务器的道理。我个人觉得在每个服务端之前都布置一个静态web服务器,该服务器起到一个反向代理的作用,而且我觉得不管我们是否使用CDN,最好都这么做,这么做有如下好处:

    好处一:方便日志的记录。

    好处二:在服务端之前设立了一个安全屏障,即静态web服务器可以在必要时候过滤有害的请求。

    好处三:可以控制流入到服务端的请求个数,当并发很高时候,可以利用静态web服务器能承担更高并发的能力来缓冲服务端的压力,这里我补充一些实践技巧,以java里常用的web容器tomcat为例,一般官方给出它的最大并发数应该不会超过200,如果我们在tomcat前放置了一个apache服务器,那么我们可以把tomcat的最大并发数设置为无效大,把并发数的控制放置在apache这边控制,这么做会给我们系统运维带来很大的好处,tomcat虽然有一个建议最大并发数,但是实际运行里java的web容器到底能承受多大并发其实要看具体场景了,因此我们如果可以动态控制apache的并发数,这个操作很方便的,那么我们就可以动态的调整tomcat这样容器的承载能力。

    好处四:可以便于我们做动静分离

    SSI

    这里我们以apache为例子讲解将动静分离前移到apache的一些做法,apache有一个功能叫做SSI,英文全称是Server Side Include,页面上我们一般这样使用SSI,SSI有一种标签,例如:

    1
    <!--# include file= "info.htm" -->

    页面一般使用注释的方式引入,这个和jsp的引入有点区别的,SSI的做法其实和服务端的引入类似,只不过使用SSI将本来服务端做的动静整合交由了apache完成了,我们可以把静态文件直接放置在Apache这里,如果这个静态web服务器上升到CDN,那么这些静态资源就可以在靠近用户的地方使用,SSI说白了就是像apache这样的静态资源服务器接收到服务端返回后,将一部分内容插入到页面了,然后将完整页面返回至浏览器。这个做法如果优化的得当,可以很好的提升网站的加载效率。

    ESI

    Apache这样的静态资源服务器还支持一种动静整合的技术,这个技术就是ESi,它的英文全称叫做Edge Side Includes,它和SSI功能类似,它的用法如下所示:

    1
    < esi:include src = "test.vm.esi?id=100" max-age = "45" />

    它和SSI区别,使用esi标签获取的资源来自于缓存服务器,它和SSI相比有明显的性能优势,其实网页特别是一个复杂的网页我们做了动静分离后静态的资源本身还可以拆分,有的部分缓存的时间会长点,有点会短点,其实网页里某些动态内容本身在一定时间里有些资源也是不会发生变化的,那么这些内容我们可以将其存入到缓存服务器上,这些缓存服务器可以根据页esi传来的命令将各个不同的缓存内容整合在一起,由此我们可以发现使用esi我们会享受如下优点:

    优点一:静态资源会存放在缓存里,那么获取静态资源的效率会更高。

    优点二:根据静态资源的时效性,我们可以对不同的静态资源设置不同的缓存策略,这就增加了动静分离方案的灵活性。

    优点三:缓存的文件的合并交由缓存服务器完成,这样就减少了web服务器本身抓取文件的开销,从而达到提升web服务器的并发处理能力,从而达到提升网站访问效率的目的。

    关于ESI的更多内容请参考《大型网站之网站静态化(ESI)

    (2)CDN的动静合并

    CDN其实也是一组静态的web服务器,那么我们是否可以把这些事情放到CDN做了?理论上是可以做到,但是现实却是不太好做,因为除了一些超有钱的互联网公司,大部分公司使用的CDN都是第三方提供的,第三方的CDN往往是一个通用方案,再加上人家毕竟不是自己人,而且CDN的主要目的也不是为了做动静分离,因此大部分情况下在CDN上完成这类操作并不是那么顺利,因此我们常常会在服务端的web容器前加上一个静态web服务器,这个静态服务器起到一个反向代理的作用,它可以做很多事情,其中一件事情就是可以完成这个动静结合的问题。

    (3)ajax的动静合并
    SSI和ESI是静态web服务器处理动静资源整合的手段,那么我们把这个动静结合点再往前推,推到浏览器,浏览器能做到这件事情吗?如果浏览器可以,那么静态资源也就可以缓存在客户端了,这比缓存在CDN效率还要高,其实浏览器还真的可以做到这点,特别是ajax技术出现后,浏览器来整合这个动静资源也就变得更加容易了。浏览器端的动静整合的技术称之为CSI,英文全称叫做Client Side Includes,这个技术就是时下javascriptMVC、MVVM以及MVP技术采取的手段,实现CSI一般是采用异步请求的方式进行,在ajax技术还没出现的年代我们一般采取iframe的方式,不过使用CSI技术页面加载就会被人为分成两次,一次是加载静态资源,等静态资源加载完毕,启动异步请求加载动态资源,这么一做的确会发生有朋友提到的一种加载延迟的问题,这个延迟我们可以使用适当的策略来解决的.

      ajax是CSI的一种技术手段。不过一般而言,我们使用ajax做动静分离都是都是从服务端请求一个html片段,到了浏览器后,使用dom技术将这个片段整合到页面里.

    (4)javascriptMVC架构

    虽然在浏览器使用ajax来进行动静分离和合并已经比全页面返回高效很多,但是他还是有问题的,服务端处理完请求最终返回结果其实都是很纯粹的数据,可是这些数据我们不得不转化为页面片段返回给浏览器,这本质是为纯粹的数据上加入了很多与服务端无用的结构,之所以说无用是因为浏览器自身也可以完成这些结构,为什么我们一定要让服务端做这个事情了?如是乎JavaScript的模板技术出现了,这些模板技术和jsp,velocity类似,只不过它们是通过javascript设计的模板语言,有了javascript模板语言,服务端可以完全不用考虑对页面的处理,它只需要将有效的数据返回到页面就行了,使用了javascript模板技术,可以让我们动静资源分离做的更加彻底,基本上所有的浏览器相关的东西都被静态化了,服务端只需要把最原始的数据传输到浏览器即可。讲到这里我们就说到了web前端最前沿的技术了:javascriptMVC架构了。关于此的更多内容请参考《大型网站之网站静态化(javascriptMVC架构

    六、Web前端优化

    关于Web前端优化的请参考《Web前端优化最佳实践及工具集锦》,《探真无阻塞加载javascript脚本技术》,《【Web优化】Yslow优化法则(汇总篇)

    七、总结

      在web开发里,除了需要浏览器处理的,其他技术都可以当做服务端来理解,如果我们网站使用到了CDN,使用到了静态web服务器例如apache,以及服务端的web容器例如jboss,那么按请求的行进路径,我们结果处理越早那么网站响应效率也就越高,所以当请求在CDN返回了,那么肯定比在apache返回效率高,在apache就返回了肯定比jboss返回的效率高,再则服务端的web容器本身因为服务端程序运行要消耗部分系统资源,所以它在处理请求的效率会比CDN和apache差很多,所以当我们按照动静分离策略拆分出了静态资源后,这个资源能不放在最底层的服务端的web容器处理就不要放在服务端的web容器里处理。

    展开全文
  • 先来看看php在服务器的执行过程:当用户请求服务器php文件的时候,服务器将对php文件进行语法分析,其次是解析,最后才运行。... 可见,如果用户直接访问静态页面的时候,服务器的响应时间一般会比访问动态文件的

           先来看看php在服务器的执行过程:当用户请求服务器php文件的时候,服务器将对php文件进行语法分析,其次是解析,最后才运行。当php文件有内容输出时,该内容会先经过服务器的php的缓冲区(buffer),然后再通过TCP传递到客户端。(buffer其实就是缓冲区,一个内存地址空间,主要用于存储数据区域)

           可见,如果用户直接访问静态页面的时候,服务器的响应时间一般会比访问动态文件的时间短。如果我们能把用户将要访问的动态文件先转化为静态文件即可加快用户访问页面的速度(获取网页的速度)。当然我们要注意静态化的应用场景,页面的静态化主要应用于那些页面内容不经常改动的页面。

           关于静态化,PHP的静态化分为:纯静态和伪静态。其中纯静态又分为:局部纯静态和全部纯静态。这里将的是全部纯静态。

           这里先介绍几个关于PHP缓冲区的相关函数:

    ob_start     打开输出控制缓冲(要求php开启缓存,在php配置文件php.ini文件中可以设置 output_buffering = on)

    ob_get_contents     返回输出缓冲区内容

    ob_clean     清空(擦掉)输出缓冲区

    ob_get_clean     得到当前缓冲区的内容并删除当前输出缓冲区

           php生成文件的函数 file_put_contents('文件路径','文件内容')。(当然php中还有其他写文件的方法,如fwrite)

    下面有个demo01的案例,目录结构为:


           我们先来创建一个 mooc_cms 数据库,创建表 news,如下:


           并且插入多条数据,如下:


           创建一个数据库的操作类 db.php

    <?php 
    	/**
    	 * 数据库连接封装
    	 */
    	class Db {
    		//存储类的实例的静态成员变量
    		private static $_instance;
    		//数据库链接静态变量
    		private static $_connectSource;
    		//连接数据库配置
    		private $_dbConfig = array(
    				'host' => '127.0.0.1',
    				'user' => 'root',
    				'password' => '',
    				'database' => 'mooc_cms'
    			);
    
    		private function __construct() {
    
    		}
    
    		/**
    		 * 实例化
    		 */
    		public static function getInstance() {
    			//判断是否被实例化
    			if(!(self::$_instance instanceof self)) {
    				self::$_instance = new self();
    			}
    			return self::$_instance;
    		}
    
    		/**
    		 * 数据库连接
    		 */
    		public function connect() {
    			if(!self::$_connectSource) {
    				//数据库连接
    				// @ 符号可以取消警告提示
    				self::$_connectSource = @mysql_connect($this->_dbConfig['host'],$this->_dbConfig['user'],$this->_dbConfig['password']);
    
    				if(!self::$_connectSource) {
    					//抛出异常处理
    					throw new Exception('mysql connect error ');
    				}
    				//选择一款数据库
    				mysql_select_db($this->_dbConfig['database'], self::$_connectSource);
    				//设置字符编码
    				mysql_query("set names UTF8", self::$_connectSource);
    			}
    
    			//返回资源链接
    			return self::$_connectSource;
    		}
    	}
    ?>

           index.php (根据静态文件失效的时间,判断是否重新生成静态文件 index.shtml)

    <?php 
    	//1、连接数据库,然后从数据库里面获取数据
    	//2、把获取到的数据填充到模板文件里面
    	//3、需要把动态的页面转化为静态页面,生成纯静态化文件
    	if(is_file('index.shtml') && (time() - filemtime('index.shtml')) < 300) { //设置缓存失效时间
    		require_once('index.shtml');
    	} else {
    		require_once('db.php');
    
    		$connect = Db::getInstance()->connect();
    		$sql = "SELECT * FROM news WHERE `category_id` = 1 AND `status` = 1 ORDER BY id DESC LIMIT 5";
    		$result = mysql_query($sql, $connect);
    		$news = array();
    		while($row = mysql_fetch_array($result)) {
    			$news[] = $row;
    		}
    		//print_r($news);
    		
    		ob_start(); //开启缓存区
    
    		//引入模板文件
    		require_once('templates/singwa.php'); //动态文件    singwa.php界面同样进过缓冲区
    		file_put_contents('index.shtml', ob_get_contents());
    		/*if(file_put_contents('index.shtml', ob_get_clean())) {
    			echo 'success';
    		} else {
    			echo 'error';
    		}*/
    	}
    	
    ?>
           singwa.php(使用bootstrap框架做界面)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>新闻中心</title>
    	<link rel="stylesheet" href="public/css/bootstrap.min.css" type="text/css">
    </head>
    <body>
    	<div class="container">
    		<h3>新闻列表</h3>
    		<ul class="list-group">
    			<?php foreach ($news as $key => $value) { ?>
    			<li class="list-group-item"><a href="#"><?php echo $value['title'];?></a></li>
    			<?php } ?>
    		</ul>
    	</div>
    </body>
    </html>

           当我们第一次访问 index.php时,服务器将为我们生成一个静态文件index.shtml。


           出现 index.shtml文件:


           index.shtml

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>新闻中心</title>
    	<link rel="stylesheet" href="public/css/bootstrap.min.css" type="text/css">
    </head>
    <body>
    	<div class="container">
    		<h3>新闻列表</h3>
    		<ul class="list-group">
    						<li class="list-group-item"><a href="#">今天有一条新闻7</a></li>
    						<li class="list-group-item"><a href="#">今天有一条新闻6</a></li>
    						<li class="list-group-item"><a href="#">今天有一条新闻5</a></li>
    						<li class="list-group-item"><a href="#">今天有一条新闻4</a></li>
    						<li class="list-group-item"><a href="#">今天有一条新闻3</a></li>
    					</ul>
    	</div>
    </body>
    </html>

           当我们不超过300秒,再次访问index.php时,服务器将访问静态文件index.shtml给我们访问。而当静态文件过期后,我们再次访问index.php,服务器将为我们更新index.shtml静态文件。

           这里讲到的只是一种触发静态文件更新的方法,当然还有:手动触发更新(设置后台管理,管理员想立即更新静态文件,就点击运行生成静态文件即可)、Linux服务器下的crontab定时扫描程序(在Linux服务器下,设置命令:

    * /1 * * * * php 路径+文件名    ==>  代表 每一分钟系统将执行一次指定文件


    文件内容可以为:

    		require_once('db.php');
    
    		$connect = Db::getInstance()->connect();
    		$sql = "SELECT * FROM news WHERE `category_id` = 1 AND `status` = 1 ORDER BY id DESC LIMIT 5";
    		$result = mysql_query($sql, $connect);
    		$news = array();
    		while($row = mysql_fetch_array($result)) {
    			$news[] = $row;
    		}
    		//print_r($news);
    		
    		ob_start(); //开启缓存区
    
    		//引入模板文件
    		require_once('templates/singwa.php'); //动态文件    singwa.php界面同样进过缓冲区
    		file_put_contents('index.shtml', ob_get_contents());




    展开全文
  • 我们小伙伴们在访问淘宝、网易等大型网站时有没有考虑到,网站首页、商品详情页以及新闻详情页面是如何处理的?怎么能够支撑这么大流量的访问呢? 很多小伙伴们就会提出他们都采用了静态化的方案,这样用户请求直接...
  • 使用Freemarker实现页面静态化

    千次阅读 2018-12-05 09:56:45
    在访问新闻、活动、商品、详情页面的时候,路径可以是xx【id】.html,服务器端根据请求id,动态生成html网页,下次访问数据时,无需再查下数据,直接将html静态页面返回。可以减少对数据库的交互,提高访问的性能。 ...
  • ThinkPHP 的页面静态化功能的实现(三)

    万次阅读 2017-02-10 17:55:39
    页面静态化有很多好处,加快页面打开浏览速度,有利于搜索引擎优化SEO,减轻服务器负担,网站更安全,HTML页面不会受php相关漏洞的影响。常说的页面静态化分为两种,一种是伪静态,即url 重写,一种是真静态化。
  • 页面静态化 FreeMarker 中文参考文档 是一个java语言开发的模板引擎 场景: 页面静态化生成(把一个动态加载数据的页面生成html的过程,叫静态化) 合同模板生成 邮件模板生成 自动生成代码 原理/组成: Template...
  • 使用ajax实现页面部分静态化

    千次阅读 2017-11-10 19:02:18
     为实现局部静态化,需要结合Ajax技术。当访问主页index.php时,根据静态页面的缓存时效,判断是否生成index.shtml静态页面,当静态页面返回后静态页面中的js发起Ajax请求,获取服务器中的数据,进行动态更新。那么...
  • 高性能Java Web 页面静态化技术

    千次阅读 2014-12-03 17:17:45
    logger.fatal("静态页面引擎在解析"+url+"产生静态页面"+htmlFileName+"时出错:"+ex.getMessage()); }finally{ //释放http连接 getMethod.releaseConnection(); } return status; } //将解析结果...
  • 【IT168 技术】众所周知,随着网站的访问量增加,如何给用户以良好的访问体验...例如像凤凰新闻、网易新闻这样的CMS系统,淘宝、京东这样的大型购物网站由于这些网站都使用到了数据库这也就很难做到单纯的通过...
  • 发布新闻,实现新闻页面静态化,真静态 add.php复制代码 代码如下:<html> <head>添加新闻</head> <body> <form method=”post” action=”doadd.php”> 新闻标题:<input type=...
  • 做单页面静态化,索引页面是用JS对数组进行组合的。 因为记录只是一个标题,一个链接,字节数不会太大, 那么用js去用这个大数组进行分页,貌似不错,很节约带宽! 还是很棒的,简单,实用,值得推荐! JS代码: ...
  • 做SEO的朋友现在都知道了,URL静态化、URL伪静态、URL重写对SEO的重要性,搜索引擎喜欢静态的网站页面。今天我们来详细分析一下URL静态化、URL伪静态、URL重写这三者的区别。  URL静态化。URL静态化 就是在你的...
  • [笔记] 前端静态化和伪静态

    千次阅读 2019-06-17 09:49:02
    网页静态化有很多含义,在WEB开发中,静态网页一般理解为网站中大部分超级链接所引用的页面是单独的HTML静态页面文件(如*.htm、*.html等页面文件)。在ASP.NET中(ASP、PHP或JSP也一样),页面都是通过运行库(其他...
  • 建议新手PHP朋友在本版本的基础上进行完善,1,前台模板更改美化 2,前台文章分页进行静态化 3,后台新闻列表进行分页显示 4,后台批量更新进行分段更新 5,新加读取次数的字段,并在静态html页面进行动态调用 6,...
  • 商品详情页静态化功能实现 1.Thymeleaf介绍 1动态页面: 通过执行asp、php、jsp和.net等程序生成客户端网页代码的网页。通常可以通过网站后台管理系统对网站的内容进行更新管理。发布新闻,发布公司产品,交流互动...
  • 本章主要记录Spring MVC配置Freemarker实现页面静态化的简单实例,涉及到的技术有: - @PathVariable通过获取URL上以模板{}标记的参数。 - @ModelAttribute 设置Model里的属性,本例中用来模拟数据库。 - ...
  • 上海目前正是看樱花的季节来源:https://www.toutiao.com/a6671093883025228301/作者:老顾聊技术目录前言方案一:网页静态HTML静态布局样式模...
  • 众所周知,随着网站的访问量增加,如何给用户以...例如像凤凰新闻、网易新闻这样的CMS系统,淘宝、京东这样的大型购物网站由于这些网站都使用到了数据库这也就很难做到单纯的通过增加web服务器数量的方式来有效的...
  • php页面静态化之真静态

    千次阅读 2013-12-04 11:56:34
    页面静态化是网站提速和搜索引擎优化的利刃,作为程序员我觉得也应该适当的掌握下这们技术,这个技术我相信会很有用。
  • ASP.NET使用HttpHandler进行页面静态化(自动生成页面)

    千次阅读 多人点赞 2020-04-29 16:11:40
    这次的Demo是,一个根页面,点击链接创建子...一个根页面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="Static.List" %> <!DOCTYPE html> <html xmlns="...
  • 这篇文章主要是记录一下php生成静态页面的大致步骤,关于页面静态化,大家想必都听说过,但是真正用的时候反而不是很多。有些页面考虑到访问量比较大,页面结构又不常改动的,比如新闻公告等,可以考虑做成静态页面...
  • 1.什么是网页静态化技术:随着用户访问量以及数据量的增大,网页静态化技术方案如今越来越流行。什么是网页静态化技术呢?简单来说就是将网页以纯静态方式的形式...3.网页静态化技术的应用场景:(1)新闻门户网站的...
  • 这是本人根据自己学习PHP技术页面静态化的过程所写的学习笔记,希望能够对大家有所帮助。 1、基本思路: (1)用户第一次访问这个页面时从数据库读出内容,放在缓存中; (2)将缓存中的数据写成一个html静态页面...
  • PHP实现页面静态化——局部动态化

    千次阅读 2016-03-05 18:52:54
    上回说到:PHP实现页面静态化——全部纯静态化   这次实现PHP的局部动态化,也就是说静态化的页面存在“动态”过程,结合全部静态化技术+Ajax技术实现局部动态化,局部更新页面。  在上文的数据库基础上,在...
  • php页面静态化实现思路

    千次阅读 2015-03-23 17:17:58
    php页面静态化,是把那些内容不常变化的页面静态化,而不通过动态程从数据库或者缓存中读出,以此来增加响应速度和减轻服务器压力。这里的要点是对不常变化的内容做静态化,如:新闻,博客等。而经常变化的内容,如...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,810
精华内容 8,724
关键字:

新闻页面静态化