• 时间:
  • 分类: 前端
  • 围观人数: 4324

winter老师说，在他面试和认识的前端开发者中百分之70的人对浏览器是一知半解的状态，对于一个每天每时每刻都会接触的开发工具，我们需要对其浏览器运行过程和HTTP进行一些必要研究，因为这些都是面试中非常常见的考点。
这最近几篇文章，都是前端必知的浏览器知识，而不是浏览器开发者必知浏览器知识。
首先浏览器是如何工作的？其实无非就是把url一请求，浏览器只提供view视图来显示而已，这是对于浏览器开发者来说的。
过程解析：请求使用HTTP或者HTTPS协议，向服务端请求页面 -> 请求回来的HTML被构建成DOM树 -> 计算DOM树上的CSS属性 ->
最后根据CSS的属性对其一个一个渲染 得到位图-> （可选步骤）对位图进行合成，可以加快后期的绘制速度 -> 合成之后绘制到界面上；
这是一个浏览器从请求到解析再到界面的全部过程；这也是面试可能被问到的，所以这边不用记忆这么死板的知识点；
请求->构建dom->计算css属性->渲染dom->合成->绘制到页面
ps：请求过来的HTML，浏览器经历这一切都是“流”式的工作方式，即不一定要等到上一步骤的完全结束，就开始输出内容，所以我们加载网页的时候，网络比较差会看到一块一块的出来，这就是流的特点。

--HTTP协议
1.HTTP1.1 https://tools.ietf.org/html/rfc2616
2.HTTP1.1 https://tools.ietf.org/html/rfc7234
上面两份是HTTP协议的靠谱文档

HTTP协议是基于TCP协议出现的，它规定了REQUEST 和 RESPONSE 两种模式，tcp是一种双向的通讯通道，而HTTP协议的出现可使浏览器必须首发起。

我们可以口述一个基于TCP手动实现一个HTTP请求：首先建立TCP连接与服务器 -> 然后写request-line，它分为三个部分,HTTP Method,也就是请求的“方法”,请求的路径和请求的协议和版本 -> 然后返回的第一行就是response-line，也分为三个部分，协议版本，状态和文本；

--HTTP方法
HTTP的方法和JAVA亦或者是和web编程的REST风格很相似，有get，post，delete，put，connect，head，options，trace；
get默认我们在地址栏输入url时候就是默认的get提交
post一般为表单提交
put 做一个增加的操作
delete 删除操作
connect 通常和webscoket连接
head 返回头部信息
options和trace 在企业中一般做测试，在线上环境一般没有这玩意

--HTTP状态码
1** 临时回应，表示让客户端继续
2** 表成功
3** 表目标发生资源变化 301&&302 永久或者临时跳转 304跟客户端缓存没更新
4** 客户端请求错误 403没权限 404资源丢失 418（愚人节彩蛋）ps:要不是winter说我还没见过这个菜单
5** 服务端请求错误 500 请求错误服务端 503 暂时错误，一会再试试

--HTTP的head （这边直接上图）规定了对应的属性和值
request head
2be3e2457f08bdf624837dfaee01e4a2.png

response head
efdeadf27313e08bf0789a3b5480f7c9.png

ps:这个请求头要知道看到它就要知道它什么意思

--HTTPS和HTTP2

https://tools.ietf.org/html/rfc2818
HTTPS顾名思义：super http 它是也是基于TCP的，他在连接的时候会首先和服务端建立TLP连接，相当于在HTTP外层包了一层加密的壳，它与HTTP传输的内容没有任何区别，TLS是基于TCP的；主要作用就是确确定服务端身份，以及不会存在1.1的从网络传输节点进行窃听和篡改的问题

HTTP2 是HTTP1.1的升级版本
优点：支持服务端推送，支持TCP复用

服务端推送能够在客户端发送第一个请求到服务端时,提前把一部分内容推送给客户端,放入缓存当中,这可以避免客户端请求顺序带来的并行度不高,从而导致的性能问题。

TCP 连接复用,则使用同一个 TCP 连接来传输多个 HTTP 请求,避免了 TCP 连接建立时的三次握手开销,和初建 TCP 连接时传输窗口小的问题。

--结束

这段时间写第二章，希望能对我和你们都有一定的帮助理解浏览器的工作原理，知识不易，大家消化一下，部分demo出自winter
《重学前端》，转载说明出处：因卓诶-老沈

标签: none

添加新评论