首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

全方位解析浏览器渲染原理

网络资源层面 首先我们先抛开浏览器对于资源的处理过程,先来看看一次正常的url输入资源加载方面经历的生命周期。 当我地址栏输入了一个url时,浏览器进程会监听到这次交互。...让我们先从7层协议来分析一下浏览器对于url加载的过程。 首先当我输入url输入一个域名浏览器会在磁盘/内存缓存中去查找请求的文件,查看是否命中缓存。...假设我们是首次访问这个页面,此时并没有任何缓存: 如果我们访问的这个域名没有被解析过,那么我们需要解析地址栏输入域名。解析域名主要依靠的是DNS协议,将域名解析成为ip地址。...首先让我们打开chrome开发者工具: 有兴趣的朋友可以自己尝试输入一下,这里当我输入http://taobao.com/浏览器会解析DNS以及TCP三次握手建立连接然后发送请求,当得到响应后发现Response...之后我们去重定向http://www.taobao.com/,请求得到访问又是301状态码,于是有被重新重定向https://taobao.com/上。

44240
您找到你想要的搜索结果了吗?
是的
没有找到

史上最全解析:从输入 URL 页面展示到底发生了什么?

浏览器输入 url当我浏览器导航栏输入内容时,浏览器会判断我们输入的内容是搜索文本还是符合规则的 url:内容为搜索文本若内容为搜索文本,浏览器调用默认的搜索引擎就行搜索。...有何影响虽然两个域名都可以解析同一个IP上,对用户使用并没有影响,但是会让搜索引擎认为有两个相同的网站存在,造成重复收录,对SEO造成不好影响。如何解决301重定向。...根据域名查询IP当我们调用搜索引擎进行文本搜索或者访问某个 url 时,需要通过 DNS 查询获取域名IP 地址。DNS 查询流程浏览器缓存:浏览器会缓存DNS记录一段时间。...(这里为什么需要301重定向其实就是上文提到的SEO)浏览器发起重定向请求服务器处理请求并响应 HTML:HTTP 响应码1xx:代表请求已被接受,需要继续处理(临时响应)100(客户端继续发送请求,这是临时响应...新域名替换旧域名,旧的域名不再使用时,用户访问旧域名时用301就重定向新的域名302:临时重定向不会缓存,常用 于未登陆的用户访问用户中心重定向登录页面304:协商缓存,告诉客户端有缓存,直接使用缓存的数据

83161

从地址栏输入 URL 之后发生了啥?

域名判断 输入地址栏之前,浏览器会对输入的内容进行检查,如果是一个符合格式的正确 url 就会执行 DNS解析,如果不是,比如输入了一些字符串,那么就会执行搜索功能。...web-http-2.png 首先,浏览器输入 www.qq.com 之后 ,输入的 url 符合地址格式执行 DNS解析。...第二步:查找根域名服务器,查看 www.qq.com 这个域名IP 是多少 ,有则返回 IP 地址,无则执行下一步。...第三步:查找顶级域名服务器,查看 www.qq.com 这个域名 IP 是多少 ,有则返回 IP 地址 ,无则执行下一步。...第四步:由顶级域名服务器得知域名服务器地址,再从查找域名服务器查找到 IP地址返回。 这里也说明一下,一个 url 是怎么分根域名,和顶级域名的。

1.2K21

短连接原理探索

https://www.jianshu.com/u/643a6b684d57 这地址着实有点长啊~~,不美观,然后第一想法我把它映射到我之前买的阿里云域名下做二级域名就ok了,几秒后意识由于前不久阿里域名续费太贵...当我浏览器输入 http://v1wev.cn/kzf4C 时 DNS首先解析获得http://v1wev.cn 的 IP 地址 (这步跟短链无关是多余的废话,大家应该都知道域名ip的dns解析吧...) 当 DNS 获得 IP 地址以后(比如:12.101.225.72),会向这个地址发送 HTTP GET 请求,- 查询短码zf4C获取其对应的长链接 http://v1wev.cn务器会通过短码...这里有个小的知识点,为什么要用 301 跳转而不是 302 ?...他们之间也是有共同点的,就是用户都可以看到url替换为了一个新的,然后发出请求,区别是: 301 是永久重定向,302 是临时重定向

1.4K20

输入URL页面展示到底发生了什么

总的过程大概如下: 1、输入地址 当我们开始浏览器输入网址的时候,浏览器其实就已经智能的匹配可能得 url 了,他会从历史记录,书签等地方,找到已经输入的字符串可能对应的 url,然后给出智能提示...处理办法就是用DNS负载均衡技术,它的原理是DNS服务器为同一个主机名配置多个IP地址,应答DNS查询时,DNS服务器对每个查询将以DNS文件主机记录的IP地址按顺序返回不同的解析结果,将客户端的访问引导不同的机器上去...301和302状态码都表示重定向,就是说浏览器拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址,这个地址可以从响应的Location首部获取(用户看到的效果就是他输入的地址A瞬间变成了另一个地址...解析过程浏览器首先会解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制屏幕上。...具体的过程可以看我这篇文章:点击这里 9、浏览器发送请求获取嵌入 HTML 的资源(如图片、音频、视频、CSS、JS等等) 其实这个步骤可以并列步骤8浏览器显示HTML时,它会注意需要获取其他地址内容的标签

1.8K30

输入URL页面展示到底发生了什么

总的过程大概如下: 1、输入地址 当我们开始浏览器输入网址的时候,浏览器其实就已经智能的匹配可能得 url 了,他会从历史记录,书签等地方,找到已经输入的字符串可能对应的 url,然后给出智能提示...处理办法就是用DNS负载均衡技术,它的原理是DNS服务器为同一个主机名配置多个IP地址,应答DNS查询时,DNS服务器对每个查询将以DNS文件主机记录的IP地址按顺序返回不同的解析结果,将客户端的访问引导不同的机器上去...301和302状态码都表示重定向,就是说浏览器拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址,这个地址可以从响应的Location首部获取(用户看到的效果就是他输入的地址A瞬间变成了另一个地址...解析过程浏览器首先会解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制屏幕上。...具体的过程可以看我这篇文章:点击这里 9、浏览器发送请求获取嵌入 HTML 的资源(如图片、音频、视频、CSS、JS等等) 其实这个步骤可以并列步骤8浏览器显示HTML时,它会注意需要获取其他地址内容的标签

1.2K10

通过浏览器访问一个站点,其中经历了哪些过程

阅读目录 1、输入地址 2、浏览器查找域名IP 地址 3、浏览器向 web 服务器发送一个 HTTP 请求 4、服务器的永久重定向响应 5、浏览器跟踪重定向地址 6、服务器处理请求 7、服务器返回一个...HTTP 响应 8、浏览器显示 HTML 9、浏览器发送请求获取嵌入 HTML 的资源(如图片、音频、视频、CSS、JS等等) 1、输入地址 当我们开始浏览器输入网址的时候,浏览器其实就已经智能的匹配可能得...解析过程浏览器首先会解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制屏幕上。...9、浏览器发送请求获取嵌入 HTML 的资源(如图片、音频、视频、CSS、JS等等) 其实这个步骤可以并列步骤8浏览器显示HTML时,它会注意需要获取其他地址内容的标签。...所以浏览器会在DNS查找这些域名,发送请求,重定向等等… 不像动态页面,静态文件会允许浏览器对其进行缓存。

1.4K10

输入网址显示网页的全过程分析

本文将更深入的研究当你输入一个网址的时候,后台到底发生了一件件什么样的事~ 1. 首先嘛,你得浏览器输入要网址: 2. 浏览器查找域名IP地址 导航的第一步是通过访问的域名找出其IP地址。...请求也包含浏览器存储的该域名的cookies。可能你已经知道,不同页面请求当中,cookies是与跟踪一个网站状态相匹配的键值。...浏览器发送获取嵌入HTML的对象 浏览器显示HTML时,它会注意需要获取其他地址内容的标签。这时,浏览器会发送一个获取请求来重新获得这些文件。...所以浏览器会在DNS查找这些域名,发送请求,重定向等等… 但不像动态页面那样,静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯,而从缓存中直接读取。...我们知道因特网上主机是靠一个32位的ip地址来定位的,HTTP用的URL也算是地址,但是比较高级,IP协议是理解不了的,所以需要一个从URLIP的转换,这个过程通过DNS(域名查询系统)协议完成。

2.3K40

人人都在用,但你却不知道它背后发生了什么——浏览器的工作原理:浏览器幕后揭秘

所以当我们再在 Chrome 运行上面那个死循环的脚本时,没有响应的仅仅是当前的页面。...浏览器进程发出URL请求给网络进程 2. 网络进程接收到URL请求后,发起网络请求,然后服务器返回HTTP数据网络进程,网络进程解析HTTP响应头数据,并将其转发给浏览器进程 3....网络进程请求DNS返回域名对应的IP和端口号,如果之前DNS数据缓存服务缓存过当前域名信息,就会直接返回缓存信息;否则,发起请求获取根据域名解析出来的IP和端口号,如果没有端口号,http默认80,https...应用层HTTP解析请求头和请求体,如果需要重定向HTTP直接返回HTTP响应数据的状态code301或者302,同时在请求头的Location字段附上重定向地址,浏览器会根据code和Location...这也就解释了为什么浏览器的地址栏里面输入了一个地址后,之前的页面没有立马消失,而是要加载一会儿才会更新页面。 复制代码 16.

83020

HTTP请求流程你了解了么?

OSI体系结构 TCP/IP相关协议结构 应用层 HTTP,Telnet,FTP等 表示层 会话层 传输层 TCP,UDP 网络层 IP 数据链路层 物理层 了解HTTP协议是建立TCP连接基础之上的...浏览器端发起 HTTP 请求流程 浏览器输入网址:http://time.geekbang.org/index.html,之后会完成什么步骤呢?...GET /index.html HTTP1.1 2、查找缓存 真正发起网络请求之前,浏览器会先在浏览器缓存查询是否有要请求的文件。...换句话说,即浏览器请求DNS返回域名对应的IP,而请求DNS时也会查询DNS数据缓存服务,判断是否域名已解析过, 如果解析过则查询直接使用,拿到IP后则判断URL是否指明端口号,没有则HTTP协议默认时...状态 301 就是告诉浏览器,我需要重定向另外一个网址,而需要重定向的网址正是包含在响应头的 Location 字段,接下来,浏览器获取 Location 字段的地址,并使用该地址重新导航,这就是一个完整重定向的执行流程

89710

输入url页面展示到底发生了什么?

总的过程大概如下: ---- 1、输入地址 当我们开始浏览器输入网址的时候,浏览器其实就已经智能的匹配可能得 url 了,他会从历史记录,书签等地方,找到已经输入的字符串可能对应的 url,然后给出智能提示...处理办法就是用DNS负载均衡技术,它的原理是DNS服务器为同一个主机名配置多个IP地址,应答DNS查询时,DNS服务器对每个查询将以DNS文件主机记录的IP地址按顺序返回不同的解析结果,将客户端的访问引导不同的机器上去...301和302状态码都表示重定向,就是说浏览器拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址,这个地址可以从响应的Location首部获取(用户看到的效果就是他输入的地址A瞬间变成了另一个地址...解析过程浏览器首先会解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制屏幕上。...所以浏览器会在DNS查找这些域名,发送请求,重定向等等… 不像动态页面,静态文件会允许浏览器对其进行缓存。

90510

【前端词典】从输入 URL 展现涉及哪些缓存环节

可以 Chrome 的地址栏输入 Chrome://cache 查看缓存的信息 转换非 ASCII 的 Unicode 字符 浏览器检查输入是否含有不是 a-z,A-Z,0-9,- 或者 ....浏览器搜索自己的 DNS 缓存(浏览器维护一张域名IP 地址的对应表);如果没有命中,进入下一步; 搜索操作系统的 DNS 缓存;如果没有命中,进入下一步; 搜索操作系统的 hosts 文件( Windows...环境下,维护一张域名IP 地址的对应表);如果没有命中,进入下一步; 操作系统将域名发送至 LDNS (本地区域名服务器),LDNS 查询自己的 DNS 缓存(一般命中率 80% 左右),查找成功则返回结果...为什么缓存不设置较长时间呢? 答:虽然 DNS 缓存可以提高获取 DNS 的速度,但缓存时间过长也会影响 DNS IP 变更时不能及时解析最新的 IP。...如果服务端提示缓存资源未改动( Not Modified ),资源会被重定向浏览器缓存,这种情况下网络请求对应的状态码是 304。

1.2K70

输入 URL 渲染页面整个过程 梳理篇

用户输入后详细流程 1.当用户地址栏输入一个查询关键字时,有两种情况 搜索内容:地址栏会使用浏览器默认的搜索引擎,来合成新的带搜索关键字的 URL。...2.DNS 解析 在请求前的第一步是要进行 DNS 解析,以获取请求域名的服务器 IP 地址。然后进行 TCP 连接,如果请求协议是 HTTPS,那么还需要建立 TLS 连接。...浏览器进程接收到渲染进程“提交文档”的消息之后,便开始移除之前旧的文档,然后更新浏览器进程的页面状态。后面就可以开始走渲染流程了。 当我们遇到状态码是其他的呢?...这里设计状态码的,可以在当前目录找到相关的文章 比如遇到的状态码是 301/302/306/307,这些都是重定向的状态码 那么说明服务器需要浏览器重定向其他 URL。...这时网络进程会从响应头的 Location 字段里面读取重定向的地址,然后再发起新的 HTTP 或者 HTTPS 请求,一切又重头开始了,刚刚在用户输入 baidu 的时候已经讲过重定向的原理的。

72400

一文快速实现微信公众号支付功能(详细版,建议收藏备用)

H5支付:用户微信以外的手机浏览器请求微信支付的场景唤起微信支付 小程序支付:用户微信小程序中使用微信支付的场景 本篇文章实现的是公众号支付,会使用到网页授权及微信JS-SDK相关知识,但不再详细介绍...4.拥有一个正式的应用服务器,并且注册域名 微信支付涉及的私密数据比较多,不允许使用natapp,花生壳之类的内网穿透工具实现,需要有正式的服务器环境,并且要注册域名,不能使用IP。...若对openID不了解的同学可先参考微信公众号开发文档:https://mp.weixin.qq.com/wiki 配置JS接口安全域名:要让我们的页面中弹出输入密码的窗口,需要使用微信提供的JS-SDK...如果对网页授权不熟悉的同学先参考这篇文章: https://www.jianshu.com/p/94b0e53cccc3 访问主页的地址:http://www.wolfcode.cn/index.do...当用户第一次打开主页,默认没有code参数,此时会先重定向获取授权的地址 (如果只需要获取openid,可以使用scope为snsapi_base静默授权的方式) 经过授权地址再重定向到我们的index.do

4.2K20

那些年,我们用过的fiddler

当我们开始抓包时候,会把浏览器或者设备上所有的包都抓下来,包括资源文件,很多包是我们不想要的,或者想过滤掉的。可以设置Filter....登录博客园,会发现已经拦截登录后服务器返回的数据了,此时可以修改任意返回数据 4. 取消断点,命令行输入: bpafter 回车就可以了 如上图,当我们设置好断点后,再次请求,请求会停住。...替换: 对请求的某个ip域名进行重定向 打开fiddler-tools-hosts 如我有IP223.xx.xx.101:8080,重定向223.xx.xx.99:8080上去, 只需要在里面填入即可...:223.xx.xx.101:8080 223.xx.xx.99:8080 自此,所有发送到223.xx.xx.101:8080的请求都将重定向至223.xx.xx.99:8080 对请求的某个域名进行替换...替换文件,或者在线替换 点击AutoResponder,然后钩上Enable rules 最下面的最后一行的下拉框里面,选择你想要做的操作。

680110

产品经理学技术:浏览器输入URL回车后发生了什么

与互联网相关的协议集合统称为TCP/IP。而HTTP协议只是TCP/IP协议的一部分。下面只会讲到与HTTP相关的内容。...大致流程 1、URL解析 2、DNS解析 3、HTTP连接 4、服务器处理请求 5、浏览器接受响应 6、浏览器渲染页面 01 URL解析 ●假设我们浏览器输入URL:http://www.a.com...b=1 首先浏览器会判断你输入的地址是合法的URL还是待搜索的关键词,如果是合法的URL,则会解析出域名:www.a.com,然后进入下一步。...02 DNS解析 ● 浏览器输入的只是服务器域名ip地址才是目标服务器的真实地址,所以为了寻址,要先经过DNS解析,把域名转化成IP地址。...03 HTTP连接 ● 解析好ip地址后,浏览器会发起一条HTTP请求,和目标服务器建立一条连接来通信。 ● 服务器会对连接请求做出响应,表示同意建立连接。

76320

详细拆解导航流程:从输入URL页面展示,这中间发生了什么?

文章摘录:极客专栏———《浏览器工作原理与实践》 编者荐语: “浏览器里,从输入 URL 页面展示,这中间发生了什么?”...有缓存资源:直接返回资源给浏览器进程 缓存无请求资源:DNS解析,以获取域名的服务器IP地址。如果请求协议是 HTTPS,那么还需要建立 TLS 连接。...2) 然后,利用IP地址和服务器建议TCP连接。 3) 连接建立之后,浏览器端会构建请求行、请求头等信息,并把和该域名相关的Cookie等数据附加到请求头中,然后向服务器发送构建的请求信息。...① 重定向 接收到服务器返回的响应头后,网络进程开始解析响应头,如果发现返回的状态码是 301 或者 302,那么说明服务器需要浏览器重定向其他 URL。...这时网络进程会从响应头的 Location 字段里面读取重定向的地址,然后再发起新的 HTTP 或者 HTTPS 请求,一切又重头开始了。

1.3K20

经典面试:当你输入一个网址后回车,实际会发生什么?

来源:http://t.cn/7Vc1u 1. 首先嘛,你得浏览器输入要网址: 2. 浏览器查找域名IP地址 3....浏览器开始显示HTML 9. 浏览器发送获取嵌入HTML的对象 10....本文将更深入的研究当你输入一个网址的时候,后台到底发生了一件件什么样的事~ 1. 首先嘛,你得浏览器输入要网址: ? image 2. 浏览器查找域名IP地址 ?...请求也包含浏览器存储的该域名的cookies。可能你已经知道,不同页面请求当中,cookies是与跟踪一个网站状态相匹配的键值。...所以浏览器会在DNS查找这些域名,发送请求,重定向等等… 但 不像动态页面那样,静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯,而从缓存中直接读取。

76020

HTTP网站如何升级HTTPS

四、301重定向 下一步,修改 Web 服务器的配置文件,使用 301 重定向,将 HTTP...5.1 HTTP Strict Transport Security (HSTS) 访问网站时,用户很少直接在地址栏输入https://,总是通过点击链接,或者3xx重定向,从HTTP页面进入HTTPS...(1)接下来的一年(即31536000秒)浏览器只要向example.com或其子域名发送HTTP请求时,必须采用HTTPS来发起连接。...用户点击超链接或在地址栏输入http://www.example.com/,浏览器应当自动将http转写成https,然后直接向https://www.example.com/发送请求。...(2)接下来的一年,如果example.com服务器发送的证书无效,用户不能忽略浏览器警告,将无法继续访问该网站。 HSTS 很大程度上解决了 SSL 剥离攻击。

4.7K21
领券