浏览器页面的加载过程-回流-重绘-浏览器-服务器

        最近对用户-浏览器-服务器总是很迷，想弄明白之间是的连接方式，梳理了一下思想，整理了一份文档，为了给未来做铺垫，省着又找不到了。大家可以康康，欢迎伙伴们批评指正！🤣

建议大家直接看图，有看不懂的地方再回来对文字！因为我就不爱看字😗

       图1 页面的加载过程

1：首先是用户-浏览器-服务器三者之间的关系：（见下图左上角）

        1）用户在浏览器输入网址

        2）浏览器把这个网址给DNS服务器

        3）DNS服务器会把网址解析成IP地址（为什么要解析呢，因为网址是给人看的，IP地址是

              给计算机看的，这个过程是人在向计算机做请求，所以得换一下）

        4）浏览器知道用户要访问的IP地址了之后，就拿着地址去找服务器了

        5）服务器知道是来找他的之后，就把用户想要的东西返还给浏览器（没直接返回给你，因

              为都是一堆数据，不可视化一下看着麻烦）

        6）浏览器收到数据了，就通过一些引擎把数据可视化一下，你就能看见了

2：说一下第六步：浏览器如何把数据呈现给用户的（看下边的图）

        前提，一般来说，服务器返回的数据分为三种类型：

            HTML：类似人的骨架和肉，里边是内容

            CSS：是人的皮肤和衣服，里边是样式

            JavaScript：是人的眼睛鼻子耳朵嘴，管交互沟通的

我按照黄色的箭头依次描述：

        小前提：页面的实现过程是通过把数据变成一个倒着的树来间接实现的，你现在看见的界

                       面就是浏览器解析了服务器的数据，然后画了一棵树，再和你的显示屏的接口

                       沟通，才显示出画面的。要是现在实在不知道这个树的话，也没关系，反正你

                       早晚得知道~~~😜

        1）浏览器会先把组成人的骨架和肉的HTML搞成一颗树，叫DOM Tree

        2）然后把组成人的皮肤和衣服CSS也搞成一颗树，叫CSSOM Rule Tree 

        3）再把交互的JavaScript也搞进来，这个就不是树了，这个相当于让前面这俩树更有生机！

        4）前面的三大件搞完之后，浏览器会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree，这是最终的树

        5）然后布局~~~就是布局（我理解的就是整理一下，规整规整）

        6）最后都搞好了之后，开始和显示屏的接口对接了，就是控制像素点的接口，分辨率啥的。

至此，页面出来了。搞定~~~  

大家详看的话可以看下下边的链接，那个是大佬，我得过几年才是（hiahiahia~🤣）不过图是我自己画的（用的process on 软件），画完巨有成就感，画的还不错吧~

 参考文章：

你不知道的浏览器页面渲染机制 - 掘金