1,css sprite,如何使用
为了节省图片资源加载,将多张图片整合到到一张图片上,利用background属性进行添加,background: #000 url("") no-repeate fix 50% 50%
2,封装事件监听
function addEventHandle(target,type,fn) {
if(target.addEventListener) {
target.addEventLister(type, fn)
} else {
target.addEvent("on"+type, fn)
}
}
3,移除监听事件
function removeEventHandle(target,type,fn) {
if(target.addEventListener) {
target.removeEventLister(type, fn)
} else {
target.detachEvent("on"+type, fn)
}
}
4,事件委托(提高性能,减少内存占用)
document.onclick = function(event) {
event = event || window.even;
var target = event.target || event.srcElement;
if(target.id === "saveBtn") {
alert("把子元素的click事件委托给docment去执行")
}
}
5,事件绑定的防范
html中绑定;dom.onclick();利用时间监听绑定时间
6,js中的定时器有哪些?
setTimeOut() 只执行一次 -----clearTimeOut()
setInterval()会一直重复执行 --- clearInterval()
var t = setTimeOut(fn,1000)
clearTimeOut(t);
7,数据存储
cookie:存储小;设置有效期限内不会被自动删除;和服务器之间可以互相传输数据。
localStorage: 有限制,比cookie大;除非手动,浏览器关闭不丢数据;只是通过api本地存储数据。
sessionStorage:有限制,比cookie大;浏览器关闭,数据丢失;只是本地数据存储。
8,计算数组元素的和
function add (arr){arr.reduce(function(a,y){return x+y})}
9,性能优化
页面级别优化
(1) 减少http请求数(从设计层面减少请求,设置缓存减少请求,资源合并压缩,
(2) 框架只引入核心模块
(3) 将外部脚本在页面加载完成之后进行引入
(4) Css放在head中
代码级别优化
(1)减少dom操作
(2)避免使用eval
(3)减少作用链查找,局部变量全局化
(4)字符串拼接使用join,not “+”
(5)图片压缩
10,实现链式继承
function Super() {
this.a = 0;
this.b = 0;
}
Super.prototype.add = function(a,b){
this.a += a;
this.b += b;
}
function Sub () {super.call(this)} // call supre constuctor
Sub.prototype = Object.create(Supre.prototype);
Sub.prototype.constructor = Sub;