浏览器做的第一步就是会解析URL得到里面的参数,分析域名是否规范,并将域名和需要的请求的资源分离开来,从而了解需要请求的是哪个服务器,请求的是服务器上的什么资源等等
浏览器将网址转换成对应的IP地址
本地域名服务器和其他域名服务器之间的查询方式是迭代查询,防止根域名服务器压力过大,通过以下方式进行迭代查询:首先本地域名服务器向根域名服务器发起请求,根域名服务器是最高层次的,它并不会直接指明这个域名对应的 IP 地址,而是返回顶级域名服务器的地址 本地域名服务器拿到这个顶级域名服务器的地址后,就向其发起请求,获取权限域名服务器的地址 本地域名服务器根据权限域名服务器的地址向其发起请求,最终得到该域名对应的IP地址
注意:
本地域名服务器和其他域名服务器之间的查询方式是迭代查询,防止根域名服务器压力过大 操作系统和本地域名服务器之间的查询方式是递归查询。
也就是说:接受请求的顶级DNS服务器查找并返回此域名对应的Name Server域名服务器的地址,Name Server服务器就是我要访问的网站域名提供商的服务器,其实该域名的解析任务就是由域名提供商的服务器来完成。 (比如访问www.baidu.com,而这个域名是从A公司注册获得的,那么A公司上的服务器就会有www.baidu.com的相关信息)。Name Server服务器会查询存储的域名和IP的映射关系表,再把查询出来的域名和IP地址等等信息,连同一个TTL值返回给本地DNS服务器。
==<font color=red >DNS域名解析是一个复杂的过程,在实际的DNS解析过程中,可能还不止这些。</font>==
浏览器和服务器之间会简历一个TCP三次握手的连接,用于传输数据。
==<font color=red >TCP通信需要确保双方都具有数据收发的能力,得到ACK响应则认为对方具有数据收发的能力,因此双方都要发送SYN确保对方具有通信的能力。</font>==
浏览器向服务器发送一个HTTP请求报文,包括请求方法、请求头、请求体等信息。
服务器接受到请求后,根据请求内容进行处理,返回一个HTTP响应报文,包括状态码、响应头、响应体等。
浏览器根据响应报文的内容,解析HTML、CSS、JS等资源,构建DOM树、CSSOM树、渲染树,然后进行布局、绘制、合成等步骤,最终显示在页面
浏览器和服务器之间断开一个TCP四次挥手的连接,释放资源。
浏览器根据HTML文档中的内容,创建DOM节点,形成层级关系,构成DOM树
浏览器根据CSS样式表中的内容,创建CSS规则,并形成层级关系,构成CSSOM树。
注意:==<font color=red >DOM的解析和CSSOM的解析是一个并行的过程。两者互不影响。两者解析完成之后,会合并生成render tree,之后就是layout(布局)和paint(绘制)阶段,渲染到页面中。</font>==
浏览器将DOM树和CSSOM树结合起来,生成渲染树,可以知道每个节点会应用什么样式的数据结构。这个结合的过程就是遍历整个 DOM 树,然后在 CSSOM 树里查询到匹配的样式。
此时已经有了需要渲染的所有节点之间的结构关系及其样式信息。接下来就需要进行页面的布局。通过计算渲染树上每个节点的样式,就能得出来每个元素所占空间的大小和位置。当有了所有元素的大小和位置后,就可以在浏览器的页面区域里去绘制元素的边框了,这个过程就是布局。
这个过程中,浏览器对渲染树进行遍历,将元素间嵌套关系以盒模型的形式写入文档流。
注意:合成操作是在合成线程上完成的,所以,在执行合成操作时并不会影响到主线程的执行。
很多情况下,图层可能很大,比如一篇长文章,需要滚动很久才能到底,但是用户只能看到视口的内容,所以没必要把整个图层都绘制出来。因此,合成线程会将图层划分为图块,这些图块的大小通常是 256x256 或者 512x512。合成线程会优先将视口附近的图块生成位图。实际生成位图的操作是在光栅化阶段来执行的,所谓的光栅化就是按照绘制列表中的指令生成图片。
当所有的图块都被光栅化之后,合成线程就会生成一个绘制图块的命令,浏览器相关进程收到这个指令之后,就会将其页面内容绘制在内存中,最后将内存显示在屏幕上,这样就完成了页面的绘制。
这个过程可能会受到JavaScript的影响,比如遇到非异步的JS代码,会暂停DOM树和CSSOM树的构建,优先执行JS,以为JS代码可能会修改或者访问DOM和CSSOM
渲染树是动态构建的,所以,DOM节点和CSS节点的改动都可能会造成渲染树的重新构建。渲染树的改动就会造成页面的重排或者重绘
当我们的操作引发了 DOM 树中几何尺寸的变化(改变元素的大小、位置、布局方式等),这时渲染树里有改动的节点和它影响的节点都要重新计算。这个过程就叫做重排,也称为回流。在改动发生时,要重新经历页面渲染的整个流程。
页面首次渲染 浏览器窗口大小变化 元素内容变化 元素尺寸变化 元素字体变化 激活CSS伪类 添加/删除可见的DOM元素
在发生重排时,由于浏览器渲染页面是基于流式布局的,所以会导致周围DOM元素重新排列。
color background visibility box-shadow border-radius
当触发重排时,一定会触发重绘,但是重绘不一定会引发重排。
documentFragment
,在它上面进行所有的DOM操作,最后再添加到文档中浏览器针对页面的回流与重绘,进行了自身的优化——渲染队列, 浏览器会将所有的回流、重绘的操作放在一个队列中,当队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。