美文网首页
【http】浏览器如何处理服务器的响应

【http】浏览器如何处理服务器的响应

作者: SophieRabbit | 来源:发表于2020-01-10 17:27 被阅读0次

    HTTP在传输数据时,可以直接按照原样传,也可以进行编码。

    报文和实体

    报文:HTTP通信中的基本单位,由8位组字节流组成,通过HTTP通信传输。

    实体:作为请求和响应的有效载荷数据被传输,内容由实体首部和实体主体组成。

    报文主体和实体主体在一般情况下相等,但当传输中进行编码操作时,实体主体的内容发生变化,导致它和报文主体产生差异

    内容编码是应用在实体主体的编码格式,目的是压缩实体信息,被压缩的实体信息由客户端接收并解码。常用的编码有 gzip,compress,deflate,identity(不编码)。

    浏览器的主要构成

    浏览器的渲染进程中,包括JS引擎、事件触发、定时触发器、异步http请求、GUI渲染等线程。主要负责页面渲染,脚本执行,事件处理等。

    GUI渲染线程:

    负责渲染浏览器界面,解析 HTML,CSS,构建 DOM 树和 RenderObject 树,布局和绘制等。

    当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。

    注意,GUI 渲染线程与 JS 引擎线程是互斥的,当 JS 引擎执行时 GUI 线程会被挂起(相当于被冻结了),GUI 更新会被保存在一个队列中等到 JS 引擎空闲时立即被执行。

    JS 引擎线程:

    Javascript 引擎,也称为 JS 内核,负责处理 Javascript 脚本程序。(例如 V8 引擎)

    JS 引擎线程负责解析 Javascript 脚本,运行代码。

    JS 引擎一直等待着任务队列中任务的到来,然后加以处理,一个 Tab 页(renderer 进程)中无论什么时候都只有一个 JS 线程在运行 JS 程序。

    注意,GUI 渲染线程与 JS 引擎线程是互斥的,所以如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞。

    事件触发线程:

    归属于浏览器来控制事件循环eventloop,而不是 JS 引擎(可以理解,JS 引擎自己都忙不过来,需要浏览器另开线程协助)

    当 JS 引擎执行代码块如 setTimeOut 时(也可来自浏览器内核的其他线程,如鼠标点击、AJAX 异步请求等),会将对应任务添加到事件线程中。

    当对应的事件符合触发条件被触发时,该线程会把事件添加到待处理队列的队尾,等待 JS 引擎的处理。

    注意,由于 JS 的单线程关系,所以这些待处理队列中的事件都得排队等待 JS 引擎处理(当 JS 引擎空闲时才会去执行)

    定时触发器线程:

    传说中的 setInterval 与 setTimeout 所在线程;

    浏览器定时计数器并不是由 JavaScript 引擎计数的,(因为 JavaScript 引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确);

    因此通过单独线程来计时并触发定时(计时完毕后,添加到事件队列中,等待 JS 引擎空闲后执行)

    注意,W3C 在 HTML 标准中规定,规定要求 setTimeout 中低于 4ms 的时间间隔算为 4ms

    异步 http 请求线程:

    在 XMLHttpRequest 在连接后是通过浏览器新开一个线程请求。

    将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件队列中。再由 JavaScript 引擎执行。

    浏览器相应服务器后的渲染进程

    浏览器渲染流程

    下载HTML,解析 HTML 文件,构建 DOM 树,同时浏览器主进程负责下载 CSS 文件

    CSS 文件下载完成,解析 CSS 文件成树形的数据结构,然后结合 DOM 树合并成 RenderObject 树

    布局 RenderObject 树 (Layout/reflow),负责 RenderObject 树中的元素的尺寸,位置等计算

    绘制 RenderObject 树 (paint),绘制页面的像素信息

    浏览器主进程将默认的图层和复合图层交给 GPU 进程,GPU 进程再将各个图层合成(composite),最后显示出页面

    引用链接:

    https://juejin.im/post/5e143104e51d45414a4715f7

    https://blog.csdn.net/fightHHA/article/details/81939732

    相关文章

      网友评论

          本文标题:【http】浏览器如何处理服务器的响应

          本文链接:https://www.haomeiwen.com/subject/taadoctx.html