实例化
function class_A(param){
this.attr_1 = param;
this.func_1 = function(){
console.log(this.attr_1);
}
}
var instance_1 = new class_A('1');
var instance_2 = new class_A('2');
多次实例化-->创建新对象-->占用内存
单例
var sinlge = {
attr_1:'1',
func:function(){
console.log(1);
}
}
翻页
1.希望一页放满内容，下一页进行数据加载。
2.从性能方面考虑
使用Base64格式的图片制作ICON
优势
Base64图片可以减少请求
加快首屏数据的显示速度
维护不方便
使用css3制作ICON
问题：不易维护，存在兼容性问题
移动可以用
常用属性
border-radius
box-shadow
transform 做变换
DOM节点操作QuerySelector
postMessage跨域通信
window.performance做性能测试
window.performance.timing监控页面加载速度
不支持html5的new Date().getTime()
window.localStorage.setItem('a','1')
window.localStorage.getItem('a')
只能存对象
不然要序列化
localStorage.setItem('data_1',JSON.stringify({a:1}))
JSON.parse(localStorage.getItem('data_1'))
sessionStorage会话
indexedDB可以存更大量的数据，还能给数据建立索引
cookie存储小，还会发送到服务端，浪费流量
>setTimeout(function(){
console.log(1)
},0);
console.log(2)
2
<undefined 没有返回值
1
把function(){console.log(1)}拧出来放在一个执行栈里面，把循序执行完后执行
var myWorker = new Worker("my_task.js");必须是文件，而且同域
myWorker.onmessage = function (oEvent) { //Worker不能放在my_task.js里面，理解成后台计算线程和UI线程独立
console.log("Called back by the worker!\n");
};
执行完后打印
跨域 iframe jsonp
ajax兼容非ie var xhr = new XMLHttpRequest()
现在
header('Access-Control-Allow-Origin:*')所有的都能跨
header('Access-Control-Allow-Origin:www.baidu.com,www.qq.com')
Content Editable
xss！！！
body.addEventListener('touchstart',function(){console.log('start')},flase)
start
body.addEventListener('touchmove',function(){console.log('move')},flase)
142 move
body.addEventListener('touchend',function(){console.log('end')},flase)
mousedown mouseup click mousemove
减少或避免repaint,reflow
尽量缓存所有可以缓存的数据
缓存方式
Cache-Control:max-age=~
ETag:md5标识看文件是否变化
Expires
Last-Modified
用 response headers做缓存
使用CSS3 transform 代替dom操作 实现元素的操作与位移
transform是浏览器引擎提供的能力 性能更好
- 不要给非static（relative absolute）定位元素增加CSS3动画
- 适当的使用硬件加速（canvas触发硬件加速） 过度会卡帧
- transform:translate3d(0,0,0)开启图层硬件加速 GPU
