HTML5——新增的API

以你之姓@ 2023-06-03 02:59 10阅读 0赞

**本文的API有：可点击到达**

**requestAnimationFrame**

**　　 客户端存储**

**　　 历史记录**

**　　  worker**

**　　 file Reader**

**　　websocoket**

**一、requestAnimationFrame** （请求动画关键帧）

**1.1 requestAnimationFrame怎么使用？**

**铺垫：**

先看一下，我们平时在JS中是怎么让一个元素产生动画效果的。

我们平时都是用定时器来设置多长时间后发生什么动画，或者位移

![1646536-20190817150709069-301427093.gif][]

我们可以看到，用JS定时器就可以实现动画效果

但是，JS定时器会有一个缺点

![1646536-20190817150929083-529017505.png][]

浏览器的重绘是每1s ——》 60次，所以大约为16ms重绘一次

如果我们像上面执行的一样，每隔10ms就增加 left50px 。页面就会造成关键帧丢失

![1646536-20190817151536080-1056467434.png][]

**requestAnimationFrame：（优化后）**

![1646536-20190817153919586-125248776.gif][]

**1.2 requestAnimationFrame与setTImeout的区别？**

setTimeout 是以 n 毫秒后执行回调函数，回调函数中可以递归 调用 setTimeout 来实现动画。

.demo {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
            }
        </style>
    </head>
    
    <body>
        <div class="demo"></div>
        <script>
            var dom = document.getElementsByClassName('demo')[0];
            function move() {
                var items = setTimeout(function () {
                    dom.style.left = dom.offsetLeft + 50 + 'px';
                    if (dom.offsetLeft == 500) {
                        clearTimeout(items);
                    } else {
                        move();
                    }
                }, 10)
            }
            move();
        </script>

![1646536-20190817165752544-1359424338.png][]

使用 requestAnimationFrame 执行动画，最大优势是能保证回调函数在屏幕每一次刷 新间隔中只被执行一次，这样就不会引起丢帧，动画也就不会卡顿。

.demo {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
            }
        </style>
    </head>
    
    <body>
        <div class="demo"></div>
        <script>
            var dom = document.getElementsByClassName('demo')[0];
            function move() {
                var items = requestAnimationFrame(function () {
                    dom.style.left = dom.offsetLeft + 50 + 'px';
                    if (dom.offsetLeft == 500) {
                        cancelAnimationFrame(items);
                    } else {
                        move();
                    }
                })
            }
            move();
        </script>

![1646536-20190817170103648-1314492461.png][]

**1.3 requestAnimationFrame的优势**

![1646536-20190817171707788-801381162.png][]

**二、客户端存储**

**2.1 Storage: 不会传到服务器**

2.1.1 Storage 如何使用 掌握方法

![1646536-20190817172616623-536310401.png][]

存储对象：

![1646536-20190817173820632-1638509156.png][]

![1646536-20190817173923432-2091054596.png][]

取出对象：

![1646536-20190817174057587-969315542.png][]

储存数组：

![1646536-20190817174246537-1844870152.png][]

![1646536-20190817174310842-2001101886.png][]

取出数组：

![1646536-20190817174432062-1121251424.png][]

API localstorage sessionStorage 共同适用

![1646536-20190817175025232-2139983688.png][]

设置，获得

![1646536-20190817175118772-723494457.png][]

移除属性（指定个别属性）

![1646536-20190817180139217-1746508399.png][]

清除所有已设置的属性

![1646536-20190817180251174-931656747.png][]

2.1.2 localstorage sessionStorage cookie区别

localstorage:

存储信息到用户的设备上，一般为5MB

永久存储，除非手动清除

会存储到同域下

sessionStorage:

存储信息到用户的设备上，一般为5MB

临时存储，页面关闭就会清除

不会存储到同域下

cookie:

存储信息到用户的设备上，数据量较小 4k

navigator.cookieEnabled 检查是否启用了cookie

![1646536-20190817180738129-1719636647.png][]

**三、历史记录**

BOM中的History对象方法

现在已知我有三个标签页（从红色小方块开始）

![1646536-20190817235344800-1089257726.gif][]

3.1history.length 长度

通过调用这个方法就可以知道，当前历史记录里面有几条数据（几个网页）

![1646536-20190818000044376-473806186.png][]

3.1history.back() 回退

当前位置在第三页（淘宝页面），回退一页就会跳转到第二页（百度页面）

![1646536-20190818000619695-799591245.gif][]

3.2 history.forward() 前进

当前在红色小方块当前页，前进一页就会跳转至第二页（百度页面）

![1646536-20190818000950669-114782783.gif][]

3.3 history.go(n) 跳转至指定页

当前在红色小方块页面即为第0页，go（2）就会跳转至第三页（淘宝页面）

