浏览器工作原理与实践
李兵
前盛大创新院高级研究员
立即订阅
6167 人已学习
课程目录
已完结 42 讲
0/4登录后,你可以任选4讲全文学习。
开篇词 (1讲)
开篇词 | 参透了浏览器的工作原理,你就能解决80%的前端难题
免费
宏观视角下的浏览器 (6讲)
01 | Chrome架构:仅仅打开了1个页面,为什么有4个进程?
02 | TCP协议:如何保证页面文件能被完整送达浏览器?
03 | HTTP请求流程:为什么很多站点第二次打开速度会很快?
04 | 导航流程:从输入URL到页面展示,这中间发生了什么?
05 | 渲染流程(上):HTML、CSS和JavaScript,是如何变成页面的?
06 | 渲染流程(下):HTML、CSS和JavaScript,是如何变成页面的?
浏览器中的JavaScript执行机制 (5讲)
07 | 变量提升:JavaScript代码是按顺序执行的吗?
08 | 调用栈:为什么JavaScript代码会出现栈溢出?
09 | 块级作用域:var缺陷以及为什么要引入let和const?
10 | 作用域链和闭包 :代码中出现相同的变量,JavaScript引擎是如何选择的?
11 | this:从JavaScript执行上下文的视角讲清楚this
V8工作原理 (3讲)
12 | 栈空间和堆空间:数据是如何存储的?
13 | 垃圾回收:垃圾数据是如何自动回收的?
14 | 编译器和解释器:V8是如何执行一段JavaScript代码的?
浏览器中的页面循环系统 (6讲)
15 | 消息队列和事件循环:页面是怎么“活”起来的?
16 | WebAPI:setTimeout是如何实现的?
17 | WebAPI:XMLHttpRequest是怎么实现的?
18 | 宏任务和微任务:不是所有任务都是一个待遇
19 | Promise:使用Promise,告别回调函数
20 | async/await:使用同步的方式去写异步代码
浏览器中的页面 (8讲)
21 | Chrome开发者工具:利用网络面板做性能分析
22 | DOM树:JavaScript是如何影响DOM树构建的?
23 | 渲染流水线:CSS如何影响首次加载时的白屏时间?
24 | 分层和合成机制:为什么CSS动画比JavaScript高效?
25 | 页面性能:如何系统地优化页面?
26 | 虚拟DOM:虚拟DOM和实际的DOM有何不同?
27 | 渐进式网页应用(PWA):它究竟解决了Web应用的哪些问题?
28 | WebComponent:像搭积木一样构建Web应用
浏览器中的网络 (3讲)
29 | HTTP/1:HTTP性能优化
30|HTTP/2:如何提升网络速度?
31|HTTP/3:甩掉TCP、TLS 的包袱,构建高效网络
浏览器安全 (5讲)
32 | 同源策略:为什么XMLHttpRequest不能跨域请求资源?
33 | 跨站脚本攻击(XSS):为什么Cookie中有HttpOnly属性?
34 | CSRF攻击:陌生链接不要随便点
35 | 安全沙箱:页面和系统之间的隔离墙
36 | HTTPS:让数据传输更安全
结束语 (1讲)
结束语 | 大道至简
课外加餐 (4讲)
加餐一|浏览上下文组:如何计算Chrome中渲染进程的个数?
加餐二|任务调度:有了setTimeOut,为什么还要使用rAF?
加餐三|加载阶段性能:使用Audits来优化Web性能
加餐四|页面性能工具:如何使用Performance?
浏览器工作原理与实践
登录|注册

02 | TCP协议:如何保证页面文件能被完整送达浏览器?

