浏览器底层渲染机制和CRP性能节点优化

Posted 2021-09-19 爱吃桃子的狮子

浏览器底层渲染机制和CRP性能节点优化

编写一个页面所需的技术栈
html$CSS[less/sass/style…]
按照w3c规范去编写代码，浏览器本身也是按照w3c规范去编译解析我们的代码, 最后渲染出我们想要的效果!!
javascript[ES6+/XMLHttpRequest/vue/react…]
开发者按照ECMAScript-262规范去开发代码，浏览器也按照这个规范解析

浏览器基于自己的内核[渲染引擎 webkit->v8引擎]，自上而下，自左而右(有特殊情况)渲染和解析代码，最后在浏览器中绘制出对应的页面和效果！！

###渲染过程中遇到的几种情况
渲染过程中：[基于GUI线程渲染] 自上而下去渲染
遇到 <link href='...'>，浏览器会单独分配一个线程【http网络线程】去服务器获取资源文件信息，此时GUI继续向下渲染–>是异步操作
+但是不同浏览器可以允许同时并发的HTTP请求，有次数限制 ，一般5~7次

遇到<style>...</style>无需分配线程去获取文件，只需要等待DOM TREE生成后，其他样式资源也获取后，按照顺序依次渲染即可

遇到<style>@improt'xxx.css';</style>会阻碍GUI的渲染，需要等待服务器返回对应样式资源后，GUI才可以继续向下渲染

遇到<img src='xxx.png'>也是分配新的线程去获取图片文件，GUI继续向下渲染–>是异步操作

遇到<srcipt src='xxx/js>,也会阻碍GUI的渲染，虽然分配了一个新的HTTP线程去服务器获取JS文件，但是文件没有获取到之前 GUI是不进行渲染的的 !只有拿到JS 代码，并且把它执行完，GUI才会渲染 ---->是同步操作

+把srcipt 放在head标签中，经常获取不到DOM元素的
解决方法：
@1<srcipt>把放在boby最底部，这样是等待DOM TREE生成之后才执行的，此时可以获取DOM 元素的[推荐]
@2基于window.onload(所有资源加载完成）或者DOMContentLoaded（DOM TREE生成）事件去监听
@3如果是导入外部的JS资源，还可以基于async或者defer属性做延迟异步处理
async ：分配新的线程去获取JS，此时GUI继续向下渲染[改为异步操作]；当JS 资源获取到后，立即停止GUI渲染，先把获取的js执行 执行完成后，在继续执行GUI渲染！
defer：分配新的线程去获取js此时GUI继续向下渲染，等待GUI渲染完成之后，而且所有设置defer的资源后获取到； 按照之前多的导入的先后顺序依次执行代码[和类似]

注：如果导入的JS资源不存在依赖关系， async可以使用；但凡需要依赖关系则使用defer

**

浏览器渲染机制

**
1.生成DOM TREE
GUI渲染中， 遇到<link>,<img>...等，都分配HTTP线程去获取资源，GUI 继续渲染；所以在资源获取到之前，首先把当前页面中的HTML结构规划好，规划好的 HTML结构就是’DOM TREE’

2.拿到CSS进行渲染，生成CSSDOM TREE
DOM TREE生成后，等待请求的样式资源获取到,GUI渲染线程开始渲染和解析CSS代码[重点：等待所有样式资源都获取到之后，按照之前的导入顺序依次渲染]

3.生成RENDER TREE
把生成的DOM TREE和CSSDOM TREE合并在一起生成RENDER TREE[渲染树中包含了每个节点的样式以及节点之间的嵌套关系]

4.浏览器按照RENDER TREE 进行渲染
4.1 Layout布局排列
根据当前浏览器大小，计算出每一个节点在视口中事物位置等
4.2 分层
把每个节点根据样式，放在指定的文档节流中[创造新文档的样式：float,position,transform…]
并且规划出每一层具体的绘制步骤和要绘制的样式
4.3.Painting绘制
按照之前规划好的一层层进行绘制，最后呈现出页面的效果

优化渲染事件
根据浏览器渲染的机制，我们在每一个核心步骤中去做一些优化，以此来加快页面渲染的速度，缩短页面首次打开的时间[或者是减少页面白屏的等待的时间]=>CRP[关键渲染路径] 优化方案
优化首次渲染事件
《DOM TREE优化》
{1：css代码较少的情况下使用“内嵌式”样式[尤其移动端]；代码较多的情况下，使“外链式”样式[尽可能把样式文件合并压缩为1]个，非必要，绝对不使用‘@import导入式’样式，因为他会阻碍GUI 的渲染
2：JS 代码都放在页面的底部，[可以设置async|defer]
3: 图片一定要做‘懒加载’；第一次渲染页面，不去获取真实的图片资源，加快页面的渲染；第一次渲染完，在把可视窗口中出现的图片做懒加载！}====>目的是第一次打开页面能够快速展示
4：减少HTML的层级嵌套，一定使用语义化标签…这样可以加快DOM TREE的构建
《CSSOM TREE优化》
5:CSS选择器结构不要太深【扩展：雅虎CSS优化的36条建议】…加快CSSOM TREE的构建

6:前端骨架屏：
+在页面真实的内容渲染之前，先给一个loading的效果（一般都是用灰白框框占位）[提高人性化体验]
+开始最好只渲染首屏内容[可以交给服务器来渲染】
+后期向下滑动，在渲染其他屏幕的内容
+…
首次渲染完成后，页面运行的时候性能优化