浏览器渲染原理简单理解

一、整体流程截图

二、步骤简单分析

1. 客户端通过http向服务器发请求，客户端通常是浏览器，Request请求这边涉及的知识就有（dns解释、tcp三次握手四次挥手，http与https的区别），请求来到服务器这边

2. 服务器解释请求，找到客户端请求资源（比如请求的是index.html文件），服务器将文件返回给客户端

3. 客户端接收响应回啦的文件，在浏览器中开辟栈内存同时分配一个主线程去执行解释代码执行代码的任务（响应阶段涉及http状态码、304缓存、http报文等）

4. 在解释代码的过程中，如果遇到link/script/img,浏览器就会开辟另外的线程去服务器获取资源（css、解释、图片等资源），主线程继续往下执行

5. 当主线程执行完毕，就会形成DOM树，就会去轮询事件队列（就是我们前面遇到link/script/img然后开辟线程去获取资源这些任务），当某个线程获取资源完毕就会被拿到主线程执行

6. 当所有css被加载完毕就会形成CSSOM树，DOM树与CSSOM树结合就会形成render树（渲染树），然后被渲染到浏览器上形成我们所看到的页面

三、在这些地方可做的性能优化的地方就有

1. 减少http请求

1-1：减少link/script/img等的引入，把js/ts各个模块引入到同一个文件，再通过script引入、同理css也是，如果是图标的话就可以集成精灵图/雪碧图

1-2：图片加载的话就可以使用图片懒加载，也是减少htpp请求的一种，首屏只加载可是区域内的图片

1-3：适当使用缓存，数据预加载，举个例子，页面B只能从页面A跳转而来，页面B需要加载很多数据，那就可以加载页面A（页面A本身加载的数据不多）的时候顺带加载页面B的部分数据，那就可以在其前一个页面先把数据加载上来然后存起来，当跳转页面B的时候，就让部分数据从缓存中获取，这样页面B 的加载速度就可以加快很多