浏览器渲染页面原理和过程（简略版）

这两天一直在看浏览器渲染页面的原理和过程，看完以后在这里做个小结。
浏览器渲染页面可以分为五个步骤：
1.DNS解析
2.TCP建立连接
3.HTTP发起请求和响应
4.服务器响应
5.客户端渲染页面
先来说第一点：DNS解析就是DNS进行域名解析，然后查找IP地址,最终找到主机，也就是找到了服务器；
第二点：TCP建立连接，我们通常所知道的三次握手就是发生在这个阶段；
第三点：HTTP发起请求就是我们在浏览器中输入网址以后，然后HTTP开始向服务器请求关键资源；
第四点：服务器接收到请求后，就给HTTP发送资源；
第五点：客户端接受到资源之后就开始渲染页面了；
在这里我想要重点说一下客户端渲染页面的过程：这个过程我分为三大点来理解：
1).css渲染
2）js渲染
3）DOM渲染
这三点按照优先级依次开始渲染，要渲染一个页面的时候，常常会遇到css阻塞渲染，因为css的优先级别高于DOM,所以在DOM渲染的过程中，遇到,DOM会停下来，去把css的资源加载完毕之后再继续渲染，同理，遇到script也一样，需要停下来，这样就会造成阻塞渲染，影响性能和速度，导致用户体验特别糟，所以要优化性能，可以从阻塞渲染这个方面入手如:css阻塞渲染可以在中添加media指定在什么情况下引用，在中添加defer表示可以延迟加载，不影响DOM的渲染，加async 属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行——无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发之后。需要注意的是，这种方式加载的 JavaScript 依然会阻塞 load 事件。换句话说，async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行。

当css和DOM渲染完后就要将DOM和css组合起来，这就是渲染DOM树了，然后根据DOM树来布局，计算坐标，这里还有repaint和reflow两块内容，后续更新。

最后

以上就是悲凉镜子为你收集整理的浏览器渲染页面原理和过程（简略版）的全部内容，希望文章能够帮你解决浏览器渲染页面原理和过程（简略版）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。