首页 > 其他分享 >从输入URL到页面展示

从输入URL到页面展示

时间:2023-08-17 16:59:14浏览次数:33  
标签:浏览器 请求 展示 URL 渲染 进程 页面

目录

用户输入过程

  1. 地址栏omnibox判断用户的输入是搜索内容还是URL链接:

    • 如果是搜索内容,地址栏使用默认的搜索引擎合成带搜索关键字的URL链接

    • 如果输入内容符合URL规则,则加上协议合成完整的URL链接

  2. 用户输入完成后按下回车键,浏览器导航栏显示加载状态,页面仍呈现当前状态,此时需等待提交文档阶段。

当前页面即将被替换成新的页面,beforeunload允许在页面退出前执行数据清理操作,并询问用户是否要离开当前页面,例如未提交完成的表单。

URL请求过过程

  1. 浏览器进程通过进程间通信IPC将URL请求发送给网络进程;
  2. 网络进程接收到URL请求,开始URL请求的流程:本地缓存中查找是否有该资源,如果有直接返回给浏览器进程;否则进入网络请求流程;
  3. 请求DNS服务器返回域名对应的IP地址和端口号:如果DNS数据缓存服务有当前域名信息,直接返回;否则,发起请求获取域名解析出来的IP和端口号(HTTP默认80,HTTPS默认443,如果是https请求,还需要建立TLS连接);
  4. 利用IP地址和服务器建立连接;
  5. 浏览器构建请求行、请求头,把域名相关的Cookie等数据附加到请求头,发送给服务器;
  6. 服务器接受到请求信息后,生成响应数据,发给网络进程

重定向

接收到服务器返回的响应,如果状态码是301/302,则需要重定向到其它URL,网络进程会从响应头的Location字段中读取重定向的地址,然后发起HTTP请求

❯ curl -I www.12306.cn
HTTP/1.1 302 Moved Temporarily  # 需要重定向
Server: nginx
Date: Thu, 17 Aug 2023 08:22:24 GMT
Content-Type: text/html
Content-Length: 138
Connection: keep-alive
Location: https://www.12306.cn/index/

❯ curl -I https://www.12306.cn/index/
HTTP/1.1 200 OK
Date: Thu, 17 Aug 2023 08:22:43 GMT
Content-Type: text/html
Connection: keep-alive
Expires: Thu, 17 Aug 2023 06:35:33 GMT
Cache-Control: max-age=0
Age: 6430
X-Cache: HIT from cache.51cdn.com
X-Via: 1.1 PS-000-010U9202:9 (Cdn Cache Server V2.0), 1.1 PS-PEK-01Q2Q23:17 (Cdn Cache Server V2.0)
X-Ws-Request-Id: 64ddd8d3_PS-PEK-01D0O24_42078-18601

响应数据处理

浏览器根据Content-Type字段判断响应体数据是什么类型。

Content-Type: text/html

准备渲染进程

Content-Type的值是HTML类型,下面准备渲染进程。一般情况下,一个页面有一个渲染进程(同一站点的页面,子页面有可能复用父页面的渲染进程)

提交文档

  1. 浏览器进程将网络进程接收到的HTML数据发送给渲染进程;
  2. 渲染进程和网络进程建立传输数据的通道;
  3. 文档数据传输完成后,渲染进程返回“确认文档提交”;
  4. 浏览器更新页面状态(地址栏内容,安全小锁头,前进后退内容)

渲染过程

标签页图标加载动画停止,渲染进程开始页面解析和子资源加载。

未完待续……

标签:浏览器,请求,展示,URL,渲染,进程,页面
From: https://www.cnblogs.com/euler0525/p/17638096.html

相关文章

  • JS解析URL并获取URL参数值
    方法1:通过正则表达式(推荐)1.1定义获取指定参数值得函数,name为url的参数名functiongetQueryString(name){    letreg=newRegExp("(^|&)"+name+"=([^&]*)(&|$)","i");    letr=window.location.search.substr(1).match(reg);    if(r!=n......
  • scrapy爬取图片报错Missing scheme in request url:
    记录一下scrapy爬取图片遇到的坑目标站点:站长素材图片https://sc.chinaz.com/tupian我的核心源代码#Defineyouritempipelineshere##Don'tforgettoaddyourpipelinetotheITEM_PIPELINESsetting#See:https://docs.scrapy.org/en/latest/topics/item-pipeli......
  • Streamlit项目:搭建舌体分割的初步展示应用
    1前言去年在社区发布了有关中医舌象诊断的博文,其中舌象识别板块受到了极高的关注和关注。......
  • 卸载页面时上报日志
    当刷新页面或关闭页面时,上报日志functionreport(){ letmyHeaders=newHeaders(); myHeaders.append("Accept","application/json"); myHeaders.append("Authorization","BearereyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vMT......
  • 一文教你如何实现低代码轮播图中点击图片跳转不同的H5页面
    【关键字】低代码开发、API6、轮播图组件、Item实例数据获取、H5页面跳转 1、写在前面实际开发中我们经常会遇到这样的场景,首页轮播图加载了几张活动图片,每张图片点击之后会跳转到各自不同的活动详情页面,活动详情是通过H5页面实现的,现在我们来思考一下在API6的低代码开发中该......
  • 一文教你如何实现低代码轮播图中点击图片跳转不同的H5页面
     【关键字】低代码开发、API6、轮播图组件、Item实例数据获取、H5页面跳转1、写在前面实际开发中我们经常会遇到这样的场景,首页轮播图加载了几张活动图片,每张图片点击之后会跳转到各自不同的活动详情页面,活动详情是通过H5页面实现的,现在我们来思考一下在API6的低代码开发中该如何......
  • t113-c-curl使用
    先复制文件到要用到的项目中注意:复制.so文件在linux中不可以直接复制粘贴,必须要在linux命令行输入cp到指定的路径才可以,不然只会复制到软链接改一下cmakecmake_minimum_required(VERSION3.12.4)SET(CMAKE_C_COMPILER/home/momo/Tina-Linux/prebuilt/gcc/linux-x86/arm/too......
  • 使用快码编程编写的登录页面
    使用中文编译软件仿的登录页面代码:......
  • URL长链接转短链接
    一、短链接技术1.简介短链接技术是一种将长URL映射为短URL的技术。简单来说,就是通过一个简化的算法,将输入的长URL转换为一个短URL字符串,这个字符串可以按照短URL本身的需求进行设计,比如可以使用一定的字符集,并且限制字符串长度。2.短链接的优点短链接技术的主要优点包......
  • 地址参数为汉字而页面接受参数为乱码的问题
    确保页面的编码与传递参数的编码一致:请确保页面的编码(通常是在<meta>标签中指定)与传递参数的编码一致。常见的编码格式包括UTF-8和GBK等。对地址参数进行编码和解码:在JavaScript中,可以使用encodeURI和decodeURI函数来对地址参数进行编码和解码。在传递参数时,可以......