浏览器网络相关概念

 

渲染过程

  1. 构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree）
  2. 构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树
  3. 执行JavaScript：加载并执行JavaScript代码（包括内联代码或外联JavaScript文件）
  4. 构建渲染树(render tree)：根据DOM树和CSSOM树,生成渲染树(render tree)；渲染树：按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性
  5. 布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置
  6. 绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成

重排或者叫回流（reflow，relayout）

  1. 这个过程就是通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸
  2. 将其安置在浏览器窗口的正确位置
  3. 触发：增加、删除、修改、移动、修改css样式

重绘(redraw)

  1. 浏览器会根据元素的新属性重新绘制，使元素呈现新的外观
  2. 重绘不会带来重新布局，并不一定伴随重排
  3. 触发：dom改变，css移动，改变visibility、outline、背景色等属性

HTTP

http协议的概念

http是HyperText Transfer Protocol的缩写，也称为超文本传输协议，最初的版本只能用来传输html文件，现在则可以传输包括文字、图像、视频和二进制文件的所有内容

http协议的特点

1、简单快速，每个资源固定出来起来方便
2、 灵活，每个资源头部数据类型
3、 无连接：连接一次就会断掉，不会一直连接
4、无状态，客户端和服务端是两种身份，http帮助连接，下次连接不会记住状态，是谁连接的

http协议报文组成部分

请求报文：请求行、请求头、空行（告诉服务器请求头部到此为止）、请求体

响应报文：状态行（200 ok）、响应头、空行、响应体

get和post

1、Get 请求能缓存，Post 不能
2、Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的。
3、Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术
4、URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的
5、Post 支持更多的编码类型且不对数据类型限制
6、在express框架中，对于GET请求的参数'?xxxx=',使用req.query.xxxxx方法获得；对于POST请求的参数，使用req.body.xxxxx方法获得

http常见状态码

2XX 成功

200 OK，表示从客户端发来的请求在服务器端被正确处理
204 No content，表示请求成功，但响应报文不含实体的主体部分
206 Partial Content，进行范围请求

3XX 重定向

301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
302 found，临时性重定向，表示资源临时被分配了新的 URL
303 see other，表示资源存在着另一个 URL，应使用 GET 方法丁香获取资源
304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
307 temporary redirect，临时重定向，和302含义相同

4XX 客户端错误

400 bad request，请求报文存在语法错误
401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息
403 forbidden，表示对请求资源的访问被服务器拒绝
404 not found，表示在服务器上没有找到请求的资源

5XX 服务器错误

500 internal sever error，表示服务器端在执行请求时发生了错误
503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求

http持久连接

HTTP 协议采用“请求-应答”模式，当使用普通模式，即非 Keep-Alive 模式时，每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）；当使用 Keep-Alive 模式（又称持久连接、连接重用）时，Keep-Alive 功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive 功能避免了建立或者重新建立连接

HTTP 管线化

默认情况下 HTTP 协议中每个传输层连接只能承载一个 HTTP 请求和响应，浏览器会在收到上一个请求的响应之后，再发送下一个请求。在使用持久连接的情况下，某个连接上消息的传递类似于请求1 -> 响应1 -> 请求2 -> 响应2 -> 请求3 -> 响应3。

HTTP Pipelining（管线化）是将多个 HTTP 请求整批提交的技术，在传送过程中不需等待服务端的回应。使用 HTTP Pipelining 技术之后，某个连接上的消息变成了类似这样请求1 -> 请求2 -> 请求3 -> 响应1 -> 响应2 -> 响应3。

注意下面几点：

1、管线化机制通过持久连接（persistent connection）完成，仅 HTTP/1.1 支持此技术（HTTP/1.0不支持）
2、只有 GET 和 HEAD 请求可以进行管线化，而 POST 则有所限制
3、初次创建连接时不应启动管线机制，因为对方（服务器）不一定支持 HTTP/1.1 版本的协议
4、管线化不会影响响应到来的顺序，如上面的例子所示，响应返回的顺序并未改变
5、HTTP /1.1 要求服务器端支持管线化，但并不要求服务器端也对响应进行管线化处理，只是要求对于管线化的请求不失败即可
6、由于上面提到的服务器端问题，开启管线化很可能并不会带来大幅度的性能提升，而且很多服务器端和代理程序对管线化的支持并不好，因此现代浏览器如 Chrome 和 Firefox 默认并未开启管线化支持

HTTP 缓存机制和原理

对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略
对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存

 

存储

各种存储方案的简单对比

1、Cookies：浏览器均支持，容量为4KB
2、UserData：仅IE支持，容量为64KB  
3、 Flash：100KB，非HTML原生，需要插件支持
4、 Google Gears SQLite ：需要插件支持，容量无限制
5、 LocalStorage：HTML5，容量为5M
6、 SesstionStorage：HTML5，容量为5M
7、globalStorage：Firefox独有的，Firefox13开始就不再支持这个方法

特点
1、cookie的大小受限制，cookie大小被限制在4KB，不能接受像大文件或邮件那样的大数据 2、cookie要在服务器和浏览器之间来回传送，cookie数据始终在同源的http请求中携带（即使不需要） 3、cookie是服务端生成，客户端进行维护和存储

Cookie的生成方式

生成方式一：http response header中的set-cookie
生成方式二：js中可以通过document.cookie可以读写cookie//以键值对的形式展示

Cookie的缺陷

1、cookie会被附加在每个HTTP请求中，在HttpRequest 和HttpResponse的header中都是要被传输的，所以无形中增加了一些不必要的流量损失
cookie是用来维护用户信息的，而域名(domain)下所有请求都会携带cookie，但对于静态文件的请求，携带cookie信息根本没有用，此时可以通过cdn（存储静态文件的）的域名和主站的域名分开来解决

2、由于在HTTP请求中的Cookie是明文传递的，所以安全性成问题，除非用HTTPS。 可以使用HttpOnly提升Cookie安全性。httponly 不支持读写，浏览器不允许脚本操作document.cookie去更改cookie，一般情况下都应该设置这个为true，这样可以避免被XSS攻击拿到cookie

session

session机制是一种服务器端的机制，服务器使用一种类似于散列表的结构（也可能就是使用散列表）来保存信息

localStorage

这是一种持久化的存储方式，也就是说如果不手动清除，数据就永远不会过期。它也是采用Key - Value的方式存储数据，底层数据接口是sqlite，按域名将数据分别保存到对应数据库文件里。它能保存更大的数据（IE8上是10MB，Chrome是5MB），同时保存的数据不会再发送给服务器，避免带宽浪费

localStorage缺点

① localStorage大小限制在500万字符左右，各个浏览器不一致
② localStorage在隐私模式下不可读取
③ localStorage本质是在读写文件，数据多的话会比较卡
④ localStorage不能被爬虫爬取，不要用它完全取代URL传参

SessionStorage

和服务器端使用的session类似，是一种会话级别的缓存，关闭浏览器会数据会被清除。不过有点特别的是它的作用域是窗口级别的，也就是说不同窗口间的sessionStorage数据不能共享的。

SessionStorage缺点

① 会话级别的浏览器存储
② 大小为5M左右
③仅在客户端使用，不和服务端进行通信
④ 接口封装较好

 

posted @ 2018-10-16 15:02  Eve0803  阅读(380)  评论(0)  编辑  收藏  举报