什么是网页静态化?有什么好处吗?

95后程序猿小A


什么是静态页面?

通常我们所说的静态页面是以 htm、html、shtml、xml 这些后缀结尾的页面,通常使用前端相关的语言比如 HTML、CSS、JavaScript 就能完成静态页面的编写工作,基本上不需要与数据库和后台语言(JAVA,PHP,PYTHON等)。页面一旦完成创建,内容就固定不变,不管任何时候访问,其内容是一层不变的(除非遭受攻击)。如果你需要修改静态页面的内容,你需要手工修改静态页面的内容,将页面重新上传到服务器上才能看到内容的变化。

什么是动态页面?

与静态页面相对的就是动态页面,那什么是动态页面?说通俗直白点就是页面分为视图模板和数据,数据大多数是通过后端语言请求数据库获取,然后替换视图模板中的标签而已。动态页面的后缀一般和采用的后端技术相关,比如 php、aspx、jsp、cgi 等。动态页面使用的技术比较复杂,还要考虑并发和数据压力等等,访问的人说越多,对服务器的压力就越大。

静态页面和动态页面的区别和特点

一、先说说动态页面的优点:

1、从工作量方面动态页面大大优于静态页面

比如一个新闻站点有很多新闻内容,如果使用动态页面技术,建几个动态页面即可,数据从数据库获取,通过向动态页面传参就可以看到丰富的内容。如果你用手工的方式去建立的话,在这个信息爆照的时代,非把人累死不可。

2、动态页面的内容更新更方便、更快捷

如果你要更新网站的内容,如果系统提供后台管理的方式,只需要在后台完成表单的提交即可,无需上传服务器文件就能完成网站内容的更新。前端页面哪怕是改个标点符号,你都需要手动更改再进行服务器的上传覆盖工作。

3、动态页面更节省硬盘空间

相对静态页面来说,动态页面数量会少许多,因此更节省服务器的硬盘空间,不像静态页面在站点目录下放一堆文件。

二、静态页面的优点:

1、访问速度更快

由于静态页面无需请求后端数据资源,占用的服务器资源相对于动态页面会少许多,因此访问速度更快。如果用户过多访问的话,如果使用动态页面 ,架构设计不好的话,还有可能发生拖死服务器和数据库的情况,静态页面发生的几率则很低。

其次,CDN技术对静态页面支持很好,因此无论何时,访问静态页面都很快,几乎占用不到服务器资源,即使服务器挂掉,静态页面还能正常访问。

2、针对搜索引擎更加友好

现在大家都习惯基于搜索引擎的搜索访问网站,如果网站收录太差,搜索引擎找不到的话,那我们建网站的意义何在呢?搜索引擎主要用爬虫技术抓取我们网站的内容,你可以这样理解,爬虫也有惰性,如果你的网站访问比较慢,爬虫会在漫长的等待状态,这是对搜索引擎资源巨大的浪费,因此爬虫不能在你的网站耽误太长时间,自然就会放弃收录。刚才提及到静态页面的访问速度明显优于动态页面,因此静态页面更符合爬虫的口味,收录会更多。

3、部署更简单、更省钱

在云时代,我们已经无需过多操心服务器的事情,如果你采用动态技术的话,还是需要考虑服务器、数据库、安全等设置问题,但是静态网页则不存在这个问题,你甚至可以不需要服务器,利用云平台的静态存储服务,完成文件上传即可,剩下的工作交给云平台,它会帮你部署cdn、备份等服务,这些服务加在一起也不过几百块一年而已(中小型网站)。

动静分离技术

由于现在网站交互越来越复杂,对性能要求越来越高,为了平衡动态网页和静态页面,就出现了动静分离的技术,因此有了前端工程师和后端工程师之分,前端复杂页面的交互和数据内容的渲染(通过ajax技术拿到后端的数据),后台工程师则负责业务逻辑和数据的处理。目前这是一个主流的开发方式,大大提高了开发效率和页面的性能,但是还存在一个问题,由于数据是通过 JavaScript 的 AJAX 技术渲染的,搜多引擎就很难理解脚本的内容,增加了爬虫工作的复杂程度,因此对搜索也十分不友好,那怎么解决,这里可以用到我下面提及的 SSR (服务端渲染技术)。

