共计 1590 个字符，预计需要花费 4 分钟才能阅读完成。
本文总结于极客工夫李兵老师的课程，有趣味的同学能够本人去学习下。
浏览器蕴含的过程
- 浏览器过程：界面显示、用户交互、过程治理、存储等。
- 渲染过程：
render树、V8引擎、（每个Tab都是一个过程，沙箱中数据获取可能有问题） GPU过程：3D、css- 网络过程：网络资源加载
- 插件过程：插件运行、解体不会对浏览器和页面产生影响
TCP/IP
TCP
IP是送到哪台主机——> 网络层 UDP 是送到哪台主机的哪个应用程序 (一台电脑能够启很多服务，IP 雷同，端口号不同)，端口号——> 传输层
TCP连贯
HTTP请示流程
- 构建请示：形式，地址，
http协定版本 - 查找缓存：如果有缓存，拿浏览器缓存文件
- 筹备
IP地址和端口号：域名零碎DNS寻址IP号，http内容是通过TCP传输数据阶段实现的 - 期待
TCP队列 3次握手建设TCP连贯：——> 服务器- 发申请:（申请行，申请头）
post申请体 - 服务器解决
- 服务器响应:（回复响应行，响应头，回复注释）协定版本状态码
4次挥手断开TCP申请
DNS缓存
浏览器本地缓存对应的 IP 和域名。
浏览器缓存都服务器设置 Cache-Control: Max-age = 200，缓存过期会在申请头加 If-None-Match: ...token。没过期304，过期从新给，刷新缓存新鲜度。baidu.com——>https://baidu.com。301 重定向，服务器解决跳转 location 地址。
从输出 url 到页面显示经验了什么
- 用户输出，判断输出的是
url，地址栏会加上协定，合成残缺的url，能够监听beforunload确认提交表单 url申请过程，浏览器过程通过过程间通信IPC把url申请发到网络过程，网络过程会去查找是否有本地缓存。如有，间接返回资源。如没有就申请，第一步进行DNS解析，获取申请域名的服务器IP地址，如https，还要建设TLS连贯，而后利用IP和服务器建设TCP连贯，浏览器端会把申请行、申请头、cookie等向服务器发送构建的申请信息，服务器会生成响应数据发给网络过程，开始解析响应头内容。
(1)响应头的状态码是301或302，从响应头的location读取浏览器重定向的地址，而后再发动http或https, 从头开始。
(2)判断响应头content-type, 如是application/octet-stream会被提交下载管理器申请流程完结，如是text/html页面渲染是在渲染过程。- 筹备渲染过程，每关上一个新页面就会有一个新的渲染过程，但依据域名、协定，同一站点会共用一个渲染过程。渲染过程筹备好之后，要提交文档给渲染过程 (
html数据)，当确认提交后会更新：后退后退状态、loading状态、地址栏url、web页面、平安状态，走完后就进入渲染阶段了。
渲染流程
浏览器无奈了解和应用 html，所以要将其解析转换成DOM 树，控制台输出 document 就能看到残缺的 DOM 树。会把 css 转换成 styleSheets, 控制台document.styleSheets 能够看到样式表，该构造具备查问和批改的性能，css属性值标准化为了取得 DOM 树的几何地位。还须要创立布局树：遍历所有可见节点加到布局树，不可见元素疏忽。
页面中有些复制成果如 3D 变换 z-index 做z轴排序，渲染引擎还要为其生成图层树。
1. 有定位属性通明属性 css 滤镜等都有层叠上下文会被晋升独自一层。
2. 须要剪裁 (滚动) 也会创立图层，通过合成线程依照视口左近图块生成位图由栅格化操作，栅格化过程会用 GPU 减速，用到 GPU 线程。
重绘：js改背景色，没有几何地位变动，布局阶段不改，间接绘制执行，省去布局和分层，效率比重排高。
重排：改高度，触发从新布局，解析叫重排。须要更新残缺的渲染过程，开销最大。
合成：translate(), 跳过布局和绘制，避开重排重绘，间接非主线程合成动画，效率最高，css动画 > js动画。