1、前端动画：
原生js: setInterval();setTimeout();//操作CSS属性 -> ele.style.left = ele.offsetLeft + num + 'px';
jQuery3: show();/hide();slideDown();slideUp();fadeIn();fadeOut();以及animate();其底层封装定时器
CSS3: transition;animation/@keyframes;//transform:translate();/rotate();等系列属性更侧重“2D/3D” 变换 -> 直接使用其是"静态呈现"，往往结合transition,animation使用 -> 单独理解为“动画”较牵强；
HTML5: canvas、svg制作动画效果 -> 往往配合定时器实现，例如小方块下落，雪花飘落等； requestAnimationFrame -> H5中浏览器专门提供的动画API，性能进行了优化；
其它：动画插件的引入 -> waves、textillate.js -> 聚焦点：初始化、配置项； GIF动图的使用 -> 动画复杂，技术难度大，可考虑使用；
2、请求动画关键帧:requestAnimationFrame(function(stemp){}) ->其同setTimeout();表现效果相同
(1).其同setTimeout()的区别；
[1].定时器setInterval/setTimeout -> 动画不流畅 ->原因：其每隔xx时间执行，但页面大约16.7ms渲染/刷新一次(1s渲染60次：1000ms/60)，两者存在时间差；(不同浏览器渲染时间稍有差异) requestAnimationFrame -> 动画流畅 -> 原因：其在每次重新绘制页面的时候才会触发；
[2].定时器的兼容性良好，requestAnimationFrame();兼容性不好;//IE8下都不兼容，主流都兼容
[3].requestAnimationFrame()的优点：在大多数浏览器中，当该方法运行在后台标签页或隐藏的iframe里时，浏览器会暂停调用它，减少CPU/内存的压力，提升性能和电池寿命；[动画所在的标签页“最小化”或者用户打开其他标签页，此标签页虽打开但属于后台标签页] -> setTimeout后台仍执行
[4].定时器、requestAnimationFrame都是window对象上的方法 -> this指向window；同时其也是异步执行；
(2).requestAnimationFrame(function(stemp){});//其只有一个参数，执行时间为页面渲染时间16.7ms，stemp参数表示动画执行的时间戳，可省略；
(3).封装兼容性函数 ->主流浏览器都兼容，IE8以下不兼容
3、客户端存储
(1).cookie：再次向服务器发送请求时，其会存在于请求头中，发送给服务器，大小约为4kb document.cookie = "";//存取方式都是字符串 ->若不设置存储时间，其是临时cookie(窗口关闭消失)
(2).webStorage不会发送给服务器：localStorage:永久存储(不手动删除，其便会永久存储，但可手动删除)；sessionStorage:临时存储(窗口关闭即会消失) ->大约5M
4、历史记录(history对象) -> 实现有"历史记录"的搜索框
5、worker副线程 -> 异步加载js的方式 ->为js创造多线程环境，允许主线程创建worker线程
(1).其受同源策略限制、主线程DOM限制(其没有document文档结构，也就没有window)；脚本限制：worker线程不能执行alert或confirm方法，但可使用XMLHTTPRequest对象发出ajax请求；文件限制：worker线程无法读取本地文件，即不能打开本机文件系统，其所加载的脚本必须来自网络；
(2).跨域访问 -> postMessage();//发送数据；message事件;//接收数据；-> H5的新跨域方法
(3). terminate();//主线程关闭通信；close();//子线程关闭通信；
主线程：
worker副线程：
网友评论