正文1:网页的交互方式

当你打开一个页面,比如说当当商城,他会为你完成什么?
2020年1月13日当当网首页
作为用户,我们看到他的首页,在不同用户打开网页的时候,随着时间点的不同,呈现不同的首页。
按F12或者fn+F12键我们进入开发者模式
让我们看一下这个网页最终为我们呈现的内容是怎样组成的呢?
本文使用的是360浏览器
点开图片,可以看到左方有Element,Console,Sources,NetWork,Timeline,Profiles,Application,Security,Audits,而右边展示的是左边这几个标签具体的内容。具体这几个标签的内容与作用,详见附2:浏览器开发者模式详解一章,本文不做过多赘述,我们所需要看的基本组成在Sources底下,在点开sources以后在这里插入图片描述
可以看得到 展示部分由css,img,js以及一些资源文件(图片,视频)组成,其中本页面的前端框架又使用了jquery技术,尽管本页面打开的时候显示的是.html结尾,但是并不代表页面没有使用jsp,当大量用户访问的时候,可以使用jsp的静态化,变成html页面,后面会对此技术做详细描述。
接下来,点开Elements部分可以看得到左边是整个网页的静态代码,右边是对应的层叠样式表的详情。
在这里插入图片描述
这些代码中所有的内容如果都由前端开发人员完成,耗费的工作量是不可估量的,那么如何才能做到让我们的编辑做编辑的事情,写完的稿件不需要开发人员一一粘贴到对应页面并进行排版呢?
这个时候,我们就需要一种交互方法:
浏览者:我想看新闻A
新闻提供方:我们有新闻A
浏览者:请给我看具体内容
新闻提供方:好滴。我们想知道你是手机看还是电脑看呢?
浏览者:现在我就把我的浏览器信息基本参数提供给你,我是用的是chromie内核,360浏览器,是pc端(UA标识)
新闻提供方:我们正在读取新闻小编的新闻上传时间,地点,文章标题,文章具体内容。读取完毕,已经上传给你。
浏览者:收到。
新闻提供方:收到了你的收到。
既然理解了大概的过程,我们现在把浏览者换成电脑(PC)或者手机,而新闻提供方也就是对应你看新闻公司的服务器。实际上浏览信息的过程,交互过程就是客户端或者浏览器与服务器的交互过程,作为浏览者,你不需要知道服务器进行了什么样的复杂操作分析,而最后得到的是友好的DOM解析过的信息页面,而不是凌乱的代码。这种模型可以称之为CS或者bs模型。
最后我们用一张图来表述
此图摘自百度图片

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值