js总结

1.事件冒泡和事件捕获
事件捕获:事件从最不确定的元素向最准确的元素开始触发,即由外向内
事件冒泡:事件从最准确的元素开始向最不准确的元素触发,即由内向外

addEventListener()有三个参数,第一个参数是绑定的事件类型;第二个是触发事件时执行的函数;第三个是 是否在捕获阶段触发事件,默认是false。

怎么阻止事件冒泡?event.stopPropagation(),vue项目中用stop修饰符

为什么要阻止事件冒泡?
我们再多数情况下只使用冒泡监听。在一个列表页中,每一条信息中右下角会有一个删除按钮,同时点击这一条消息又会进入到详情页。当我们点击了删除按钮事件执行完毕之后,由于事件冒泡,会触发外层进入详情页的事件,这时就需要给删除按钮一个阻止事件传递的功能,点击删除按钮之后事件就会结束。

2.js获取url中的参数
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]);
return "";
}
3.post请求能否跨域?
post跨域问题本身是因为请求的域名和用于请求的机器域名不一致造成的,例如本地是127.0.0.1域名,请求的是192.168.50.11,在Network里面可以看到会接受到返回值,但是控制台会报请求头不一致的跨域问题,是因为浏览器对后台返给我结果进行了检测,发现两个环境域名不一致,所以解决的办法就是后台在接受到请求的时候,在返回头信息里面加入指定域名可访问或者所有域名都可以访问就可以,这样后台接收到请求之后的返回头里面就指定了对比的请求头,所以前端就能收到返回值了。

Access-Control-Allow-Headers: DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,userid,sign
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *
//加上过滤方法之后的返回头信息,*代表允许所有的域名访问
4.页面性能优化
减少http请求,减少http请求次数是缩短响应时间的关键,捆绑文件,将多个脚本文件捆绑成一个,以此来减少http请求次数
使用css精灵图
减少事件绑定,使用事件委托
引用外部的css和js,而不是写在html文件内,有利于浏览器对文件进行缓存
合理设置 HTTP缓存  缓存的力量是强大的,恰当的缓存设置可以大大的减少 HTTP请求。以有啊首页为例,当浏览器没有缓存的时候访问一共会发出 78个请求,共 600多 K数据 (如图 1.1),而当第二次访问即浏览器已缓存之后访问则仅有 10个请求,共 20多 K数据 (如图 1.2)。 (这里需要说明的是,如果直接 F5刷新页面的话效果是不一样的,这种情况下请求数还是一样,不过被缓存资源的请求服务器是 304响应,只有 Header没有Body ,可以节省带宽 )  怎样才算合理设置 ?原则很简单,能缓存越多越好,能缓存越久越好。例如,很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。
减少dom操作
5.原生ajax
var xhr = new XMLHttpRequest();
xhr.onreadystatechange= function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText)
}
}
//发送get请求时,参数直接拼接在url上
xhr.open("get", "url?param1=val1&param2=val2");
//发送post请求时,参数用send函数发送,并且需要设置请求头
xhr.open("post", "url");
xhr.setRequestHeader('Content-Type', "application/x-www-form-urlencoded")
xhr.send("name=value&age=12")
6.js判断数据类型的方法
typeof 只能对基本数据类型做出准确的判断,引用数据类型都会返回object,typeof的返回结果有:number、string、undefined、boolean、object、function六种,都是小写
instanceof:判断对象和构造函数在原型链上是否有关联,有返回true,无返回false,基本数据类型无效
constructor:查看对象对应的构造函数,当我们写一个构造函数的时候程序会自动添加;构造函数名.prototype.constructor=构造函数名;
str.constructor == String;//true
object.prototype.toString.call: 不管是什么类型都能检测出来
7. call和apply,bind的区别?
call、apply、bind的作用是改变函数运行时this的指向

2.js垃圾回收与内存泄漏?
浏览器的JavaScript具有自动垃圾回收机制(GC),即执行环境会负责管理代码执行过程中的内存。原理是:垃圾收集器会定期找出那些不在继续使用的变量,然后将其内存进行释放。

垃圾回收机制标记无用变量的策略有两种:标记清除和引用计数。标记清除较为常用。

不在使用的变量就是生命周期结束的变量,只能是局部变量,因为全局变量的生命周期直到浏览器卸载页面是才会结束。局部变量只在函数的执行过程中存在,在这个过程中会在栈或者堆上为这个局部变量分配相应的空间用来存储他们的值,直到函数结束。但是闭包中由于你不函数的原因,外部函数不能算是结束。

function fn1(){
var obj = {name: "tom"}
}
function fn2(){
var obj = {name:"tom"};
return obj;
}
var a = fn1();
var b = fn2();
上面的例子中,只有fn1中的obj会在调用结束后被垃圾回收机制回收,fn2中的obj不会,因为在fn2的调用过程中,返回的变量被变量b引用,所以不会改块内存不会被释放。

1.标记清除:当变量进入环境时,就将这个变量标记为“进入环境”,当变量离开环境时,将它标记为“离开环境”

function test(){
var a = 10 ; // 被标记 ,进入环境
var b = 20 ; // 被标记 ,进入环境
}
test(); // 执行完毕 之后 a、b又被标离开环境,被回收。
2.引用计数:跟踪每个值被引用的次数,引用一次就将次数加1,如果包含这个值的变量又被赋了另外一个值,引用次数就减1,当引用次数为0时,垃圾回收机制就会释放该值所占用的内存。

function test() {
var a = {}; // a指向对象的引用次数为1
var b = a; // a指向对象的引用次数加1,为2
var c = a; // a指向对象的引用次数再加1,为3
var b = {}; // a指向对象的引用次数减1,为2
}