在浏览器中输入网址到浏览器显示完整页面的过程中有三个阶段:
- http请求阶段(request)
- http响应阶段(response)
- 浏览器渲染阶段
本文对浏览器渲染阶段进行简要概括。
request 和 response 阶段
浏览器首先对服务器发出请求,服务器将项目磁盘中的代码返回给浏览器。
浏览器渲染阶段
- 解析html和css,生成Render Tree
浏览器拿到代码后,在内存条中开辟出一块栈内存,为代码的运行提供环境。然后分配出一条主线程将代码一行一行进行执行。
例如:
<!DOCTYPE html>
<link href="1.css">
<link href="2.css">
执行第一行时,将第一行代码入栈,将文本文件声明为html文件,执行完后出栈。
执行第二行时,另分配一条线程请求1.css资源文件(link/script/img都会这样),此时开辟出一条新的内存空间名为Task Queue(等待队列),将1.css存入等待队列中。
执行第三行时,再另分出一条线程请求2.css资源文件,并将2.css存入等待队列。
然后主线程继续执行html代码,直至html代码执行完毕,此时第一次自上而下执行完毕,完成DOM树。
第一次执行完毕后,主线程在等待队列中寻找请求好的资源文件,并放入栈中运行(一次只能运行一个,1.css或2.css,因此要进行事件循环机制),执行完所有的css文件后,生成CSSOM树