来源:http://t.cn/RBzkRYO 前言 一、文本对话--从请求到响应 二、TCP/IP 协议族介绍 三、基于TCP/IP通信过程 四、TCP建立连接及断开(重点补充) 小结 前言 互联网的原始目的...接下来由图片介绍下URL到呈现页面的过程。 一、文本对话--从请求到响应 ? 客户端(浏览器)请求过程.jpg 我们在浏览器中输入一个 URL,回车之后便会在浏览器中观察到页面内容。...简单说,这个通信的过程是基于TCP/IP通信协议族规范上实现的,完成从客户端到服务器端等一系列信息交换的流程。 二、TCP/IP 协议族介绍 1、TCP/IP协议族是什么呢?...字符为起点,每个参数以“&”隔开,再以“=”分开参数名称与数据,通常以UTF8的URL编码,避开字符冲突的问题 (8) 片段:以“#”字符为起点,使用片段标识符通常可标记出已获取资源中的子资源 2、DNS...在连接处于2MSL等待时,任何迟到的报文段将被丢弃,因为处于2MSL等待的,由该插口(插口是IP和端口对的意思,socket)定义的连接在这段时间内将不能被再用,这样就可以使下一个新的连接中不会出现这种旧的连接之前延迟的报文段
如果更换了域名,那么为了把原来的域名的权重都转移到新域名上面,最好的方法是 301 重定向,我们可以使用 htaccess 将旧域名重定向到新域名,具体方法如下: 创建一个.htaccess文件,或者在现有的....htaccess 文件中将下面提供的代码写入文件内,它可以确保旧域名所有的目录或者网页正确的跳转到新域名内。...记住.htaccess文件一定要放在旧网站的根目录下,并且新网站要和旧网站保持相同的目录结构及网页文件 此外,我建议大家归总旧网站的外部链接,并联系相应的站点修改导入链链的URL,以指向新站点。
前面的话 本文将详细介绍从输入URL到页面加载的全过程 概述 从输入URL到页面加载的主干流程如下: 1、浏览器构建HTTP Request请求 2、网络传输 3、服务器构建HTTP...网络传输 从客户机到服务器需要通过许多网络设备, 一般地,包括集线器、交换器、路由器等 【集线器】 集线器是物理层设备,比特流到达集线器后,集线器简单地对比特流进行放大,从除接收端口以外的所有端口转发出去...数据最后被传到应用层 1、如果HTTP响应报文是301或302重定向,则浏览器会相应头中的location再次发送请求 2、浏览器处理HTTP响应报文中的主体内容,首先使用loader模块加载相应的资源...(6)元素有CSS filter(滤镜)属性 (7)2D Canvas或者WebGL (8)Video元素 5、布局和渲染 布局就是安排和计算页面中每个元素大小位置等几何信息的过程。...常说的脱离文档流,就是指脱离渲染树Render Tree 重绘是指当与视觉相关的样式属性值被更新时会触发绘制过程,在绘制过程中要重新计算元素的视觉信息,使元素呈现新的外观 由于元素的重绘repaint
前言 打开浏览器从输入网址到网页呈现在大家面前,背后到底发生了什么?经历怎么样的一个过程?先给大家来张总体流程图,具体步骤请看下文分解! ?...1.请求行包含请求方法、URL、协议版本 请求方法包含 8 种:GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE。...3xx:重定向--要完成请求必须进行更进一步的操作。4xx:客户端错误--请求有语法错误或请求无法实现。5xx:服务器端错误--服务器未能实现合法的请求。...(第四次挥手:由浏览器发起,告诉服务器,我响应报文接受完了,我准备关闭了,你也准备吧) 参考文章 从输入页面地址到展示页面信息都发生了些什么?...前端经典面试题: 从输入 URL 到页面加载发生了什么?
所以互联网设计者需要在用户的方便性与可用性方面做一个权衡,这个权衡就是一个网址到IP地址的转换,这个过程就是DNS解析。它实际上充当了一个翻译的角色,实现了网址到IP地址的转换。...4、浏览器解析渲染页面 在收到HTML,CSS,JS文件后,浏览器通过WebKit渲染,将页面呈现到屏幕上。下图对应的就是WebKit渲染的过程。 ?...首先浏览器解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕上。...这个过程比较复杂,涉及到两个概念: reflow(回流)和repain(重绘)。...所有的同步任务在主线程上执行,形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件;脚本运行时先依次运行执行栈,然后会从任务队列里提取事件,运行任务队列中的任务,这个过程是不断重复的,所以又叫做事件循环
:TCP 四次挥手一、什么是URL?...URL(Uniform Resource Locator),统一资源定位符,用于定位互联网上资源,俗称网址。...浏览器如何通过域名去查询 URL 对应的 IP 呢?DNS域名解析分为递归查询和迭代查询两种方式,现一般为迭代查询。...为避免篇幅过长,http协议、缓存等相关内容请参阅: 从HTTP到WEB缓存五、服务器处理请求并返回 HTTP 报文每台服务器上都会安装处理请求的应用——Web server。...意味着元素发生的改变只是影响了元素的一些外观之类的时候(例如,背景色,边框颜色,文字颜色等),此时只需要应用新样式绘制这个元素就可以了七、断开连接当数据传送完毕,需要断开 tcp 连接,此时发起 tcp
:TCP 四次挥手一、什么是URL?...URL(Uniform Resource Locator),统一资源定位符,用于定位互联网上资源,俗称网址。...浏览器如何通过域名去查询 URL 对应的 IP 呢?DNS域名解析分为递归查询和迭代查询两种方式,现一般为迭代查询。...为避免篇幅过长,http协议、缓存等相关内容请参阅: 从HTTP到WEB缓存五、服务器处理请求并返回 HTTP 报文每台服务器上都会安装处理请求的应用——Web server。...例如 Map、Set、WeakMap、WeakSet(8)矢量集合,SIMD 矢量集合中的数据会被组织为一个数据序列。
理解从输入url到看到页面的过程,弄明白这中间有哪些步骤,再仔细分析这些步骤的原理和行为,是我所能想到最清晰的一条知识脉络了。 2. 如何看到我们的页面?...step8: 关闭TCP连接 为了避免服务器与客户端双方的资源占用和损耗,当双方没有请求或响应传递时,任意一方都可以发起关闭请求。...所以,浏览器会在DNS中查询域名,并向URL发送请求,进行重定向(其实以上步骤我是省略了重定向这一步的)等等以上步骤 当然,静态文件和动态网站不一样,它们允许被浏览器缓存。...总结 以上步骤只是大略地解析了从浏览器输入url到最终页面展示在用户眼前的流程,更多细节我会开单章进行讲解。...参考 "天龙八步"细说浏览器输入URL后发生了什么 【译】从输入URL到页面渲染完成 从输入 URL 到页面加载完的过程中都发生了什么事情?
问题:在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么。仔细思考这个问题,发现确实很深,这个过程涉及到的东西很多。...上文中请求到google的IP地址时,经历了8个步骤,这个过程中存在多个请求(同时存在UDP和TCP请求,为什么有两种请求方式,请自行查找)。如果每次都经过这么多步骤,是否太耗时间?...DNS可以返回一个合适的机器的IP给用户,例如可以根据每台机器的负载量,该机器离用户地理位置的距离等等,这种过程就是DNS负载均衡,又叫做DNS重定向。...3xx:重定向–要完成请求必须进行更进一步的操作。 4xx:客户端错误–请求有语法错误或请求无法实现。 5xx:服务器端错误–服务器未能实现合法的请求。...8、总结 写这篇文章真的非常纠结,前前后后断断续续写了两个星期,因为涉及到的东西比较多,再加上有些东西记忆的没有那么清晰了,所以不好下笔。
服务器拿到请求后,响应一段JS代码,这段代码实际上是一个函数调用,调用的是客户端预先生成好的函数,并把浏览器需要的数据作为参数传递到函数中,从而间接的把数据传递给客户端图片JSONP有着明显的缺点,即其只能支持...某些需要权限的操作就无法进行不过可以通过简单的配置就可以实现附带 cookie// xhrvar xhr = new XMLHttpRequest();xhr.withCredentials = true;// fetch apifetch(url
301和302状态码都表示重定向,就是说浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址,这个地址可以从响应的Location首部中获取(用户看到的效果就是他输入的地址A瞬间变成了另一个地址...301表示旧地址A的资源已经被永久地移除了(这个资源不可访问了),搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址; 302表示旧地址A的资源还在(仍然可以访问),这个重定向只是临时地从旧地址...A跳转到地址B,搜索引擎会抓取新的内容而保存旧的网址。...301 Moved Permanently 永久性重定向,响应报文的Location首部应该有该资源的新URL 302 Found 临时性重定向,响应报文的Location首部给出的URL用来临时定位资源...有的文件可能会不需要与服务器通讯,而从缓存中直接读取,或者可以放到CDN中 至此,从输入url到页面展示的过程终于整理完了。
刚开始写这篇文章还是挺纠结的,因为网上搜索“从输入url到页面展示到底发生了什么”,你可以搜到一大堆的资料。...301和302状态码都表示重定向,就是说浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址,这个地址可以从响应的Location首部中获取(用户看到的效果就是他输入的地址A瞬间变成了另一个地址...301表示旧地址A的资源已经被永久地移除了(这个资源不可访问了),搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址; 302表示旧地址A的资源还在(仍然可以访问),这个重定向只是临时地从旧地址...A跳转到地址B,搜索引擎会抓取新的内容而保存旧的网址。...301 Moved Permanently 永久性重定向,响应报文的Location首部应该有该资源的新URL 302 Found 临时性重定向,响应报文的Location首部给出的URL用来临时定位资源
用户输入后详细流程 1.当用户在地址栏中输入一个查询关键字时,有两种情况 搜索内容:地址栏会使用浏览器默认的搜索引擎,来合成新的带搜索关键字的 URL。...浏览器进程接收到渲染进程“提交文档”的消息之后,便开始移除之前旧的文档,然后更新浏览器进程中的页面状态。后面就可以开始走渲染流程了。 当我们遇到状态码是其他的呢?...这里设计到状态码的,可以在当前目录找到相关的文章 比如遇到的状态码是 301/302/306/307,这些都是重定向的状态码 那么说明服务器需要浏览器重定向到其他 URL。...这时网络进程会从响应头的 Location 字段里面读取重定向的地址,然后再发起新的 HTTP 或者 HTTPS 请求,一切又重头开始了,刚刚在用户输入 baidu 的时候已经讲过重定向的原理的。...Content-Type: text/html;charset=utf-8:是一个 html 类型,那么浏览器就会交给渲染进程渲染这个 html。
3xx:重定向–要完成请求必须进行更进一步的操作。 4xx:客户端错误–请求有语法错误或请求无法实现。 5xx:服务器端错误–服务器未能实现合法的请求。
为了让用户在浏览到 192.168.0.100/assets.pdf 时可以访问到此文件,请打开 192.168.0.100 上的 Apache 配置文件并添加以下重写规则(或者也可以将以下规则添加到...# tail -n 1 /var/log/apache2/access.log 检查 Apache 日志 在本文中,我们讨论了如何对已移动到其他服务器的资源进行重定向。...总而言之,我强烈建议你看看 mod_rewrite 指南和 Apache 重定向指南,以供将来参考。
1、浏览器的地址栏输入URL并按下回车。 2、浏览器查找当前URL是否存在缓存,并比较缓存是否过期。 3、DNS解析URL对应的IP。 4、根据IP建立TCP连接(三次握手)。 ...8、关闭TCP连接(四次挥手)。 说完整个过程的几个关键点后我们再来展开的说一下。...3xx:重定向–要完成请求必须进行更进一步的操作。 4xx:客户端错误–请求有语法错误或请求无法实现。 5xx:服务器端错误–服务器未能实现合法的请求。 ...第二次挥手是服务器发送ACK表示同意,如果在这一次服务器也发送FIN请求断开连接似乎也没有不妥,但考虑到服务器可能还有数据要发送,所以服务器发送FIN应该放在第三次挥手中。 ...至此从浏览器地址栏输入URL到页面呈现到你面前的整个过程就分析完了。
在讲“从输入 URL 到展现涉及到的缓存环节”之前,我们先了解下缓存的优点: 缓存的几个优点 减少冗余的数据传输,可节省流量 缓解带宽瓶颈问题,可更快加载页面 缓解瞬间拥塞,可缓解原始服务器的压力 降低距离延时...浏览器会对主机名部分使用 Punycode 编码 二、检查 HSTS 预加载列表 HSTS( HTTP Strict Transport Security )国际互联网工程组织 IETE 正在推行一种新的...可选的设置一个时间(单位秒),表示响应不能超过的过时时间 min-fresh=:表示客户端希望在指定的时间内获取最新的响应 重新验证和重新加载 must-revalidate:缓存必须在使用之前验证旧资源的状态...如果服务端提示缓存资源未改动( Not Modified ),资源会被重定向到浏览器缓存,这种情况下网络请求对应的状态码是 304。...如果不匹配,服务器会把新的验证码放在请求头的 Etag 字段中,并且以 200 状态码返回资源。