浏览器如何渲染页面&&输入URL到看到页面发生的全过程

123 阅读2分钟

1.浏览器如何渲染页面

1-1、浏览器将获取的html文档解析dom树
1-2、处理css标记,构成层叠样式表模型cssom
1-2、将dom和层叠样式表模型,合并为渲染树,然后创建,
1-4、渲染树的每个元素包含的内容都是计算过的,它被称之为布局(layout),
     浏览器使用一种流式处理方法,只需要一次pass绘制操作就可以布局所有的元素
1-5、将渲染树的各个节点绘制到屏幕上,这一步被称为绘制painting.

简单描述:

根据HTML解析DOM树
根据CSS解析生产CSS 规则树
结合DOM树和CSS规则树,生成渲染树
根据渲染树计算每一个节点得信息
根据计算好得信息绘制页面

2.说说从输入URL到看到页面发生的全过程,越详细越好

2-1、首先浏览器主进程接管,开了一个下载线程。
2-2、然后进行HTTP请求(DNS查询、IP寻址等等),中间会有三次捂手,等待响应,
     开始下载响应报文。
2-3、将下载完的内容转交给Renderer进程管理。
2-4Renderer进程开始解析css rule tree和dom tree,这两个过程是并行的,
     所以一般把link标签放在页面顶部。
2-5、解析绘制过程中,当浏览器遇到link标签或者script、img等标签,浏览器会去
     下载这些内容,遇到缓存的时候使用缓存,不适用缓存的重新下载资源。
2-6、css rule tree和dom tree生成完了之后,开始合成render tree,这个时候浏
     览器会进行layout,开始计算每一个节点的位置,然后进行绘制。
2-7、绘制结束后,关闭TCP连接,过程有四次挥手

简单描述:

1)读取缓存:
           搜索自身凡人DNS缓存,如果DNS缓存中找到IP地址就跳过接下来查找IP地址得步骤,直接            访问该IP地址
2DNS解析:
            将域名解析成IP地址
3)TCP连接:
            TCP三次握手,简易描述三次握手
            客户端:服务端你在吗?
            服务端:客户端我在,你要连接我吗?
            客户端:是的,服务端,我要连接
            接下来,连接打通,可以开始请求来
 4)发送HTTP请求
 5)服务器处理请求并返回HTTP报文
 6)浏览器解析渲染页面
 7)断开连接:TCP四次挥手