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

从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)

- 在浏览器地址栏输入URL
- 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤
    - 如果资源未缓存,发起新请求
    - 如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证。
    - 检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control:
        - HTTP1.0提供Expires,值为一个绝对时间表示缓存新鲜日期
        - HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
- 浏览器解析URL获取协议,主机,端口,path
- 浏览器组装一个HTTP(GET)请求报文
- 浏览器获取主机ip地址,过程如下:
    - 浏览器缓存
    - 本机缓存
    - hosts文件
    - 路由器缓存
    - ISP DNS缓存
    - DNS递归查询(可能存在负载均衡导致每次IP不一样)
- 打开一个socket与目标IP地址,端口建立TCP链接,三次握手如下:
    - 客户端发送一个TCP的SYN=1,Seq=X的包到服务器端口
    - 服务器发回SYN=1, ACK=X+1, Seq=Y的响应包
    - 客户端发送ACK=Y+1, Seq=Z
- TCP链接建立后发送HTTP请求
- 服务器接受请求并解析,将请求转发到服务程序,如虚拟主机使用HTTP Host头部判断请求的服务程序
- 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜,返回304等对应状态码
- 处理程序读取完整请求并准备HTTP响应,可能需要查询数据库等操作
- 服务器将响应报文通过TCP连接发送回浏览器
- 浏览器接收HTTP响应,然后根据情况选择关闭TCP连接或者保留重用,关闭TCP连接的四次握手如下:
    - 主动方发送Fin=1, Ack=Z, Seq= X报文
    - 被动方发送ACK=X+1, Seq=Z报文
    - 被动方发送Fin=1, ACK=X, Seq=Y报文
    - 主动方发送ACK=Y, Seq=X报文
- 浏览器检查响应状态吗:是否为1XX,3XX, 4XX, 5XX,这些情况处理与2XX不同
- 如果资源可缓存,进行缓存
- 对响应进行解码(例如gzip压缩)
- 根据资源类型决定如何处理(假设资源为HTML文档)
- 解析HTML文档,构件DOM树,下载资源,构造CSSOM树,执行js脚本,这些操作没有严格的先后顺序,以下分别解释
- 构建DOM树:
    - Tokenizing:根据HTML规范将字符流解析为标记
    - Lexing:词法分析将标记转换为对象并定义属性和规则
    - DOM construction:根据HTML标记关系将对象组成DOM树
- 解析过程中遇到图片、样式表、js文件,启动下载
- 构建CSSOM树:
    - Tokenizing:字符流转换为标记流
    - Node:根据标记创建节点
    - CSSOM:节点创建CSSOM树
- 根据DOM树和CSSOM树构建渲染树:
    - 从DOM树的根节点遍历所有可见节点,不可见节点包括:1)script,meta这样本身不可见的标签。2)被css隐藏的节点,如display: none
    - 对每一个可见节点,找到恰当的CSSOM规则并应用
    - 发布可视节点的内容和计算样式
- js解析如下:
    - 浏览器创建Document对象并解析HTML,将解析到的元素和文本节点添加到文档中,此时document.readystate为loading
    - HTML解析器遇到没有async和defer的script时,将他们添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序,他们可以遍历和操作script和他们之前的文档内容
    - 当解析器遇到设置了async属性的script时,开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行,但是解析器不会停下来等它下载。异步脚本禁止使用document.write(),它们可以访问自己script和之前的文档元素
    - 当文档完成解析,document.readState变成interactive
    - 所有defer脚本会按照在文档出现的顺序执行,延迟脚本能访问完整文档树,禁止使用document.write()
    - 浏览器在Document对象上触发DOMContentLoaded事件
    - 此时文档完全解析完成,浏览器可能还在等待如图片等内容加载,等这些内容完成载入并且所有异步脚本完成载入和执行,document.readState变为complete,window触发load事件
- 显示页面(HTML解析过程中会逐步显示页面)

转载于:https://www.cnblogs.com/luoluoweb/p/5768099.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286630.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

有序的Map集合--LinkedHashMap

提出问题: 在写一个dao的时候,我的需求是这个dao是一个万能的,目前的方法只有一个查询出实体类对应的表中所有的数据,通过传入的对象,利用反射获取实体类中的属性名,属性类型,利用字符串拼接获取…

Leetcode之仅仅反转字母

1 题目 给定一个字符串 S,返回 “反转后的” 字符串,其中不是字母的字符都保留在原地,而所有字母的位置发生反转。 示例 1:输入:"ab-cd" 输出:"dc-ba" 示例 2:输入:"a-bC-dEf-ghIj" 输出:"j-Ih-gfE-dCba" 示例 3:输入:&qu…

【SignalR全套系列】之在.Net Core 中实现长轮询

微信公众号:趣编程ACE关注可了解更多的.NET日常实战开发技巧,如需源码 请后台留言 源码;前文回顾【SignalR全套系列】之在.Net Core 中实现Server-Send Events消息推送【SignalR全套系列】之在.NetCore中实现WebSocket双工通信【SignalR全套系列】之在.N…

完美解决ArcGIS10.2和Erdas9.2软件冲突的方法:共存!

用过ArcGIS和Erdas软件的都知道,二者存在着服务的冲突,为了解决共存的问题,笔者曾多次重装系统,但未能如愿以偿。其实不需要相互关闭服务如此麻烦。那如何在安装有arcgis的电脑安装erdas并解决冲突呢?直接上视频教程。…

架构师之路16年精选50篇

