浏览器原理学习有感

B/S架构基本概念
B/S三层体系结构可以定义为:
客户机上的表示层
中间的web服务器层
后端的数据库服务器层
正因为这三点,使B/S不再需要客户下载相应客服端,所有的用户业务逻辑都被部署在新的中间层上。

我的理解就是C/S模式就是玩王者农药需要下载他的app才可以注册账号,而我在他的官网就可以直接注册账号,等待他的服务器返回我的账号是否能够注册。

B/S常见的缺点:
1)在跨浏览器上,BS架构不尽如人意。
2)表现要达到CS程序的程度需要花费不少精力。
3)在速度和安全性上需要花费巨大的设计成本,这是BS架构的最大问题。
4)客户端服务器端的交互是请求-响应模式,通常需要刷新页面,这并不是客户乐意看到的。(在Ajax风行后此问题得到了一定程度的缓解)
个人认为Ajax的成功之处是将后台数据调度到前台,前台客户数据通过json传输到后台,让数据灵活起来,经典之作就是以前注册时输错信息(比如邮箱格式)要刷新网页才知道,然后所有数据又要重新输入,现在无论是HTML5还是Ajax都可以及时提醒数据的问题所在

浏览器
浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示您选择的网络资源。
浏览器按照引擎分类:
(1) Trident引擎:Internet Explorer
(2) Webkit引擎:Chrome(28版本后基于blink,blink是webkit的一个分支)和Safari (个人觉得还是这个好用)
(3) Gecko引擎:Firefox
(4) Presto引擎:早期Opera采用,后用webkit引擎。

浏览器的用户界面则大同小异:
用来输入URI的地址栏
前进、后退按钮
书签选项
用于刷新及暂停当前加载文档的刷新、暂停按钮
用于到达主页的主页按钮

尽管巴拉了这么多,我觉得都是用户一眼就看明白的

构成

  1. 用户界面 - 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。(我不知道这啥意思,就当成是除了你看到的页面,其他的都属于这一栏吧,当然,是你看到的,看不到的当我没说)
  2. 浏览器引擎- 用来查询及操作渲染引擎的接口
  3. 渲染引擎- 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来(2,3应该是串联关系,通过浏览器引擎这个接口,进而解析操作html/css)
  4. 网络- 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作
  5. UI 后端- 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口
  6. JS解释器- 用来解释执行JS代码(据说这个是后来加上的)
  7. 数据存储(这个要画重点!!!)- 属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术

(一、为什么要进行数据存储
  随着Web应用程序的出现,慢慢的也开始产生了对于能够直接在客户端上存储用户信息能力的要求,我们知道当我们访问某个页面的时候,很多东西都需要从服务器端进行加载,如果这个时候能将一些东西存储在客户端的话,是不是就可以直接拿来用啦,方便快捷,速度又快,又可以节省了很多不必要的请求,为什么不用呢?
  cookie的作用  
  说到cookie,其实cookie有两个主要功能,第一个功能就是用于解决http无状态的缺点,在客户端存储会话信息,记录用户的状态,而第二个功能也就是我们现在也经常使用cookie在客户端存储一些其它的数据(emmm,看不懂,就知道他可以在客服端存数据好了)

cookie的缺点
  虽然cookie可以存储一些数据,但是仍然存储下面一些缺点
  (1)cookie需要在客户端和服务器端之间来回传送,会浪费不必要的资源
  (2)cookie的存储大小有限制,对于每个域,一般只能设置20个cookie,每个cookie大小不能超过4KB
  (3)cookie的安全性,cookie因为保存在客户端中,其中包含的任何数据都可以被他人访问,cookie安全性比较低

这个讲述了常用的客户端储存信息的方法:
https://www.cnblogs.com/Yellow-ice/p/10507472.html)
他们七者关系如图:

在这里插入图片描述

ps:反正我是看不懂

但对于前端开发菜鸟的我而言,至少要先理解渲染引擎(Rendering engines)的工作过程:

解析html以构建dom树->构建render树->布局render树->绘制render树

在这里插入图片描述
大致是这个样子!

渲染引擎开始解析html,并将标签转化为内容树中的dom节点。接着,它解析外部CSS文件及style标签中的样式信息。然后通过糅合,将外来引入的css样式和生成的DOM tree相结合,生成相对应的Render tree,就是上图的第二步。
Render树由一些包含有颜色和大小等属性的矩形组成,它们将被按照正确的顺序显示到屏幕上。
Render树构建好了之后,将会执行布局过程,它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制,即遍历render树,并使用UI后端层绘制每个节点。
注意:这个过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。

在这里插入图片描述

我看这部分看的晕晕乎乎的,所以先写这么多,后期补上

猜你喜欢

转载自blog.csdn.net/qq_42417262/article/details/88855456