一、requestAnimationFrame

1、requestAnimationFrame怎么用？

设置关键帧动画效果，注重关键帧执行的情况，用法与setTimeout一样

2、requestAnimationFrame与setTimeout的区别？  （执行时间，setTimeout是用户设置的时间 ，requestAnimationFrame看起来实现动画效果更流畅）

   <style>

       .demo{

          width:100px;

          height:100px;

          background:red;

          position:absolute;

          left:0;

       }

   </style>

</head>

    <div class ="demo"></div>

<body>

   <script>

      var demo = document.getElementsByClassName('demo')[0];

      function move () {

         demo.style.left = demo.offsetLeft + 150 + 'px';

         var timer = requestAnimationFrame(move);

         if(demo.offsetLeft > 800){

            cancelAnimationFrame(timer);

         }

      }

      move();

   </script>

requestAnimationFrame

1、页面刷新前执行一次

2、1000ms 60fps -> 16ms   （每16ms执行一次）

3、cancelAnimationFrame  （取消动画）

4、用法和 setTimeout类似

5、兼容性  （不好）

requestAnimationFrame(f)

cancelAnimationFrame(id)

requestAnimationFrame兼容性

requestAnimationFrame （兼容性写法） （与setTimout写法相同，setTimout加上时间就与requestAnimationFrame一样，但没有requestAnimationFrame精准）

         window.requestAnimFrame = (function () {

            return window.requestAnimationFrame ||

               window.webkitRequestAnimationFrame ||

               window.mozRequestAnimationFrame ||

               function (callback) {

                  window.setTimeout(callback, 1000 / 60);

               };

         })();

cancelAnimationFrame

      window.cancelAnimFrame = (function () {

         return window.cancelAnimationFrame ||

            window.webkitCancelAnimationFrame ||

            window.mozCancelAnimationFrame ||

            function (id) {

               window.clearTimeout(id);

            };

      })();

二、客户端存储

客户端存储方法

1.Storage： 不会传到服务器

2.Cookie：

（cookie数据会传到服务器，影响性能，且存储量小）

storage

1、localStroage

2、sessionStroage

存储方式:

localStorage.name = 'aimee'

localStorage.info = JSON.stringify({name:'aimee,company: 'duyi’})  （localStroage隐式类型转换，转换成字符串，用JSON.stringify转换成json字符串）

读取方式：

localStrorage.name

JSON.parse(localStorage.info)    （转换成对象）

例如：

1、传数组

 、

数组获取发现是字符串的形式（因为localStorage存储的值必须是字符串类型，如果不是，会调用toString方法转换）

2、传对象

解决此问题可将其转换为JSON字符串

再将JSON字符串的形式转换成对象

sessionStroage 与 localStorage 相同

二者区别：

1、存储有效期

localStorage->永久的，除非手动删除

sessionStorage->临时，窗口关闭就没有了

2、存储作用域

localStorage->文档源限制  （同域下）

sessionStorage->文档源限制+窗口

api

1. setItem(name,val)   设置属性值

 sessionStorage localStorage 相同

2. getItem(name)   获得属性值

3. removeItem(name)   移除属性

4. clear() 清除属性

 全部清空

2.cookie

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

navigator.cookieEnabled

检测是否启用了cookie

cookie

1.设置cookie值：

document.cookie = “name=aimee”

（每次只能设置一个值，因为浏览器会认为后面的键值对是这个cookie的属性）

2.获得cookie值：

document.cookie

不建议出现分号，逗号，空格的奇怪的符号

encodeURIComponent()

decodeURIComponent()

Cookie封装函数

      function getCookie(name) {

         var name = name + "=";

         var ca = document.cookie.split(';');

         for (var i = 0; i < ca.length; i++) {

            var c = ca[i];

            while (c.charAt(0) == ' ') c = c.substring(1);

            if (c.indexOf(name) != -1) return c.substring(name.length, c.length);

         }

         return "";

      }

Cookie的存储周期

1.设置cookie存储期限

document.cookie = “name=scott;max-age=1000”;

