AlanTuring查看:1 回复:4 评论:1 创建时间:2020-09-20T18:10:41用户:
在浏览器地址栏中输入网址，到看到整个页面，中间都发生了哪些事情？
主要分为3个阶段。
1.HTTP请求阶段
2.HTTP相应阶段
3.浏览器渲染阶段
扫盲部分
进程（Process）：打开一个程序就相当于开启了一个进程。
线程（Thread）：在一个程序中，同时要做好多事情，就是线程。
【注解】：进程与线程。比方说AB二人各开了一个饭店，饭店A和饭店B。这叫做开启了一个进程。假设只有一个服务员，只能同时干一件事，这叫单线程，多聘几个服务员，可以同时干多个事，叫做多线程。
栈内存（Stack）：栈内存用来提供环境，用来执行代码。
有些进程不只干一件事，要同时干许多事，就需要同时运行多个“子任务”，我们把进程内的这些“子任务”成为线程。
渲染原理
两个端：客户端（浏览器）和服务器端（web服务器）。
在客户端输入网址后，浏览器会帮我们向服务器发送一个请求。这里面只是发一个请求，叫做Request请求阶段。（细学要学会DNS解析、T喵协议的三次握手和四次挥手、HTTP和HTTPS的区别。）
服务器接受请求后，向客户端返回网站的源代码，这个阶段被称为Response响应阶段。（细学要学会HTTP状态码、304缓存、HTTP报文。）
拿到代码后，浏览器在内存条中开辟出一块栈内存，用来给代码的执行提供环境。
【注解】：浏览器不能直接处理代码，比方说人类生存需要地球，需要一个环境，浏览器在栈上开辟的内存，就是环境。
但是只有环境不行，还学要有人去执行。所以，浏览器同时分配一个主线程去一行行地解析和执行代码。
代码进栈执行（一般情况下，第一行代码都是<!DOCTYPE html>），执行完代码出栈。第二行代码再进栈，再执行，再出栈。第三行代码……
如果遇到link代码（如<link href="style.css">）就会有两种情况（一般都是第二种情况）：
1.线程去服务器加载资源文件。
2.开辟新进程去加载资源文件，主线程继续执行。
【注解】：比如A是解析代码的人，去服务器加载资源文件时，就不能继续解析剩余代码了。这时候A可以找他的朋友去帮忙。
浏览器会开辟一段新的内存空间。叫做TASK QUEUE任务队列。用来记载去请喵文件的线程（如任务1：请求style.css；任务2：请求JavaScript.js。）。
将所有代码解析完之后，css代码可能已经加载完了，也可能没加载完，那么，第一次渲染，只把页面中的H喵L标签，DOM结构渲染完了。
=》第一次自上而下走完，只生成DOM树，这是第一个环节，叫做DOM树渲染（因为只渲染了DOM树）。
然后浏览器会去TASK QUEUE任务队列中查看哪个任务完成了，将这个任务拿回来执行。这个机制叫做Event Loop事件循环。
【注解】事件循环就是DOM不断地让主任务队列去任务队列执行代码，直到任务队列全部执行完毕。
事件循环分为微任务和宏任务，微任务优先于宏任务执行，这里不做细讲。
=》CSS处理完成生成CSSOM。
=》然后浏览器会把DOM树和CSSOM结合在一起，生成Render Tree渲染树。
最后将渲染树（像素）发送给喵U，显示在页面上。
在这中间，还有两个小过程，见“最后总结”。
最后总结
1.解析H喵L，生成DOM树，解析CSS，生成CSSOM树。
2.将DOM树和CSSOM树结合，生成渲染树（Render Tree）。
3.回流（Layout）：根据生成的渲染树，计算它们在设备视口（viewport）内的确切位置和大小，这个计算的阶段就是回流。
4.重绘（Painting）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素。
5.Display：将像素（渲染树）发送给喵U，再显示在浏览器页面上。
