浏览器工作原理与实践
李兵
前盛大创新院高级研究员
立即订阅
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?
浏览器工作原理与实践
登录|注册

03 | HTTP请求流程:为什么很多站点第二次打开速度会很快?

李兵 2019-08-10
上一篇文章中我介绍了 TCP 协议是如何保证数据完整传输的,相信你还记得,一个 TCP 连接过程包括了建立连接、传输数据和断开连接三个阶段。
而 HTTP 协议,正是建立在 TCP 连接基础之上的。HTTP 是一种允许浏览器向服务器获取资源的协议,是 Web 的基础,通常由浏览器发起请求,用来获取不同类型的文件,例如 HTML 文件、CSS 文件、JavaScript 文件、图片、视频等。此外,HTTP 也是浏览器使用最广的协议,所以要想学好浏览器,就要先深入了解 HTTP。
不知道你是否有过下面这些疑问:
为什么通常在第一次访问一个站点时,打开速度很慢,当再次访问这个站点时,速度就很快了?
当登录过一个网站之后,下次再访问该站点,就已经处于登录状态了,这是怎么做到的呢?
这一切的秘密都隐藏在 HTTP 的请求过程中。所以,在今天这篇文章中,我将通过分析一个 HTTP 请求过程中每一步的状态来带你了解完整的 HTTP 请求过程,希望你看完这篇文章后,能够对 HTTP 协议有个全新的认识。

浏览器端发起 HTTP 请求流程