单位 秒

2.expires 当前时间加上保存时间

var timestamp = (new Date()).getTime() + 10000;

var expires = new Date(timestamp).toGMTString();

document.cookie = “name=scott;expires=“+expires;

3.domain

4.path

cookie

1.删除cookie max-age=0

需要带上键值对

document.cookie = ‘name=scott;max-age=0’;

2.expires 设置为之前的时间

document.cookie = ‘name=scott;expires= …’;

Cookie和storage的区别

三、历史记录

History对象方法

1、history.back()

2、history.forward()

3、history.go(n)

HTML5中新增的方法

通过修改hash和hashchange事件来实现历史纪录管理

1、pushState

history.pushState(state, title, url); 添加一条历史记录

2、replaceState

history.replaceState(state, title, url); 替换当前的历史记录

参数：

state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数中。如果不需要这个对象，此处可以填null。

title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。

url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

History上新增的事件

1、popstate 事件     （单页面开发）

历史记录发生改变时触发

调用history.pushState()或者history.replaceState()不会触发popstate事件

   <script>

       history.pushState({

          name:'abc',

          }, null, '#index');

       window.addEventListener('popstate',function(e){

          console.log(e);

       })

   </script>

过滤

<body>

   <input type="text" id="searchWord">

   <input type="button" id="btn" value="提交">

   <div class="content"></div>

   <script>

      var data = [{

         name: '渡一'

      }, {

         name: '渡一教育'

      }, {

         name: 'html'

      }, {

         name: 'css'

      }, {

         name: 'js'

      }];

      var content = document.getElementsByClassName('content')[0];

      var inp = document.getElementById('searchWord');

      var btn = document.getElementById('btn');

      btn.onclick = function () {

         var showData = data.filter(function (item) {

            return item.name.indexOf(inp.value) > -1;

         });

         renderDom(showData);

         history.pushState({ value: inp.value }, null, '#' + inp.value);

      }

      var renderDom = function (data) {

         var str = '';

         for (var i = 0; i < data.length; i++) {

            str += '<div>' + data[i].name + '</div>';

         }

         content.innerHTML = str;

      }

      renderDom(data);

      window.addEventListener('popstate', function (e) {

         var value = e.state ? e.state.value : '';

         var showData = data.filter(function (item) {

            return item.name.indexOf(value) > -1;

         });

            inp.value = value;

            renderDom(showData);

         }, false)

   </script>

2、hashchange事件

当页面的hash值改变的时候触发，常用于构建单页面应用

四、work

1、Worker是什么？

Worker是一种异步执行js的方式

Worker应用

var worker = new Worker('worker.js');

worker文件必须和主文件满足同源策略

worker和主线程之间的通信

1、postMessage(n)方法

2、message事件

结束worker

close() 在worker作用域中调用(worker.js)

terminate() 在worker对象上调用(主进程的worker对象上 worker.terminate)

其他特性

importScripts('./math1.js','./math2.js')

worker只是window的子集，只能实现部分功能，不能获取到window, document，所以这里不要引juery zepto。可以引入一些计算类的库。

postMessage跨域

