十五张图带你彻底搞懂从URL到页面展示发生的故事

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"关注公众号“"},{"type":"text","marks":[{"type":"strong"}],"text":"执鸢者"},{"type":"text","text":"”，获取大量教学视频并进入"},{"type":"text","marks":[{"type":"strong"}],"text":"专业交流群"},{"type":"text","text":"。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/9a/9a3d2734b53d10fd2fd73b6e994d989d.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"某一天小林去面试，面试官说问你一道经典面试题吧，从“"},{"type":"text","marks":[{"type":"strong"}],"text":"输入一个URL到页面展示中间发生了什么？"},{"type":"text","text":"”，小林一听激动了，心里暗自高兴说这道题我背过呀，然后哗啦哗啦开启了背书模式。背完之后面试官不是很满意，思路并不是很清晰呀！！！（纯属个人杜撰的小故事，切勿当真。）"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面就让我们来唠一唠这个小问题，有不准确的地方还望各位大佬指正。对于这个问题将从"},{"type":"text","marks":[{"type":"strong"}],"text":"浏览器包含的进程"},{"type":"text","text":"着手，然后用用一张图来展示"},{"type":"text","marks":[{"type":"strong"}],"text":"整体流程"},{"type":"text","text":"，最后分别从"},{"type":"text","marks":[{"type":"strong"}],"text":"导航阶段"},{"type":"text","text":"和*"},{"type":"text","marks":[{"type":"italic"}],"text":"渲染阶段"},{"type":"text","text":"*两个方面详细阐述从输入一个URL到页面展示中间发生的过程。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"一、浏览器进程"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在聊上述话题之前要意识到目前浏览器处在多进程时代，包含"},{"type":"text","marks":[{"type":"strong"}],"text":"浏览器进程、渲染进程、GPU进程、网络进程、插件进程"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/44/44387884a0c31c047befc9968a9301f4.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"二、整体流程"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用一张图来表示整个流程，整个流程包含"},{"type":"text","marks":[{"type":"strong"}],"text":"导航阶段"},{"type":"text","text":"和*"},{"type":"text","marks":[{"type":"italic"}],"text":"渲染阶段"},{"type":"text","text":"*两大部分，其中每个具体细节所需要的进程如下图所示。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d8/d8d1ad3f9dbc87d2c69b6947e96d8c29.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"三、导航阶段"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"导航阶段主要包含"},{"type":"text","marks":[{"type":"strong"}],"text":"用户输入、URL请求、准备渲染进程、提交文档"},{"type":"text","text":"四个部分"}]}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3.1 用户输入"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f0/f07472007cdf1b41f1a0a180562ba43c.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3.2 URL请求过程"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/93/933bf3cc3c47d7d89fc435837e8578d9.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3.3 准备渲染进程"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c5/c5c701f5b9f28efc1b704d5dc977e270.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3.4 提交文档"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d0/d0b50f1caaccd5201f05eebc1341dbd2.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"四、渲染阶段"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当文档数据传输完成后将进入渲染阶段，渲染阶段主要包含"},{"type":"text","marks":[{"type":"strong"}],"text":"构建DOM树、样式计算、布局阶段、分层、图层绘制、分块、栅格化操作、合成和显示"},{"type":"text","text":"。其整个渲染阶段流程如下图所示。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/3a/3a149cee6c8d290765a25e1e3d148225.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.1 构建DOM树"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/8d/8dcb68ebd1a29ee77c07ecfec360dd1e.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.2 样式计算"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ee/eeff62c8a68b4e7c7318941e214447e2.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.3 布局阶段"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/14/1461ba1c4fc0f67e918c6a7c6f3314d9.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.4 分层"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/46/466938417edee4a039a3f957173422dd.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.5 图层绘制"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/44/445219307b318757cd9a547b5a9fc833.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.6 分块"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/cc/cc279709012845906cdcb83c25662fe5.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.7 栅格化操作"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/a6/a67b59be2b42cb019acd56d06044a52f.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.8 合成和显示"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e0/e01d4d72e790aa5ddee6a8f05e49be09.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"参考内容 "},{"type":"link","attrs":{"href":"https://time.geekbang.org/column/intro/100033601?utmsource=pinpaizhuanqu&utmmedium=geektime&utmcampaign=guanwang&utmterm=guanwang&utm_content=0511","title":""},"content":[{"type":"text","text":"浏览器工作原理与实践_李兵"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相关章节"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://mp.weixin.qq.com/s/GzPqSgna9Fwqal-5Oyg5EA","title":""},"content":[{"type":"text","text":"图解23种设计模式"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://mp.weixin.qq.com/s/DqWfz3YDQVBODZQizoiwww","title":""},"content":[{"type":"text","text":"40张图入门Linux"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"欢迎大家关注公众号(回复“操作系统”获取本节的思维导图,回复“书籍”获取大量前端学习资料,回复“前端视频”获取大量前端教学视频)"}]}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/9a/9a3d2734b53d10fd2fd73b6e994d989d.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}