admin管理员组文章数量:1567915
最近对用户-浏览器-服务器总是很迷,想弄明白之间是的连接方式,梳理了一下思想,整理了一份文档,为了给未来做铺垫,省着又找不到了。大家可以康康,欢迎伙伴们批评指正!🤣
建议大家直接看图,有看不懂的地方再回来对文字!因为我就不爱看字😗
图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 软件),画完巨有成就感,画的还不错吧~
参考文章:
你不知道的浏览器页面渲染机制 - 掘金
版权声明:本文标题:浏览器页面的加载过程-回流-重绘-浏览器-服务器 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1726870557a1087823.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论