|
目录
一、电脑是如何通过互联网进行交流的
二、浏览器内容分类
三、输入网址到呈现网页的过程
四、浏览器渲染原理及流程
一、电脑是如何通过互联网进行交流的
- 万维网大部分的网页均是由HTML（语言）编写的，并且用HTTP（协议）进行传递；
注：HTML：HTML_百度百科
? ? ? ?HTTP：HTTP_百度百科
- Web浏览器解读HTTP协议，将HTML渲染成人为可读的页面；
二、浏览器内容分类
- 纯文本
- web标准（HTML、CSS、JAVASCRIPT）
- 服务器端语言（.php，.asp，.aspx，.jsp等等后缀文件）
- 需要其他应用或者插件辅助的内容格式
三、输入网址到呈现网页的过程
- 对某个网址进行DNS域名解析；（DNS域名解析：每一台连上网络的计算机都有一个唯一标识它的IP地址，DNS解析就是将输入的网址解析成IP地址，是一个递归查询的过程）
- 根据这个IP，找到对应的服务器，发起TCP的三次握手；
第一次握手：建立连接时，客户端向服务端发送请求报文（SYN）
第二次握手：服务器收到请求报文后，如果同意连接，则向客户端发送确认报文（SYN/ACK）
第三次握手：客户端收到服务端的确认后，再次向服务器发送确认报文，完成连接（ACK）
注：三次握手主要是为了防止已经失效的请求报文字段发送给服务器，浪费资源。
? - 建立TCP连接后发起HTTP请求；
- 服务器响应HTTP请求，浏览器得到HTML代码；
- 浏览器解析HTML代码，并请求HTML代码中的资源（如js、css、img等等）；
- 浏览器对页面进行渲染并呈现给客户；
解析文档构建DOM树
构建渲染树
布局和绘制渲染树
? - 断开TCP连接，发起四次挥手。
第一次挥手：客户端想分手，发送消息（FIN）给服务器
第二次挥手：服务器通知客户端已经接受的分手请求，返回确认消息（ACK），但还没有做好分手准备
第三次挥手：服务器已经做好分手准备，通知客户端（FIN）
第四次挥手：客户端发送消息给服务器（ASK），确认分手，服务器关闭连接
四、浏览器渲染原理及流程
- 浏览器将HTML解析成DOM Tree；（DOM树 构建过程是一个深度遍历的过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点）；
- 将CSS解析成CSS Rule Tree；
- 将DOM Tree 和CSS Rule Tree合并（attachment）构造Rendering Tree（渲染树）；
- layout（布局），计算出每个节点在屏幕中的位置；
- painting（绘制），遍历Rendering Tree，并使用UI后端层绘制每个节点；
|