SSR服务端渲染技术

基于动静分离的基础,我们可以采用SSR服务端渲染技术来解决搜索引擎收录和性能问题,那什么是SSR服务端渲染技术呢?说通俗点就是后端把数据传递给前端,前端利用相关技术,先自己把JS先运行一遍,将输出的数据内容直接写到页面的DOM里,可以说就是纯粹的静态页面,这样爬虫就不需要处理JS脚本的问题,因此很利于搜索引擎收录。

最后简单提及下,如果你在使用 React 前端框架的话,你可以通过 Next.js 实现SSR服务端渲染技术,如果使用 Vue 前端框架的话,你可以使用 Nuxt.js 实现SSR服务端渲染技术。

小节

今天的内容就和大家分享到这里,通过这篇文章我们一起学习了什么是静态页面,什么是动态页面,以及两者的区别和特点,最后我们探讨了如何综合两者,实现最优的方案。感谢你的阅读,如果你喜欢我的分享,麻烦给个关注、点赞加转发哦,你的支持,就是我分享的动力。


前端达人


网页静态化,是为了加速网页的访问,提高网站的负载,利于搜索引擎抓取。


静态页面

静态页面是指页面上的内容是死的,不会变的;如果网站的页面是纯 html 页面的话,当用户访问页面不需要经过数据的读取和处理,就能得到文件,所以访问速度会非常的快,相同的服务器资源,静态页面可以支持更高的访问量;纯静态的网页对搜索引擎友好,容易被搜索引擎收录,动态网页中的 [?] 让搜索引擎很难办,因为它可能从数据库中把所有的数据都抓取出来,所以搜索引擎通常不抓取 url 中 [?] 以后的内容;因为是静态页面,所以也不会存在 SQL 注入之类的问题;

静态页面都是一个一个的 html 文件,如果网站内容更新的频率比较高的话,就会生成或更新大量的文件,如果静态页面的模板需要变化的时候,这个更新量就更恐怖了;另外静态页面的交互性比较差。


动态页面

动态页面是指页面上的内容是活的,可能是从数据库中读取出来的,或者从其他什么地方获取到的;因为页面的数据是动态读取、拼接展示的,所以应用不需要占用太大的空间,当数据发生变化时,页面几乎不需要修改,就可以实时生效,维护起来更为方便;

但是动态页面由于需要读数据库或缓存,花费的时间势必会更长,更为关键的是,如果并发量很大,数据库的读取速度会成为瓶颈;还有上面说到的,动态页面难以被搜索引擎收录,不利于 SEO;另外就是容易受到攻击。


网页静态HTML化

网页静态化,就是将动态网页变成静态网页的过程。这个方案,会有一个静态化服务,将动态的数据生成静态化的页面;这个过程,可能会生成大量的 html 页面。

如图:


伪静态化

什么是伪静态?

比如我们要访问一个商品页面:http://www.xxx.com/product?id=1

id = 1 表示展示的是商品编号为 1 的商品,但是由于这种 url 不利于搜索引擎的抓取,所以通常会改造成 http://www.xxx.com/product/1.html ,这样就让搜索引擎认为是个静态页面,伪静态页面会对 url 进行 rewrite。

静态化是真真正正生成一个个 html 页面的,而伪静态化只是伪装了 url,实际还是需要做动态处理。

伪静态化不需要生成 html 页面,页次更节约服务器空间;伪静态化虽然需要做动态处理,但是可以将变化的数据放到缓存服务器中,不需要从数据库读取数据;当然,和纯静态化相比,伪静态化的速度还是慢一些的。


我将持续分享Java开发、架构设计、程序员职业发展等方面的见解,希望能得到你的关注。


会点代码的大叔


最大的好处在于用户体验效果提高了,第一次访问时生成静态网页,也就是把整个显示的网页以代码的形式保存在用户端,当用户第二次访问时会加载用户端静态网页,只有参数改变时需要加载的模块在从服务器调数据,显示完成后再生成一个新的静态网页,当用户返回上一页操作基本没有加载时间。所以最大的作用就是提高网页显示速度,减少加载时间而已。


管庆林2


1.有利于seo

2.相较于spa页面,打开速度很快


分享到:


相關文章: