资讯详情

浏览器解析URL过程、防抖、节流、回流、重绘解读

1.浏览器分析URL过程

输入浏览器地址栏url从地址到视图中间的过程是什么?让我们一起来看看

1. 地址栏中输地址栏URL;

2. 浏览器将首先检查缓存(浏览器缓存、系统缓存、路由缓存),如果缓存中有直接渲染页面;

3. 浏览器检测没有缓存就会发送http请求,发送http在请求之前,需要域名分析(DNS域名分析),分析获得相应的IP地址;

4. 浏览器将向服务器发起tcp连接(tcp连接将经过三次握阶段,终止一次连接将经过四次挥手);

5. tcp成功连接客户端和服务器端,浏览器将发送到服务器http请求,请求服务器数据;

6. 服务器接收到请求就会处理接收到的请求,将请求所需的数据返给浏览器(接收请求处理请求返回数据给浏览器这个阶段叫:报文),数据返回给浏览器请求断开(为了避免服务器与客户端双方的资源占用和损耗,当双方没有请求或响应传递时,任意一方都可以发起关闭请求);

7. 接收浏览器http请求的响应数据,阅读页面数据分析html源码数据,浏览器渲染;

8. 解析css样式、js交互,生成dom完成页面渲染;

二、回流与重绘 /

【浏览器渲染页面有回流和重绘的过程,我们一起来看看】

回流也被称为重排。当元素的大小、结构或触发某些属性时,浏览器会重新渲染页面,我们称之为回流;回流是一个重操作,浏览器需要重新计算,页面布局需要重新计算。

常见回流:

<1>. 首次渲染页面

<2>. 更改浏览器窗口的大小

<3>. 元素尺寸/位置/内容发生改变

<4>. 元素字体大小变化

<5>. 可见的添加或删除 DOM 元素

<6>.激活 CSS 伪类(:hover…)

当元素的一部分属性发生变化时,如外观、背景、颜色等,只需要浏览器 根据元素的新属性重新绘制,使元素呈现出新的外观,称为重画;损失相对较小,因为此时只需要 UI 重新绘制层次像素。

常见重绘:

<1>改变元素的颜色

<2>. 改变背景色

当一个事件被多次触发时,只会执行最后一次。

常见的防抖:

<1>.登录表单时

在规定的时间内只触发一次。

常见节流:

<1>. 轮播图

标签: xsm吸收薄膜电容器

锐单商城拥有海量元器件数据手册IC替代型号,打造 电子元器件IC百科大全!

 锐单商城 - 一站式电子元器件采购平台  

 深圳锐单电子有限公司