图来源于网络
浏览器渲染原理
当浏览器当开一个tab相当于开启一个进程，进程可以开辟多个线程，这里我有一点想聊一下，Java为什么是多线程，因为Java可以直接操作计算机操作系统，为什么JavaScript不是呢，因为JavaScript是基于浏览器，浏览器新开了一个线程给JavaScript引擎，所以JavaScript是单线程。大家有问题可以留言呢
当浏览器线程分类
- GUI渲染线程：负责渲染页面，解析html、css，构建DOM Tree与CSSOM Tree 与合并，layout,paint 等。
- js引擎线程：负责JavaScript解析与执行。
- 定时器监听线程：监听setTimeout/setInterval，监听是否到达了触发条件。
- HTTP网络线程：负责HTTP网络请求的发送，例如 "src"、"href" ，xhr、fetch获取数据。
- DOM监听线程：当时一个DOM事件被触发的时候添加到事件队列，被JavaScript引擎执行
浏览器渲染简述
一、 基于服务器HTTP请求回来的报文，浏览器（GUI渲染线程）把它解析为字符串 令牌化转换成 W3C HTML5 标准规定的各种令牌（例如，“”、“”，以及其他尖括号内的字符串。每个令牌都具有特殊含义和一组规则。），进行词法分析(lexical anilysis)发出的令牌转换成定义其属性和规则的“对象。把HTML标记开始构建DOM，CSS 字节转换成字符，接着转换成令牌和节点，最后链接到一个称为“CSS 对象模型”(CSSOM) 的树结构内。 二、将DOMTREE 与CSSOM TREE合并 > render tree， > layout布局计算[回流/重排] -> paiting（绘制)[重绘] {分层绘制}
浏览器渲染过程
解析文档是自上而下进行解析
- 样式处理
- 遇到内嵌样式GUI直接渲染
- 遇到link，浏览器开辟一个http线程去请求资源文件，这个是异步的不阻塞GUI线程向下继续执行
- 遇到@import 浏览器也会开辟一个HTTP资源去请求资源，但是GUI渲染线程会暂停等到资源回来后，继续向下执行。
- 脚本处理
- 内嵌或者srcript标签 没有属性，src会请求资源完成执行后继续GUI线程继续向下执行，内嵌是执行完脚本继续向下执行
- script 标签有defer 属性 浏览器会开辟一个http线程请求资源，GUI渲染线程继续向下执行，等html全部解析完成后再执行JavaScript
- sript 标签有async 属性 浏览器会开辟一个http线程请求资源，GUI渲染线程继续向下执行，等资源请求回来后，执行JavaScript脚本，然后GUI渲染引擎继续向下执行。
html如何解析
上面已经成陈述过了，所以对比这张图应该很好理解，拿到的是二进制流，这里有个小知识点分享给大家（网络传入用的是二进制，但是为什么显示的是16进制呢，如果是二进制不方便，太长了，转成16进制的话会变短很多，所以大部分二进制都会转为16进制显示，其实内部还是二进制来处理）把这些流转成字符串。然后进行词法分析英文称作Token。生成节点这里进行，最后生成DOM树。
css如何解析
html一样对CSS进行词法分析，生成对应的CSSOM 树
render tree如何生成
DOM树与CSSOM树合并后悔生成render tree (渲染树)
layout
layout是根据渲染树计算元素在视口中的位置和大小信息.布局完成后，浏览器会立即发出“Paint Setup”和“Paint”事件，将渲染树转换成屏幕上的像素。
性能优化
一、css方面优化
- 如果css代码量少可以放在html，HTPP请求HTML的时候，同时CSS也回来了，渲染的时候直接就渲染了
- 如果css代码量多可以放在外链中，这样更利于维护
- 遇到link 时候浏览器会继续向下解析，这是会新开HTTP请求css资源，但是浏览器通能够发生HTTP数量有限制（谷歌5~7）超过最大并发需要排队
- 真实项目中应该避开@import,因为会堵塞GUI线程继续向下继续 二、javascript方面优化
- script标签默认会堵塞GUI线程渲染页面，如果堵塞页面就不会被渲染出来吗，所以一般放在页面底部。
- 可以使用defer 属性这样script标签可以放在其他地方
- 有依赖关系的js文件不使用async 属性，因为这个请求是异步的不一定是哪个依赖先回来 三、避免DOM回流
- 尽量读写分离，因为新版浏览器都有一个机制：渲染队列机制
- 尽量少操作DOM，或者批量操作DOM
- 避免重绘：元素的样式发生改变（但是宽高、大小、位置不变，例如：outline，color）回流：元素大小或者位置发生了变化（当页面布局和几何信息发生变化的时候），触发重新布局，导致渲染树重新计算和渲染
- 动画应用到postion：absolute,fixed 上面（因为已经脱离标准文档流）所以会出现抖动，
- CSS3硬件加速（GPU加速）比起transform、opacity、filters这些属性不会出现DOM回流问题，得到硬件加速，但是会占用内存
参考
一、构建对象模型