如果你在浏览器地址栏里键入极客时间网站的地址:http://time.geekbang.org/index.html, 那么接下来,浏览器会完成哪些动作呢?下面我们就一步一步详细“追踪”下。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《浏览器工作原理与实践》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(87)

  • 一步
    对于浏览器缓存地方的选择一直搞不明白其中的原理,在浏览器中访问的时候打开network面板,发现缓存的来源有的from disk有的是from memory。对于资源什么情况下缓存到硬盘什么时候缓存到内存,想请教一下老师

    作者回复: 这是浏览器的三级缓存机制,使用memory cache比disk cache 的访问速度要快,但是具体什么规则等我回头看下源码再来回答你了。

    还有另外一种cache,是service worker的cache。

    2019-08-10
    13
    28
  • mfist
    1 首先猜测最可能的出问题的地方,网络传输丢包比较严重,需要不断重传。然后通过ping curl看看对应的时延高不高。
    2 然后通过wireshake看看具体哪里出了问题。
    3 假如别人访问很快,自己电脑很慢,就要看看自己客户端是否有问题了。

    感觉平常碰到很多http问题,基本都能通过上面方式搞定

    作者回复: 👍

    2019-08-10
    26
  • 宇宙全栈
    老师好,请教下TCP连接如何断开的问题:
    1、没有 keep-alive 时,http数据传输完成后,是由浏览器主动发起断开TCP连接,还是由服务器主动发起断开 TCP 连接?
    2、设置了 keep-alive 时,当关闭页面时,浏览器会发起断开 TCP 连接吗?如果不关闭页面,浏览器会一直保持这个 TCP 连接吗?
    3、设置了 keep-alive 时,如果浏览器出现故障时了(挂掉了),此时服务器保持的 TCP 连接多久会释放?
    2019-08-16
    13
  • Hurry
    使用 chrome network 面板,看那个 瀑布图 中每个阶段的含义,就可以判断问题出现在那个方向了,每个阶段的含义,https://developers.google.com/web/tools/chrome-devtools/network/reference#timing-explanation 举个例子 Content Download 如果太长,很有可能是下载的资源太大,但也有可能是网络慢导致的下载太慢,简单计算一下,在例如 Waiting (TTFB) 这个太长的话,有可能是网络慢,或者就是 后端处理时间过长导致的,至少可以排查掉前端原因,还有很多,例如 DNS lookup 等,但是最终要确认具体哪里慢,最好是结合系统日志去分析

    作者回复: 结合网络模块来分析,总结的挺好

    2019-08-13
    2
    13
  • 小美
    set cookie 会不会有安全问题,麻烦老师指导下

    作者回复: cookie是不安全的,比如黑客可以通过一些手段插入一些脚本到你的页面里面(具体一些途径我们浏览器安全篇再讲),通过脚本获取到你的cookie数据,然后就可以利用cookie做一些坏事了。

    当然也有一些方法规避,常用的一个是将部分cookie设置成httponly的属性,设置了httponly属性后cookie,就无法通过js脚本来读取了,只是在发送http请求时候会被带上!

    当然还有一些其他防范的方法,这个同样咱们后面在聊!

    2019-08-12
    1
    12
  • XWL
    浏览器刷新操作,ctrl+F5和F5有什么区别

    作者回复: 一个是强制刷新,也就是资源都走网络。

    一个是正常处理流程。

    比如通过网络面板,打开一个站点,再使用强制刷新,可以看到如下信息
    176 requests
    3.1 MB transferred
    3.5 MB resources
    Finish: 26.30 s
    DOMContentLoaded: 5.04 s
    Load: 14.88 s

    如果使用正常的刷新,看到的信息如下:
    171 requests
    419 KB transferred
    3.2 MB resources
    Finish: 25.09 s
    DOMContentLoaded: 1.41 s
    Load: 6.24 s

    其中的transferred是真正的网络传输的数据,使用强制刷新,传输的数据体积就大多了,而且请求时间也变得更长了。

    2019-08-12
    1
    10
  • 月隐千山
    老师,在做前端页面的时候,是否可以设置当前页面是否可以被缓存,以及哪些部分可以被缓存?还是说整个缓存机制都是由浏览器自己控制的?

    作者回复: 是没有办法通过前端代码来控制缓存的,缓存是后端或者部署的同学来控制的,但是前端同学应该知道那些内容要被缓存,和后端或者部署的同学配合来打!

    2019-08-10
    4
    9
  • liu_xm
    同域名只能建立6个tcp链接的话,那加载大量图片或者其他资源的时候不是很卡呢?

    作者回复: 是的,通常如图片这种静态资源都是直接配置到cdn上的

    2019-08-10
    6
    8
  • nissan
    请问老师,使用者的资讯(如UID=3431uad)是放在cookie还是localstorage中好呢?我的理解是存不存cookie是后端决定(要求set-cookie)存localstorage是前端程式控制的。是这样吗?

    作者回复: 是否要使用localstorage,还是要看具体应用场景。其实使用cookie会很方便,因为它会随着http请求头把cookie内容发送服务器,用localstorage需要重新实现数据上传和下载。

    2019-08-10
    6
  • sprinty
    老是你好,有个疑问:在我理解中的 TCP 连接需要四元组(client ip, client port, server ip, server port)保证连接的唯一性,那浏览器是怎么对同一服务器(server ip, server port 不变)创建多个 TCP 连接的?

    浏览器只有一个网络进程且 client ip 不变,是不是在创建连接的时候,会监听多个 client port 以保证4元组的唯一?
    2019-08-29
    2
    5
  • houqx
    问一个今天遇到的跟本篇文章没有太大关系的问题:
    问题描述:前端有一按钮,点击可以签到(比如调用的接口名为doSign),签到成功后置灰,不能再点击。但是看服务端日志存在同一时间同一用户该接口的多次调用(通常为3次,间隔10ms以内)。
    我想问的问题是:
    1:这里的重复调用是哪里引入的(用户手抖多次点击?)
    2:浏览器在发出一个网络请求后,当这个请求还没返回的时候,会再重复发起相同的请求吗?(用户快速点击)

    作者回复: 用户快速点击也有可能的,通常,前端要处理防止多次点击的情况。

    2019-08-23
    2
    5
  • 行云流水
    1.按照老师说的,至少在浏览器中 http是在 tcp的传输阶段。不是每一层独立完成后交给下一层。OSI七层模型只是一个参考,浏览器只是参考OSI模型实现,不一定遵守OSI的层级关系?
    2. 上一节有一个同学提问说的,针对数据包实时渲染问题。老师说在TCP层就解决了丢包和顺序问题。但现在HTTP是在TCP层的传输层中使用。不明白怎么解决丢包和顺序问题?
    2019-08-22
    1
    5
  • aaron
    老师,请问https为什么能防止网络劫持?

    作者回复: http在传输过程中是明文的,所以数据在传输过程中是能够被截获或者修改的,比如谁在你电脑上安装了一个网络拦截软件,或者你的路由器被谁安装了监听软件,甚至在网络服务提供商都有可能修改你页面的内容,基于这些原因,我们需要在传输过程中加密数据,这就是https出现的原因,即便你拦截到了请求,获取的只是加密后的数据,拿到也没有什么用。

    这块在浏览器安全篇会系统介绍。

    2019-08-10
    1
    5
  • sunshineling
    老师,你说chrome一次最多只能建立6个tcp连接,有点不理解,这是说只能支持6个用户并发吗?

    作者回复: 是同一个域名下面,同一时间只能有6个并发请求,超过六个以上的需要排队!

    2019-08-12
    1
    4
  • houqx
    不接CDN与接入CDN,DNS解析过程一样吗? 知道 A记录与cname,但是这里串不起来,还希望老师讲解一下
    2019-08-23
    3
  • Louis
    请问老师http的keep alive和http2中的信道服用有什么区别呢

    作者回复: 一个http中的keep-alive是排队请求,也就是一个http请求完成之后才能继续请求下一个,而http2中请求是并发的,可以同时处理很多请求!

    2019-08-13
    3
  • 奋斗达人
    感觉更面向初学者,写的很浅出,不是很深入。但还是学到了不少新的知识:)
    1.Chrome针对每个域名只允许同时6个请求,多出的需要排队
    2.浏览器的缓存查找流程,什么时候是200,什么是304,如何更新Age
    2019-08-20
    1
    2
  • 张舵主

    老师您好,我有2个问题:1,浏览器缓存DNS的解析结果,这个缓存是缓存到浏览器进程中吗?是不是浏览器关闭后浏览器的这个DNS的缓存也一起清除了?2,浏览器打开某个站点页面后,这个页面里面还有很多的域名需要解析例如一些图片的链接,这些解析结果都会缓存吗?

    作者回复: 第一个问题:dns缓存是保存浏览器本地的,下次启动依然有结果!

    第二个问题:图片和其他域名都一样的,都会缓存的

    2019-08-13
    2
  • peter
    请问:请求行和请求头是发送两次吗? 从文章的文字来看,是发送两次。 但我感觉是发送一次,即发送一次请求,该请求包含请求行和请求头。

    作者回复: 对,只发送一次。

    问下文章什么地方让你感觉是发送了两次啊?

    我检查下。

    2019-08-12
    9
    2
  • CMS
    Chrome 有个机制,同一个域名同时最多只能建立 6 个 TCP 连接,如果在同一个域名下同时有 10 个请求发生,那么其中 4 个请求会进入排队等待状态,直至进行中的请求完成。 是指同一个域名下的6个并发请求么。我理解建立一个tcp连接,可以处理多个请求吧?
    这一块蒙了,看好多人问这个

    作者回复: http/1.1 一个tcp同时只能处理一个请求,浏览器会为每个域名维护6个tcp连接!

    但是每个tcp连接是可以复用的,也就是处理完一个请求之后,不断开这个tcp连接,可以用来处理下个http请求!

    不过http2是可以并行请求资源的,所以如果使用http2,浏览器只会为每个域名维护一个tcp连接

    2019-11-07
    1
    1
收起评论
87
返回
顶部