整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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

迎关注头条号:老顾聊技术

精品原创技术分享,知识的组装工


目录

  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. 如果对实时性要求不高,布局样式调整不频繁,可以考虑方案二,系统比较简单

-End-

如有收获,请帮忙转发,您的鼓励是作者最大的动力,谢谢!

10几年的经验实战分享

相关微服务,分布式,高并发,高可用,企业实战,干货等原创文章正在路上

欢迎关注头条号:老顾聊技术

精品原创技术分享,知识的组装工

推荐阅读

1、你知道如何保障生产端100%消息投递成功吗?

2、你知道如何更新缓存吗?如何保证缓存和数据库双写一致性?

3、你知道怎么解决DB读写分离,导致数据不一致问题吗?

4、DB读写分离情况下,如何解决缓存和数据库不一致性问题?

5、你真的知道怎么使用缓存吗?

6、如何利用锁,防止缓存击穿?重构思想的重要性

7、海量订单产生的业务高峰期,如何避免消息的重复消费?

周给大家推荐了 Typora,作为一款纯粹的 Markdown 应用来说,它的各种功能和细节可以说已经相当极致,然而,Ulysses用户表示:我们想要的不仅仅是 Markdown。

是的,Markdown 还可以变成「Markdown + 文档管理」、「Markdown + 静态网页生成」,而今天给大家推荐的一款由国内开发者制作的 MWeb,就是「Markdown + 文档管理 + 静态网页生成」的集大成者。

让我们一笔带过它的 Markdown 属性吧

世上 Markdown 应用千万种,Markdown 语法却还是那么一套(当然严谨的说还是有一些衍生的啦)。MWeb 除了支持所有的 Markdown 基本语法外,还支持大量 Markdown 扩展语法,如 Table、TOC、MathJax、Fenced code block、任务列表(Task lists)、顺序图和流程图、Footnote 等。

如果大家还不熟悉 Markdown 语法,可以来这里学习一下。说好的一笔带过,就只给大家演示一下 MWeb 的特色功能——流程图。

两种管理模式:外部文档 & 文档库

MWeb 提供了两种文件管理模式:外部文档模式(左)、文档库模式(右)。乍一看两个好像没什么区别呀,好了,让我们来看一下实质:

  • 外部文档模式:有点像 Sublime 中的文件夹侧边栏,这里你可以对应硬盘上某个路径的文件或文件夹,以树状的模式进入 MWeb 中管理;
  • 文档库模式:每个「文件夹」和你硬盘中的路径并不是对应的,这些「文件夹」实质上是分类,就像 Evernote 中你可以手动添加的笔记本一样。

用作者自己的话来说,外部文档模式是基于文件的管理方式,非常利于同步和协作;而文档库模式则用于记笔记和静态网站、博客生成。实际使用时两者最大的不同之一就是:文档库模式下你可以直接从外部拖入一张图片并显示实时预览,而外部文档模式只会将图片显示为 Markdown 的语法。

用文档库模式来记笔记、生成博客

尽管官方没有显式地说明,但从各种功能引导上来说,文档库模式显然是 MWeb 主推的使用方式。没错,在文档库模式下,MWeb 其实就成了一个没有标签系统的 Evernote,你完全可以使用它来记录自己的笔记。

而生成静态网页就是比较高级的功能了,如果你整理好文档之间的结构,完全可以直接生成一个较为复杂的有子页面的博客,双击目录,点击「Build Site」-> 「Preview Site」,就可以在本地生成一个静态的页面了。通过一些复杂的设置,如引入 Disqus 等,还可以直接为您的博客添加评论系统。

不过想让博客真的发布到网络上,还是需要一些额外的工作的,这里就不具体展开了,感兴趣的同学可以查阅官方的文档操作。你也可以通过绑定 Wordpress、Evernote、Blogger 等服务,一键将内容发布上去。

界面可定制性强

之前的截图相信大家也看到了,MWeb 提供了明/暗两种模式,每个模式下还有 5 套不同的主题配色,你还可以自己微调字体、行距等其它选项。

