微站开发,百度找不到 网站,网站首页如何做浮动窗口,餐饮行业管理系统浏览器从输入URL到界面显示一共经历了6个阶段1. DNS(域名)解析2. TCP连接(三次握手)3. 发送HTTP请求4. 服务器处理请求并返回HTTP报文5. 浏览器解析渲染页面6. 连接结束1. DNS(域名)解析一个网址到ip地址的转换#xff0c;找到URL对应的IP。如www.xiaochongtec.cn到22.33.55.6…浏览器从输入URL到界面显示一共经历了6个阶段1. DNS(域名)解析2. TCP连接(三次握手)3. 发送HTTP请求4. 服务器处理请求并返回HTTP报文5. 浏览器解析渲染页面6. 连接结束1. DNS(域名)解析一个网址到ip地址的转换找到URL对应的IP。如www.xiaochongtec.cn到22.33.55.66。DNS查找过程中若有对应IP则停止查找浏览器缓存、系统缓存、路由缓存、ISP(互联网服务提供商) DNS缓存(DNS服务器)2. TCP连接拿到 ip 地址后浏览器会向服务器发起TCP连接请求通过三次握手建立TCP连接。服务器为什么能接收到客服端发起的请求呢服务器监听原理服务器通过 socket(应用层与TCP通信中间层)bind 和 listen准备好接收外来连接此时服务端状态为Listen三次握手1. 客户端向服务器发送SYN(同步)报文(SEQxSYN1)并进入SYN_SENT状态等待服务器确认 (SENT发送)2. 服务器收到客户端的请求向客户端回复一个确认消息(ACKx1)服务器向客户端发送一个SYN包(SEQy)建立请求连接此时服务器进入 SYN_RECV 状态 (RECV接收)3. 客户端接收服务器的回复(SYNACK 报文)然后客户端也向服务器发送发送确认包此包发送完毕客户端和服务器进入 ESTABLISHED 状态完成 3 次握手。 (ACK确认 ESTABLISHED 成立)3. 发送HTTP请求浏览器向服务器发送HTTP请求。一个HTTP又分为请求和响应两部分。HTTP请求消息由请求行(request line)、请求头(header)、空行和请求数据4个部分组成。1. 请求行请求方法 URL HTTP协议版本 组成。如GET /index.html HTTP/1.12. 请求头由关键字/值对组成。User-Agent产生请求的浏览器类型。Accept客户端可识别的内容类型列表。Host请求的主机名允许多个域名同处一个IP地址即虚拟主机3. 空行最后一个请求头之后是一个空行发送回车符和换行符通知服务器以下不再有请求头4. 请求数据请求数据不在GET方法中使用而是在POST方法中使用。与请求数据相关的最常使用的请求头是Content-Type(Content-Typeapplication/x-www-form-urlencoded)和Content-LengthHTTP响应消息由响应行、响应头、响应体三个部分组成。1. 响应行HTTP协议版本 状态码 描述 组成。如 HTTP/1.1 200 OK状态码由三位数字组成第一个数字定义了响应的类别且有五种可能取值。1xx指示信息–表示请求已接收继续处理。2xx成功–表示请求已被成功接收、理解、接受。3xx重定向–要完成请求必须进行更进一步的操作。4xx客户端错误–请求有语法错误或请求无法实现。5xx服务器端错误–服务器未能实现合法的请求。2. 响应头与请求头部类似为响应报文添加了一些附加信息描述服务器的基本信息以及数据的描述服务器通过这些数据的描述信息可以通知客户端如何处理等一会儿它回送的数据。3. 响应体响应体就是响应的消息体如果是纯数据就是返回纯数据如果请求的是HTML页面那么返回的就是HTML代码如果是JS就是JS代码HTTP特性1. HTTP是无连接无连接意味着每次只能处理一个请求服务器处理完客户端的请求并收到客户端应答后断开连接2. HTTP是媒体独立的只要客户端和服务器知道如何处理的数据内容任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型3. HTTP是无状态HTTP协议是无状态协议表现为后续处理需要前面的信息则它必须重传4. 服务器处理请求并返回HTTP报文服务器在接收到请求后,解析用户请求,知道了要调度那些资源文件,再通过相应的资源文件,处理用户的请求和参数,并调用数据库信息,最后讲结果通过web服务器返回给浏览器.5. 浏览器解析渲染页面解析过程6个步骤解析HTML - 创建DOM树 - 解析CSS形成CSS对象模型 - DOM树和CSS 结合构建渲染树 - 布局 - 绘制 - 显示渲染树从DOM树的根节点开始遍历每个可见节点让后对每个可见节点找到适配的CSS样式规则并应用DOM 树不完全对应display: none的元素不在渲染树中而visibility: hidden的元素在渲染书中。display: none在DOM 树中布局对渲染树上的每个元素计算它的坐标称之为布局。包含宽高位置背景色等样式信息我们常说的脱离文档流(可以随意设置宽高、不设置则给根据内容适应、不再给父元素汇报宽高)其实就是脱离渲染树导致脱离标准流的元素float元素absoulte元素fixed元素会发生位置偏移。绘制根据渲染树以及布局得到的几何信息通过绘制得到节点的绝对像素。显示将得到的节点的绝对像素发送给GPU展示在页面上回流(重排)与重绘回流(重排)当浏览器发现某个部分发生了页面布局和几何信息的变化就需要倒回去重新渲染了重新渲染就又要经过布局计算可见节点在设备视口(viewport)内的几何信息以及之后的绘制和显示将这些信息渲染在页面上。如DOM操作(元素添加、删除、修改或者元素顺序的改变)重绘改变元素外观但是不影响之前的位置重新执行浏览器的绘制和显示过程。如 background-color(背景色) border-color(边框色) visibility(可见性)。浏览器会根据元素的新属性重新绘制一次(这就是重绘或者说重新构造样式)使元素呈现新的外观。重绘不一定需要重排比如改变某个网页元素的颜色就只会触发重绘不会触发重排因为布局没有改变。但是重排必然导致重绘比如改变一个网页元素的位置就会同时触发重排和重绘因为布局改变了。display:none、visibility:hidden和overflow:hidden的区别1. display:none隐藏元素不占网页中的任何空间让这个元素彻底消失(看不见也摸不着),由于会影响到网页的空间所以会引起两次重排和重绘2. visibility:hidden占据的空间还是存在的该操作不会对页面有影响所以只会引起一次重绘。3. overflow:hidden宽高把多余的那部分剪掉会引起一次重排和重绘4.脱离文档流和添加回文档这两次回流是无可避免的但是中间的DOM操作则是在渲染树之外进行的因此不会产生任何的回流与重绘
