浏览器渲染原理

用户在浏览器地址栏中输入网址，到页面加载出来，中间发生了哪些事情？

基本概念：
**进程：**比如打开n个程序，则是n个进程
**线程：**一个程序中进行多个操作，则是多个线程
**栈内存：**提供环境，用来执行代码
堆内存：

１.HTTP的请求阶段
用户在浏览器输入网址后，浏览器会帮助我们向服务器发送请求；

请求阶段需要注意的：
DNS解析、
DNS缓存，
TCP协议的三次握手和四次握手、
http和https的区别（http2）

２.响应阶段：

响应阶段需要注意的点：
HTTP状态码
304缓存
HTTP报文

浏览器拿到代码后，浏览器在内存条中开辟一块栈内存，用来给代码执行提供环境，同时分析一个主线程去一行行的解析和执行代码

进栈执行——》执行完出栈（每行代码都会执行这个操作）

注意：浏览器遇到link /script/img等请求之后，都会开辟一个新的线程来执行
【浏览器是多线程执行的，但是只分配了一个线程给js代码，js是单线程的】

浏览器会开一个任务队列（task queue）来安排执行的任务，主线程继续解析js

因此，刚开始浏览器刚开始只生成了DOM树（css不一定加载完成）

DOM树加载完之后，就去task queue中去找已经执行完的任务（event loof 事件循环）
event loop：主任务完成之后，会不断的到等待任务队列中，一直到等待任务事件执行完毕

需要了解：
微任务
宏任务

事件循环之后，ｃｓｓ加载完成，生成ＣＳＳＯＭ

浏览器之后将ＤＯＭ树和ＣＳＳＯＭ结合生成ＲｅｎｄｅｒＴｒｅｅ渲染树

开始绘制，随即调用电脑的显卡

HTTP的响应阶段

浏览器渲染阶段

总的过程：
解析ＤＯＭ／ＣＳＳＯＭ树
生成Ｒｅｎｄｅｒ树
ｌａｙｏｕｔ回流：根据当前位置算回流
painting（重绘）：样式
display:将像素发给:GPU，展示在页面上

如图：


浏览器内核：

参考这篇文章：
https://www.jianshu.com/p/8033171236dd

性能优化：
1.减少http的请求次数和大小
资源合并压缩
图片懒加载
音视频走流文件

【性能优化内容需要补充】