输入 URL 到页面渲染的整个流程
1.DNS解析，通过域名查询到具体的 IP
2.TCP三次握手（客户端向服务端发送连接请求报文段。服务端收到连接请求报文段后，如果同意连接，则会发送一个应答。当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。）
向这个 IP 的机器发送 HTTP 请求
服务器收到、处理并返回 HTTP 请求
3.TLS握手
4.浏览器开始解析文件
5.构建 DOM 树、构建 CSSOM 树、解析JS
6.生成 Render 树，确定页面元素的布局、样式
7.页面渲染，将内容显示在屏幕上
DNS解析
DNS 的作用就是通过域名查询到具体的 IP。
因为 IP 存在数字和英文的组合（IPv6），很不利于人类记忆，所以就出现了域名。你可以把域名看成是某个 IP 的别名，DNS 就是去查询这个别名的真正名称是什么。
在 TCP 握手之前就已经进行了 DNS 查询，这个查询是操作系统自己做的。当你在浏览器中想访问www.google.com时，会进行一下操作：
- 操作系统会首先在本地缓存中查询 IP
- 没有的话会去系统配置的 DNS 服务器中查询
- 如果这时候还没得话，会直接去 DNS 根服务器查询，这一步查询会找出负责com这个一级域名的服务器
- 然后去该服务器查询google这个二级域名
- 接下来三级域名的查询其实是我们配置的，你可以给www这个域名配置一个 IP，然后还可以给别的三级域名配置一个 IP
以上介绍的是 DNS 迭代查询，还有种是递归查询，区别就是前者是由客户端去做请求，后者是由系统配置的 DNS 服务器做请求，得到结果后将数据返回给客户端。
TCP握手 1 物理层 -> 2 数据链路层 -> 3 网络层(IP)-> 4 传输层(TCP) -> 5 应用层(Http)
接下来是 TCP 握手，应用层会下发数据给传输层，这里 TCP 协议会指明两端的端口号，然后下发给网络层。网络层中的 IP 协议会确定 IP 地址，并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中，最后就是物理层面的传输了。
当 TCP 握手结束后就会进行 TLS 握手，然后就开始正式的传输数据。
TLS握手
数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将请求合理的分发到多台服务器上，这时假设服务端会响应一个 HTML 文件。
首先浏览器会判断状态码是什么，如果是 200 那就继续解析，如果 400 或 500 的话就会报错，如果 300 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错。
浏览器开始解析文件
浏览器开始解析文件，如果是 gzip 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件。
构建 DOM 树、构建 CSSOM 树、解析JS
文件解码成功后会正式开始渲染流程，先会根据 HTML 构建 DOM 树，有 CSS 的话会去构建 CSSOM 树。如果遇到 script 标签的话，会判断是否存在 async 或者 defer ，前者会并行进行下载并执行 JS，后者会先下载文件，然后等待 HTML 解析完成后顺序执行。
如果以上都没有，就会阻塞住渲染流程直到 JS 执行完毕。遇到文件下载的会去下载文件，这里如果使用 HTTP/2 协议的话会极大的提高多图的下载效率。
生成 Render 树
CSSOM 树和 DOM 树构建完成后会开始生成 Render 树，这一步就是确定页面元素的布局、样式等等诸多方面的东西
调用 GPU 绘制，合成图层，将内容显示在屏幕上了
在生成 Render 树的过程中，浏览器就开始调用 GPU 绘制，合成图层，将内容显示在屏幕上了。
页面的加载和渲染过程
- 浏览器通过HTTP协议请求服务器，获取HMTL文档并开始从上到下解析，构建DOM；
- 在构建DOM过程中，如果遇到外联的样式声明和脚本声明，则暂停文档解析，创建新的网络连接，并开始下载样式文件和脚本文件；
- 样式文件下载完成后，构建CSSDOM；脚本文件下载完成后，解释并执行，然后继续解析文档构建DOM；
- 完成文档解析后，将DOM和CSSDOM进行关联和映射，最后将视图渲染到浏览器窗口 。
在这个过程中，脚本文件的下载和执行是与文档解析同步进行，它会阻塞文档的解析。
<script src="script.js"></script> 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 <script async src="script.js"></script> 有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。 <script defer src="myscript.js"></script> 有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
输入 URL 到页面渲染的整个流程相关推荐
- 浏览器 重定向次数限制_在浏览器输入URL到页面渲染的整个流程是如何的？都有哪些步骤？...
问题:输入 URL 到页面渲染的整个流程 DNS解析 TCP握手 TLS握手 浏览器开始解析文件 构建 DOM 树.构建 CSSOM 树.解析JS 生成 Render 树 调用 GPU 绘制,合成图层 ...
- 浏览器从输入URL到页面渲染过程 ——页面渲染流程
之前我有总结过一篇经典面试题:浏览器从输入URL到页面渲染过程 ,接下里我将对某些知识点进行更细致的解析. 浏览器从输入URL到页面渲染过程 系列文章: (一):浏览器从输入URL到页面渲染过程 -- ...
- 浏览器从输入URL到页面渲染过程 —— 浏览器的进程与线程
之前我有总结过一篇经典面试题:浏览器从输入URL到页面渲染过程,接下里我将对某些知识点进行更细致的解析. 浏览器从输入URL到页面渲染过程 系列文章: (二):浏览器从输入URL到页面渲染过程 --页 ...
- 一文通透从输入URL到页面渲染的全过程----高频面试
一文通透从输入URL到页面渲染的全过程----高频面试 喜欢大海 喜欢夕阳 写下便是永恒 文章目录 一文通透从输入URL到页面渲染的全过程----高频面试 重温 进程与线程 什么是进程 什么是线程 进 ...
- url上接收到 el表达式 不渲染_一文摸透从输入URL到页面渲染的过程
一文摸透从输入URL到页面渲染的过程 从输入URL到页面渲染需要Chrome浏览器的多个进程配合,所以我们先来谈谈现阶段Chrome浏览器的多进程架构. 一.Chrome架构 目前Chrome采用的是 ...
- 从输入url到页面渲染完成经历的那些事~
网络部分 1. DNS域名解析 第一个过程:将域名解析为对应的IP地址. 查找流程:浏览器缓存 -> 系统缓存 -> 系统hosts文件 -> 路由器缓存 -> 本地DNS服务 ...
- 【WEB】从输入URL到页面渲染完成
一.整个流程 1.当打开一个空白标签页时,浏览器主线程接管,会新创建一个Renderer进程,输入URL按回车,浏览器会开辟一个网络请求线程用于网络请求. 2.进行DNS域名解析,IP寻址(解析.迭代 ...
- 从输入URL到页面渲染完成 -戈多编程
1.输入URL地址 2.浏览器根据域名查询IP地址 3.浏览器发送HTTP请求到web服务器 4.服务器返回一个永久重定向响应 5.浏览器会跟踪重定向地址 6.服务器处理请求 7.服务器返回一个HTM ...
- 从在浏览器中输入URL到页面渲染出来的完整过程是怎样的？
从宏观上看,主要包括以下几个步骤:域名解析.建立连接.发送请求.响应数据.关闭连接.下面以在Chrome浏览器中输入https://yq.aliyun.com/articles/580962为例,讨论 ...
最新文章
- 备份MySQL数据库
- what you should do if you want to exercise?
- android 获取ListView内部Item高度
- eclipsenbsp;mavennbsp;pluginamp;n…
- Ubuntu执行脚本报错-bash: ./send.py: /usr/bin/python: bad interpreter: Permission denied
- JAVA集合Collection与泛型＜T＞→List、ArrayList、LinkedList、→Set、HashSet、hashCode()→Map、HashMap、→Properties
- php解析.krc,krc歌词文件解析
- FreebuF黑客专访系列之吴翰清（刺）：接下来几年，有两样东西必定会火
- ajax不执行回调函数的原因
- 最新版MATLAB怎么运行代码,matlab怎么运行代码
- 3GPP Release和Category简介
- 事件分发（EventDispatcher）模式
- 颜色选择器---Kodu少儿编程第九天
- JUC-BlockingQueue二
- 《Java Web程序设计基础教程》简介
- YOLOV3网络结构搭建
- 15、TWS API和IB中的期权相关的操作
- 【imessage苹果群发苹果推】软件安装应用程序/框架/ gcdwebservers
- 麒麟系统开发笔记（一）：国产麒麟系统搭建开发环境之虚拟机安装
- unity3d游戏开发之 游戏贴图、模型基本规范（QA）
热门文章
- 单细胞分析之质控（四）
- Eclipse打包出现错误:XXX is not translated in af (Afrikaans), am (Amharic), ar (Arabic).....
- MFC绘图小实验(1)
- java+birt+实例_BIRT简单实例
- 蒋欣代言国民好燕麦品牌西麦，携手麦出欣姿态
- 百度智能云扩列：新生态下的“正和游戏”
- 大神驾到 | 腾讯光子大牛的 Cocos Creator 网络通用框架（强势围观）
- 思科模拟器的了解和使用
- do sb suggest to_suggest sb to do和suggest doing有什么区别吗
- 如何在3ds max中创建可用于真人场景的巨型机器人：第 5 部分