本文介绍了从输入网址到浏览器显示完整页面的三个阶段：request、response和渲染。重点讲解了浏览器渲染阶段，包括解析HTML和CSS生成Render Tree，CSSOM树的构建，以及重绘和回流的概念。最后提出了减少HTTP请求、避免DOM回流等性能优化策略。
在浏览器中输入网址到浏览器显示完整页面的过程中有三个阶段：
- 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树
最低0.47元/天 解锁文章
扫一扫
1512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
