从输入URL到页面渲染的整个过程

news2024/9/23 15:25:22

从输入URL到页面渲染的整个过程

  • 1.DNS解析,把url中的域名解析成对应的IP地址。如果本地DNS缓存没有响应的记录,则会向DNS发送请求,获取相应的IP地址。

  • 2.浏览器使用获取到的目标服务器的IP地址,通过TCP/IP协议与服务器建立连接,浏览器会进行三次握手,确保连接建立正常。

  • 3.浏览器会发送HTTP请求到服务器,请求中包含用户想要访问的资源的信息,比如页面文件、图片、样式表等等。

  • 4.服务器收到请求以后,会解析请求并查找对应的资源,如果资源存在,并且可以访问,服务器端会返回一个http响应,包括了状态码、响应头、响应体

  • 5.浏览器接收到服务器的响应后,开始下载响应中包含的资源文件,并按照资源类型进行解析,构建DOM树和CSSOM树。DOM树表示HTML文档中标记和内容的层次结构,CSSOM树表示CSS文件中的样式信息。浏览器根据DOM树和CSSOM树,计算出页面中元素的位置和样式,然后渲染到屏幕。如果有HTML中有js代码,则在解析HTML文档时会加载执行这些代码。js代码通过修改DOM树和CSSOM树,影响页面的呈现效果。
    在这里插入图片描述

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

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

相关文章

python-web开发(Djaongo)课程基本内容

python-web开发(Djaongo)课程基本内容及其前置技术 参考内容: 【最新Python的web开发全家桶(django前端数据库)】 https://www.bilibili.com/video/BV1rT4y1v7uQ/?share_sourcecopy_web&vd_source84fd4883bb478d0…

CDA数据分析系01 anaconda

简介 数据处理集成包,不局限于python 创建一个新的environment conda create --name python34 python3.4 激活一个environment activate python34 # for windows conda的package管理 类似pip,conda install xxxx 查看已安装的python包 conda list…

利用技术优势:程序员如何通过互联网自媒体项目实现财务自由?

作为程序员,通过互联网自媒体项目实现财务自由是一个很好的选择。以下是一些技术优势的利用方法: 选择适合的自媒体平台:在互联网上有许多不同类型的自媒体平台,如博客、YouTube、Podcast等。选择适合你技术背景和兴趣的平台&…

手机忘记密码怎么办? 帮你快速解锁手机的十大软件请收好

有许多不同类型的手机锁,这些锁对于手机的用户或所有者来说可能非常烦人和恼人。这些锁可称为手机锁、SIM 锁、主锁或运营商锁。这些锁实际上是手机的实际限制。 为了仅在有限的国家/地区阻止电话访问,该区域之外的任何其他人都无法使用。 手机解锁如何…

极速上手k8s,Kubernetes 从入门到摸鱼系列-实践篇

大家好,我是比特桃。本文为《极速上手k8s,Kubernetes 从入门到摸鱼系列》的实战篇,旨在快速上手k8s。如没有阅读过k8s相关理论的朋友,可以先阅读理论篇。 1. 实践环境 k8s 的意义在于分布式大规模容器编排,所以如果我…

第一百零八天学习记录:C++基础:文件操作

C中对文件操作需要包含头文件<fstream> 操作文件的三大类&#xff1a; 1、ofstream:写擦破自评 2、ifstream:读操作 3、fstream:读写操作 文本文件 写文件 写文件步骤如下&#xff1a; 1、包含头文件 #include <fstream>2、创建流对象 ofstream ofs; 3、打开文…

Vue2笔记

Vue2 前端 语雀 (yuque.com) vue3: https://github.com/Panyue-genkiyo/vue3-learning vue2依据脚手架:https://github.com/Panyue-genkiyo/vue-advance vue基础不依赖脚手架:https://github.com/Panyue-genkiyo/vue-learning Vue 是一套用于构建用户界面的 渐进式框框架…

B2B2C多用户商城软件功能清单

多用户B2B2C是如今企业搭建电商平台比较火热模式&#xff0c;B2B2C包含了B2B与B2C这两者模式的特点&#xff0c;是非常具有发展前景的商城系统&#xff0c;那么一个完善的多用户B2B2C商城系统应该包含哪些主要功能呢?加速度jsudo一起来看看吧! 商品模块功能&#xff1a; 包括…

【深度剖析】 堆排序为什么不稳定?!

