前端知识梳理-欣赏器篇

源码 · 2024-9-20 07:35:10

一、什么是进程，什么是线程

进程是cpu资源分配最小单位，线程是进程最小调治单位。在我们的利用体系中，有很多很多的进程，利用体系每干一件事儿就会交给一个进程去做，比如打开音乐就是一个进程。而每个进程里又包含了很多的线程，比方打开了音乐播放器，放一首歌，就是一个新的线程，切换下一首，大概又是别的一个线程。总之他俩之间的关系就是一个进程包含多个线程。

二、欣赏器是多进程照旧单进程

欣赏器一样寻常都是多进程，每开一个tab页，就是一个新的进程。这也就是为什么一个tab页瓦解了不会影响到整个欣赏器瓦解。他重要分为以下几个进程：
1、主进程：只有一个，负责调治主控整个欣赏器
2、插件进程：每个插件都有一个进程，只在插件被调用的时间创建
3、GPU进程：只有一个，负责3d绘制
4、渲染进程：每个tab页一个，负责网页的渲染，脚本的实行和变乱的处置惩罚等。这个进程也是前端最必要相识的进程。
三、渲染进程

要相识渲染进程，那就得从他有几个线程开始。
渲染进程重要有以下几个线程：
1、GUI线程：负责页面的构建和渲染，当页面必要被绘制的时间就会启动这个线程，要注意的是，他和js引擎线程是互斥的，不能并行实行
2、js引擎线程：负责分析和实行js脚本，由于他和GUI线程的互斥性，以是js代码是会导致页面渲染不连贯的，也就是常说的壅闭页面渲染
3、变乱触发线程：归属于欣赏器，而不是js引擎，他重要就是控制变乱循环，将一系列的使命加入一个队列等js引擎空闲下来后去实行
4、定时器线程：管理定时器的计时，等时间到了就把变乱推入使命队列，等待js引擎实行
5、异步http哀求线程：每发送一个哀求就会开启一个新的线程，等待相应后把回调函数推入使命队列，等js引擎实行。
以上几个就是渲染进程的重要线程。实在通过上述的相识我们就可以大概明确了，js的代码实行次序为什么是那样，可以简单的以为只有同步代码是第一时间就在js引擎线程里去实行的，其他的比方宏使命，微使命，等都是由别的线程管理，当满意条件后才将代码交给js引擎去实行。
那接下来就聊一聊老生常谈的欣赏器渲染流程：

1、起首欣赏器会去分析html文件，构建DOM树，然后分析css，天生css树。
2、等DOM树和css树都构建好了之后，会将两者归并，天生终极的render树
3、接着去布局render树，盘算位置尺寸。然后再绘制render树。
4、末了将各层的信息发送给GPU，GPU合成渲染层终极出现出页面。
在欣赏器的渲染过程中另有两个钩子会被触发，他们就是load变乱和DOMcontentloaded变乱
那二者有什么区别呢？
DOMcontentloaded变乱会在dom树构建完成之后（不包罗样式表，图片等）就实行，而load变乱会在渲染完毕后被实行。全部前者是先于后者实行的
下一个题目，css到底会不会壅闭dom渲染呢？

起首看一下欣赏器的渲染流程图

可以看到，DOM的加载和css的加载时并行实行的，以是理论上来说css是不会壅闭dom渲染的，但是终极的渲染是必要dom树和css树共同天生一个render树，就算dom树构建好了，但是css树没构建好，那也没办法渲染页面。以是css的加载不会壅闭但是css的分析又是会壅闭页面渲染的。
欣赏器的回流和重绘：

回流指的时当元素发生巨细位置上的变革，引起整个布局也变革了这个时间欣赏器就会触发回流，重绘则是元素的颜色配景致等不影响布局变革的地方发生了变革，就会触发重绘。
回流肯定触发重绘，但重绘不愿定触发回流。
那平常应该怎么尽量制止这两个题目呢？
1、尽量把利用dom的过程同一实行，以减少回流重绘的次数
2、把必要多次利用的dom先display：none，利用完在展示出来
3、使带有动画的dom离开文档流
4、尽量利用偏移量transform去取代left top等位移属性
5、利用一些能触发GPU加快的样式取代原来的写法
script标签

说完了html，css，固然还要聊一聊最紧张的js环节了。
看完上面这些内容我们大概已经知道了，js为什么会壅闭页面渲染，那有没有什么办法制止呢。
起首相识以下script标签上的async和defer两个属性
async：异步加载js文件，他会在异步加载完成之后立即实行js文件，以是照旧会壅闭后续的dom渲染。
defer：也是异步加载，他和async不同的是，他加载完成之后不会立即实行，而是会比及DOM树构建完毕DOMcontentloaded实行之前再去实行脚本。
而且由于async加载就实行的特点，导致async加载js文件时无序的，这大概会出现当某个js必要依靠上一个js的时间，上一个js还没加载过来的题目。而defer则时有序的实行js，会按照你誊写的script标签次序去实行。
好啦，相识完这么多，应该就明确了为什么通常js要放在页面的底部引入。只要记着GUI渲染线程和js线程是互斥的就能回复大部分壅闭的题目了

前端知识梳理-欣赏器篇

所属分类: 问答交流

新帖推荐: 30日

推荐作品