浏览器输入url到页面展示出来的全过程

cute_ming cute_ming     2023-04-12     438

关键词:

基本流程:

1、用户在浏览器中输入url地址

2、浏览器解析域名得到服务器ip地址

浏览器会首先从缓存中找是否存在域名,如果存在就直接取出对应的ip地址,如果没有就开启一个DNS域名解析器。DNS域名解析器会首先访问顶级域名服务器,将对应的ip发给客户端;然后访问根域名解析器,将对应的ip发给客户端;最后访问本地域名服务器,得到最终的ip地址。

3、TCP三次握手建立客户端和服务器的连接

因为HTTP是基于TCP的可靠传输,所以在发送http数据报之前,需要先进行TCP的三次握手建立连接。三次握手过程如下:

第一次握手:客户端--->服务端 ack=1,seq=x(x随机生成)

第二次握手:服务端--->客户端 ACK=1,ack=x+1,seq=y(y随机生成)

第三次握手:客户端--->服务端 ACK=1,ack=y+1,seq=x+1

完成第三次握手时,实际上客户端已经与服务器建立了连接,所以第三次握手的报文已经可以携带数据了。

4、客户端发送HTTP请求获取服务器端的静态资源

5、服务器发送HTTP响应报文给客户端,客户端获取到页面静态资源

6、TCP四次挥手关闭客户端和服务器的连接

数据传输完毕后,TCP会进行四次挥手断开连接,释放资源。四次挥手过程如下:

第一次挥手:客户端--->服务器 FIN=1,ack=1,seq=u 客户端状态变为FIN_WAIT_1

第二次挥手:服务器--->客户端 ACK=1,ack=u+1,seq=v 服务器状态变为CLOSE_WAIT,TCP进入半关闭状态

第三次挥手:服务器--->客户端 FIN=1,ACK=1,ack=u+1,seq=w 服务器状态变为LAST_ACK

第四次挥手:客户端--->服务器 ACK=1,ack=w+1,seq=u+1 客户端状态变为TIME_WAIT,此时TCP未释放,需要等待计时器计时完成后,客户端状态变为CLOSED

7、浏览器解析文档资源并渲染页面

浏览器解析文档资源并渲染页面流程:

(1)解析html资源,构建DOM Tree

(2)解析css资源,构建CSS Rule Tree

(3)JS通过DOM API和CSS OM API来操作DOM Tree和CSS Tree

(4)解析完成后综合DOM Tree和CSS Tree会生成Render Tree,计算每个元素的位置,这个过程就是回流(layout or reflow)

(5)调用操作系统Native GUI的绘制

(6)页面绘制完成

涉及到的其他知识点:

1、Render Tree的生成

DOM Tree和CSS Tree结合会生成Render Tree,是由可视化元素按照其顺序生成的树形结构,非可视化元素是不会出现到渲染树中的。

非可视化元素:head、display:none;(注意:visibility:hidden的元素会出现在渲染树中)

2、回流和重绘

回流(reflow,也叫重排、布局):某部分的变化影响了布局,浏览器需要重新渲染。(如元素大小、位置的改变)

重绘(repaint):元素的某一部分发生改变,尺寸、位置没有改变。(字体颜色、背景颜色的改变)

引起回流的几个主要原因:

(1)网页初始化

(2)JS操作DOM树(增加、删除元素等)

(3)某些元素的尺寸改变

(4)CSS属性的改变

浏览器的“dirty”系统:

为了避免页面细小的改变就引起回流和重绘,“dirty”系统会将这些改变操作积攒一批再进行操作,这又叫异步reflow或者增量异步reflow。有些特殊情况不会这么做:resize窗口、改变了页面默认的字体等,这些操作会直接触发回流。

编写代码时如何减少回流和重绘:

(1)修改样式不要逐条修改,定义CSS样式的class,直接修改元素的className

(2)不要将DOM节点的属性值放在循环中当成循环的变量

(3)为动画的HTML元素使用fixed或absolute的position属性,修改它们的CSS就不会触发reflow

(4)把DOM离线后修改,设置display:none或者clone元素到内存中,修改完成再显示回页面

(5)不要使用table布局,一个微小的改变就可能引起整个table的重新布局

3、性能优化

(1)提升HTML的加载速度

- 页面精简,删除不必要的内容,将内嵌的JS和CSS移至外部文件,使用压缩工具等

- 减少文件数量,合并文件,减少请求次数

- 减少域名查询,外部引入的资源尽量少使用不同的域名

- 使用缓存,重用数据

- 优化页面元素的加载顺序

- 使用合法的标签

- 根据浏览器类型选择合适的策略

(2)编写合理的CSS

- DOM的深度尽量浅

- 使用合法的CSS属性

- 不要为ID选择器指定类名或标签名

- 避免使用后代选择器,尽量使用子选择器

- 避免使用通配符

(3)关于JS标签

js标签的加载和执行特点:载入后立即执行,执行时会阻塞页面后续内容

- 将所有的js标签放在页面底部,保证脚本执行前已完成DOM渲染

- 尽可能合并脚本

- 减少内联js的使用

- 注意多个js标签的引入顺序

- 使用defer属性,该属性可以使脚本在文档完全呈现以后再执行

- 使用async属性,可以使当前脚本不必等待其他脚本的执行,也不必阻塞文档的呈现

浏览器输入url到页面展示出来的全过程

基本流程:1、用户在浏览器中输入url地址2、浏览器解析域名得到服务器ip地址浏览器会首先从缓存中找是否存在域名,如果存在就直接取出对应的ip地址,如果没有就开启一个DNS域名解析器。DNS域名解析器会首先访问... 查看详情

