浏览器如何渲染的(一)

简单来讲就是普及从浏览器输入url到页面显示中间过程的知识

给小白推荐两本趣味性的书《图解http》和《计算机是怎样跑起来的》,这两本都是日本程序猿著的漫画书,很简单说的很清楚

首先 我们先百度百科两个名词 域名端口号 来说明url(简称路径其实是不太规范的,应该叫统一资源定位符)是什么

域名(英语:Domain Name),又称网域,是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称,用于在数据传输时对计算机的定位标识(有时也指地理位置)
域名只是一个Internet中用于解决IP地址对应问题的一种方法。
端口号 就好像是门牌号一样,客户端可以通过ip地址找到对应的服务器端,但是服务器端是有很多端口的,每个应用程序对应一个端口号,通过类似门牌号的端口号,客户端才能真正的访问到该服务器。为了对端口进行区分,将每个端口进行了编号,端口是通过端口号来标记的,端口号只有整数,范围是从0 到65535 ,端口号一般习惯为4位整数,在同一台计算机上端口号不能重复,否则,就会产生端口号冲突这样的例外。

我们分析下平常我们看到的url路径,举两个栗子用以分析

比如本页面路径是 https://mp.csdn.net/mdeditor#
https:// 是超文本传输协议 以后我们会对它具体分析 现在可以理解为你为了上网与非我的一切所履行的协议
mp.csdn.net/# 就是域名 .net是顶级域名 它规定了网络所在的顶级环境 就像每个人所做的工作分类
mdeditor# 与网络达成协议通过域名找到服务器后你需要告诉服务器你的需求是什么,对 这个路径就是你的需求,可长可短但必须写对

再比如http://fap.alipay.net:7001/basic
这里只讲一下 net:7001 为什么本地需要端口号
其实不是本地打开的网页也是有端口号的,只不过使用的是浏览器默认的,你本地打开的是非浏览器设定的所以很多时候都需要配置(一种编辑器配置的一种用host配置原理都一样)
多说一些,其实你访问网页大部分都是为了看数据库里别人录入的数据,没有端口号的缺点就是网页只能本地访问且无法多线程(就是多人使用,服务器不可能只为一人服务),但是使用了ip地址和端口后,任何只要和本主机联网的机器都可以访问。这样数据库就成了一个单独的服务器了,前台后台公用

相信你已经简单的理解了url是什么了 那么我们开始最初的话题

当你在浏览器的地址栏输入你要访问的域名,然后按Enter后,浏览器在 发起http请求前 ,浏览器首先需要解析这个域名,找到这个域名对应的ip地址。这个过程就是dns解析,解析过程分为以下几步。

1、用户输入 Url 后,浏览器会根据 url 在本地查找缓存(查询hosts文件什么是hosts文件),若是有缓存,直接跳到第5步,若没有缓存则解析出主机名。

2、浏览器根据主机名查找出 ip。先查找本地 DNS 缓存列表(什么是DNS服务器),如果有,则进入第4步;若没有,则想浏览器默认的 DNS 域名服务器发起请求,获取倒 ip,并缓存在本地 DNS。

3、解析Url获取倒端口号。

4、拿到 ip+端口号,则开始建立起一条链接目标服务气的 TCP 链接,也就是“三次握手”三次握手四次挥手 什么是三次握手四次挥手详解

5、浏览器向服务器发送一条 HTTP 请求报文

6、服务器向浏览器返回一条 HTTP 响应报文。

7、关闭连接 浏览器解析文档。

8、如果文档中有资源则重复5、6、7、8动作,直至资源全部加载完毕。

那么现在我们已经与服务器连接上了拿到了我们想拿到的资源,开始渲染 HTML

当浏览器下载完所有页面 HTML 标记,JavaScript,CSS,图片之后,它解析文件并创建两个内部数据结构:一个DOM Tree树表示页面结构,一个是 CSSOM Tree表示DOM节点如何显示。

把DOM Tree 和 CSSOM Tree结合在一起,就成为 Render Tree(渲染树)

浏览器根据渲染树计算每一个节点的几何信息。这个就叫做重排(Relayout,更专业的叫法应该是回流(Reflow)。

根据计算好的几何信息,绘制页面。这个就叫做重绘(Repainting)。

重绘是一个非常昂贵的操作。浏览器完成一个dom操作,大多时间都是花费在重绘上面的(之后文章再讲解重绘与回流)。

GG溜了溜了 写的比较简单 主要是科普一下

发布了38 篇原创文章 · 获赞 1 · 访问量 568

猜你喜欢

转载自blog.csdn.net/weixin_43718291/article/details/103080164
今日推荐