首页 > 其他分享 >浏览器从输入URL到渲染完页面的整个过程

浏览器从输入URL到渲染完页面的整个过程

时间:2022-09-01 13:11:09浏览次数:63  
标签:缓存 浏览器 URL DNS 服务器 页面

从输入URL到渲染出整个页面的过程包括三个部分:
1、DNS解析URL的过程
2、浏览器发送请求与服务器交互的过程
3、浏览器对接收到的html页面渲染的过程
一、DNS解析URL的过程
DNS解析的过程就是寻找哪个服务器上有请求的资源。因为ip地址不容易记忆,一般会使用URL域名(如www.baidu.com)作为网址。DNS解析就是将域名翻译成IP地址的过程。 1 具体过程:
1)浏览器缓存:浏览器会按照一定的频率 缓存DNS记录 1 2)操作系统缓存:如果浏览器缓存中找不到需要的DNS记录,就会取操作系统中找
3)路由缓存:路由器也有DNS缓存
4)ISP的DNS服务器:ISP有专门的DNS服务器应对DNS查询请求
5)根服务器:ISP的DNS服务器找不到之后,就要向根服务器发出请求,进行递归查询
二、浏览器与服务器交互过程
1)首先浏览器利用tcp协议通过三次握手与服务器建立连接
http请求包括header和body。header中包括请求的方式(get和post)、请求的协议 (http、https、ftp)、请求的地址ip、缓存cookie。body中有请求的内容。
2)浏览器根据解析到的IP地址和端口号发起http的get请求.
3)服务器接收到http请求之后,开始搜索html页面,并使用http返回响应报文
4)若状态码为200显示响应成功,浏览器接收到返回的html页面之后,开始进行页面的渲染
三、浏览器页面渲染过程
1)浏览器根据深度遍历的方式把html节点遍历成dom 树
2)将css解析成CSS DOM树
3)将dom树和CSS DOM树构造成render树
4)JS根据得到的render树 计算所有节点在屏幕中的位置,进行布局(回流)
5)遍历render树并调用硬件API绘制所有节点(重绘)
  补充: 构造render渲染树的过程
        从DOM树的根节点开始遍历每个可见的节点。         对于每个可见的节点,找到CSS树中的对应的规则,并且应用他们。         根据每个可见的节点及其对应的样式,组合生成渲染树。

标签:缓存,浏览器,URL,DNS,服务器,页面
From: https://www.cnblogs.com/yueyiviolet/p/16646135.html

相关文章

  • 使用fiddler中url替换法进行替换请求ip或者域名
    一、使用fiddler中url替换法进行替换请求ip或者域名1、准备一个即将要替换的测试域名如:www.baidu.com2、抓包查看当前需要进行替换的域名;如:www.douban.com3、进行替换......
  • html+php 分类页面展示
    根据分类 展示不同页面:案例一:  案例二:   同宽度展示不同页面:if($child_cate_id){$hangye_pid=M("hangye")->where("status=1andcate......
  • vue 多页面应用
    1,认识vue页面加载过程在创建多页面之前,还是要先简单地了解一下,vue页面时怎么加载的。我们知道,在Vue-cli中默认目录结构如下:1.项目的依赖模块目录,这个目录很大,因此一......
  • 用Vue框架实现 - JSON数据渲染页面
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="referrer"content="no-referrer"/><metahttp-equiv="X-UA-Compatibl......
  • 【前端】在浏览器控制台,直接发Ajax请求
    我们在日常的开发的过程中,经常需要前端测试发送请求测试一些数据。但是由于一些session,cookie的存在,我们无法在postman上创建一些会话。那么这样,我们就可以在浏览器上直接......
  • js 获取缓存渲染到页面里面
    $('#code').change(function(){console.log($(this).val())localStorage.setItem("code",JSON.stringify({"sn":$(this).val(),"gs":$("#select").val()}));});$('......
  • Vue路由动态改变浏览器标题名称和图标样式
    路由constrouter=newRouter({mode:'hash',base:process.env.BASE_URL,router:[{path:'/',redirect:'home'......
  • js关闭微信浏览器页面
    在关闭微信某个H5网页时,window.close()有时候并不好使 【解决方案】://这个可以关闭安卓系统的手机document.addEventListener('WeixinJSBridgeReady',function(){W......
  • 关于路由权限之页面级别权限和按钮级别权限
    关于路由权限之页面级别权限和按钮级别权限:https://blog.csdn.net/weixin_69743436/article/details/125339360https://blog.csdn.net/fxss5201/article/details/10534892......
  • Spring Boot 2.x基础教程:使用 Thymeleaf开发Web页面
    通过本系列教程的前几章内容(API开发、数据访问)。我们已经具备完成一个涵盖数据存储、提供HTTP接口的完整后端服务了。依托这些技能,我们已经可以配合前端开发人员,一起来完成......