资讯专栏INFORMATION COLUMN

理解浏览器是如何加载及渲染网页的

kevin / 859人阅读

摘要:的速度明显快于重排重绘与的区别理解了浏览器是如何渲染页面之后我们再来比较这两者就很好理解了执行的时间必须等到页面内包括图片的所有元素加载完毕后才能执行。

先上图,我们再慢慢解释,这图就是浏览器加载网页的一个过程

当我们在浏览器输入一个地址(比如:http://toadw.cn),那么点击回车后,浏览器是如何加载网页的呢?

加载过程

一开始浏览器是不知道你输入的http://toadw.cn这个东西是什么的,也不知道要去哪里给你找这个网页,他需要向DNS服务发出解析请求
大致的步骤如下:

浏览器发送toadw.cn寻址请求给DNS服务

DNS返回数据告诉浏览器toadw.cn的服务器地址是255.255.255.255

本地电脑缓存DNS数据,并发送请求给255.255.255.255这个服务器,然后浏览器和服务器根据HTTP协议进行通讯

网页渲染

浏览器拿到HTML代码之后,它是如何显示给大家看的呢?其实所谓的渲染就是讲HTML代码根据CSS定义的规则显示在浏览器窗口中的这个过程

首先浏览器先把这个HTML文档先转化为DOM树,然后根据这个DOM树,进行渲染,转化为可视的东西

在渲染的时候,浏览器从上到下依次渲染DOM树,当发现有外链资源或脚本

阅读需要支付1元查看
<