浏览器中的页面

Posted 2021-03-03 qq-lala

浏览器中的页面

一、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