浏览器原理与渲染流程

TCP连接，TCP三次握手

刚开始的时候，客服端和服务端都处于关闭的状态，第一次握手：客户端发送syn（syn=j）标识的数据报文给服务器，开始建立连接，客户端就进入（同步已发送）SYN_SENT状态，

第二次握手：服务器发送认SYN（ack=j+1）和ack表示的数据包给客服端，表示自己同意客服端发送的连接，并自己也发送有个连接等待客服端确认，此时服务器进入SYN_RECV（同步收到）状态；

第三次握手：客户端发送ACK(ack=k+1）标识的数据报文给服务端，表示客服端同意服务端发送的连接，这个时候客户端和服务器进入ESTABLISHED（连接）状态，连接成果，就可以进行数据的传递。
TCP为什么是三次握手？答案解析

一 防止重复连接
主要为了防止已失效的连接请求报文段突然又传送到了B，因而产生错误。如A发出连接请求，但因连接请求报文丢失而未收到确认，于是A再重传一次连接请求。后来收到了确认，建立了连接。数据传输完毕后，就释放了连接，A工发出了两个连接请求报文段，其中第一个丢失，第二个到达了B，但是第一个丢失的报文段只是在某些网络结点长时间滞留了，延误到连接释放以后的某个时间才到达B，此时B误认为A又发出一次新的连接请求，于是就向A发出确认报文段，同意建立连接，不采用三次握手，只要B发出确认，就建立新的连接了，此时A不理睬B的确认且不发送数据，则B一致等待A发送数据，浪费资源，如果tcp是三次握手的话，在服务端发送确认的消息给客户端，客户端会判断这次的连接是否是历史连接，如果是历史连接的话，客户端就会发送终止报文给服务端终止连接，这样就不会产生重复连接，浪费资源。

二 同步初始化序列化
在建立 TCP 连接时就需要同步初始化一个序列号来保证 TCP 的稳定性，如果是两次握手，它只能确认客服端发送给服务器的序列号，而服务器的序列号它是无法被确认的。因此也就无法得到一个可靠的序列号了，tcp三次握手可以得到一个可靠的序列号，可以确认双发发送的序列号。保证了tcp连接的稳定性性，当然 TCP 连接还可以四次握手，甚至是五次握手，也能实现 TCP 连接的稳定性，但三次握手是最节省资源的连接方式，因此 TCP 连接应该为三次握手。

渲染阶段

构建dom树

为什么要构建dom树？ 因为浏览器是无法理解和使用html文档，所以要把html文档解析成一颗dom树。
什么是dom？
DOM树生成流程

html字节流通过分词器Tokens分成标签和文字，如下图所示

再使用token栈将标签加入栈中，每次加入一个开始标签生成一个节点。

如何去确认父子节点？这里是利用的是栈中的相邻位置来决定的。

文字如何加入到对应的标签中？首先文字是不加入到栈中，栈顶的标签就是文字对应的标签，就把文字加入到标签中了。

那结束标签是干什么用的？结束标签会和栈顶元素进行匹配，如果是一致，就把栈顶元素取出来。


DOM树的生成过程：渲染线程通过管道拿到数据后，使用html解析器将html字符流生成dom树，html字符流通过分词器Tokens分为标签和文字，再通过token栈生成节点，每次加入一个开始标签生成一个节点，最后构建出dom树。在构建dom树的过程中，遇到script标签，会先去加载执行js，等到js加载完成后，再去构建dom，如果把js代码放到文档开头，它会阻塞页面的渲染，为了加快首页渲染，应该把js代码放到文档底部或者使用defer和async属性。
扩展 vue的template的标签如何生成dom树

cssom树的构建

先进行一系列的标准化

进行标准化操作后，渲染引擎还是无法理解，那渲染引擎理解什么？styleSheets 需要把css转换成styleSheets形式，渲染引擎才能理解这种形式。

cssom树的构建过程：当遇到link标签引用的css文件、style标签中的css、标签内部的css样式开始创建cssom树，把css转为浏览器理解的styleSheets，然后再去转换样式中的属性值，使用能够标准化，比如:蓝色blue转换为rgb的形式，计算出dom树中每一个节点的样式。接下来需要关注css的继承，每一个dom节点都会去继承父节点的样式，比如：字体相关的，font-开头，text-开头，列表相关的list-开头，css层叠规则(找出一个给定元素的所有声明后，先按显式权重和来源进行排序。如果相同，则比较特殊性。若再相同，则比较顺序)。最后保存在computedStyle中
css继承
添加链接描述
css层叠规则
添加链接描述
css的加载会阻塞页面的渲染？

• css加载不会阻塞dom树的解析
• css加载会阻塞dom树的渲染
• css加载会阻塞后面js的语句的执行
• 如何去接触css对渲染的阻塞？
  • 可以使用媒体类型（media type）和媒体查询（media query）
  • <link href="print.css" rel="styleshet" media="print">
  • <link href="print.css" rel="styleshet" media="(min-width:30em) and (orientation: landscape)">
css常见的选择器有哪些？

CSS选择器匹配规则
添加链接描述

将dom树和cssom树合成一颗渲染树

遍历dom树，排除一些非视觉节点，比如：display为none节点，生成可见元素和样式的渲染树。

布局

计算出每一个元素的尺寸和位置，布局流程输出是一个盒子模型，他会精确地获取每一个元素的位置和尺寸，所有相对测量值将转换为屏幕上的绝对像素。
重绘和回流的知识
添加链接描述

绘制

遍历渲染树，并使用UI后端层绘制每一个节点。

渲染页面的时候有哪些不良的现象？

FOUC(无样式闪烁问题);由于浏览器的渲染机制，在css加载之前，先呈现了html，出现无样式的内容，然后样式突然呈现的现象，出现这个现象的原因有：css加载时间过长或者css文件放到了文档的底部。
白屏问题：由于某些浏览器的渲染机制是先构建dom树 和cssom树，构建完成后再进行渲染，如果css文件放到了文档的底部，由于css未加载完成，页面迟迟未渲染，出现白屏问题，或者是js放到了文档的头部，由于js的加载阻塞了后面的渲染，出现了白屏问题。

js异步加载的方式有哪些？

• defer属性，js的下载和后续的渲染过程是并行的，当遇到scropt标签，会异步的去下载js，等到全部的html元素解析完成后，再去执行js，domContentload事件将被触发。
• async ，是html6提供的，只适用于外部js脚本，js的下载和后续的渲染过程是并行的，当遇到scropt标签，会异步下载js，下载完成就立即会执行js，它会阻塞页面的渲染。它无法保证多个async按照顺寻执行。
• 如果同时存在defer和async，defer的优先级要高于async。

为什么操作dom慢？

因为DOM是属于渲染引擎中的东西，而JS又是JS引擎中的东西。当我们通过JS操作DOM的时候，其实这个操作涉及到了两个线程之间的通信，那么势必会带来一些性能上的损耗，操作DOM次数一多，也就等于一直进行线程之间的通信，并且操作DOM可能还会带来重绘回流的情况，所有也就导致了性能上的问题。

浏览器的60HZ