![1646536-20190818001234168-559801875.gif][]

当前在淘宝页面即为第三页，go（-2）就会跳转至第一页（红色方块页面）

![1646536-20190818001517457-533681861.gif][]

HTML5中新增的方法 此方法受同源策略限制，需要在服务器下操作

![1646536-20190818003159470-622486887.png][]

1、pushState 添加一条历史记录

![1646536-20190818005336834-1655924611.gif][]

2、replaceState 替换当前的历史记录

![1646536-20190818005844305-1900649333.gif][]

![1646536-20190818012453539-1079418580.png][]

1. popstate 监听页面历史记录一旦发生改变时触发

history.pushState(null, null, '#a');
            window.addEventListener('popstate', function(e){  //监听 popstate事件 有没有发生改变 
                console.log("历史记录发生改变，我触发了");
            }, false)

![1646536-20190818013619754-584754301.gif][]

应用场景

多应用于搜索，后台管理系统，或者父子页面之间的切换（开发一个页面就够了）

![1646536-20190818030933941-1172544556.gif][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
    
        </style>
    </head>
    
    <body>
        <input type="text" id="inp">
        <button id="btn">搜索</button>
        <ul id="wrapper"></ul>
        <script>
            var wrapper = document.getElementById('wrapper');
            var inp = document.getElementById('inp');
            var btn = document.getElementById('btn');
            var data = [{
                name: '科比'
            }, {
                name: '杜兰特'
            }, {
                name: '库里'
            }, {
                name: '哈登'
            }, {
                name: '詹姆斯'
            }, {
                name: '字母哥'
            }, {
                name: '杜兰特'
            }, {
                name: '科比'
            }, {
                name: '科比'
            }];
            function radeDom(data) {  
                var str = " ";
                for (var i = 0; i < data.length; i++) {
                    str += "<li>" + data[i].name + "</li>";
                }
                wrapper.innerHTML = str;
            }
            radeDom(data);
    
            btn.onclick = function () {
                var key = inp.value;
                var dataList = data.filter(function (item, index) {
                    return item.name.indexOf(key) > -1;
                })
                radeDom(dataList);
                history.pushState({   //点击后添加历史记录，key为当前的key
                    key: key
                }, null, '#a');
            }
            
            window.addEventListener('popstate', function (e) {  //当历史记录事件改变时
                var key = e.state ? e.state.key : '';           //判断当前页的key是否等于当前页的key
                var dataList = data.filter(function (item, index) {
                    return item.name.indexOf(key) > -1;
                });
                inp.value = key;  //让输入框的value等于当前页的key
                radeDom(dataList);
            }, false)
        </script>
    </body>
    
    </html>

2. hashchange

用于监听hash值的改变触发事件，就是链接 \# 这个东西的改变而触发

跟popstate的用法大同小异，都差不多。用途也都是一样的。所以大家可以自己试试

**四、worker （受同源策略限制,需要在服务器下运行）**

**4.1 了解worker**

worker字面意思是工人、雇佣员工的意思。

worker是一种异步执行JS的方式。

**4.2 worker应用**

var worker = new worker('worker.js');    
       // worker文件必须和主文件满足同源策略

就是在执行代码前雇佣一名工人（一个JS文件），把数据交给他让他异步执行，执行完了给主人返回回来。

主人可以在执行完代码后，调用解雇工人的方法，就不能继续传数据，

工人可以在执行完代码后，调用辞职方法，就不能继续传数据。

**传输数据**

**postMessage 、onmessage**

![1646536-20190818142605809-176660362.png][]

**返回数据**

![1646536-20190818142902375-164047268.png][]

**4.3 结束worlker**

![1646536-20190818143101803-729580703.png][]

![1646536-20190818143557413-2065524568.png][]

![1646536-20190818145655780-1363508855.png][]

**4.4woker的缺点**

（1）同源限制

分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

（2）DOM 限制

Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用`document`、`window`、`parent`这些对象。但是，Worker 线程可以`navigator`对象和`location`对象。

（3）通信联系

Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

（4）脚本限制

Worker 线程不能执行`alert()`方法和`confirm()`方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

（5）文件限制

Worker 线程无法读取本地文件，即不能打开本机的文件系统（`file://`），它所加载的脚本，必须来自网络。

**4.5 其他特性**

![1646536-20190818150122507-824905241.png][]

**4.6主要应用场景**

Ajax轮询可以使用，每隔一段时间获取一下数据（用一个定时期每隔一段时间，向后端发送一次请求）

**五、fileReader（上传文件，读取中的详细信息）**

**5.1 fileReader的使用方法**

var reader = new FileReader();

![1646536-20190819180643156-425558412.png][]

按照不同项目的需求使用不同的方法，在这里我们就用这里面的readAsDataURL( )这个方法

我们先来看怎么读取文件，我们需要先把文件发送至服务器，等他给我返回文件的URL地址，然后我拿着URL地址来渲染我的页面

![1646536-20190820091331529-295113174.png][]

既然我们可以接收到返回的地址，那我们就可以把图片渲染到页面了

![1646536-20190819180718939-2058892849.png][]

![1646536-20190820093919976-1213048267.png][]

![1646536-20190820094652903-1928101237.png][]

在文件读取中我们可以知道两个值 loaded、total

![1646536-20190820095917782-99247134.png][]

已知这两个值，我们就可以实现加载进度条了

![1646536-20190820102235340-1423101187.gif][]

然后我们还可以添加终止读取，就是在文件上传的中途，停止上传

只需要添加一个按钮，和一个点击事件

btn.onclick = function () {
                reader.abort();
                console.log('终止');
            }

![1646536-20190820111340640-1307922850.png][]

**5.2 fileReader 可实现的功能**

图片预览、异步向发送服务端发送请求

**六、websocket（不受同源策略限制）**

websocket是一种网络协议，是在HTTP基础上做了一些优化的协议，与HTTP无直接关系。

**6.1 简单回忆HTTP协议**

![1646536-20190820113844910-1703233581.png][]

**6.2为什么有HTTP还需要websocket呢？**

因为HTTP协议有一个缺陷：通信只能由客户端发起

服务器端不能实时的发送最新数据给客户端，

我想要最新的数据怎么办呢？ 只能用Ajax轮询（开启一个定时器，每隔一段时间调用请求一次数据）

然而websocket呢只需要发送一次请求，只要服务器有最新数据就会自动给你发送过来，不用再次请求

比如现在做的是一个天气状况的项目，每当天气有变化就会自动更新最新天气状况了

**6.3 websocket的特点**

![1646536-20190820120807049-153097934.png][]

**6.4 websocket事件**

![1646536-20190820133357393-1966404409.png][]

**6.5 创建websocket**

ws://echo.websocket.org/    是用来测试的地址

var socket = new WebSocket('ws://echo.websocket.org/');

![1646536-20190820133700462-688738168.png][]

调用e.data就可以打印出来数据了

![1646536-20190820133938234-531643673.png][]

我们再来看看close这个方法

![1646536-20190820135258542-347268170.png][]

**6.6 websocket属性**

![1646536-20190820135808761-940422042.png][]

![1646536-20190820143257431-61818153.png][]

**6.7 websocket的优点**

客户端与服务器都可以主动传送数据给对方；

不用频率创建TCP请求及销毁请求，减少网络带宽资源的占用，同时也节省服务器资源；

可以只请求一次，就会自动更新返回

转载于:https://www.cnblogs.com/yangpeixian/p/11367193.html

[1646536-20190817150709069-301427093.gif]: /images/20230601/40fa26ac389f455690c9da74264df42c.png
[1646536-20190817150929083-529017505.png]: /images/20230601/0aa6d03b71794e43806f780e66bbf8f6.png
[1646536-20190817151536080-1056467434.png]: /images/20230601/2e50a0758ee4474a83deed46a2fe696d.png
[1646536-20190817153919586-125248776.gif]: /images/20230601/4d9fa0aec1b144bb965777f79f971ad3.png
[1646536-20190817165752544-1359424338.png]: /images/20230601/ba3a772e9eaf4e1fa257c81f869db008.png
[1646536-20190817170103648-1314492461.png]: /images/20230601/66d823407014406bb7f62a83e182bca5.png
[1646536-20190817171707788-801381162.png]: /images/20230601/863ba46af1bd4927b51835ea41945b53.png
[1646536-20190817172616623-536310401.png]: /images/20230601/8df86243ddce4b1cb6fd2ef457cabb11.png
[1646536-20190817173820632-1638509156.png]: /images/20230601/979ed20af1a04938afbccc0e33dfe1bd.png
[1646536-20190817173923432-2091054596.png]: /images/20230601/e59dc660f9304dbe9247fc176bbfe309.png
[1646536-20190817174057587-969315542.png]: /images/20230601/19e9635153bb4c45a23afe5f577e004d.png
[1646536-20190817174246537-1844870152.png]: /images/20230601/05a61628ce39497aa1f02ae4bfd54eee.png
[1646536-20190817174310842-2001101886.png]: /images/20230601/17c4a542701b4cc08e1dfd9ee733acf9.png
[1646536-20190817174432062-1121251424.png]: /images/20230601/065fc2f7fc454b1caea7e711b915a3cc.png
[1646536-20190817175025232-2139983688.png]: /images/20230601/496a30bd4f35442a9be3fb06219a3e75.png
[1646536-20190817175118772-723494457.png]: /images/20230601/a0ad7c923e6f412e814f3a93a08ddc14.png
[1646536-20190817180139217-1746508399.png]: /images/20230601/a8bdc9ea713b457fa08e024df4300a9d.png
[1646536-20190817180251174-931656747.png]: /images/20230601/51a86ee1309440729aceb6de0e4bf59b.png
[1646536-20190817180738129-1719636647.png]: /images/20230601/510701f22d6f417ba3eac725fb8623df.png
[1646536-20190817235344800-1089257726.gif]: /images/20230601/a44590157d6b46b08ae93a49a29ad692.png
[1646536-20190818000044376-473806186.png]: /images/20230601/878b6f0126ce413faf205dda20c61481.png
[1646536-20190818000619695-799591245.gif]: /images/20230601/5086794d0a3e4fa5a7c84b1f9ebfe8ed.png
[1646536-20190818000950669-114782783.gif]: /images/20230601/4fec9d07fb024c129a21aefe274f3db0.png
[1646536-20190818001234168-559801875.gif]: /images/20230601/6d6b0ee16fe241389ebf36e509a7c45b.png
[1646536-20190818001517457-533681861.gif]: /images/20230601/9fbe7141dab949818fefcf89786707e2.png
[1646536-20190818003159470-622486887.png]: /images/20230601/50537cb1b53b4e03980e34f68c922635.png
[1646536-20190818005336834-1655924611.gif]: /images/20230601/3d33d7c371d84aa29c558bc6cce3ebbc.png
[1646536-20190818005844305-1900649333.gif]: /images/20230601/d392b28683bf41299cec813a9590d587.png
[1646536-20190818012453539-1079418580.png]: /images/20230601/2c31c930d37a4bc8bb21f3eb121c4747.png
[1646536-20190818013619754-584754301.gif]: /images/20230601/442827d15c344879850ffe934882c85a.png
[1646536-20190818030933941-1172544556.gif]: /images/20230601/8228a1db6e534f458fe46863bd96e740.png
[1646536-20190818142605809-176660362.png]: /images/20230601/b9362efc3e0b4969940814cf25bb5bf7.png
[1646536-20190818142902375-164047268.png]: /images/20230601/bbc5852083c24797aac6f0e42e9f6ed6.png
[1646536-20190818143101803-729580703.png]: /images/20230601/cd9a120851924fcca09d7bd56e0e6470.png
[1646536-20190818143557413-2065524568.png]: /images/20230601/3d359888ac5545fead665b7efe532938.png
[1646536-20190818145655780-1363508855.png]: /images/20230601/e3335bb08293462d89dfd105cfa24e4b.png
[1646536-20190818150122507-824905241.png]: /images/20230601/c54bbc092c544b208794227e0159dead.png
[1646536-20190819180643156-425558412.png]: /images/20230601/eb142034e49a49fa8d8bcada898dd5d8.png
[1646536-20190820091331529-295113174.png]: /images/20230601/febbf7d005694f4f993ab76735162643.png
[1646536-20190819180718939-2058892849.png]: /images/20230601/39971429c6e4445ebdcf610a69ddfaa2.png
[1646536-20190820093919976-1213048267.png]: /images/20230601/6924b18cbd3c42abafca4f91314e4dff.png
[1646536-20190820094652903-1928101237.png]: /images/20230601/ea65c236b1c742fa9c11ad3f436bd9fa.png
[1646536-20190820095917782-99247134.png]: /images/20230601/0c5ce70235ef43968e0fa9a3fe04fb87.png
[1646536-20190820102235340-1423101187.gif]: /images/20230601/48996143e35d47eab580aa99d4e3ef20.png
[1646536-20190820111340640-1307922850.png]: /images/20230601/c51cffdabdbe4835a0cf848b0e72e02f.png
[1646536-20190820113844910-1703233581.png]: /images/20230601/bc150cc650d644b6849bdd0bd8cfbf07.png
[1646536-20190820120807049-153097934.png]: /images/20230601/7afbfea9b323433b82d34fb7d871b21a.png
[1646536-20190820133357393-1966404409.png]: /images/20230601/9ec579a581b643c89780e75e0263faa2.png
[1646536-20190820133700462-688738168.png]: /images/20230601/4c8774f3e351434285aaf8f6c5849137.png
[1646536-20190820133938234-531643673.png]: /images/20230601/e9c73ee4a78c41b59ccb781f4b7f09f1.png
[1646536-20190820135258542-347268170.png]: /images/20230601/3c46ee3b8f184058bfa0e9941779df17.png
[1646536-20190820135808761-940422042.png]: /images/20230601/d9bbd979dd1b492b871e4f847924f143.png
[1646536-20190820143257431-61818153.png]: /images/20230601/e6d46522330c475b974f3ec14b7db3eb.png