DOM渲染,单页面和多页面,报文

一、DOM是如何渲染的,分为三个阶段:

1.纯后端渲染

第一个阶段是纯后端渲染。
采用这样的渲染方式,就是每一个页面中,在Chrome中展开得到的DOM,
和服务器返回的DOM是基本一致的(可以通过查看网页源代码来得到服务器返回的DOM)。
当然,这里是“基本”一致,因为实际操作中,页面或多或少还是会带有一些js代码,
并且在浏览器端中运行这些js代码来对DOM进行的渲染,不过这一部分js代码并不影响DOM的主体是由服务端返回的。
纯后端的DOM渲染,DOM树的生成完全是在后端服务器中完成的,相当于后端服务器的程序会把各种的数据拼成一个DOM树,
并转换成一个字节流作为HTTP Response的body返回给浏览器。

2.纯前端渲染

第二个阶段就是纯前端渲染,很大程度上,
纯前端渲染可以解决纯后端渲染中出现的各种体验问题。
如下图所示,纯前端渲染把DOM生成的主题逻辑都放在了前端,
这时后端只会返回一个框架的DOM结构,比如只带一个容器元素的的DOM,
然后由js代码把页面的主题渲染到这个容器元素中。

3.服务端的js渲染结合前端渲染

第三个阶段,主要是把前两个阶段中,一些交给纯后端DOM渲染逻辑分离的不好,
但是交给纯前端DOM渲染又会造成较高延迟的部分单独分离出来形成了一独立DOM渲染阶段,
保留的代码中天然的展示层和数据层的分离,又把API请求的累计延迟减少了很多,从SEO角度来说渲染结果对搜索引擎也很友好。
当然,这样的做法需要给整体的架构增加一个独立的单元,给开发和部署都带来了更高复杂性。

二、单页面开发与多页面开发的优缺点

单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。

所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。

多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新

单页面的优点:

1,用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小

2,前后端分离

3,页面效果会比较炫酷(比如切换页面内容时的专场动画)

单页面缺点:

1,不利于seo

2,导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)

3,初次加载时耗时多

4,页面复杂度提高很多

三、报文

起始行

报文的第一行就是起始行,在请求报文中用来说明要做些什么,在响应报文中说明出现了什么情况。

首部字段

起始行后面有零个或多个首部字段。每个首部字段都包含一个名字和一个值,为了便于解析,两者之间用冒号(:)来分隔。首部以一个空行结束。添加一个首部字段和添加新行一样简单。

主体

空行之后就是可选的报文主体了,其中包含了所有类型的数据。请求主体中包括了要发送给Web 服务器的数据;响应主体中装载了要返回给客户端的数据。起始行和首部都是文本形式且都是结构化的,而主体则不同,主体中可以包含任意的二进制数据(比如图片、视频、音轨、软件程序)。当然,主体中也可以包含文本。

 MIME 类型是一种文本标记,表示一种主要的对象类型和一个特定的子类型,中间由一条斜杠来分隔。

HTML 格式的文本文档由 text/html 类型来标记。

普通的 ASCII 文本文档由 text/plain 类型来标记。

JPEG 格式的图片为 image/jpeg 类型。

GIF 格式的图片为 image/gif 类型。

Apple 的 QuickTime 电影为 video/quicktime 类型。

微软的 PowerPoint 演示文件为 application/vnd.ms-powerpoint 类型。

常见的MIME 类型有数百个,实验性或用途有限的MIME 类型则更多。


报文语法

这是请求报文的格式:

<method> <request-URL> <version>

<headers>

<entity-body>


这是响应报文的格式(注意,只有起始行的语法有所不同):

<version> <status> <reason-phrase>

<headers>

<entity-body>

猜你喜欢

转载自www.cnblogs.com/Yangjinbo-8080/p/10858896.html