从一个URL到页面渲染完成发生了什么？
- DNS解析：将域名地址解析为IP地址 （查找路线规则如下）
- 浏览器DNS缓存
- 系统DNS缓存
- 路由器DNS缓存
- 网络运营商DNS缓存
- 递归搜索： （例如：limobai.ag.com）
- .com域名下查找DNS解析
- .ag域名下查找DNS解析
- limobai域名下查找DNS解析
- 出错了
- 通过TCP建立连接：TCP三次握手
- 第一次握手，由浏览器发起，告诉服务器我要发送请求了
- 第二次握手，由服务器发起，告诉浏览器我准备好接收了，你赶紧发送吧
- 第三次握手，由浏览器发起，告诉服务器我要发送了，准备接收吧
- 浏览器向服务器发起请求
- 请求报文：http协议的通信内容
- 服务器响应请求
- 响应请求：回传数据报文
- 浏览器渲染页面
- 遇见HTML标记，浏览器调用HTML解析器，解析为token标记并构建dom树
- 遇见style/link标记，浏览器调用css解析器，处理css标记并构建cssom树
- 遇见script标记，浏览器调用JavaScript解析器，处理script代码（绑定事件，修改dom树/cssom树）
- 将dom树和cssom树合并成一颗渲染树
- 根据渲染树来计算布局，计算每个节点的几何信息（布局）
- 将各个节点的颜色渲染到屏幕上（渲染）
- 这几个阶段不一定按照顺序执行，如果dom树和cssom树被修改了，可能会多次执行布局和渲染，往往实际页面中，这些步骤都会执行多次
- 浏览器和服务器断开连接：TCP四次挥手
- 第一次挥手由浏览器发起，发送给服务器，我东西发送完了（请求报文），你准备关闭吧
- 第二次挥手由服务器发起，发送给浏览器，我东西接收完了（请求报文），我准备关闭了，你也准备吧
- 第三次挥手由服务器发起，发送给浏览器，我东西发送完了（响应报文），你准备关闭吧
- 第四次握手由浏览器发起，发送给服务器，我东西接收完了（响应报文），我准备关闭了，你也准备吧
为了便于理解，简单的分为5步
- 域名解析，根据域名找到服务器的IP地址
- 建立TCP连接，浏览器与服务器通过3次握手后建立连接
- 浏览器发起HTTP请求，获取想要的资源
- 服务器响应HTTP请求，返回指定的资源
- 浏览器渲染页面，解析收到的HTML、Css和JavaScript等文件
从一个URL到页面渲染完成发生了什么？相关推荐
- 深入浅出经典面试题：从浏览器中输入URL到页面加载发生了什么 - Part 3
备注: 因为文章太长,所以将它分为三部分,本文是第三部分. 第一部分:深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1 第二部分:深入浅出经典面试题:从浏览器中输入URL ...
- 从输入 url 到页面展示到底发生了什么
从输入 url 到页面展示到底发生了什么 查找缓存 DNS 域名解析 tcp 三次握手 tcp 四次挥手 html 渲染 查找缓存 检查浏览器缓存中有没有这个域名对应的解析过 ip 地址,如果缓存中有 ...
- 「高频面试题」浏览器从输入url到页面展示中间发生了什么
作者:Hanpeng_Chen 公众号:前端极客技术 文章首发个人博客:「高频面试题」浏览器从输入url到页面展示中间发生了什么 | 代码视界 "在浏览器中,从输入URL到页面展示,中间发生 ...
- 从输入URL到页面呈现中间发生了什么？
当我们在浏览器的地址栏中输入URL到页面渲染,中间具体发生了什么? 地址栏输入URL DNS解析 建立HTTP连接(3次握手) 浏览器渲染页面 断开连接 地址栏输入URL并解析 URL(Uniform ...
- 一文通透从输入URL到页面渲染的全过程----高频面试
一文通透从输入URL到页面渲染的全过程----高频面试 喜欢大海 喜欢夕阳 写下便是永恒 文章目录 一文通透从输入URL到页面渲染的全过程----高频面试 重温 进程与线程 什么是进程 什么是线程 进 ...
- url上接收到 el表达式 不渲染_一文摸透从输入URL到页面渲染的过程
一文摸透从输入URL到页面渲染的过程 从输入URL到页面渲染需要Chrome浏览器的多个进程配合,所以我们先来谈谈现阶段Chrome浏览器的多进程架构. 一.Chrome架构 目前Chrome采用的是 ...
- 浏览器从输入URL到页面渲染过程 ——页面渲染流程
之前我有总结过一篇经典面试题:浏览器从输入URL到页面渲染过程 ,接下里我将对某些知识点进行更细致的解析. 浏览器从输入URL到页面渲染过程 系列文章: (一):浏览器从输入URL到页面渲染过程 -- ...
- 浏览器从输入URL到页面渲染过程 —— 浏览器的进程与线程
之前我有总结过一篇经典面试题:浏览器从输入URL到页面渲染过程,接下里我将对某些知识点进行更细致的解析. 浏览器从输入URL到页面渲染过程 系列文章: (二):浏览器从输入URL到页面渲染过程 --页 ...
- 浏览器 重定向次数限制_在浏览器输入URL到页面渲染的整个流程是如何的？都有哪些步骤？...
问题:输入 URL 到页面渲染的整个流程 DNS解析 TCP握手 TLS握手 浏览器开始解析文件 构建 DOM 树.构建 CSSOM 树.解析JS 生成 Render 树 调用 GPU 绘制,合成图层 ...
最新文章
- [python]逆水行舟不进则退(1)
- argparse库 学习记录
- tf.nn.sparse_softmax_cross_entropy_with_logits()与tf.nn.softmax_cross_entropy_with_logits的差别
- python开发工具与pycharm_python开发工具pycharm快速入门
- DM365 u-boot启动分析
- 用shell查看关键数据
- 如何在 Mac 上创建自动填充的智能文件夹？
- oracle 基本dos命令,Oracle 常用 Dos命令
- 中文近义词工具包，Synonyms 发布新版本 v3.16，支持词汇表扩大至 40w+
- 链接脚本（Linker Script）应用实例（一）使用copy table将函数载入到RAM中运行
- 用c语言输出一个菱形
- 【VUE/H5】H5调起数字键盘的坑，及手写移动端键盘代码
- 图像处理学习 灰度图像与二值图像
- [递推] 51Nod1383 整数分解为2的幂
- ubuntu写yacc
- Rust学习第九天——控制测试运行
- 半音阶口琴膜片翘起来怎么处理？
- 【量化交易】94篇论文分析股市预测的深度学习技术
- 汇编语言：简单图形界面的绘制教程
- python是什么？python又可以用来干什么？（详细讲解来啦）