37：浏览器底层渲染机制1：有关样式的处理

浏览器是多线程的
页面渲染是单线程（JS是单线程
进程：一个程序（一个进程中可能包含多个线程）
比如：打开一个页面就是开了一个进程（一个程序）
线程：程序中要做的事情（一个线程同时只能做一个事情）
前端时单线程，因为浏览器只分了一个线程用来渲染页面

浏览器渲染页面的机制和原理

1. 解析HTML，生成DOM树，解析CSS，生成CSSOM树
2. 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
3. Layout(回流): 根据生成的渲染树，计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流
4. Painting(重绘): 根据渲染树以及回流得到的几何信息，得到节点的绝对像素
5. Display:将像素发送给GPU，展示在页面上
   
   理解：

浏览器分配一个线程“自上而下，从左向右” 一次解析和渲染代码。生成dom树
在页面加载过程中，如果遇到【link导入外部样式资源】
浏览器会开辟一个线程，去服务器获取对应的的资源文件

link 异步

【style内嵌样式】同步

正常从上到下解析而已（解析完再继续解析Dom结构）

@import 导入样式（同步

此时不会开辟新的线程加载资源文件，而是让主线程去获取，这样阻碍了DOM结构的继续渲染；只有等把外部样式导入进来，并且解析后，才会继续渲染DOM结构

优化

在真是项目中，如果css样式不是很多（会这是移动端的项目），用内嵌式，以此来减少http资源的请求，提高页面渲染的速度。

比如：百度首页

可以首屏的 使用style

网络资源请求或者HTTP 请求的最大并发数

大部分浏览器 都维持在六个左右

为了避免并发的上线，导致某些i资源延迟加载，页面渲染变慢，尽可能减少HTTP的请求数量