从浏览器地址栏输入url到显示页面的过程

本文涉及的产品
全局流量管理 GTM,标准版 1个月
.cn 域名,1个 12个月
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
简介: 从浏览器地址栏输入url到显示页面的过程

基本流程:

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属性,可以使当前脚本不必等待其他脚本的执行,也不必阻塞文档的呈现

相关实践学习
容器服务Serverless版ACK Serverless 快速入门:在线魔方应用部署和监控
通过本实验,您将了解到容器服务Serverless版ACK Serverless 的基本产品能力,即可以实现快速部署一个在线魔方应用,并借助阿里云容器服务成熟的产品生态,实现在线应用的企业级监控,提升应用稳定性。
容器应用与集群管理
欢迎来到《容器应用与集群管理》课程,本课程是“云原生容器Clouder认证“系列中的第二阶段。课程将向您介绍与容器集群相关的概念和技术,这些概念和技术可以帮助您了解阿里云容器服务ACK/ACK Serverless的使用。同时,本课程也会向您介绍可以采取的工具、方法和可操作步骤,以帮助您了解如何基于容器服务ACK Serverless构建和管理企业级应用。 学习完本课程后,您将能够: 掌握容器集群、容器编排的基本概念 掌握Kubernetes的基础概念及核心思想 掌握阿里云容器服务ACK/ACK Serverless概念及使用方法 基于容器服务ACK Serverless搭建和管理企业级网站应用
相关文章
|
26天前
|
前端开发 安全 UED
【项目实战】从终端到浏览器:实现 ANSI 字体在前端页面的彩色展示
在学习和工作中,我们经常需要使用日志来记录程序的运行状态和调试信息。而为了更好地区分不同的日志等级,我们可以使用不同的颜色来呈现,使其更加醒目和易于阅读。 在下图运行结果中,我们使用了 colorlog 库来实现彩色日志输出。通过定义不同日志等级对应的颜色,我们可以在控制台中以彩色的方式显示日志信息。例如,DEBUG 级别的日志使用白色,INFO 级别的日志使用绿色,WARNING 级别的日志使用黄色,ERROR 级别的日志使用红色,CRITICAL 级别的日志使用蓝色。
|
19天前
|
Web App开发 XML 开发框架
技术心得记录:在IE浏览器中的奇怪页面表现
技术心得记录:在IE浏览器中的奇怪页面表现
15 0
|
2月前
|
缓存 负载均衡 网络协议
在浏览器地址栏中输入URL后发生了什么
这是一个关于网页加载过程的概述:首先,浏览器查询IP地址,通过DNS解析域名;接着,建立TCP连接,发起HTTP请求;服务器处理请求并返回HTTP响应;最后,浏览器解析和渲染网页内容。过程中涉及DNS缓存、TCP三次握手、HTTP请求与响应、HTML解析、CSS和JS加载,以及渲染树的构建。为了优化网站性能,可以减少DNS查询、合并文件、压缩资源、提前加载CSS和延迟加载JS。
|
23天前
|
域名解析 存储 缓存
HTTP请求流程概览:浏览器构建请求行含方法、URL和版本;检查缓存;解析IP与端口
【6月更文挑战第23天】 HTTP请求流程概览:浏览器构建请求行含方法、URL和版本;检查缓存;解析IP与端口;TCP连接(HTTP/1.1可能需排队);三次握手;发送请求头与体;服务器处理并返回响应;TCP连接可能关闭或保持;浏览器接收并显示响应,更新缓存。HTTP版本间有差异。
33 5
|
22天前
|
JavaScript
JS获取浏览器地址栏的多个参数值的任意值
JS获取浏览器地址栏的多个参数值的任意值
23 3
|
11天前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
|
1月前
|
缓存 网络协议 前端开发
【高频】从输入URL到页面展示到底发生了什么?
【高频】从输入URL到页面展示到底发生了什么?
|
12天前
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
8 0
|
29天前
|
Web App开发 移动开发 安全
如何做到修改 url 参数页面不刷新
如何做到修改 url 参数页面不刷新
|
2月前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
72 0