在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
什么是静态页面?什么是动态页面?两者有什么区别?很多不了解前端技术的人可能会认为静态页面就是一个内容固定不变,没有任何效果的页面,而动态页面则是页面非常丰富,有各种交互效果和动态效果的页面。其实这个理解是错误的。通过本篇文章的阅读,详细为大家分享一下静态页面和动态页面到底是什么,两者有什么区别。
什么是静态页面和动态页面?
通俗的来讲,静态页面是随着HTML代码的生成,页面的内容和显示效果就基本不会发生变化(除非修改页面代码),而动态页面,虽然同样页面代码不发生变化,但是其显示的内容确实可以随着时间环境或者数据操作的结果而发生变化。因此静态页面和动态页面的认识应该定位在:是否有数据库加工这个环节。例如去购买T-shirt,我们直接从商店购买的T-shirt就是静态页面,而我们根据不同人兴趣定制T-shirt就是动态页面。
为了更好地认识理解静态页面和动态页面,我们重点了解一下两者之间的区别。
首先静态页面和动态页面的工作原理不同。
静态页面中,用户通过页面操作的过程就是通过浏览器使用HTTP协议向服务器发送一个请求(Request),告诉服务器我需要展示那个页面,服务器收到请求后,直接根据用户的需求直接从文件系统中取出相应的文件,返回给浏览器,浏览器解析后为用户展示下相应的页面。
而动态页面中,用户通过浏览器发送的请求到达服务器之后,服务器根据请求内容从数据库中调取相应的内容组合成一个虚拟的文件,然后将文件发送给浏览器,用户才得以看到定制化的内容。
通过这两个图,我们可以非常直观的看到动态页面在相应用户的请求时还需要通过数据库获取相应的数据,就相当于你定制了一件T-shirt,工厂需要根据你的定义给你制作个性化的T-shirt。
静态页面和动态页面的交互性差异
静态页面以展示为主,用户仅仅是通过页面获取相应的内容,而动态页面允许用户主动参与到页面之中,例如登录功能、查询功能、定制化页面内容等等。因此从交互性的角度来看,用户在动态页面中更有参与感。目前除了一些特定的 公开性展示的门户网站以外,大部分网站都是采用动态页面。
静态页面和动态页面的更新维护方式不同
静态页面内容是固定的,并且以一个完整的文件保存在服务器上,如果需要修改静态页面的内容,则需要找到此页面的源文件,并修改源文件的代码才可以实现内容调整。当网站内容信息非常大时,其维护成本同样会非常的大。
而动态页面以数据库技术为基础,当需要修改内容时,可以直接通过数据库修改,而不需要调整页面的源文件。这样可以大大降低网站维护的工作量,并且大幅度提高网站运营的效率。
静态页面和动态页面的响应速度不同
这个差异非常好理解,简单来说就是静态页面内容是固定的,服务器的响应时间较快,而动态页面还需要根据需求从数据库中调取相应的数据“组装”成为用户需求的页面,因此其响应速度会比较慢。还是买衣服的案例,买已经做好的衣服,可以直接买了就走,而定制衣服则需要经过工厂的加工才能得到。当然在网页的访问中,虽然动态页面相对较慢,但是其差别也仅仅是以微秒甚至更小的计时单位衡量,对于人的反映时间0.1面来说,几乎可以忽略不计。
静态页面和动态页面的访问地址
静态页面的每个网页都有一个固定的URL,并且页面以.htm/.html/.shtml/.xml常见形式作为后缀,而且不包含“?”,这样的链接更有利于搜索引擎抓取并且收录。而动态页面的URL包含“?”,并且一般以.asp/.php/.jsp等扩展名结尾。当然我们并不能够直接通过一个网页的URL来判断这个页面是静态页面还是动态页面。这是由于搜索引擎一般不会从一个网站的数据库中方位全部网页,因此动态页面中“?”对搜索引擎检索存在一定的问题。很多企业为了让自己网站有更多的收录,就会将动态页面的URL进行伪静态化。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
前端页面开发配色原则有哪些?
前端页面开发过程中,不仅仅要考虑到页面功能的问题,还需要着重注意网站配色因素。除去网站定位的主色调外,一个优秀的前端页面还要遵循配色原则。避免因为配色问题导致网页杂乱,从而影响用户的视觉体验。那前端页面开发配色原则有哪些呢?
5922
2019-11-22 18:32:58
JavaScript基础教程新手入门必看
对前端稍微有点了解的初学者都知道,JavaScript是必不可少的工具。毫不夸张的说,大部分网页都使用了JavaScript,想要成为一个优秀的前端工程师,做出漂亮令用户满意的网页,熟练掌握JavaScript是一个必备技能。本文为新手整理了一篇JavaScript基础教程入门指南,希望可以帮助编程小白可以更加轻松的掌握JavaScript。
4051
2020-03-29 12:06:46
Web前端CSS面试题及答案
Web前端CSS面试题及答案,CSS层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS在Web设计领域是一个突破,CSS实现修改一个小的样式更新与之相关的所有页面元素。是前端工程师面试过程中必不可少的考核点。
5850
2020-05-22 16:36:30
JavaScript开发者必会的五种设计模式
JavaScript设计模式的作用是显而易见的,开发者可以通过它写出整洁美观、结构合理的代码。本文将和大家来盘点一下五种JavaScript开发者必会的五种设计模式,它们分别是构造函数设计模式、原型设计模式、命令设计模式、观察者模式、工厂设计模式。
4230
2020-07-01 15:24:03
女生适合前端工作吗?能做前端工程师吗?
学习和性别没有太大的关系,现在前端领域有很多女孩子,做得好的也不在少数,只要你学习能力强,足够努力,找Web前端工作没有想象中那么难。
5511
2020-09-22 16:00:54