标签：数据 trait 媒体查询 字节流 指标 通过 就会 引擎 合成
浏览器中的页面
一、DOM树
1、在渲染引擎中，DOM有三个层面的作用：
DOM是表述HTML的内部数据结构，它会将Web页面和JavaScript脚本连接起来，并过滤一些不安全的内容
2、DOM树如何生成：
网络进程和渲染进程建立一个管道，HTML解析器直接解析，不需要等待text/html类型的数据全部接受完毕再进行解析
3、HTML 解析过程
①通过分词器将字节流转换为token
②将token解析为DOM节点 （将token压入栈中，然后一个一个分析）
③将DOM节点添加到DOM树中
4、JavaScript如何影响DOM生成
暂停HTML解析，下载解析执行完毕后再继续进行html解析 （如果执行js代码期间遇到CSSDOM，则需要等待CSS 下载加载完成）
为了快速执行js，在DOM生成前，会有个预解析操作（当渲染引擎收到第一个字节流后，会开启一个预解析线程，用来分析HTML文件包含的JS，CSS等相关文件，并提前下载）
CSS样式文件本身不会阻塞DOM生成，但是JS会阻塞DOM生成，而CSS样式文件会阻塞JS执行
5、渲染引擎有一个安全检查模块叫XSSAuditor，用来检查词法安全
二、CSS如何影响首次加载时的白屏时间
CSSDOM作用：
提供给Javascript操作样式表的能力
为布局树的合成提供基础的样式信息
URL 请求开始，到首次显示页面的内容，在视觉上经历的三个阶段
1、等请求发出去之后，到提交数据阶段，这时页面展示出来的还是之前页面的内容
2、提交数据后渲染进程会创建一个空白页面，（通常把这段时间成为解析白屏），并等待CSS，JavaScript文件的加载完成，生成CSSDOM 和DOM，然后合成布局树，最后还要经过一系列的步骤准备首次渲染
3、等首次渲染完成之后，就开始进入完整页面的生成阶段，页面一点点被绘制出来
影响第一阶段的因为主要是网络或者服务器处理
影响第二阶段的瓶颈主要体现在 【下载CSS文件，下载Javascript文件和执行Javascript】
策略：
①通过内联Javascript ， 内联CSS来移除这两种类型的文件下载，这样获取到HTML文件之后就可以直接开始渲染流程了
②但并不是所有的场合都适合内联，那么还可以尽量减少文件大小，比如通过webpack等工具移除一些不必要的注释，并压缩Javascript文件
③还可以将一些不需要在解析HTML阶段使用的Javascript标记上sync / defer
④对于大的CSS文件，可以通过媒体查询属性，将其拆分为多个不同用途的CSS文件，这样只有在特定的场景下才会加载特定的CSS文件
8:<link rel="stylesheet" type="text/css" href="foo.css" media="orientation:portrait" />
三、分层和合成机制 ： 为什么CSS动画比JavaScript高效
DOM 树生成之后，还要经历布局、分层、绘制、合成、显示等阶段后才能显示漂亮的页面
Chrome 合成技术 ： 用三个词概括 ： 分层、分块、合成
为了提升每帧的渲染效率，Chrome引入了分层和合成的机制，那该怎么来理解分层
和合成机制呢？？
1、将素材分为多个图层的操作就是分层，最后将这些图层合并到一起的操作就是合成
2、在Chrome的渲染流水线中，，分层体现在生成布局树之后，渲染引擎会根据布局树
的特点将其转为层树（Layer Tree）
3、渲染流水线 ： 从HTML到DOM，样式计算，布局，图层，绘制，光栅化，合成，显示
①渲染进程将HTML内容转换为能够读懂的DOM树结构
②渲染引擎将CSS样式表转化为浏览器可以理解的stylesheets，计算出DOM节点
的样式
③创建布局树，并计算元素的布局信息
④对布局树进行分层，并生成分层树
⑤合成线程将图层分成图块，并在光栅化线程池中将图块转为图
⑥合成线程发送绘制图块命令DrawQuad给浏览器进程
⑦浏览器进程根据DrawQuad消息生成页面，并显示在显示器上
4、合成操作是在合成线程完成的，这就意味着在执行合成操作时，是不会影响主线程执行的
5、渲染引擎生成一帧图像有三种方式：重排、重绘、合成， 其中重排和重绘都是在渲染主线程上执行，比较耗时，而合成操作是在渲染进程的合成线程执行，执行速度快，且不占用主线程
四、页面性能
页面的声明周期有：加载阶段、交互阶段、关闭阶段
1、加载阶段 -- 减少 【关键资源大小】、【关键资源数量 -压缩】、【RRT（往返延时），它是网络中一个重要的性能指标，表示从发送端发送数据开始，到发送端收到 来自接收端的确认，总共经历的时延 -- 使用CDN】
2、交互阶段 -- 减少一帧生成的时长
【减少JavaScript 脚本执行时间】、
【避免强制同步布局 -- 正常布局是：通过DOM接口添加元素或者删除元素后，是需要重新计算样式和布局的,这些 计算样式和布局是在另外的异步任务中完成， 若是在执行脚本过程中查询样式信息，就会强制将计算样式和布局操作提前到当前的任务中 】、
【避免布局抖动 -- 在一次Javascript执行过程中，多次执行强制布局和抖动操作】
所以尽量不要在修改DOM结构时，再去查询一些相关值
【合理利用CSS合成动画 --- 因为CSS 直接合成，因此JS动画快】
【避免频繁的垃圾回收 --- 若频繁创建临时对象，就会导致垃圾回收器也会频繁执行，阻塞主线程】
五、虚拟的DOM
六、WebComponent
它包含自定义元素，影子DOM和HTML模板 三种技术，使得开发者可以隔离CSS和DOM
标签：数据 trait 媒体查询 字节流 指标 通过 就会 引擎 合成
原文地址：https://www.cnblogs.com/QQ-lala/p/12576497.html
