一个浏览器从加载URL到页面展示出来,经过了哪些步骤?

简介: 一个浏览器从加载URL到页面展示出来,经过了哪些步骤?

浏览器从加载URL 到页面展示出来,经过了以下步骤:

  • URL解析(判断输入的是否是合法url,根据输入的内容进行对应操作)
  • DNS 查询(dns查询,获取到域名对应的目标服务器Ip地址)
  • TCP 连接(tcp是一种面向有连接的传输层协议,建立三次握手)
  • HTTP 请求(浏览器发送http请求到目标服务器)
  • 响应请求(当服务器接收到浏览器的请求之后,就会进行逻辑操作,处理完成之后返回一个http相应消息)
  • 页面渲染(浏览器接收到服务器相应的资源后,首先会对资源进行解析,根据资源不同采用不通过的解析方式。)
  • 关于页面的渲染过程如下:
  • 解析HTML,构建 DOM 树
  • 解析 CSS ,生成 CSS 规则树
  • 合并 DOM 树和 CSS 规则,生成 render 树
  • 布局 render 树( Layout / reflow ),负责各元素尺寸、位置的计算
  • 绘制 render 树( paint ),绘制页面像素信息
  • 浏览器会将各层的信息发送给 GPU,GPU 会将各层合成( composite ),显示在屏幕上


相关文章
|
1月前
|
缓存 JavaScript
vue阻止浏览器刷新和关闭页面提示
使用场景:在使用vuex进行缓存管理时,页面的缓存会随着页面关闭而消失,如果缓存动作仍在进行中,关闭页面会导致数据丢失,此时需要阻止页面关闭
51 3
|
3天前
|
数据采集 存储 人工智能
【AI大模型应用开发】【LangChain系列】实战案例2:通过URL加载网页内容 - LangChain对爬虫功能的封装
【AI大模型应用开发】【LangChain系列】实战案例2:通过URL加载网页内容 - LangChain对爬虫功能的封装
14 0
|
18天前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
18天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
19天前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
19 0
|
1月前
|
Web App开发 缓存 网络协议
|
19天前
|
JavaScript
vue截取URL中的参数
vue截取URL中的参数
13 0
|
2月前
|
前端开发
[牛客网-前端大挑战QD2] 获取url参数
[牛客网-前端大挑战QD2] 获取url参数
19 0
|
2月前
BurpSuite8.2 -- 查找包含id参数的URL
BurpSuite8.2 -- 查找包含id参数的URL
19 1
|
2月前
|
分布式计算 DataWorks 关系型数据库
DataWorks数据源问题之参数“连接Url”如何解决
DataWorks数据源是指DataWorks中配置的用于数据集成的外部数据源;本合集将讲解如何在DataWorks中配置和管理数据源,以及处理数据源连接和集成过程中的问题。
29 5

热门文章

最新文章