Quelles sont les API de html5 ?-Questions et réponses frontales-php.cn

Maison

interface Web

Questions et réponses frontales

Quelles sont les API de html5 ?

青灯夜游

Dec 13, 2021 pm 02:37 PM

apihtml5

html5 apis incluent : 1. requestAnimationFrame ; 2. stockage client ; 3. historique 4. travailleur 5. lecteur de fichiers ;

Quelles sont les API de html5 ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

1. requestAnimationFrame (demande d'image clé d'animation)

1.1 Comment utiliser requestAnimationFrame ?

Préfiguration :

Jetons un coup d'œil à la façon dont nous animons habituellement un élément en JS.

Nous utilisons généralement des minuteries pour définir la durée pendant laquelle l'animation aura lieu, ou le déplacement

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

Nous pouvons voir que les effets d'animation peuvent être obtenus avec les minuteries JS

Cependant, les minuteries JS auront un inconvénient

Le navigateur se redessine toutes les 1 s -> 60 fois, donc il se redessine environ toutes les 16 ms

Si nous effectuons la même chose que ci-dessus, augmentez left50px toutes les 10 ms. La page entraînera la perte des images clés

requestAnimationFrame : (après optimisation)

<style>
        .demo {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="demo"></div>
    <script>
        var dom = document.getElementsByClassName(&#39;demo&#39;)[0];
        function move() {
            dom.style.left = dom.offsetLeft + 50 + &#39;px&#39;;
            var items = requestAnimationFrame(move);
            if(dom.offsetLeft == 500){
                cancelAnimationFrame(items);
            }
        }
        move();
    </script>

1.2 Quelle est la différence entre requestAnimationFrame et setTImeout ?

setTimeout consiste à exécuter la fonction de rappel après n millisecondes. La fonction de rappel peut appeler de manière récursive setTimeout pour implémenter l'animation.

.demo {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="demo"></div>
    <script>
        var dom = document.getElementsByClassName(&#39;demo&#39;)[0];
        function move() {
            var items = setTimeout(function () {
                dom.style.left = dom.offsetLeft + 50 + &#39;px&#39;;
                if (dom.offsetLeft == 500) {
                    clearTimeout(items);
                } else {
                    move();
                }
            }, 10)
        }
        move();
    </script>

Le plus grand avantage de l'utilisation de requestAnimationFrame pour exécuter une animation est qu'elle peut garantir que la fonction de rappel n'est exécutée qu'une seule fois pendant chaque intervalle de rafraîchissement de l'écran, afin que les images ne soient pas supprimées et que l'animation ne se fige pas.

.demo {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="demo"></div>
    <script>
        var dom = document.getElementsByClassName(&#39;demo&#39;)[0];
        function move() {
            var items = requestAnimationFrame(function () {
                dom.style.left = dom.offsetLeft + 50 + &#39;px&#39;;
                if (dom.offsetLeft == 500) {
                    cancelAnimationFrame(items);
                } else {
                    move();
                }
            })
        }
        move();
    </script>

1.3 Avantages de requestAnimationFrame

2. Stockage client

2. 1 Stockage : Ne sera pas transféré au serveur

2.1.1 Stockage Comment utiliser la méthode Master

Objet de stockage :

Objet de récupération :

Tableau de stockage :

Sortez le tableau :

API localstorage sessionStorage Généralement applicable

Définir, obtenir

Supprimer les attributs (spécifier les attributs individuels)

Effacer tous les attributs définis

2.1.2 Cookie de stockage de session de stockage local différence

stockage local :

　 Stockage des informations sur l'appareil de l'utilisateur, généralement 5 Mo

　 Stockage permanent, sauf effacement manuel

Il sera stocké dans le même domaine

sessionStorage :

　 Stockage des informations sur l'appareil de l'utilisateur, généralement 5 Mo

　Stocké temporairement, il sera effacé à la fermeture de la page

　Il ne sera pas stocké dans le même domaine

cookie:

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

　　navigator.cookieEnabled 检查是否启用了cookie

三、历史记录

BOM中的 History对象方法

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

3.1history.length 长度

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

3.1history.back() 回退

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

3.2 history.forward() 前进

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

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

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

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

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

1、pushState 添加一条历史记录

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

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

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

应用场景

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

<!DOCTYPE html>
<html>

<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(&#39;wrapper&#39;);
        var inp = document.getElementById(&#39;inp&#39;);
        var btn = document.getElementById(&#39;btn&#39;);
        var data = [{
            name: &#39;科比&#39;
        }, {
            name: &#39;杜兰特&#39;
        }, {
            name: &#39;库里&#39;
        }, {
            name: &#39;哈登&#39;
        }, {
            name: &#39;詹姆斯&#39;
        }, {
            name: &#39;字母哥&#39;
        }, {
            name: &#39;杜兰特&#39;
        }, {
            name: &#39;科比&#39;
        }, {
            name: &#39;科比&#39;
        }];
        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, &#39;#a&#39;);
        }
        
        window.addEventListener(&#39;popstate&#39;, function (e) {  //当历史记录事件改变时
            var key = e.state ? e.state.key : &#39;&#39;;           //判断当前页的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(&#39;worker.js&#39;);    
   // worker文件必须和主文件满足同源策略

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

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

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

传输数据

postMessage 、onmessage

返回数据

4.3 结束worlker

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 其他特性

4.6主要应用场景

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

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

5.1 fileReader的使用方法

var reader = new FileReader();

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

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

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

<style>
    .img{
        height: 300px;
    }
    </style>
</head>
<body>
    <input type="file">
    <img class="img lazy"  src="/static/imghwm/default1.png"  data-src="" alt="   alt="" >
    <script>
    var reader = new FileReader();   //创建FileReader（读文件对象）
    var inp = document.getElementsByTagName(&#39;input&#39;)[0];
    var img = document.getElementsByClassName(&#39;img&#39;)[0];
    inp.onchange = function(){       //onchange是当用户改变input输入框内容时执行一段JS代码时触发
        console.log(inp.files);      //flies 是你上传什么文件，他就会给你返回一个文件信息的伪数组
        reader.readAsDataURL(inp.files[0]);//读取文件，伪数组中的第0项
    }
    reader.onloadstart = function(e){
        console.log(&#39;读取开始时触发&#39;, e);
    }
    reader.onprogress = function(e){
        console.log(&#39;读取中&#39;, e);
    }
    reader.onloadend = function(e){
        console.log(&#39;读取完成&#39;, e);
    }
    reader.onload = function(e){
        console.log(&#39;文件读取成功&#39;, e);
    }
    reader.onabort = function(e){
        console.log(&#39;中断时触发&#39;, e);
    }
    reader.onerror = function(e){
        console.log(&#39;出错时触发&#39;, e);
    }
    </script>

<style>
    .img{
        height: 300px;
    }

    </style>


    <input>
    <img  class="img lazy" src="/static/imghwm/default1.png" data-src="" alt="Quelles sont les API de html5 ?" >
    <script>
    var reader = new FileReader();   //创建FileReader（读文件对象）
    var inp = document.getElementsByTagName(&#39;input&#39;)[0];
    var img = document.getElementsByClassName(&#39;img&#39;)[0];
    inp.onchange = function(){       //onchange是当用户改变input输入框内容时执行一段JS代码时触发
        console.log(inp.files);      //flies 是你上传什么文件，他就会给你返回一个文件信息的伪数组
        reader.readAsDataURL(inp.files[0]);//读取文件，伪数组中的第0项
    }
    reader.onloadstart = function(e){
        console.log(&#39;读取开始时触发&#39;, e);
    }
    reader.onprogress = function(e){
        console.log(&#39;读取中&#39;, e);
    }
    reader.onloadend = function(e){
        console.log(&#39;读取完成&#39;, e);
    }
    reader.onload = function(e){
        console.log(&#39;文件读取成功&#39;, e);
        img.src = e.target.result;
    }
    reader.onabort = function(e){
        console.log(&#39;中断时触发&#39;, e);
    }
    reader.onerror = function(e){
        console.log(&#39;出错时触发&#39;, e);
    }
    </script>

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

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

<style>
    .img{
        height: 300px;
    }
    .wrapper{
        width: 300px;
        height: 30px;
        border: 1px solid black;
    }
    .wrapper .content{
        width: 0;
        height: 30px;
        background-color:blue;
        overflow: hidden;
    }

    </style>


    <input>
    <img  class="img lazy" src="/static/imghwm/default1.png" data-src="" alt="Quelles sont les API de html5 ?" >
    <div>
        <div></div>
    </div>
    <span></span>
    <script>
    var reader = new FileReader();   //创建FileReader（读文件对象）
    var inp = document.getElementsByTagName(&#39;input&#39;)[0];
    var img = document.getElementsByClassName(&#39;img&#39;)[0];
    var con = document.getElementsByClassName(&#39;content&#39;)[0];
    var text = document.querySelector(&#39;.text&#39;);
    inp.onchange = function(){       //onchange是当用户改变input输入框内容时执行一段JS代码时触发
        console.log(inp.files);      //flies 是你上传什么文件，他就会给你返回一个文件信息的伪数组
        reader.readAsDataURL(inp.files[0]);//读取文件，伪数组中的第0项
    }
    reader.onloadstart = function(e){
        console.log(&#39;读取开始时触发&#39;, e);
    }
    reader.onprogress = function(e){
        // console.log(&#39;读取中&#39;, e。loaded / e.total * 100%);
        var precent = e.loaded / e.total * 100;  //当前读取的值除以文件总大小，乘以100%。在读取中会不断触发
        var width = Math.round(300 * precent / 100); //进度条长度300乘以前面得到的值，除以100%，四舍五入取整
        con.style.width = width + &#39;px&#39;; //把值赋给宽度
        text.innerHTML = Math.round(precent) + &#39;%&#39;; //把读取中的值取整把数字赋给文字进度条
    }
    reader.onloadend = function(e){
        console.log(&#39;读取完成&#39;, e);
    }
    reader.onload = function(e){
        console.log(&#39;文件读取成功&#39;, e);
        img.src = e.target.result;
    }
    reader.onabort = function(e){
        console.log(&#39;中断时触发&#39;, e);
    }
    reader.onerror = function(e){
        console.log(&#39;出错时触发&#39;, e);
    }
    </script>

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

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

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

5.2 fileReader 可实现的功能

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

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

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

6.1 简单回忆HTTP协议

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

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

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

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

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

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

6.3 websocket的特点

6.4 websocket事件

6.5 创建websocket

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

    var socket = new WebSocket(&#39;ws://echo.websocket.org/&#39;);

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

我们再来看看close这个方法

6.6 websocket属性

6.7 websocket的优点

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

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

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

推荐教程：《html视频教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article connexe

React: La puissance d'une bibliothèque JavaScript pour le développement WebApr 18, 2025 am 12:25 AM

React est une bibliothèque JavaScript développée par Meta pour la création d'interfaces utilisateur, avec son cœur étant le développement des composants et la technologie DOM virtuelle. 1. Gestion des composants et de l'État: React gère l'état à travers les composants (fonctions ou classes) et les crochets (tels que UseState), améliorant la réutilisabilité et la maintenance du code. 2. Dom virtuel et optimisation des performances: via Virtual Dom, React met à jour efficacement le DOM réel pour améliorer les performances. 3. Cycle de vie et crochets: les crochets (tels que l'utilisation d'effet) permettent aux composants de la fonction de gérer les cycles de vie et d'effectuer des opérations à effet secondaire. 4. Exemple d'utilisation: des composants de Basic Helloworld à la gestion avancée de l'État mondial (UseContext et

L'écosystème de React: bibliothèques, outils et meilleures pratiquesApr 18, 2025 am 12:23 AM

L'écosystème React comprend des bibliothèques de gestion d'État (telles que Redux), des bibliothèques de routage (telles que Reactrouter), des bibliothèques de composants d'interface utilisateur (telles que Material-UI), des outils de test (tels que la plaisanterie) et de la construction d'outils (tels que WebPack). Ces outils fonctionnent ensemble pour aider les développeurs à développer et à maintenir efficacement les applications, à améliorer la qualité du code et l'efficacité de développement.

React and Frontend Development: un aperçu completApr 18, 2025 am 12:23 AM

React est une bibliothèque JavaScript développée par Facebook pour créer des interfaces utilisateur. 1. Il adopte la technologie DOM composinalisée et virtuelle pour améliorer l'efficacité et les performances du développement de l'interface utilisateur. 2. Les concepts de base de la réact incluent la composante, la gestion de l'État (comme UseState et UseEffect) et le principe de travail du DOM virtuel. 3. Dans les applications pratiques, réagir les supports du rendu de base des composants au traitement avancé des données asynchrones. 4. Les erreurs courantes telles que l'oubli pour ajouter des attributs clés ou des mises à jour de statut incorrectes peuvent être déboguées via ReactDevTools et les journaux. 5. L'optimisation des performances et les meilleures pratiques incluent l'utilisation de react.memo, la segmentation du code et le maintien du code lisible et le maintien de la fiabilité

La puissance de la réaction dans HTML: développement Web moderneApr 18, 2025 am 12:22 AM

L'application de la réaction dans le HTML améliore l'efficacité et la flexibilité du développement Web par composant et DOM virtuel. 1) L'idée de composant réagit décompose l'interface utilisateur en unités réutilisables pour simplifier la gestion. 2) Performances d'optimisation Virtual DOM, minimiser les opérations DOM via un algorithme de difficulté. 3) La syntaxe JSX permet d'écrire HTML en JavaScript pour améliorer l'efficacité du développement. 4) Utilisez le crochet UseState pour gérer l'état et réaliser des mises à jour dynamiques de contenu. 5) Les stratégies d'optimisation incluent l'utilisation de React.Memo et Usecallback pour réduire le rendu inutile.

Comprendre la fonction principale de React: la perspective du frontendApr 18, 2025 am 12:15 AM

Les principales fonctions de React incluent la pensée composante, la gestion de l'État et le DOM virtuel. 1) L'idée de la composante permet de diviser l'interface utilisateur en parties réutilisables pour améliorer la lisibilité et la maintenabilité du code. 2) La gestion de l'État gère les données dynamiques via l'état et les accessoires, et les modifications déclenchent des mises à jour de l'interface utilisateur. 3) Performances d'optimisation virtuelle DOM, mettez à jour l'interface utilisateur à travers le calcul du fonctionnement minimum de la réplique DOM en mémoire.

Développement frontal avec React: Avantages et techniquesApr 17, 2025 am 12:25 AM

Les avantages de React sont sa flexibilité et son efficacité, qui se reflètent dans: 1) la conception basée sur les composants améliore la réutilisabilité du code; 2) La technologie DOM virtuelle optimise les performances, en particulier lors de la gestion de grandes quantités de mises à jour de données; 3) L'écosystème riche fournit un grand nombre de bibliothèques et d'outils tiers. En comprenant comment React fonctionne et utilise des exemples, vous pouvez maîtriser ses concepts principaux et les meilleures pratiques pour créer une interface utilisateur efficace et maintenable.

Réagir vs autres cadres: Comparaison et options contrastéesApr 17, 2025 am 12:23 AM

React est une bibliothèque JavaScript pour la construction d'interfaces utilisateur, adaptées aux applications grandes et complexes. 1. Le noyau de React est la composante et le DOM virtuel, qui améliore les performances de rendu d'interface utilisateur. 2. Comparé à Vue, React est plus flexible mais a une courbe d'apprentissage abrupte, qui convient aux grands projets. 3. Comparé à Angular, React est plus léger, dépend de l'écologie communautaire et adapté aux projets qui nécessitent une flexibilité.

Démystifier réact dans HTML: comment tout cela fonctionneApr 17, 2025 am 12:21 AM

React fonctionne en HTML via Dom virtuel. 1) React utilise la syntaxe JSX pour écrire des structures de type HTML. 2) Mise à jour de l'interface utilisateur de gestion DOM virtuelle, rendu efficace via l'algorithme de difficulté. 3) Utilisez Reactdom.Render () pour rendre le composant au vrai Dom. 4) L'optimisation et les meilleures pratiques incluent l'utilisation de react.memo et de division des composants pour améliorer les performances et la maintenabilité.

See all articles