- 前言
- 一、从服务器基于HTTP网路请求回来的数据
- 二、进程和线程
- 三、渲染页面过程
- 3-1、遇到style内嵌样式，GUI直接渲染即可
- 3-2、外链式和导入式
- 3-3.遇到
前言
CRP:critical rendering path 关键渲染路径围绕渲染的机制和步骤，去详细的进行每一步的优化，以此来提高页面的渲速度和运行性能
一、从服务器基于HTTP网路请求回来的数据
从服务器请求回来的是16进制的文件流，
浏览器会把他解析为字符串（html字符串）
按照w3c规则识别成一个个的节点【词法解析】
最后生成树
访问页面，首先请求回来的是一个HTML文档，浏览器开始自上而下渲染
- 进程：一般指一个程序（浏览器打开一个页面，就相当于开了一个进程）
- 线程：进程中具体去执行事务的东西，一个线程同时只能干一件事情
一个进程中，可能会包含一到多个线程
同步编程：一般是只有一个线程去处理事情，上面的事情处理不完，下面的事情无法处理「一件事一件事去干」
异步编程：
- 多线程异步编程
- 单线程异步编程（JS是EventQueue+EventLoop机制完成单线程异步编程的）
浏览器是可以开辟多个进程/线程的
-
- GUI渲染线程：渲染页面
-
- JS引擎线程：渲染JS代码的
-
- HTTP网络线程，可以开辟N多个：从服务器获取资源和数据的
-
- 定时器监听线程
-
- DOM监听线程
-
- …
如果CSS代码量比较少，我么直接内嵌即可，拉去HTML的时候，同时CSS也回来了，渲染的时候直接就渲染了
但是如果CSS代码比较多，如果还用内嵌，一方面会影响HTML的拉取速度，也不利于代码的维护，此时还是用外链的方式比较好
遇到link，浏览器开辟一个HTTP线程去请求资源文件信息，同时GUI继续向下渲染「异步」
- 浏览器同时能够发送的HTTP请求是有数量限制的（谷歌：5~7个）
- 超过最大并发限制的HTTP请求需要排队等待
- HTTP请求一定是越少越好…
遇到@import，浏览器也是开辟HTTP线程去请求资源，但是此时GUI也暂定了（导入式样式会阻碍GUI的渲染），当资源请求回来之后，GUI才能继续渲染「同步」
- 真实项目中应该避免使用@import