2016精选索引,点击标题阅读相关文章。【方法论】《秒杀系统架构优化思路》《分布式ID生成器》《互联网架构,如何进行容量设计》《线程数究竟设多少合理》《单点系统架构的可用性与性能优化》《关于负载均衡的一切》《异构服务器负载均衡及过载保护》《LV…

yii 前后台分离及登陆验证

2019独角兽企业重金招聘Python工程师标准>>> 比较合理的做法其实是分成两个框架来布署;然而这样说法也太绝对。 事实上是针对不同系统,应采用不同的方法。如为CMS系统,则不需很复杂的权限管理,但如果有管理员与会员之分…

双谷人才财务管理(序)

IT是一个迅速发展的行业,教育是一个良心的行业,两者交集——IT培训,在整个市场中占有一个不可或缺的地位。好多大学生,抱怨找不到工作;好多企业找不到合适的程序员,这几年这个问题越来越严重。。。。于是IT…

Android之打开手机系统相册

1、需求 打开系统相册,获取图片进行扫描操作 2、代码实现 Intent pickIntent new Intent(Intent.ACTION_PICK,MediaStore.Images.Media.EXTERNAL_CONTENT_URI);pickIntent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, "image/*");Ca…

Kibana

2019独角兽企业重金招聘Python工程师标准>>> Kibana是一个基于浏览器页面的Elasticsearch前端展示工具。Kibana全部使用HTML语言和Javascript编写的,查询语法是基于Lucene的查询语法。允许布尔运算符、通配符和字段筛选。注意关键字要大写 全文搜索 在搜…

电脑QQ能登上,网页打不开的解决办法

打开360卫士,在功能大全里选择网络优化,断网急救箱。 可以看到DNS服务异常、浏览器配置异常,点击立即修复。

个人黑名单 抄袭耻辱墙

抄袭耻辱墙 博主抄袭文原文我爱Python数据挖掘https://blog.csdn.net/weixin_38037405/article/details/125862095https://blog.csdn.net/A757291228/article/details/117464313黄埔数据分析https://blog.csdn.net/weixin_39060517/article/details/118024847https://blog.csdn…

快速掌握 ASP.NET 身份认证框架 Identity(一)

推荐关注「码侠江湖」加星标,时刻不忘江湖事ASP.NET Core 内置了一个强大的身份认证框架 Identity,掌握它可以让我们快速开发高安全的身份认证功能,不仅如此,它还是一个基于数据库的用户管理系统,其中包含了大量的辅助…

浅谈大型web系统架构

动态应用,是相对于网站静态内容而言,是指以c/c、php、Java、perl、.net等服务器端语言开发的网络应用软件,比如论坛、网络相册、交友、BLOG等常见应用。动态应用系统通常与数据库系统、缓存系统、分布式存储系统等密不可分。   大型动态应用…

Android之webview长按超链接类型获取链接文字及url、长按图片链接类型分别获取图片和链接的url

1 、需求 webview长按超链接获取链接文字及urlwebview长按图片链接类型获分别获取图片和链接的url 2、解决办法 1)、设置webview的OnLongClickListener事件,关键代码如下 companion object {const val LINK_TYPE = 1const val IMAGE_LINK_TYPE = 2}var mHandler = object :…

PostgreSQL 统计信息pg_statistic格式及导入导出dump_stat - 兼容Oracle

标签 PostgreSQL , dump_stat , 统计信息 , 导出导入 背景 《PostgreSQL 规格评估 - 微观、宏观、精准 多视角估算数据库性能(选型、做预算不求人)》 EXPLAIN是PG数据库用于输出SQL执行计划的语法, 1、生成的执行计划中包含COST一项。 如果校准了成本因子&#xff0…

PHP: 手把手编写自己的 MVC 框架实例教程

1 什么是MVC MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model)、视图(View)和控制器(Controller)。 …

freemarker 异常处理

SSH2处理方案&#xff1a; freemarker文件如果出错&#xff0c;网站的前台页面会报出很明显的错误-焦黄的背景&#xff0c;血红的文字&#xff0c;很不利于用户体验的。如何修改这个问题呢&#xff1f;首先需要在struts.xml配置文件里添加下面一行代码&#xff1a; 1<consta…

ArcGIS10.8按属性选择中根据关键字like模糊查询方法总结

在实际工作中,通常需要按照某一个或某几个关键字进行模糊查询,已到达快速、准确、高效查询的目的。在ArcGIS中是通过SQL语句,利用关键字like来实现的。例如我们可以借助like快速查询满足以某一个关键字开头,以某一个关键字结尾,或者包含某一个关键字的结果。 在ArcGIS中,…

2021年复盘总结发现了C站博主缺少的赚钱之路

一、 我2021年的六大Flag 其实最开始我是不打算年终总结的&#xff0c;因为2021年我的十大Flag都没有完成&#xff0c;我说出来可能你会嘲笑我&#xff0c;所以我打算还是说出来吧。 这六大Flag如下&#xff1a; C站百万粉百篇实战文其他自媒体平台十万粉公众号一万粉财务自…

五大微信小程序开发IDE深度评测

微信小程序已经内测有一段时间了&#xff0c;笔者本着好奇加学习的心态写了几个小demo&#xff0c;虽然在MINA框架上并没有遇到太多的坑&#xff0c;但官方开发工具实在不敢恭维。 api提示不全&#xff0c;要一个个查api啊&#xff0c;写代码超级慢啊 很多必备的快捷键都没有&…