浏览器网络相关概念

 

渲染过程

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协议的特色

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

http协议报文组成部分

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

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

get和post

一、Get 请求能缓存，Post 不能
二、Post 相对 Get 安全一点点，由于Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，可是在抓包的状况下都是同样的。
三、Post 能够经过 request body来传输比 Get 更多的数据，Get 没有这个技术
四、URL有长度限制，会影响 Get 请求，可是这个长度限制是浏览器规定的，不是 RFC 规定的
五、Post 支持更多的编码类型且不对数据类型限制
六、在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。

注意下面几点：

一、管线化机制经过持久链接（persistent connection）完成，仅 HTTP/1.1 支持此技术（HTTP/1.0不支持）
二、只有 GET 和 HEAD 请求能够进行管线化，而 POST 则有所限制
三、初次建立链接时不该启动管线机制，由于对方（服务器）不必定支持 HTTP/1.1 版本的协议
四、管线化不会影响响应到来的顺序，如上面的例子所示，响应返回的顺序并未改变
五、HTTP /1.1 要求服务器端支持管线化，但并不要求服务器端也对响应进行管线化处理，只是要求对于管线化的请求不失败便可
六、因为上面提到的服务器端问题，开启管线化极可能并不会带来大幅度的性能提高，并且不少服务器端和代理程序对管线化的支持并很差，所以现代浏览器如 Chrome 和 Firefox 默认并未开启管线化支持

HTTP 缓存机制和原理

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

 

存储

各类存储方案的简单对比

一、Cookies：浏览器均支持，容量为4KB
二、UserData：仅IE支持，容量为64KB  
三、 Flash：100KB，非HTML原生，须要插件支持
四、 Google Gears SQLite ：须要插件支持，容量无限制
五、 LocalStorage：HTML5，容量为5M
六、 SesstionStorage：HTML5，容量为5M
七、globalStorage：Firefox独有的，Firefox13开始就再也不支持这个方法

Cookie

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

Cookie的生成方式

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

Cookie的缺陷

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

二、因为在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左右③仅在客户端使用，不和服务端进行通讯④ 接口封装较好