动画优化客户端存储历史记录worker

Posted tianya-guoke

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了动画优化客户端存储历史记录worker相关的知识,希望对你有一定的参考价值。

一、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

         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->永久的,除非手动删除

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

2、存储作用域

localStorage->文档源限制  (同域下)

sessionStorage->文档源限制+窗口 

api

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

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>

 

 

2、hashchange事件

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

 

以上是关于动画优化客户端存储历史记录worker的主要内容,如果未能解决你的问题,请参考以下文章

备份具有完整历史记录的SVN存储库

Django之使用redis缓存session,历史浏览记录,首页数据实现性能优化

SecurityError:replaceState 无法将历史记录更新为在路径、查询或片段以外的组件中不同的 URL

CSS3动画卡片式效果

LAMP 架构深度优化记录

LAMP 架构深度优化记录