输入一个url到浏览器页面展示都经历了哪些过程(代码片段)

...定是输入你要访问的网站网址了,俗称url;二:缓存解析浏览器获取了这个url,当然就去解析了,它先去缓存当中看看有没有,从浏览器缓存-系统缓存-路由器缓存当中查看,如果有从缓存当中显示页面,然后没有那就进行步骤... 查看详情

从输入url到页面展示到底发生了什么(代码片段)

...器发送HTTP请求|--服务器处理请求|--服务器返回HTTP响应|--浏览器显示页面信息输入地址当输入url地址后,浏览器已经在智能匹配地址了,会从历史记录、书签或缓存中查找,如果找到了,会从缓存中调出页面显示出来,在你还没... 查看详情

浏览器输入网址到浏览器渲染页面的过程

1) 在客户端浏览器中输入网址URL。2) 发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址。3) 客户端浏览器与WEB服务器建立TCP(传输控制协议)连接。4) 客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS... 查看详情

从输入url到页面展示,这中间发生了什么?

备注:Chrome包括:1个浏览器主进程、1个GPU进程、1个网络进程、多个渲染进程、多个插件进程1.用户输入URL,浏览器会根据用户输入的信息判断是搜索还是网址,如果是搜索内容,就将搜索内容+默认搜索引擎合成新的URL;如果用... 查看详情

浏览器从输入网址到页面展示的过程

...iew完整高频题库阅读地址:https://febook.hzfe.org/URLDNSTCP渲染浏览器从输入网址到渲染页面主要分为以下几个过程URL(统一资源定位符,UniformResourceLocator)用于定位互联网上资源,俗称网址。我们在地址栏输入HZFE官方网址hzfe.org后... 查看详情

从输入网址(url)到页面展示的过程

...语义化的好记忆,而IP是类似:192.168.1.0,不易人记忆.IP寻址:浏览器根据输入的网址去寻找它对应的IP地址首先需了解DNS(网域名称系统):是互联网的一项服务,它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访... 查看详情

性能分析从开始输入url到页面加载完成的过程中都发生了什么事情?

【稍后更新】第一个问题:从输入URL到浏览器接收的过程中发生了什么事情? 第二个问题:浏览器如何向网卡发送数据? 第三个问题:数据如何从本机网卡发送到服务器? 第四个问题:服务器接收到数据后会进行哪... 查看详情

老生常谈-从输入url到页面展示到底发生了什么

阅读目录1、输入地址2、浏览器查找域名的IP地址  3、浏览器向web服务器发送一个HTTP请求4、服务器的永久重定向响应5、浏览器跟踪重定向地址6、服务器处理请求7、服务器返回一个HTTP响应 8、浏览器显示HTML9、浏览器发送请... 查看详情

输入url到页面返回的全过程

...www.baidu.com,然后点击确认;2.      浏览器查找域名的IP地址。查找过程如下:首先是浏览器缓存,浏览器会缓存DNS记录一段时间;如果在浏览器缓存里没有找到需要的记录,浏览器会做一个系统调用,获取系... 查看详情

从输入url到页面展示到底发生了什么(代码片段)

阅读目录1、输入地址2、浏览器查找域名的IP地址  3、浏览器向web服务器发送一个HTTP请求4、服务器的永久重定向响应5、浏览器跟踪重定向地址6、服务器处理请求7、服务器返回一个HTTP响应 8、浏览器显示HTML9、浏览器发送请... 查看详情

老生常谈-从输入url到页面展示到底发生了什么2

阅读目录1、输入地址2、浏览器查找域名的IP地址  3、浏览器向web服务器发送一个HTTP请求4、服务器的永久重定向响应5、浏览器跟踪重定向地址6、服务器处理请求7、服务器返回一个HTTP响应 8、浏览器显示HTML9、浏览器发送请... 查看详情

从输入url到页面加载显示完成的过程

...把这个问题拆解成两个过程:1.用户输入url--->客户端(浏览器)拿到服务端的数据2.浏览器拿到数据--->呈现页面(也就是浏览器工作过程 查看详情

浏览器从url输入到页面展示发生了什么?

...串,用于指定网络资源中的片断。2.DNS查询  用户通过浏览器访问网页,DNS服务器(域名解析系统)会根据用户输入的服务器域名查找对应的IP地址。  域名解析服务器是基于UDP协议实现的一个应用程序,通过监听53端口来获... 查看详情

从浏览器输入网址到页面显示的全过程

  【前言】从全局来讲,当键入一个url时,肯定是需要从服务器请求某个页面或某条数据然后显示到用户自己的电脑屏幕上。这个过程中其实包括:DNS对url域名的解析(在url中解析出服务器所在的IP地址,有的url也包括端... 查看详情

从输入url到页面加载完成的过程

...言和结构来解释,也算是小小地挑战一下自己。过程概述浏览器查找域名对应的IP地址;浏览器根据IP地址与服务器建立socket连接;浏览器与服务器通信:浏览器请求,服务器处理请求;浏览器与 查看详情

浏览器从输入url到页面加载显示完成全过程解析

一浏览器查找域名对应的IP地址(域名解析的过程,先进行缓存的查看);  1、在浏览器中输入www.qq.com域名,操作系统会先检查自己本地的hosts文件是否有这个网址映射关系,如果有,就先调用这个IP地址映射,完成域名解析... 查看详情

输入url到页面的展现过程

...析服务器地址返回给本地DNS,本地DNS去这里查询就OK了。浏览器拿到服务器的IP地址后,会 查看详情