【专题版】前端面试知识点(浏览器渲染)更新中

70 阅读2分钟

浏览器渲染

浏览器从输入url到渲染页面

完整版回答

(1) 用户输入阶段:合成 URL,浏览区会判断用户输入是合法 URL,比如用户输入的是搜索的关键词,默认的搜索引擎会合成新的,如果符合url规则会根据URL协议,在这段内容加上协议合成合法的URL;

(2) 查找缓存:网络进程获取到 URL,先去本地缓存中查找是否有缓存资源,如果有则拦截请求,直接将缓存资源返回给浏览器进程;否则,进入网络请请求阶段;

(3) DNS 解析: DNS 查找数据缓存服务中是否缓存过当前域名信息,有则直接返回;否则,会进行 DNS 解析返回域名对应的 IP 和端口号,如果没有指定端口号,http 默认 80 端口,https 默认 443。如果是 https 请求,还需要建立 TLS 连接;

(4) 建立 TCP 连接:TCP 三次握手与服务器建立连接,然后进行数据的传输;(三次握手开喷)

(5) 发送 HTTP 请求:浏览器首先会向服务器发送请求行,它包含了请求方法、请求 URI 和 HTTP 协议的版本;另外还会发送请求头,告诉服务器一些浏览器的相关信息,比如浏览器内核,请求域名;

(6) 服务器处理请求:服务器首先返回响应行,包括协议版本和状态码,比如状态码 200 表示继续处理该请求;如果是 301,则表示重定向,服务器也会向浏览器发送响应头,包含了一些信息;

(7) 页面渲染:查看响应头的信息,做不同的处理,比如重定向,存储cookie 看看content-type的值,根据不同的资源类型来用不同的解析方式

(8) 断开 TCP 连接:数据传输完成,正常情况下 TCP 将四次挥手断开连接。但是如果浏览器或者服务器在HTTP头部加上 Connection: keep-alive,TCP 就会一直保持连接。

浏览器渲染原理

浏览器将获取的HTML文档解析成DOM树。 处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)。 将DOM和CSSOM合并为渲染树(rendering tree),代表一系列将被渲染的对象。 渲染树的每个元素包含的内容都是计算过的,它被称之为布局layout。浏览器使用一种流式处理的方法,只需要一次绘制操作就可以布局所有的元素。 将渲染树的各个节点绘制到屏幕上,这一步被称为绘制painting。