李兵 2019-08-08
在衡量 Web 页面性能的时候有一个重要的指标叫“FP(First Paint)”,是指从页面加载到首次开始绘制的时长。这个指标直接影响了用户的跳出率,更快的页面响应意味着更多的 PV、更高的参与度,以及更高的转化率。那什么影响 FP 指标呢?其中一个重要的因素是网络加载速度
要想优化 Web 页面的加载速度,你需要对网络有充分的了解。而理解网络的关键是要对网络协议有深刻的认识,不管你是使用 HTTP,还是使用 WebSocket,它们都是基于 TCP/IP 的,如果你对这些原理有足够了解,也就清楚如何去优化 Web 性能,或者能更轻松地定位 Web 问题了。此外,TCP/IP 的设计思想还有助于拓宽你的知识边界,从而在整体上提升你对项目的理解和解决问题的能力。
因此,在这篇文章中,我会给你重点介绍在 Web 世界中的 TCP/IP 是如何工作的。当然,协议并不是本专栏的重点,这篇文章我会从我的角度结合 HTTP 来分析网络请求的核心路径,如果你想对网络协议有更深入的理解,那我推荐你学习刘超老师的《趣谈网络协议》专栏,以及陶辉老师的《Web 协议详解与抓包实战》视频课程。
好,接下来我们回到正题,开始今天的内容。在网络中,一个文件通常会被拆分为很多数据包来进行传输,而数据包在传输过程中又有很大概率丢失或者出错。那么如何保证页面文件能被完整地送达浏览器呢?
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《浏览器工作原理与实践》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(44)

  • 来去之间
    HTTP协议和TCP协议都是TCP/IP协议簇的子集。

    HTTP协议属于应用层,TCP协议属于传输层,HTTP协议位于TCP协议的上层。

    请求方要发送的数据包,在应用层加上HTTP头以后会交给传输层的TCP协议处理,应答方接收到的数据包,在传输层拆掉TCP头以后交给应用层的HTTP协议处理。建立 TCP 连接后会顺序收发数据,请求方和应答方都必须依据 HTTP 规范构建和解析HTTP报文。

    作者回复: 赞

    2019-08-08
    2
    63
  • sheldon
    现在的浏览器可以同时打开多个页签,他们端口一样吗?如果一样,数据怎么知道去哪个页签?

    作者回复: 端口一样的,网络进程知道每个tcp链接所对应的标签是那个,所以接收到数据后,会把数据分发给对应的渲染进程

    2019-08-09
    3
    24
  • 高斯定律
    这个tcp讲的非常清晰 一次就听明白了、tcp是个梯子,http就是利用梯子来搬运货物

    作者回复: 有点形象

    2019-08-08
    1
    14
  • 美美
    tcp传送数据时 浏览器端就做渲染处理了么?如果前面数据包丢了 后面数据包先来是要等么?类似的那种实时渲染怎么处理?针对数据包的顺序性?

    作者回复: 接收到http响应头中的content-type类型时就开始准备渲染进程了,

    响应体数据一旦接受到便开始做DOM解析了!

    基于http不用担心数据包丢失的问题,因为丢包和重传都是在tcp层解决的。http能保证数据按照顺序接收的!

    2019-08-08
    2
    11
  • Cris
    http 和 websocket都是属于应用层的协议吗?

    作者回复: 是的,他们都是应用层协议,而且websocket名字取的比较有迷惑性,其实和socket完全不一样,你可以把websocket看出是http的改造版本,增加了服务器向客户端主动发送消息的能力。

    2019-08-09
    9
  • 黄紫茜
    我想问下,输入url回车后理论上是不是生成http请求报文,然后传给TCP,加上TCP首部,然后进行三次握手,将http请求报文数据传递,四次挥手,请求报文到达服务端,然后服务端在返回响应报文,返回到过程也是要三次握手,传递数据,四次挥手?因为网上看到不少文章都说先三次握手,然后发起http请求。

    作者回复:

    先通过三次握手建立tcp链接,链接建立好之后,发送http请求行和http请求头给服务器,然后服务器返回响应行,响应头和响应体,最终完成后通过四次挥手断开tcp链接!

    2019-08-22
    7
  • 阿桐
    文章前面从网络层引到传输层,再从 udp 过渡到 tcp,语言通俗易懂,图示也很清晰,看的意犹未尽。相比之下,后面的 【一个 tcp 连接的生命周期】老师用的笔墨就少了点,其实还是蛮期待老师能对这块有更为细致的讲解。

    作者回复: 嗯,tcp细节要讲就多了,这块我只是介绍了tcp的一个大的建立连接,传输数据,断开链接的过程。 理解这个过程是理解http的基础。展开来讲的话需要一节内容了,这块极客时间上有很多老师都讲的不错。

    2019-08-22
    3
  • レイン小雨
    想问一下老师,关于 "数据在传输的过程中有可能会丢失或者出错",丢失的数据包去哪里了?凭空消失了吗?出错的数据包又变成啥了? 为什么会出错?

    作者回复: 比如网络波动,物理线路故障,设备故障,恶意程序拦截,网络阻塞等等

    2019-08-11
    4
    3
  • 小洋洋
    1、IP 负责把数据包送达目的主机。
    2、UDP 负责把数据包送达具体应用。
    3、而 TCP 保证了数据完整地传输,它的连接可分为三个阶段:建立连接、传输数据和断开连接。

    老师,这里面第二条,UDP和TCP都是把数据包送达具体应用应用的吧?

    作者回复: 对的,只不过udp有可能会丢包,而tcp采用了很多复杂的机制,保证了数据的完整性

    2019-08-10
    3
  • sam
    这篇文章可以当作平时购物的流程就很清晰的理解:
    数据包: 我们可以理解为我们买的东西;
    TCP/UDP头:买卖人电话、姓名等;
    IP头:买卖双方地址;

    TCP和UDP不同点在于,TCP会把购买的物品直接送到购买人手中,而UDP可能只是送到蜂巢如此之类的。

    不过我有个疑问,三次握手的过程当中是否也是需要走三次传输流程?

    作者回复: 对的

    2019-08-21
    1
    2
  • hogg
    我记得在网络工程里有一句话,下层为上层提供服务,TCP为HTTP提供差错校验,超时重传的机制吧.

    作者回复: 下层为上层提供服务,这句很到位

    2019-08-08
    1
    2
  • Cris
    Tcp/udp通过端口号把数据包发送给指定的程序,这里的端口号和http协议默认端口号80(Https默认端口号443)是一个意思吗?

    作者回复: 是的。80,443就是端口号

    2019-09-02
    1
  • Cris
    老师,tcp和udp都是传输层协议,这两个是同时存在还是只能选其一,我看了这期感觉是选其一?

    作者回复: 二选一

    2019-09-02
    1
  • 疯狂咸鱼
    老师,那我打开谷歌浏览器里面开了10个页面,那就是至少有40个进程?windows下我控制面板里能看到40个google.exe?插件进程页面间能公用么

    作者回复: 不用这么多啊,浏览器进程 网络进程,GPU进程都是共同的,你打开十个页面一般也就十几个进程。

    2019-08-26
    1
  • レイン小雨
    http协议是应用层的协议,是最上层的网络协议,tcp/udp是两种位于传输层的协议。http协议位于tcp/upd上层。
    2019-08-11
    1
  • pyhhou
    请教老师一下,TCP/IP 建立连接和断开连接要经历三次握手和四次挥手,那么 TCP 和 HTTP 建立连接和断开连接是不是也要经历这么一个过程,还是说另有别的考虑?

    作者回复: 这个你可以看看03 | http请求流程,这篇文章有详细介绍

    2019-08-09
    1
  • filter
    IP用来寻址,寻找到对应计算机的地址
    UDP通过端口号来寻找对应的处理程序
    TCP引入了重传机制和数据排序机制来保障文件的完整性
    2019-11-22
  • 小甜瓜
    http是大范围的传输,tcp是包括头文件的具体的传输数据
    2019-11-12
  • arronK
    TCP属于传输层协议,只负责把包给到对应程序。HTTP属于应用层协议,决定了对包的数据内容如何理解。
    比如你发一封用英文写的纸质邮件给你的朋友,给顺风快递,那顺风快递就可以看做是TCP,快递给到朋友了手上了,他拿出来得用英文才能理解,那英文也就可以看做HTTP协议。

    是这么回事么?
    2019-11-05
  • 越努力越幸运
    请问一下老师,udp对于大数据传输也是分割成很多小的数据包进行传输的嘛?如果是的,那么它丢包了之后,怎么进行重组排序来保证数据包的顺序的?
    2019-11-04
收起评论
44
返回
顶部