- 响应行/状态行:由 HTTP 版本协议字段、状态码和状态码的描述文本 3 个部分组成
- 响应头:用于指示客户端如何处理响应体,告诉浏览器响应的类型、字符编码和字节大小等信息
- 空行:最后一个响应头部之后是一个空行,发送回车符和换行符,通知服务器以下不再有响应头部。
- 响应体:返回客户端所需数据
这个时候浏览器拿到我们服务器返回的HTML文件,可以开始解析渲染页面
浏览器解析渲染页面当我们经历了上述的一系列步骤之后,我们的浏览器就拿到了我的HTML文件那么它又是如何解析整个页面并且最终呈现出我们的网页呢?
渲染流程图简图:从这张图上我们可以得出一个重要的结论:下载CSS文件并不会阻塞HTML的解析
详图:
详细解析步骤解析一:HTML解析过程默认情况下服务器会给浏览器返回index.html文件,所以解析HTML是所有步骤的开始:解析HTML,会 构建DOM Tree
当遇到我们的script文件的时候,我们是不能进行去构建DOM Tree的。它会停止继续构建,首先下载JavaScript代码,并且执行JavaScript的脚本,只有等到JavaScript脚本执行结束后,才会继续解析HTML,构建DOM树。
具体的相关细节看下面的script与页面解析
解析二:生成CSS规则- 在解析的过程中,如果遇到CSS的link元素,那么会由浏览器负责下载对应的CSS文件
- 注意:下载CSS文件是不会影响DOM的解析的
- 浏览器下载完CSS文件后,就会对CSS文件进行解析,解析出对应的规则树
- 我们可以称之为 CSSOM (CSS Object Model,CSS对象模型)