前端面试基础

HTML和css篇1、说下你常用的几种布局方式1.浮动布局float+margin的方式2.百分比布局宽度百分比自适应3.双飞翼布局(改进版).wrap{ padding: 0 200px; position: relative; } .left{ width:200px; height:400px; background:red; position: absolute; top:0; left:0; } .right{ width:200px; height:400px; background:green; position: absolute; top:0; right:0; } .center{ width: 100%; height:400px; background:pink; }5.Flex布局6.grid网格布局2、实现水平居中的几中方式1.绝对定位(父元素宽度未知) .parent{ position: relative; } .child{ position: absolute; left:50%; } 2.使用text-align(父元素宽度未知) .parent{ text-align: center; } .child{ display: inline-block; width: 100px; height: 100px; background-color: aqua; } 3.使用 margin:0 auto;(固定宽度) 4.使用transform(水平垂直居中) .parent{ width: 300px; height: 200px; ackground: pink; position: relative; } .child{ width: 100px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; }3、animate和translate有没有用过,介绍一下常见的属性animate属性: animation-name:绑定到选择器keyframes名称 animation-duration 规定完成动画的时间,以秒或毫秒记 animation-iteration-count 动画播放的次数 transform属性: translate(x,y) 2d平移 translate3d(x,y,z) 3d转换 scale(x,y) 2d缩放 rotate(deg) 2d旋转 rotate3d(deg) 3d旋转 skew(x-angle,y-angle) x轴和y轴的2d倾斜转换 transition属性(允许css属性在一定的时间内平滑过渡) property:css属性,比如width或者color duration:持续时间 delay:延迟4、CSS实现宽度自适应100%,宽高16:9的比例的矩形<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,html{ margin:0; padding:0; } .b169 { width: 100%; height: 0; padding-bottom: 56.25%; //实现的关键 position: relative; background:red; } .b169>.innerb169 { width: 100%; height: 100%; background-color: gainsboro; position: absolute; } </style> </head> <body> <div class="b169"> <div class="innerb169">your hstml</div> </div> </body> </html>5、如何实现左边两栏一定比例,左栏高度随右栏高度自适应javscript篇1、变量提升2、说一下对闭包的理解,什么场景下会用到闭包闭包: 闭包是在一个函数的主体内定义的另一个函数,一般有两种情况,一是函数作为返回值,二是函数作为参数传递,闭包的重要特性是即使在外部函数返回后,内部函数仍然可以访问外部函数的变量,因为外部函数的执行上下文不会被销毁。所以使用闭包会增加内存开销,在不需要使用的时候要即使清除,避免内存泄漏。 场景: 保护函数内的变量安全:如迭代器,生成器 在内存中维持变量:如缓存数据,柯里化 将函数关联到对象的实例方法 封装相关的功能集3、说一下你对原型和原型链的了解,有几种方式可以实现继承,用原型实现继承有什么缺点,怎么解决?原型和原型链:在javascript中,每个对象都会在内部引用一个叫做prototype的对象,被称之为原型,而这个原型对象也会引用自己的原型对象,并以此类推,这个链式引用被称之为原型链,原型链的末尾是一个以null为原型的对象。而javascript就是通过原型链机制来实现继承的,当一个对象引用了不属于自身的属性时,就会向上查找,遍历原型链,直到找到该属性,如果没有找到,则说明该属性未定义。实现继承的方式://构造父类 function Class(name){ this.name=name || "张三"; this.sleep=function(){ console.log(this.name+"正在睡觉!"); } } //原型方法 Class.prototype.eat=function(food){ console.log(this.name+"正在吃"+food); }(1)原型链继承(使用prototype,将父类的实例作为子类的原型) function Wwp(){ } Wwp.prototype=new Class(); Wwp.prototype.name="wwp"; var wwp=new Wwp(); console.log("1:"+wwp.name); wwp.eat("fish"); wwp.sleep();(2)构造继承 function Wwp(name){ //构造继承 Class.call(this); this.name=name || "李四"; } var wwp=new Wwp(); console.log(wwp.name); //wwp.eat("fish");//不能继承原型属性 wwp.sleep(); (3)实例继承 function Wwp(name){ var clas =new Class(); clas.name=name || "李四"; return clas; } var wwp=new Wwp(); console.log(wwp.name); wwp.eat("fish"); wwp.sleep();(4)组合继承 优点:可以继承原型属性 function Wwp(name){ Class.apply(this); this.name=name || "李四"; } Wwp.prototype=new Class(); Wwp.prototype.constructor=Wwp; //修复构造函数指向 var wwp=new Wwp(); console.log(wwp.name); wwp.eat("fish"); wwp.sleep();(5)拷贝继承 function Wwp(){ var clas=new Class(); for(var p in clas){ Wwp.prototype[p]=clas[p]; } Wwp.prototype.name=name || "李四"; } var wwp=new Wwp(); console.log(wwp.name); wwp.eat("fish"); wwp.sleep();(6)寄生组合继承 function Wwp(name){ //寄生组合继承 Class.call(this); this.name=name || "李四"; } (function(){ var Super =function(){}; Super.prototype=Class.prototype; Wwp.prototype=new Super(); })(); Wwp.prototype.constructor=Wwp; //修复构造函数指向 var wwp=new Wwp(); console.log(Wwp.prototype.constructor); console.log(wwp.name); wwp.eat("fish");//不能继承原型属性 wwp.sleep();原型实现继承的缺点:1.来自原型对象的引用属性是所有实例对象共享的。 2.创建子类实例时,不能向父类构造函数传参。解决:使用 【组合继承】或者 【寄生组合继承】4、iframe的优缺点有那些?5、ajax的原生写法?function getAjax(url){ var _xhr=null; if(window.XMLHttpRequest){ _xhr=new XMLHttpRequest(); }else if(window.ActiveXObject){ _xhr=new ActiveXObject("Msxml2.XMLHTTP"); } _xhr.onread=function(){ if(Request.readyState===4 && Request.status===200){ console.log(_xhr.responseText); } } _xhr.open("get",url,true); _xhr.send(); }6、为什么会有同源策略?为了安全起见,如果没有同源策略,那各个网页的cookie或localStorage都可以用document.cookie被随意获取,用户信息就会被随意泄露。7、前端处理跨域的方式有哪几种方式解决?1.jsonp,只支持GET请求 2.CORS,w3c标准,全称为“跨域资源共享” 服务器端一般需增加: Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: X-PINGOTHER, Content-Type Access-Control-Max-Age: 86400 3.代理,通过服务端发送请求 4.window.postMessage(),可以向其他window对象发送消息,需要注意的得等到所有脚本执行完毕才能发送MessageEvent,否则会让后边的函数超时无法执行。8、怎么判断两个对象是否相等?function isObjValueEqual(a,b){ //返回该对象可枚举和不可枚举的属性的名称,该方法返回的是一个数组 var propa=Object.getOwnPropertyNames(a); var propb=Object.getOwnPropertyNames(b); //先判断长度是否相等,如果不相等,直接返回false if(propa.length!=propb.length){ return false; }else{ //然后遍历每个属性值是否相等, for(var i=0;i<propa.length;i++){ var propName=propa[i]; console.log("propName"+propName) console.log(a[propName],b[propName]) if(a[propName]!==b[propName]){ return false; } } return true; } }9、代码实现一个对象的深拷贝?1.通过JSON实现 var newObj=JSON.parse(JSON.stringify(obj)); //会忽略函数对象和自定义原型属性 2.通过递归实现 function deepClone(obj){ var objArray=Array.isArray(obj)?[]:{}; //定义一个对象,来确定参数是数组还是对象 if(obj && typeof obj === "object"){ //如果对象存在且类型为对象 for(var key in obj){ if(obj.hasOwnProperty(key)){ //如果是原型链上的自定义属性,则不拷贝 //如果obj的子元素是对象,递归操作 if(obj[key] && typeof obj[key] === "object"){ objArray[key]=deepClone(obj[key]); }else{ //如果不是,直接复制 objArray[key]=obj[key]; } } } } return objArray; }10、从发送一个URL地址到返回页面,中间发生了什么?0.输入URL 1.解析URL 2.构造并发送http请求 3.http报文传输过程 4.服务器接收并处理http报文 5.服务器构造并发送响应报文 6.浏览器接收报文,并开始构造页面 7.浏览器发送静态资源请求 8.浏览器发送Ajax请求 9.页面构建完成11、说下工作中你做过的一些性能优化处理的例子?ES6篇箭头函数中的this指向谁?因为箭头函数实际上根本没有自己的this,所以导致内部的this实际上就是外层代码块的this,也就是父对象环境中的this。如何实现一个promise,promise的原理,以及它的两个参数是什么?var promise=new Promise(function(resolve,reject){ if("异步执行成功"){ resolve(value); }else{ reject(error); } }) 参数: resolve:将promise对象的状态从“未完成”变为“成功”,在异步操作成功时调用,并将异步操作的结果,作为参数传递出去 reject:将promise对象的状态从“未完成”变为“失败”,在异步操作失败时调用,并将异步操作的error,作为参数传递出去promise中第二个参数的reject中执行的方法和promise.catch()都是失败执行的,分别这么写有什么区别,什么情况下会两个都同时用到?map和set有没有用到,如何实现一个数组去重,map数据结构有什么优点?数组去重: Set是一个类似于数组的数据结构,但是成员的值是唯一的,没有重复的值 new Set([1,2,3,2,4,5,4,3]) Map数据结构的优点: 传统对象Object本质上是键值对的集合,但是只能用字符串当作键,而Map这种是数据结构类似于对象,也是键值对的集合,但是“键”的范围不局限于字符串,各种类型的值都可以作为键计算机网络篇http、https、以及websocket的区别http常见的状态码,400,401,403状态码分别代表什么?301:请求的网页已经永久移动到新的位置 302:临时移动,请求者应继续使用原有位置进行以后的请求 400:访问的页面域名不存在或者请求错误 401:请求要求身份验证 403:服务器拒绝请求 500:服务器内部错误协商缓存和强缓存的区别协商缓存: 强缓存:说下计算机的相关协议?

相关内容推荐