文章目录 零、前言一、什么是稳定性&#xff1f;二、不稳定的地方在哪里&#xff1f; 零、前言 最近做面试题中&#xff0c;遇到一些平时学习中比较少注意到的问题&#xff0c;记录下来以便后来者学习讨论。 对 堆排序 不熟悉的 可以参考 &#x1f449;&#x1f449;&#x1f4…

TortoiseGit 入门指南07:创建分支

Git 的 分支 出了名的好用。其它的版本控制系统也提供分支&#xff0c;但在易用度上&#xff0c;只有两类版本控制系统&#xff1a;一种是 Git&#xff0c;一种是其它。 Bob 大叔在《匠艺整洁之道》中写道&#xff1a; 我曾经坚持拒绝分支。在使用 CVS 和 Subversion 的时候&a…

检测到目标X-Content-Type-Options响应头缺失

详细描述 X-Content-Type-Options HTTP 消息头相当于一个提示标志&#xff0c;被服务器用来提示客户端一定要遵循在 Content-Type 首部中对 MIME 类型 的设定&#xff0c;而不能对其进行修改。这就禁用了客户端的 MIME 类型嗅探行为&#xff0c;换句话说&#xff0c;也就是意味…

Dynamic-SLAM2019论文翻译

Dynamic-SLAM:动态环境下基于深度学习的语义单目视觉定位与建图 摘要-传统SLAM框架在动态环境下工作时&#xff0c;由于受到动态对象的干扰&#xff0c;性能较差。为了解决动态环境下的SLAM问题&#xff0c;利用深度学习在目标检测中的优势&#xff0c;提出了一种语义同步定位…

Science Advances|上海交大王风平团队揭示深古菌与早期地球协同演化历史

Research Article&#xff0c;2023-7-5&#xff0c;Science Advances&#xff0c; [IF 13.6] 原文链接&#xff1a;https://www.science.org/doi/full/10.1126/sciadv.adf5069 第一作者&#xff1a;侯佳林 通讯作者&#xff1a;王风平&#xff0c;王寅炤 - 摘要 - 近日&#xf…

C++——友元

友元的定义 C 中的友元&#xff08;friend&#xff09;是一种允许非成员函数或类访问另一个类的私有或保护成员的机制。友元可以是一个普通的非成员函数、另一个类或整个类的所有成员函数。 什么情况下需要友元 现在尝试去重载operator<<&#xff0c;然后发现没办法将o…

vscode 配置ssh 免密登录 多台服务器

0、下载vscode Visual Studio Code - Code Editing. Redefined 之前一直用pycharm 但是好像社区免费版本不能连接服务器&#xff0c;还要本地同步代码&#xff0c;比较繁琐&#xff0c;因此改用vscode。 1、添加ssh 添加后可以尝试登录&#xff0c;确认下账号密码&#xff0…

linux提权总结

文章目录 常用命令反弹shell获取完整交互式SHELLLinux内核漏洞提权脏牛提权 CVE-2016-5195metasploit linux提权SUID提权passwd提权ssh密钥提权环境变量劫持提权john破解root密文计划任务提权(cron Jobs)提权脚本LinEnumlinux-exploit-suggester2linuxprivchecker docker逃逸提…

Windows 10 + WSL 2 + Ubuntu 22.04 搭建 AI 环境

参考 Enable NVIDIA CUDA on WSL 在WSL里的Ubuntu 22.04中进行以下操作前&#xff0c;请先在 Windows 10 中安装好 Nvidia驱动程序 和 CUDA Toolkit 11.7 &#xff0c;并将 cuDNN 下载后的文件复制到对应目录中 安装 Conda 23.5.2 wget https://repo.anaconda.com/archive/An…

代码随想录算法训练营第十八天 | 动态规划系列1,2,3,4

动态规划系列1,2,3,4 动态规划理论基础重点 509 斐波那契数未看解答自己编写的青春版重点代码随想录的代码我的代码(当天晚上理解后自己编写) 70 爬楼梯未看解答自己编写的青春版思考后自己写的代码重点代码随想录的代码我的代码(当天晚上理解后自己编写) 746 使用最小花费爬楼…

职责链模式:如何实现可灵活扩展算法的敏感信息过滤框架?

今天&#xff0c;我们主要讲解职责链模式的原理和实现。除此之外&#xff0c;我还会利用职责链模式&#xff0c;带你实现一个可以灵活扩展算法的敏感词过滤框架。下一节课&#xff0c;我们会更加贴近实战&#xff0c;通过剖析Servlet Filter、Spring Interceptor来看&#xff0…

从零开始的python入门之路

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…