浏览器底层渲染机制

@1 进程：一个软件应用，一个浏览器界面打开运行后都会产生一个进程。
? ? 2 线程：一个进程包含一个或多个线程。每一个线程同时只能做一件事情，处理完这件事才能处
? ? ? 理下一件事情。
? ? 3 异步编程：多线程可以同时处理多件事情。

@2 浏览器具备的线程：
? ? ? ? GUI线程:主要用来界面的渲染 html css img等
? ? ? ? js引擎线程：渲染解析js代码
? ? ? ? http网络请求线程：从服务器获取内容同时可以开通5-7个
? ? ? ? 定时器监听线程：监听定时器是否到达时间
? ? ? ? 事件监听线程： 监听事件是否触发

@3 关于GUI渲染遇到样式的问题：
? ? ? ? GUI渲染过程中，如果遇见style【内嵌式】无需去服务器拉取，但是需要等DOM加载完，再
????????加载。 如果遇到<link>标签引入外联样式，这时候会去服务器拉取，但是不会影响DOM的加
????????载，CSS的渲染会在DOM渲染之后再进行渲染。如果是遇到@import加载样式的话，会阻碍
? ? ? ? DOM结构的渲染，所以尽量不要用@import引入样式标签。
? ? ? ? 建议： 如果css样式较少的情况下 尽量写在内嵌式中,? 样式代码较多的时候link标签尽可能的
????????少，减少服务器的加载，同时link标签放在header头中，可以与DOM渲染异步加载，非必要
????????不使用@import加载样式。


@4 关于GUI渲染遇到js的问题；
? ? ? ? 遇到script标签会开辟新的线程 js线程与GUI线程排斥，JS会阻塞GUI线程的运行。
? ? ? ? 建议：把script标签尽可能写在body底部。在header中使用script标签的时候可以添加async
????????defer关键字，让script加载的同时不影响DOM的渲染。 saync与defer不同之处在于，async加
????????载完js代码会立即执行这时候会阻塞DOM，而defer不会再js加载完后立马就进行渲染运行阻
????????塞DOM运行。

@5 js代码是单线程的，其中大部分都是同步运行的，但是也存在部分异步操作的代码。
? ? ? ? 异步微任务：requestAnimationFrame，promise.then/catch/finaly, async/await,
????????intersectionObserver,mutationObserver, queueMicrotask
? ? ? ? 异步宏任务：setTimeout/setInterval? xmlhttprequest/fetch? messageChannel
????????
????????