2016-10-11

实例化

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