11.html5笔记-动画优化、客户端存储、历史记录、worke
2018-11-21 本文已影响0人
wudimingwo
- requestAnimationFrame
image.png
image.png
屏幕刷新频率, 每秒 60 次 16ms
如果 setinterval 刷新数据的的频率 要高于 屏幕刷新的频率,
就会发生丢帧,因为无法在每次刷新数据的时候,屏幕都及时刷新重绘.
image.png
image.png
用setInterval
// function move() {
// box.style.left = box.offsetLeft + 20 + "px";
// }
//
// var timer = setInterval(function() {
// move();
// if(box.offsetLeft >= 500) {
// clearInterval(timer);
// }
// }, 30);
所有能用setInterval 的都可以更换成 setTimeout,自身调用的方式.
// function move() {
// box.style.left = box.offsetLeft + 20 + "px";
// var timer = setTimeout(function() {move();}, 30);
// if(box.offsetLeft >= 500) {
// clearTimeout(timer);
// }
// }
// move();
requestAnimationFrame 的用法和 setTimeout 非常相似.
function move() {
box.style.left = box.offsetLeft + 20 + "px";
var timer = requestAnimationFrame(function() {move();},);
if(box.offsetLeft >= 500) {
cancelAnimationFrame(timer);
}
}
move();
image.png
image.png
window.requestAnimation = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback,1000/60);
}
})();
window.cancelAnimationFrame = (function () {
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
function (id) {
window.clearTimeout(id);
}
})();
疑问 封装的 setTimeout 能取消?
var a = function (callback) {
window.setTimeout(callback,1000);
}
var b = function (id) {
window.clearTimeout(id);
}
function fn () {
console.log(123);
}
var id = a(fn);
b(id);
如果有效, b 应该能阻止a 但是并没有阻止.
我就说嘛,感觉不行,修改一下,返回一个 id
var a = function (callback) {
var id = window.setTimeout(callback,1000);
return id;
}
var b = function (id) {
window.clearTimeout(id);
}
function fn () {
console.log(123);
}
var id = a(fn);
b(id);
稍微修改一下的 requestAnimationFrame
window.requestAnimation = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
return = window.setTimeout(callback,1000/60);
加一个return
}
})();
image.png
image.png
image.png
localStorage.name = "123";
localStorage.arr = [1,2,3];
console.log(localStorage.name,typeof localStorage.name);
console.log(localStorage.arr,typeof localStorage.arr);
image.png
存储的都是字符串类型, 如果不是,自动转化为字符串类型.
image.png
image.png
问题,
同一个服务器,
不同文件, 能共享 local 和 sessionLocal嘛?
localstorage 可以, sessionStorage 不可以.
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
history.pushState({},null,"index.html");
并不会刷新页面,也不会跳转.
history.replaceState({},null,"index1.html");
state 参数
history.pushState({name:'mike'},null,"#index");
window.addEventListener("popstate",function (e) {
console.log(e);
})
image.png
state + history.pushState(state,null,"#") + popstate 应用
<body>
<input type="text" name="searchKey" id="searchKey" value="" />
<button id="btn">提交</button>
<div id="content"></div>
<script type="text/javascript">
// 有一组数据
// 有个input 输入框,输入关键字
// 有个提交按钮用来触发.
var data = [{
name : "mike1"
},{
name : "mike2"
},{
name : "mike3"
},{
name : "peter1"
},{
name : "peter2"
},{
name : "peter3"
},{
name : "peter4"
}];
// dom 元素
searchKey = document.getElementById("searchKey");
btn = document.getElementById("btn");
content = document.getElementById("content");
//渲染
function render (data,div) {
var len = data.length;
var str = "";
div.innerHTML = "";
for(var i = 0; i < len; i++) {
str += "<div>" + data[i].name + "</div>";
}
div.innerHTML = str;
}
render(data,content);
btn.onclick = function (e) {
var key = searchKey.value;
// 在这里我们改变哈希值的同时,储存数据.
history.pushState({key:key},null,"#" + key);
var arr = data.filter((item) => {
return item.name.indexOf(key) > -1;
});
render(arr,content);
}
//监听 回退前进事件
window.addEventListener("popstate",function (e) {
var key = e.state ? e.state.key : "";
searchKey.value = key;
var arr = data.filter((item) => {
return item.name.indexOf(key) > -1;
});
render(arr,content);
},false);
</script>
</body>
注意 hashchange 事件对象中似乎 没有 state
window.addEventListener("hashchange",function (e) {
console.log(e);
console.log(e.state.key);// undefined
})
image.png
image.png
image.png
main.js
var num = 10000000;
var worker = new Worker("worker.js");
// 传输数据
worker.postMessage({num});
console.log("---");
worker.onmessage = function (e) {
console.log(e.data);
接收数据
断开连接
worker.terminate();
}
worker.js
function aaa (num) {
var arr = [];
for(var i = 0; i < num; i++) {
arr.push(i);
}
return arr;
}
this.onmessage = function (e) {
var num = e.data.num;
//获取数据
console.log(e.data);
// 传输数据
this.postMessage(aaa(num));
// 断开连接
this.close();
}
两者之间的通信, 数据传输, 靠的都是 postMessage 和 onmessage 监听事件.
worker能把一个同步的计算改成了异步的计算.
如果想断开连接, 主线程可以用 worker.terminate()
副线程可以用 this.close();
image.png
image.png
iframe 跨域 子传父
链接网络课笔记 9-iframe 跨域
image.png
