首页 前端知识 【随手记】浏览器的高级API

【随手记】浏览器的高级API

2024-03-10 11:03:51 前端知识 前端哥 121 449 我要收藏

浏览器的高级API

  • 前言
  • 一、URLSearchParams和URL类
  • 二、window.requestAnimationFrame()
  • 三、IntersectionObserver
  • 四、document.createRange()
  • 五、navigator.sendBeacon


前言

window下的高级API:
1、URLSearchParams和URL类
2、requestAnimationFrame()
3、IntersectionObserver
4、ocument.createRange()
5、navigator.sendBeacon()


一、URLSearchParams和URL类

1、URL将一个string的url变成一个url对象

const myURL = new URL("https://example.org/?abc=123");
//  searchParams.get()	获取
myURL.searchParams.get(‘abc’);	// 123
// 追加
myURL.searchParams.append('mun', '123');
// https://example.org?abc=123&mun=123
// 删除
myURL.searchParams.delete("mun");
// 添加
myURL.searchParams.set("a", "1");
// https://example.org?a=1

2、URLSearchParams将string类型的search转化对象,会忽略?号

let params = new URLSearchParams('user=123&pas=456');
params.get('user');	// 123
// 打印所有的提交数据	可以将 ?省略
params.toString();	// user=123&pas=456

二、window.requestAnimationFrame()

1、使用setTimeout实现的动画,当页面被隐藏或最小化时,setTimeout 仍然在后台执行动画任务,由于此时页面处于不可见或不可用状态,刷新动画是没有意义的,完全是浪费CPU资源。
2、而requestAnimationFrame则完全不同,当页面处理未激活的状态下,该页面的屏幕刷新任务也会被系统暂停,因此跟着系统步伐走的requestAnimationFrame也会停止渲染,当页面被激活时,动画就从上次停留的地方继续执行,有效节省了CPU开销。

const timer = window.requestAnimationFrame(function fn() {
        if (length.value < 95) {
            length.value += 1;
            window.requestAnimationFrame(fn)
        } else {
            window.cancelAnimationFrame(timer);
        };
    });

三、IntersectionObserver

1、可见性监听,可以用做滚动跟随等效果

var observer = new IntersectionObserver(changes => {
    for (const change of changes) {
        console.log(change.time);
        // Timestamp when the change occurred
        // 当可视状态变化时,状态发送改变的时间戳
        // 对比时间为,实例化的时间,
        // 比如,值为1000时,表示在IntersectionObserver实例化的1秒钟之后,触发该元素的可视性变化

        console.log(change.rootBounds);
        // Unclipped area of root
        // 根元素的矩形区域信息,即为getBoundingClientRect方法返回的值

        console.log(change.boundingClientRect);
        // target.boundingClientRect()
        // 目标元素的矩形区域的信息

        console.log(change.intersectionRect);
        // boundingClientRect, clipped by its containing block ancestors,
        // and intersected with rootBounds
        // 目标元素与视口(或根元素)的交叉区域的信息

        console.log(change.intersectionRatio);
        // Ratio of intersectionRect area to boundingClientRect area
        // 目标元素的可见比例,即intersectionRect占boundingClientRect的比例,
        // 完全可见时为1,完全不可见时小于等于0

        console.log(change.target);
        // the Element target
        // 被观察的目标元素,是一个 DOM 节点对象
        // 当前可视区域正在变化的元素

    }
}, {});

// Watch for intersection events on a specific target Element.
// 对元素target添加监听,当target元素变化时,就会触发上述的回调
observer.observe(target);

// Stop watching for intersection events on a specific target Element.
// 移除一个监听,移除之后,target元素的可视区域变化,将不再触发前面的回调函数
observer.unobserve(target);

// Stop observing threshold events on all target elements.
// 停止所有的监听
observer.disconnect();

四、document.createRange()

范围选择节点操作

// 选择节点
var range1 = document.createRange(),
    range2 = document.createRange(),
    p1 = document.getElementById("p1");
range1.selectNode(p1);
range2.selectNodeContents(p1);

// 选择范围
range = document.createRange();
p1 = document.getElementById("p1").childNodes[0];
range.setStart(p1,2);
range.setEnd(p1,8);
 // deleteContents() 这个方法能够从文档中删除范围缩包含的内容
// extractContents() 会删除并返回文档片段
 //CloneContents() 创建范围对象的一个副本,不会影响原来的节点
 //insertNode() 向范围选区的开始处插入一个节点
 //surroundContents() 环绕范围插入内容 

五、navigator.sendBeacon

1、该方法只能post请求
2、该方法和ajax最大的区别在于即使浏览器窗口关闭也可以完成请求发送,常常用于打点请求

 const params =Object.assign(this.data, data, { time: new Date().getTime() })
 let headers = {
     type: 'application/x-www-form-urlencoded'
 };
 let blob = new Blob([JSON.stringify(params)], headers);
 navigator.sendBeacon(this.data.requestUrl, blob);

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3531.html
标签
评论
发布的文章

jQuery之宽高

2024-04-05 09:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!