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

浏览器原理与渲染流程相关推荐

浏览器原理 39 # 页面性能工具：如何使用 Performance？
说明浏览器工作原理与实践专栏学习笔记 Audits vs Performance Performance 可以记录站点在运行过程中的性能数据,有了这些性能数据,就可以回放整个页面的执行过程,这样就方 ...
一文让你彻底搞懂浏览器的渲染流程
hello,大家好.上次为大家介绍了重排和重绘的一些内容,其中涉及到的浏览器渲染流程自己就没有在上篇博文详细介绍了.今天我们就来好好唠唠浏览器的整个渲染流程. 首先,我们知道,一个页面通常由三个部分组 ...
充电计划 -- 浏览器工作流程、渲染流程
浏览器工作流程(渲染流程) 前提 HTTP与TCP/IP区别 HTTP的三大风险浏览器工作原理 HTTP工作原理 HTTPS工作原理单向验证双向认证浏览器的渲染过程参考博客:前端面试题必考( ...
前端百题斩【030】——神奇的浏览器渲染流程
写该系列文章的初衷是"让每位前端工程师掌握高频知识点,为工作助力".这是前端百题斩的第30斩,希望朋友们关注公众号"执鸢者",用知识武装自己的头脑. 本篇文章是 ...
淘宝小部件 Canvas 渲染流程与原理全解析
作者:史健平(楚奕) 上篇回顾:<淘宝小部件:全新的开放卡片技术!>.<淘宝小部件在 2021 双十一中的规模化应用> 本文主要从技术视角阐述 Canvas 在小部件下的渲染原 ...
【干货】十分钟读懂浏览器渲染流程
在之前写过的一篇<"天龙八步"细说浏览器输入URL后发生了什么>一文中,和大家分享了从在浏览器中输入网址URL到最终页面展示的整个过程.部分读者向我反馈对于最后的浏览器 ...
浏览器从输入URL到页面渲染过程 ——页面渲染流程
之前我有总结过一篇经典面试题:浏览器从输入URL到页面渲染过程 ,接下里我将对某些知识点进行更细致的解析. 浏览器从输入URL到页面渲染过程系列文章: (一):浏览器从输入URL到页面渲染过程 -- ...
浏览器的渲染流程详解
文章目录浏览器的渲染流程详解一:主线程 1:解析html 2:样式计算 (computed style) 3:布局 4:分层 5:绘制二:合成线程 6:分块 7:光栅化 8:画浏览器的渲染流程 ...
浏览器原理（组成、引擎、渲染机制）
文章目录一.PC端常用浏览器/概念 1.2软件项目开发二个不同体系二.浏览器 2.1 内核和js引擎 2.2 浏览器的组成部分 2.3 浏览器如何渲染UI? 2.4 浏览器如何解析CSS选择器? ...

浏览器原理与渲染流程