标签：HTTP 通讯 浏览器 请求 DOM 渲染 服务器

一.Ajax 是什么? Ajax的工作原理是什么？

1.1ajax是什么
Ajax其核心有 JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，实现页面的局部刷新

1.2 为什么需要Ajax
在没有使用Ajax情况下：Web站点强制用户进入提交/等待/重新显示（重新加载整个网页），对于服务器加大了流量，对于用户每一次与服务器传递数据都会重新加载整个网页。
使用Ajax情况下：通过在后台与服务器进行少量数据交换，AJAX 使用JavaScript和DHTML立即更新UI（部分刷新），这对用户有利，因为它不会干扰或中断他或她正在使用的网页。

1.3 Ajax 的过程

1. 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
2. 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
3. 设置响应 HTTP 请求状态变化的函数
4. 发送 HTTP 请求
5. 获取异步调用返回的数据
6. 使用 JavaScript 和 DOM 实现局部刷新

1.4请简述ajax中get()和post()的区别

• 区别一:get重点在从服务器上获取资源,post重点在想服务器发送数据;
• 区别二:get传输数据是通过URL请求,以filed(字段)=value的形式,置于URL后,并用"?“连接,多个请求数据之间用”&"连接,如http://127.0.0.1/Test/login.action?name=admin&password=admin，这个过程用户是可见的
• 区别三:get传输量小,因为受URL长度限制,但效率较低
  post可以传输大量数据,所以上传文件时只能用post方式
• 区别四:get是不安全的,因为URL是可见的,可能会泄露私密信息,如密码等 post较get安全

二。在浏览器中输入URL后，执行的全部过程。（一次完整的http请求过程）
整个流程如下：

1.域名解析
2. 发起TCP的3次握手
3. 建立TCP连接后发起http请求，服务器响应htp请求
4 浏览器解析htm代码,并请求html代码中的资源(如js、css、图片等）
5. 断开TCP连接
6. 浏览器对页面进行渲染呈现给用户

1、DNS域名解析
回车敲响的那一刻，浏览器检查了输入框，www.didudidudu.com是什么鬼东西？？我需要的可是IP地址呀！万般无奈之下找向了浏览器缓存，让其查找是否有这家伙的记录，结果并没有发现，此时找向系统缓存，主要去查找了系统中的hosts文件，同样没有，此时找向路由器缓存，查看路由器映射表，然而，并没有！于是，计算机将域名发给了本地DNS服务器（提供本地连接的服务商），本地DNS服务器找不到会将域名发送给其他服务器，进行递归过程，首先会发送到根域名服务器去找，返回顶级域名服务器的IP地址，再请求顶级域名服务器IP返回二级域名服务器IP，再请求二级域名服务器IP返回三级域名服务器IP…直到找到对应的IP地址，返回给浏览器。

2、发起TCP连接（三次握手）
拿到IP地址后的浏览器很开心，终于可以有目的的去联系远方的“朋友”了，此时作用于传输层的TCP协议向远端服务器发起连接请求，此举成为三次握手：

①源端->远端：你好，我想跟你连接可以吗？（SYN=1,seq=x）

②远端->源端：可以，你确定要连接是吧？（SYN=1,ACK=1,seq=y,ack=x+1）

③源端->远端：确定，我们连接吧！（ACK=1,seq=x+1,ack=y+1）

3、发送HTTP请求，接受HTTP响应

OK，连接上了，传输吧，这时就需要将用户输入的地址封装成HTTP Request请求报文，发送到服务器，服务器收到请求后会发出应答，即响应数据。
HTTP请求报文格式：请求行+请求头+空行+消息体，请求行包括请求方式（GET/POST/DELETE/PUT）、请求资源路径（URL）、HTTP版本号；
HTTP响应报文格式：状态行+响应头+空行+消息体，状态行包括HTTP版本号、状态码、状态说明。

4、浏览器解析HTML代码，请求js，css等资源，最后进行页面渲染，呈现给用户

浏览器获取文件后开始利用内核解析了，解析过程中也会出现一些HTTP请求请求一些资源，如js，css等文件，将这些文件下载到本地。浏览器解析HTML文件时会自上而下，起初产生一个DOM树，解析CSS之后产生CSS规则树，后将两树进行融合，合成为渲染层，最后调用操作系统的Native GUI的API绘制。

5、断开TCP连接（四次挥手）

    传也传完了，那咱们断开连接吧！

①源端->远端：好了，咱们断开吧（FIN=1,seq=u）

②远端->源端：行，等我稍微检查一下还有没有要发你的数据（ACK=1,seq=v,ack=u+1）

③远端->源端：可以了，咱们断开吧，拜拜（FIN=1,ACK=1,seq=w,ack=u+1）

④源端->远端：好的，再会，拜拜（ACK=1,seq=u+1,ack=w+1）

6，浏览器对页面进行渲染呈现给用户

三，浏览器是如何渲染页面的？

先简要概述浏览器渲染的步骤：

1. 处理HTML标记并构建DOM树
2. 处理CSS标记并构建CSSOM树
3. 将DOM与CSSOM合并成一个渲染树（Render Tree）
4. 根据渲染树来布局，计算每个节点的布局信息，重绘(repaint)与重排（reflow）

构建对象模型(DOM，CSSOM）
浏览器解析HTML文档时，会完成以下步骤：

读取HTML的原始字节，根据文件制定编码（例：utf-8）解析为各个字符
将字符串转化为各种标签
将标签转化为node节点
DOM构建

浏览器解析HTML时，遇到link标签，会发出请求并返回资源，开始解析CSS：

CSS字节转换为字符，接着转换成令牌和节点，最后构建生成CSSOM

CSSOM和DOM是独立的数据结构

渲染树构建、布局及绘制
CSSOM树和DOM树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。
构建渲染树的步骤：
从DOM树的根节点开始遍历每个可见节点（display:none与visibility:hidden的区别）
对于每个可见节点，为其找到适配的CSSOM规则并应用它
生成渲染树
布局阶段：输出盒模型
绘制：输出到屏幕上的像素

标签：HTTP,通讯,浏览器,请求,DOM,渲染,服务器
来源： https://blog.csdn.net/haiyangfsg/article/details/115005346

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。