面试题总结

写一个事件监听函数？（相当于封装了一个兼容主流浏览器和IE的util）varEventUtil={//使用dom2||即||dom0根据情况添加事件addHandler:function(element,type,handler){if(element.addEventListener){element.addEventListener(type,handler,false);}elseif(element.attachEvent){element.attachEvent("on"+type,handler);}else{element["on"+type]=handler;}},//根据情况获取DOM或IE中的事件对象和事件目标，默认行为为阻塞事件getEvent:function(event){returnevent?事件：window.event；},getTarget:function(event){返回event.target||事件源元素；},preventDefault:function(event){if(event.preventDefault){event.preventDefault();}else{event.returnValue=false;}}//根据情况使用dom2||即||dom0移除事件的方法removeHandler:function(element,type,handler){if(element.removeHandler){element.removeEventListener(type,handler，错误的）;}elseif(element.detachEvent){element.detachEvent("on"+type,handler);}else{element["on"+type]=null;}}//在IE中取消DOM或Event冒泡stopPropagation:function(event){if(event.stopPropagation){event.stopPropagation();}else{event.cancelBubble=true;}}}varbtn=document.getElementById("myBtn"),handler=function(){alert("Clicked");};EventUtil.addHandler(btn,"click",handler);EventUtil.removeHandler(btn,"click",handler);Howtowritehigh-performancecodehttp://developer.51cto.com/ar...How用js实现千位分隔符函数format(num){varreg=/\d{1,3}(?=(\d{3})+$)/g;返回(num+'').replace(reg,'$&,');}``functionformat(num){num=num+'';//numbertostringvarstr="";//stringAccumulatefor(vari=num.length-1,j=1;i>=0;i--,j++){if(j%3==0&&i!=0){//每三位添加逗号，只过滤第一个数字的情况str+=num[i]+",";//加几千逗号继续；}str+=num[i];//向后累加数}returnstr.split('').reverse().join("");//String=>array=>reverse=>String}找到更好的方法添加letarr=[];functionthree(num){if(num<1){returnnum}arr.unshift(parseInt(num%1000))three(num/1000);}three(1234567)console.log(arr.join(','))写一个方法来查找字符串的字节长度functiongetByte(str){varlen=str.length,bytes=len,i=0;for(;i255)字节++;}returnbytes;}如何在JavaScript中克隆对象functionclone(obj){if(!obj&&typeofobj!=='object'){return;}varcopy=(objinstanceofArray)?[]:{};for(obj中的varo){if(typeofobj[o]==='object'){copy[o]=clone(obj[o]);}else{复制[o]=obj[o];}}回复骨灰盒副本；}varobj={name:'zhangsan',age:33,child:{name:'zhangxiao',age:9,eat:[1,{el:2}]},hobby:undefined,eat:[1,2,3,4]}vara=clone(obj)obj.child.name='lis';控制台日志（一）；运行以下代码的结果functionsay(){varnum=888;varsayAlert=function(){alert(num);}数++；返回sayAlert；}varsayAlert=say();sayAlert();//889刚刚调用say()函数时不会执行sayAlert，因为没有sayAlert()这个调用如何实现Array.prototype.forEach？if(!Array.prototype.forEach){Array.prototype.forEach=function(fn){for(vari=0;ivararr=[1,1,1,4,5,4];变量对象={};for(vararinarr){if(obj[arr[ar]]){obj[arr[ar]]++;}else{obj[arr[ar]]=1;}}console.log(obj);1.//获取出现次数最多的元素varres=[];for(varoinobj){res.push({el:o,val:obj[o]});}res.sort(function(a,b){return-(a.val-b.val);})console.log(res[0])2.让maxone=0;for(varoinobj){if(obj[o]>maxone){maxone=obj[o]}}console.log(maxone)applycallbind/*applycallbindthis是改变这个在千变万化的方式。分享前两个：相当于return，马上执行函数fn.call(obj)，相当于obj原型上的fn()函数，obj可以按照原型链上找到这个指向toobjbind:返回的函数不会立即执行*/vara=1;varobj={a:2,fn:function(){console.log(this.a)}}obj.fn.call(obj)//2varfn2=obj.fn.bind(obj)varfn3=obj.fn.bind()console.log(fn2)//fn(){console.log(this.a)}fn2()//2fn3()//1使用js创建10个标签，点击的时候弹出对应序号letaa=document.getElementById('aa')for(vari=0;i<5;i++){(function(i){letel_a=document.createElement('a');el_a.innerHTML=i+'
'el_a.addEventListener('click',function(e){e.preventDefault()console.log(i)},)aa.appendChild(el_a)})(i)}也有效把for的var改成letclosure//Closure1.可以调用其他函数的内部变量（给变量加个缓存但是注意适当的时候清除缓存）2.匿名执行函数（防止全局变量污染）函数f1(){变量a=1;returnfunction(){console.log(a)}}让a=f1();函数f2(f){变量a=2;f()}f2(a)Applicationatwork中的回调函数/写回调函数：通常是封装axios请求的函数（方便维护）和发起请求的页面分开/letparams={a:1,b:1,callback:function({datas}){console.log('hhhh')console.log(datas)}}apiAxios(params)//封装成一个js函数apiAxios(params){//axios.get('url').then((resp)=>{letdatas=[1,2,3,4]params.callback({datas:datas})//})}网页是如何呈现的？当用户输入url显示页面时会发生什么？1、输入url发送请求2、浏览器获取服务器返回的HTML3。浏览器开始解析HTML生成DOM树和css生成css树。两棵树结合生成一个渲染数4.浏览器根据渲染树绘制页面注：重绘和重排是两个关键词1）重绘：dom节点不改变位置，比如改变背景，不改变不影响周围的节点2）重排：dom节点发生变化，涉及到的周围节点也会发生重排，所以非常消耗性能，比如操作节点，修改样式的宽高，伪类操作，etc.3）js的执行会影响dom树和css树的渲染4）浏览器遇到这个标签不会停止，而是继续，等待图片请求回来再返回torearrange总结：一些动画操作节点尽量使用absolute或者fixed，避免影响周围节点的前端性能优化（除了css，js顺序，reducingrequests，Sprite等）最近看了博客，有e.window.perforance.timing方法下的很多属性获取DNS查询耗时=domainLookupEnd-domainLookupStartTCP链接耗时=connectEnd-connectStartrequest请求耗时=responseEnd-responseStart解析dom树时间=domComplete-domInteractive白屏时间=domloadng-fetchStartdomreadytime=domContentLoadedEventEnd-fetchStartloadtime=loadEventEnd-fetchStart