此外,MWeb 还提供了丰富的窗口模式,可以通过「Command + 数字」快捷切换。最常规的就是有一栏/二栏/三栏的窗口模式切换。此外,和大多数 Markdown 软件不同,MWeb 默认是不显示预览窗口的,你可以通过「Command + 4」切换到「Editor & Preview Panes」,这时的视图比较类似于 Mou、Typora 等软件,但编辑区和预览区实际上是两个不同的窗口,可以分别拖动。

MWeb 在 Mac App Store 上售价 68 元,对于想找比 Mou、Typora这样纯粹的 Markdown 工具高级一些、却又不像Ulysses那么高级的用户来说,MWeb 是一个很有性价比的选择。此外,官方也提供了 MWeb Lite 版本,这个版本在编辑等功能上没有区别,只是限制了文档库中的文档数、可引入文件夹数等,同样在 Mac App Store 可免费下载。

【评论送码】在文末评论说说你试用 MWeb Lite 免费版的感想建议,或是你使用 Markdown 的心得体验,就有机会获得由开发者@oulvhai提供的 MWeb 兑换码,共 3 枚,本周五(14号)从评论随机挑选 3 位朋友送出。

态网页与动态网页之间的区别

什么是静态网页

所谓”静态”指的是网页内容”固定不变”,当浏览者通过互联网的HTTP协议向Web服务器请求替换网页内容时,服务器仅仅是将原来已经设计好的静态HTML文档传送给用户的流量器,其页面的内容使用仅仅是标准的HTML代码,静态网页文件通常以htm、html等为后缀名。

什么是动态网页

所谓”动态”,并不是指在网页中放几个带动画的GIF或者SWF图片和动画,而是指用户在浏览此网页时,可以根据本身的需求在网页中进行操作,而网页根据用户的输入,能够产生相应的结果来响应用户,那样的网页才叫动态网页,动态网页文件通常以.asp、.php等为后缀。

静态网页与动态网页的区别

1、编程技术不同

很多人容易将动态网页与页面的动态内容混为一谈,其实,动态网页与网页中的动态内容,如flash动画、滚动字幕等并没有直接关系。所谓的动态网页是指利用HTML程序语言、其他高级程序设计语言和数据库技术编程生成的网页。静态网页是指利用HTML程序语言编程生成的网页,随着HTML代码的生成,页面内容和显示效果不会再在发生改变,除非修改代码。而动态网页不容,页面代码虽然不发生变化,但显示的内容可以根据数据库操作的结果发生改变。

2、被搜索引擎收录的状况不同

由于编程技术不容,静态网页是纯粹HTML格式的网页,页面内容稳定,不论是网页是否被访问,页面都被保存在网站服务器上,很容易被搜索引擎收录。而动态网页的内容是当用户点击请求时才从数据库中调出返回给用户一个网页的内容,并不是存放在服务器上的独立文件,相比较于静态网页而言,动态网页很难被搜索引擎收录。

3、用户访问速度不同

用户访问动态网页时,网页在获得搜索指令后经过数据库的调查匹配,再将与指令相符的内容传递给服务器,通过服务器的编译将网页编译成标准的HTML代码,从而传递给用户浏览器,多个读取过程大大降低了用户的访问速度。而静态网页不同,由于网页内容直接存取在服务器上,省去了服务器的编译过程,用户访问网页速度很快。

4、制作和后期维护工作量不同

动态网页的设计以数据库技术为基础,可以实现多种功能,降低了网站维护的工作量。而静态网页由于没有数据库的支持,网页内容更改时需要直接修改代码,在网站内容制作和维护中,所需的工作量更大。

动态网页与静态网页各有特点,网站设计师在网页设计时,主要根据网站的功能需求和网站内容多少选择不同网页。如,网站包含信息量太大时,就需要选择动态网页,反之,则选择静态网页。


GDCA(数安时代)拥有国内自主签发信鉴易 TrustAUTH SSL证书以及是国际多家知名品牌:GlobalSign、Symantec、GeoTrust SSL证书指定的国内代理商。为了让国内更多的网站升级到安全的https加密传输协议。近日,GDCA推出多种国际知名SSL证书优惠活动,实现HTTPS加密并展示网站真实身份信息。详情请资讯GDCA产品官网在线客服https://www.trustauth.cn/。

文章转载:https://www.trustauth.cn/news/wiki/15753.html