动画优化、客户端存储、历史记录、worker的更多相关文章

  1. React-Native 动画优化

    前言 动画对于客户端来说是非常重要的一部分,直接影响到应用的用户体验.前端对于动画优化通常使用CSS3样式来实现动画,以利用GPU加速特性.而React-Native由于渲染模式的不同,无法使用CSS ...

  2. JavaScript权威指南--客户端存储

    客户端存储web应用允许使用浏览器提供的API实现将数据存储在用户电脑上. 客户端存储遵循“同源策略”,因此不同站点的页面是无法读取对于存储的数据.而同一站点的不同的页面之间是可以互相共享存储数据的. ...

  3. JavaScript的客户端存储

    一.前言: 客户端存储实际上就是Web浏览器的记忆功能,通过浏览器的API实现数据存储到硬盘: 二.存储的不同形式: 1.Web存储:localStorage 和 sessionStorage 代表同 ...

  4. js023-离线应用与客户端存储

    js023-离线应用与客户端存储 本章内容: 进行离线检测 使用离线缓存 在浏览器中保存数据 23.1 离线检测 第一步:知道设备是在线还是离线:navigator.Online属性.该值为true表 ...

  5. js-新兴的API,最佳实践,离线应用于客户端存储

    离线应用于客户端存储: 1.离线检测:online以及offline事件,都是在window对象上触发 navigator.online为true的时候是表示设备能够上网 2.使用一个描述文件(man ...

  6. Web - 客户端存储的几种方式

    客户端存储主要方便一些APP离线使用.今天就来说说客户端存储的方法有多少? 说在最前面的一句:所有的客户端存储都有一个原则:读写的数据必须要同域 1 Cookie Cookie是一项很老的技术的,就是 ...

  7. 《javascript高级程序设计》 第23章 离线应用与客户端存储

    23.1 离线检测23.2 应用缓存23.3 数据存储 23.3.1 Cookie 23.3.2 IE 用户数据 23.3.3 Web 存储机制 23.3.4 IndexedDB   23.1 离线检 ...

  8. ByteArrary(优化数据存储和数据流)

    原地址:http://www.unity蛮牛.com/blog-1801-799.html 首页 博客 相册 主题 留言板 个人资料   ByteArrary(优化数据存储和数据流) 分类:unity ...

  9. HTML5学习笔记之客户端存储数据方法：localStorage(),sessionStorage()

    HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储 下面的一个例子用localSt ...

随机推荐

  1. 《C语言程序设计》编程总结汇总

    <C语言程序设计>编程总结汇总 院系: 专业年级: 班级名称: 学号: 姓名: 指导教师: 完成时间: 自我评价: 计算机科学与技术专业教研室 2018 年秋季学期 第四周编程总结 题目4 ...

  2. Javascript 蛤蟆可以吃队友，也可以吃对手 比较字符串

    Javascript 蛤蟆可以吃队友,也可以吃对手 比较字符串 function mutation(arr) { for(var i = 0; i < arr[1].length; i++) { ...

  3. oracle命令2

    使用DDL创建和管理表 DBA角色:拥有全部特权,是系统最高权限,只有DBA才可以创建数据库结构,并且系统权限也需要DBA授出,且DBA用户可以操作全体用户的任意基表,包括删除 grant dba t ...

  4. MySQL 列，可选择的数据类型（通过sql命令查看：`help create table;`）

    MySQL 列,可选择的数据类型(通过sql命令查看:help create table;) BIT[(length)] | TINYINT[(length)] [UNSIGNED] [ZEROFIL ...

  5. select 查询

    使用as给字段起别名,例如:select name as 姓名 from student; 模糊匹配(like) "_":一个占位符.例子:select * from studen ...

  6. Linux中redis安装配置及使用详解

    Linux中redis安装配置及使用详解 一. Redis基本知识 1.Redis 的数据类型 字符串 , 列表 (lists) , 集合 (sets) , 有序集合 (sorts sets) , 哈 ...

  7. Centos6.5部署Sonar6.7.1备注

    1.一定要用非root账号登录(自己建立账号),建立Sonar目录并部署,因为使用了Elasticsearch 5.6.3做搜索服务器,而它不允许用root账号启动服务,会报如下错误: Excepti ...

  8. Docker容器常用命令

    容器是镜像的一个运行实例.两者不同的是,镜像是静态的只读文件,而容器带有运行时需要的可写文件层. 一.创建容器 1.新建容器 docker create:新建一个容器 create命令命令支持的选项十 ...

  9. C++Primer第五版——习题答案详解（七）

    习题答案目录:https://www.cnblogs.com/Mered1th/p/10485695.html 第8章 IO库 练习8.1 istream &iofunc(istream &a ...

  10. 石板地面 Base Shape

    软件:Substance Designer 2017.1.2 石板地面 Base Shape 效果见图一 图一:Base Shape (2D View) 首先使用Cells 1(Pattern)结点生 ...