前端基础入门:静态页面与动态页面的区别

news2024/11/15 16:51:31

什么是静态页面和动态页面?

通俗的来讲,静态页面是随着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进行伪静态化。
静态页面是网站建设的基础,静态页面和动态页面之间也并不矛盾,为了网站适应搜索引擎检索的需求,即使选用动态网站技能,也可以将页面内容转化为静态页面发布。
以上我们从工作原理、交互性差异、更新维护方式、响应速度和访问地址等五个方面分析了静态页面和动态页面的不同之处,下面再简单归纳一下它们的特点都有哪些。

静态页面的特点

1)静态页面每个页面都有一个固定的URL,且页面URL以.htm、.html、.shtml等常见方式为后缀,而不含有“?”;
2)页面内容一经发布到网站服务器上,无论是否有用户访问,每个静态页面的内容都是保存在网站服务器上的,也就是说,静态页面是实实在在保存在服务器上的文件,每个页面都是一个独立的文件;
3)静态页面的内容相对稳定,因此容易被搜索引擎检索;
4)静态页面没有数据库的支持,在网站制作和维护方面工作量较大,因此当网站信息量很大时完全依靠静态页面制作方法比较困难;
5)静态页面的交互性穿插,在功能方面有较大的限制;
静态页面相对更新起来比较费事,适用于通常更新较少的展示型网站。另外,如果扩展名为.asp但却没有连数据库,完全是静态的页面,那也是静态网站.仅仅.asp扩展名。

动态页面的特点

1)动态页面以数据库技能为基础,可以大大下降网站维护的工作量;
2)选用动态页面技能的网站可以完成更多的功能,如用户注册、用户登录、在线调查、用户管理、订单管理等等;
3)动态页面实际上并不是独立存在于服务器上的页面文件,只有当用户请求时服务器才返回一个完整的页面;
4)动态页面中的“?”对搜索引擎检索存在一定的问题,搜索引擎通常不行能从一个网站的数据库中访问全部页面,或者出于技能方面的考虑,搜索蜘蛛不去抓取网址中“?”后面的内容,因此选用动态页面的网站在进行搜索引擎推广时需求做一定的技能处理才能适应搜索引擎的要求。
总之,静态页面和动态页面各有特点,网站选用动态页面还是静态页面主要取决于网站的功能需求和网站内容的多少,如果网站功能比较简单,内容更新量不是很大,选用纯静态页面的方法会更简单,反之通常要选用动态页面技能来完成。
以上就是前端入门:静态与动态页面的全部内容了,希望看完以上内容你能有所收获,感谢你的支持,更多学习资料,收录于云端源想网站中,需要的伙伴可前去官方查看更多资料内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1714907.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何在中国网上发布文章

随着互联网的迅猛发展,网上发布文章已经成为一种重要的传播方式。而在中国,作为世界上最大的互联网市场,如何在中国网上发布文章成为了许多人关注的焦点。媒介多多网发稿平台作为一个专业的发稿平台,为广大作者提供了很好的发布文…

建议大家少用点儿网站测速工具

春节休息期间明月有接了几个服务器代运维的业务,期间就发现不少新手站长们还在用 17ce、站长工具等等这些网站测速工具来评判站点访问速度的,感觉很有必要给大家聊聊这个事儿,因为这毕竟也是一个涉及服务器安全的一个重要环节了。 其实&#…

Linux系统编程(五)多线程

目录 一、基本知识点二、线程的编译三、 线程相关函数1. 线程的创建2. 线程的退出3. 线程的等待补充 四、综合举例 一、基本知识点 线程(Thread)是操作系统能够进行运算调度的最小单位。它被包含在进程之中,是进程中的实际运作单位。一个标准…

Java程序设计

一 Java基础知识 1 Java语言概述 1.1 发展历史 1.2 Java应用领域 Web开发:电子商务网站、内部管理系统、社交网络、门户网站移动开发:Android开发桌面开发:办公软件、游戏、工具软件企业应用开发:客户关系管理、企业资源计划、…

长难句打卡5.29

Today, professors routinely treat the progressive interpretation of history and progressive public policy as the proper subject of study while portraying conservative or classical liberal ideas — such as free markets and self-reliance — as falling outsid…

学习笔记——动态路由协议——OSPF(OSPF网络类型1)

五、OSPF网络类型 网络类型:是指运行OSPF网段的二层链路类型。 1、OSPF网络类型简介 (1) OSPF网络类型 MA(Multi-Access ,多路访问)在一个网段内的节点数量不限制(一条链路上有多个访问点)。MA的网络一般分为两种: 1)广播式多路访问网络…

vue3学习(四)

前言 接上篇学习笔记&#xff0c;分享3个内置组件&#xff1a;动态组件、缓存组件、分发组件基本用法。大家一起通过code的示例&#xff0c;从现象理解,注意再次理解生命周期。 一、code示例 组件A&#xff1a;CompA <script setup> import {onMounted, onUnmounted} f…

市场巨变,移动开发行业即将迎来“第二春”?

