原文地址:CSS Animations vs the Web Animations API: A Case Study May 03, 2017 css, javascript 上周我写了我如何使用CSS来制作bitsofcode logo动画.之后,有人建议我应该对CSS动画与Web Animations API做个对比,所以,这篇文章就是. Web Animations API介绍 和上周一样,在开始之前我先对Web Animations API做下介绍.Web Animations API…

原文地址:→传送门 写在前面 之前学习了CSS animation/setTimeout/setInterval/requestAnimationFrame等,这些都可以用在某种场景下的小动画,也可以说是动效.CSS动画君居然强大,但是缺陷也很多啊,有的时候没法满足要求,定时器用在动画中就更不使用了,但是requestAnimationFrame也是个很强大的东西,具体详情移步到window.requestAnimationFrame关于动画,你需要知道的requestAnimationFram…

W3C Editor's Draft 29 December 2014 This version: http://www.w3.org/2012/nfc/web-api/ Latest published version: http://www.w3.org/TR/nfc/ Latest editor's draft: http://www.w3.org/2012/nfc/web-api/ Editors: Kenneth Rohde Christiansen, Intel Zoltan Kis…

1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各种源中的声音,处理声音,使声音可视化等. 要使用Web Audio API,我们还是先来简单的了解一下它的工作流程: 创建音频环境(eg. AudioContext..) 在音频环境里创建源 — 例如 , 振荡器, 流(eg. navigator.getUserMedia/createMediaEl…

html fragment & html template & virtual DOM https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template Fragment const dom = document.querySelector('#list'); const fruits = […

Web Animations API WWAPI https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API https://caniuse.com/#feat=web-animation https://css-tricks.com/css-animations-vs-web-animations-api/ http://danielcwilson.com/blog/2015/07/animations-part-1/…

使用Web存储API TODO:本文由 赤石俊哉 翻译整理,您可以将本文自由地用于学习交流.如需用于其他用途请征得作者的同意. 原文链接:Using the Web Storage API - Mozilla Developer Network (英文) Web存储API提供了浏览器可以在本地安全存储键值对的一个机能,它比cookies更为直观.这篇文章将会简单阐述一下如何来简单地使用这种技术. 基础概念 存储对象是一个简单的键值存储,它跟对象类似,但是它们在页面读取后依然完整.键和值总是字符串…

JavaScript入门系列目录 JavaScript入门①-基础知识筑基 JavaScript入门②-函数(1)基础{浅出} JavaScript入门③-函数(2)原理{深入}执行上下文 JavaScript入门④-万物皆对象:Object JavaScript入门⑤-欲罢不能的对象.原型与继承 JavaScript入门⑥-WEB浏览器API JavaScript入门⑦-DOM操作大全 JavaScript入门⑧-事件总结大全 JavaScript入门⑨-异步编程●异世界之旅 JavaScri…

Web Workers API接口 通过使用Web Workers,Web应用程序可以在独立于主线程的后台线程中,运行一个脚本操作.这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是UI线程)不会因此被阻塞/放慢. 主线程和 worker 线程相互之间使用 postMessage() 方法来发送信息, 并且通过 onmessage 这个 event handler来接收信息(传递的信息包含在 Message 这个事件的data属性内) .数据的交互方式为传递副本,而不是直接…

1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是cookie有下面几个问题: a:大小:cookies的大小被限制在4KB b:带宽:cookies随HTTP事务一起被发送,因此会浪费一部分发送的cookies时使用的带宽. c:复杂性:要正确的操纵cookies是很困难的.   Web Storage分为两种: <1>sessionStorag…