从url输入到页面发生的过程详解
1.域名解析dns解析
1.解析的过程:DNS解析是一个递归查询的过程
上述图片是查找www.google.com的IP地址过程。首先在本地域名服务器中查询IP地址,如果没有找到的情况下,本地域名服务器会向根域名服务器发送一个请求,如果根域名服务器也不存在该域名时,本地域名会向com顶级域名服务器发送一个请求,依次类推下去。直到最后本地域名服务器得到google的IP地址并把它缓存到本地,供下次查询使用。从上述过程中,可以看出网址的解析是一个从右向左的过程: com -> google.com -> www.google.com。但是你是否发现少了点什么,根域名服务器的解析过程呢?事实上,真正的网址是www.google.com.,并不是我多打了一个.,这个.对应的就是根域名服务器,默认情况下所有的网址的最后一位都是.,既然是默认情况下,为了方便用户,通常都会省略,浏览器在请求DNS的时候会自动加上,所有网址真正的解析过程为: . -> .com -> google.com. -> www.google.com.。
2.建立tcp三次连接
3.发送http请求
HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文。
以百度为例:https://www.baidu.com:8080/home?name=‘xxx’
https/http:请求协议
www.baidu.com:域名
:8080:端口
/home:路径
?name=‘xxx’:参数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L5J1BDPD-1676107430661)(C:\Users\Administrator\Desktop\查缺补漏笔记以及知识汇总\http.jpg)]
-
http和https的区别
4.服务器处理请求并返回http报文
HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。
5.浏览器解析渲染页面 (也就是浏览器的运行机制)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Q3e8km5-1676107430661)(C:\Users\Administrator\Desktop\查缺补漏笔记以及知识汇总\网页渲染机制.png)]
从服务器上获取到代码后,浏览器在内存中开辟一块栈内存,用来给代码的执行提供环境,同时分配一个主线程去一行一行的解析和执行代码,先预编译代码,然后从上到下执行代码,当浏览器遇到link/script/img等请求(引用链接后),都会开辟全新的县城去加载资源文件,并将link/script/img放到TASK QUEUE(任务队列中),然后继续往下执行代码,遇到dom,就生成dom树,并css处理生成cssOM树,当dom树和css树构建完成时,需要等待task queue任务队列中的任务执行完,当任务队列中的任务执行完成后,就执行Render函数,dom树和css树进行渲染(渲染树),之后就进行回流和重绘,最后display将像素发送给GPU渲染到页面上
注:因为js是单线程运行,在同一时间,只能做一件事情,当js从上往下解析/执行代码的时候,遇到外部链接/脚本/微任务/宏任务时,就会将开辟一个全新的线程去加载或者执行外部链接/脚本/微任务/宏任务,也就形成了事件循环Event Loop
dom元素渲染
-
解析 HTML Source,生成 DOM 树。
-
解析 CSS,生成 CSSOM 树。
-
将 DOM 树和 CSSOM 树结合,去除不可见元素(很重要),生成渲染树( Render Tree )。
-
Layout (布局):根据生成的渲染树,进行布局( Layout ),得到节点的几何信息(宽度、高度和位置等)。
-
Painting (重绘):根据渲染树以及回流得到的几何信息,将 Render Tree 的每个像素渲染到屏幕上。
总结:重绘不会带来重新布局,并不一定伴随回流(重排)
重绘:
当页面中某些元素的样式发生变化,但是不会影响其在文档流中的位置时,浏览器就会对元素进行重新绘制,这个过程就是重绘。比如:修改元素的背景颜色,字体颜色等
触发重绘:
- color、background 相关属性:background-color、background-image 等
- outline 相关属性:outline-color、outline-width 、text-decoration
- border-radius、visibility、box-shadow
回流:
当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时,浏览器会重新渲染部分或者全部渲染的过程就叫回流 。比如:改变marge的距离,字体的大小,元素的宽高等
触发回流:
- 页面的首次渲染
- 浏览器的窗口大小发生变化
- 元素的内容发生变化
- 元素的尺寸或者位置发生变化
- 元素的字体大小发生变化
- 激活CSS伪类
- 查询某些属性或者调用某些方法
- 添加或者删除可见的DOM元素
注意: 当触发回流时,一定会触发重绘,但是重绘不一定会引发回流。
减少回流:
- 减少dom的操作
- 读写分离(获取元素放一块, 修改元素的宽度高度放一块)
- 样式集中修改: divStyle.cssText = ‘width:100px;height:100px;border:1px solid black’
- 元素批量修改:使用文档碎片,createDocumentFragment 将需要创建的元素一次性创建再一次性拼接到dom上
- 动画效果应用到position 属性为absolute或fixed的元素上(脱离文档流)
- 减少table布局
6.断开连接:当数据传送完毕后,需要断开tcp连接,此时发送tcp四次挥手
详解图如下:
由于图片太大,无法一张截图,抱歉,只能分成两张图