随着鸿蒙生态的不断壮大&#xff0c;越来越多的企业开始加入其中&#xff0c;对鸿蒙OS开发工程师的需求也越来越迫切。 年初时还只有200个APP宣布加入鸿蒙生态&#xff0c;而最近华为也已经官宣&#xff0c;已经有4000多个应用加入鸿蒙&#xff0c;短短三个月就增加了20倍。 …

.NET 直连SAP HANA数据库

前言 上个项目碰到的需求&#xff0c;IT部门要求直连SAP的HANA数据库&#xff0c;以只读的权限读取SAP部门开发的CDS视图&#xff0c;是个有点复杂的工程&#xff0c;需要从成品一直往前追溯到原材料的产地&#xff0c;和交货单、工单、采购订单有相当程度上的关联 IT部门要求…

MySQL的安全性

给root用户设置密码 点击用户--下面三个账号双击--进行编辑 修改密码--修改完进行保存 关闭数据库后连接不上 重新编辑&#xff0c;设置密码 新建账号 填入信息--保存&#xff08;主机哪里要选择%&#xff09; 连接这个新的账号 点击连接--填写连接的名称&#xff0c;地址&…

使用moquette mqtt发布wss服务

文章目录 概要一、制作的ssl证书二、配置wss小结 概要 moquette是一款不错的开源mqtt中间件&#xff0c;github地址&#xff1a;https://github.com/moquette-io/moquette。我们在发布mqtt服务的同时&#xff0c;是可以提供websocket服务器的&#xff0c;有些场景下需要用到&a…

多激光雷达ip与端口配置

首先是雷达的ip 我们连上雷达&#xff0c;想要进入雷达的上位机的时候&#xff0c;需要对本机ip进行一些配置&#xff1a; 第一个是ip&#xff0c;第二个是掩码&#xff0c;第三个是网关。 其中ip可以通过wireshark来进行读取&#xff0c;一般就是192.168.102(雷达默认) 然后掩…

一种基于高德Web API实现沿路画面的实现

概述 本文在mapboxGL框架下&#xff0c;分享一种基于高德Web API实现沿路画面的实现。 实现效果 实现 1. 实现思路 通过点击获取路径的起点和终点&#xff1b;将多次规划路径的结果连成一条线&#xff1b;当鼠标点击回到第一个点的时候结束绘制&#xff1b;绘制结束后将路径…

Linux: network: tcp spurious retrans 的一个原因

最近分析问题的时候&#xff0c;从wireshark里看有&#xff1a;tcp spurious retrans 的包&#xff0c;309这个是307 的retransmission&#xff0c;而且在308 回复了ACK。那为什么会重传&#xff1f; 从网上找了一些&#xff0c;比如 https://www.packetsafari.com/blog/2021…

# 解决 win11 连接共享打印机,报错 0x00000709 问题

解决 win11 连接共享打印机&#xff0c;报错 0x00000709 问题 一、问题描述&#xff1a; 当我们连接一台共享打印机&#xff0c;出现报错 0x00000709 时&#xff0c;这是由于本机注册表本配置 RPC 远程调用&#xff0c;我们需要对自己的电脑进行修改&#xff0c;而不是主机&a…

3DEXPERIENCE DELMIA Role: RVN - Robotics Virtual Commissioning Analyst

Discipline: Robotics Role: RVN - Robotics Virtual Commissioning Analyst 通过准确地模拟连接到PLC程序的机器人、设备和传感器&#xff0c;在制造虚拟孪生上执行虚拟调试情景 为任何机器人角色的多周期情景创建传感器&#xff0c;生成和变换零件启用 PLC 程序的虚拟验证和…

【C语言习题】25.求两个数二进制中不同位的个数

文章目录 作业标题作业内容2.解题思路3.具体代码4.代码讲解 作业标题 求两个数二进制中不同位的个数 作业内容 编程实现&#xff1a;两个int&#xff08;32位&#xff09;整数m和n的二进制表达中&#xff0c;有多少个位(bit)不同&#xff1f; 输入例子: 1999 2299 输出例…

算法——链表

一、重新排队——蓝桥杯3255 1.2题解 思路 对1-n的数字进行m次操作得到的结果&#xff08;每次移动的是x&#xff09; 代码 #include <iostream> using namespace std; int main() {// 请在此输入您的代码int n,m;cin>>n>>m;int i1;int a[m][3];for(i;i…

数据结构(八)二叉树、哈希查找

文章目录 一、树&#xff08;一&#xff09;概念1. 前序遍历&#xff1a;根左右2. 中序遍历&#xff1a;左根右3. 后序遍历&#xff1a;左右根4. 层序遍历&#xff1a;需要借助队列实现 &#xff08;二&#xff09;代码实现&#xff1a;二叉树1. 结构体定义2. 创建二叉树1. 注意…

探析GPT-4o:技术之巅的跃进

如何评价GPT-4o? 简介&#xff1a;最近&#xff0c;GPT-4o横空出世。对GPT-4o这一人工智能技术进行评价&#xff0c;包括版本间的对比分析、GPT-4o的技术能力以及个人感受等。 随着人工智能领域的不断发展&#xff0c;GPT系列模型一直处于行业的前沿。最近&#xff0c;GPT-4…