前端面试题

Q:CSS 盒子模型，绝对定位和相对定位
A1:
    1:css盒子模型分为IE盒子模型和W3C盒子模型;
    2:IE盒子模型 width=border+padding+margin+content; W3C标准模型 width=content(各大浏览器适用);
    3:IE盒子模型和标准盒子模型之间的转换 box-sizing：border-box（IE盒子模型） content-box(标准盒子模型);
    4:box-sizing:inherit|border-box|content-box
A2:
    1:absoulte(绝对定位)--相对于父元素进行定位|relative(相对定位)--相对于浏览器进行定位;
    2:position:static|absoult|reative|fixed|inherit;

<----------------------------------------------------------------------------------------------->

Q:清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
A1:
    1:clear:both|left(使)|right; overflow:hidden|auto;
    2:当子元素设置了浮动属性父元素没有设置高度的时候导致的父元素的高度坍塌（高度完全由子元素撑起）;
<!--   .a{
            background: #eeeeee;   
            overflow：hidden|auto;
        }
        .b{
            float: left;
            background: #333;
            width: 100px;
            height: 100px;
        }
        .c{
            float: left;
            width: 100px;
            height: 100px;
            background: green
        }
        .d{
            float: left;
            height: 100px;
            width: 100px;
            background: saddlebrown
        }
        .e{
             clear: both; (方法一)
        }-->
<div class="a"> 
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
</div>
3:clear:both|left(使)|right; overflow:hidden|auto;
Q:如何保持浮层水平垂直居中
A:
1:
<!-- .a{
    position:absoult;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    }
    .a{
    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    background: #eeeeee;
    left: 50%;
    }
 -->
<div class="a"></div>

<---------------------------------------------------------------------->

Q: position 和 display 的取值和各自的意思和用法
A:
1:position:absoult(相对于父元素进行定位)|relative(相对于浏览器定位)|static(无定位)|fixed(固定定位)|inherit;
2:display:none(隐藏元素)|block|inline-block(让行内元素变成行内块级元素)|inherit  (常用);

<---------------------------------------------------------------------->

Q:样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块怎么写，说出思路，有无实践经验
A1:
1: example:
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
2:!important > id > class > :after , :before;
3:选择器会后面的样式覆盖前面的;
4:抽离模块

<---------------------------------------------------------------------->

Q:  px和em和rem的区别，CSS中link 和@import的区别是? 
 A1:
  1:px用于电脑的定义多一点 rem 用于移动端的多一点(适合做兼容式布局);
  2:rem相对于html元素(根元素)的font-size进行计算;（相对尺寸）
  3:px绝对尺寸设置多少就是多少
  4：em相对于父元素的font-size进行计算（相对尺寸）eg：1em=16px
A2:
  1:link是和dom渲染同时加载 link属于html元素 link可以定义rel等规范;
  2:@import是等到dom渲染完成之后才开始加载;

<---------------------------------------------------------------------->

Q:JavaScript 里有哪些数据类型，解释清楚 null 和 undefined，解释清楚原始数据类型和引用数据类型。比如讲一下 1 和 Number(1)的区别
A1:
    1:基础类型：null,undefined,boolean,string,number;
    2:引用数据类型：object,Array....;
A2:
    1:typeOf null -> object, typeOf undefined -> undefined ;
    2:null代表空指针;
A3:
    1:基础数据类型是存放在内存当中的栈当中的;
    2:用数据类型是存放在堆当中的;
A4:
    1: 1属于原始对象 number(1)属于包装对象

<---------------------------------------------------------------------->

Q:prototype 是什么东西，原型链的理解，什么时候用 prototype
A1：
    1:在每一个FUNTION中都有一个prototype属性,prototype代表该方法的原型;
    2:当使用 let Params=new functionName() 的时候会发生以下事情
        (1):创建出一个新的对象
        (2)执行functionName()里边的方法;
        (3)将params的this指向构造函数(functionName);
        (4)最后将创建出的对象中的__proto__==functionName.prototype;
    3:当需要创建对象的时候子类需要用到父类的方法 而且父类的原始方法不受到干扰;

<---------------------------------------------------------------------->

Q:函数里的this什么含义，什么情况下，怎么用
A1:
    1:this是一个关键字 当创建一个对象或者方法的时候就会产生一个this关键字;
    2:this总是指向调用时候的对象;(如果被多个对象调用的话就指向上一层对象)
    3:箭头函数的this指向上下文
A2:
    1:函数的调用
    2:构造方法时的调用
    3：作为方法的时候调用
    4:apply|call|bind的调用
A3:
    A2_1:作为函数的调用
        function demo(){
            this.a='this is a demo';
            console.log(this.a)
        }
        demo() //this is a demo //this指向window;
    A2_2:构造方法时调用
        function demo(){
            this.a='this is a demo';
        }
        let seconde_demo=new demo();
        console.log(seconde_demo.a) //this is a demo //this指向当前的demo构造函数
    A2_3:作为方法的时候调用
        function demo(){
    　　　　alert(this.x);
    　　}
    　　var o = {};
    　　o.x = 1;
    　　o.m = demo();
    　　o.m(); // 1 //this指向demo方法
    A2_3:apply调用
        function demo(){
    　　　　alert(this.x);
    　　}
    　　var o = {};
    　　o.x = 1;
    　　o.m = demo();
    　　o.m.apply();  //this指向window方法  --> undefined;

<----------------------------------------------------------------------------->

Q:apply和 call 什么含义，什么区别?什么时候用
A1:
    1:apply 和 call 都可以改变函数的this的指向;
A2:
    1:参数的区别apply(fn,argument[...arr])接受数组 call(fn,argument[0],argument[1]...)接受单个参数
A3:
    1:emmmmm

<----------------------------------------------------------------------------->

Q: 数组和对象有哪些原生方法，列举一下，分别是什么含义，比如连接两个数组用哪个方法，删除数组的指定项和重新组装数组(操作数据的重点)
A1:
    1:Array.pop() //删除数组尾部的一个元素并返回 example: [1,2,3].pop() // [1,2] --> 3
    2:Array.push(elment) // 往数组最后添加一个元素 example: [1,2,3].push(1) -->[1,2,3,1]
    3:Array.concat(arr) //数组合并 example: [1,2,3].concat([1,2,3]) --> [1,2,3,1,2,3]
    4:Array.indexOf(seachElment) //检索数组的位置 example:[1,2,3].indexOf(1) -->0 当没有检索到return -1
    5:Array.slice(begin,end) //返回begin end 之间的数组 example: [1,2,3,4,5].slice(0,2) --> 1,2
    6:Array.splice(index,howMany) //index(0开始) 从第几个开始删除 howMany删除几个 example:[1,2,3,4].splice(1,2) -->[1,4]
    7:Array.forEach((value,index)=>{}) //value数组的元素 index索引 
    8:Array.map((value)=>{}) //直接对数组的每个元素进行操作  [2, 3, 4, 5, 35].map(value=>{return
    value * 2}) -->[4,6,8,10,70]
    9:Array.filter(value=>{}) //对数组的元素筛选满足条件的返回 [2,3,4,5,35].filter((value)=>{return value>5}) -->[35]
    10:Array.every(value=>{}) //当数组全部满足条件返回true [2,3,4,5,35].every((value)=>{return value>5}) ->false
    11:Array.some(value=>{}) //当数组部分满足条件返回true [2,3,4,5,35].some((value)=>{return value>5}) ->true
    12:Array.reduce((currentVal,cur)=>{}) // [1, 2, 3, 4, 5].reduce(function(prev, cur, index, arr) {
     console.log(prev, cur, index);  
     return prev + cur;
})//当prev未设置初始值的时候数组第一个为默认值然后和cur累加
    [1,2,3,4,5,6,7,8,9].reduce((prev,cur)=>{
        return prev+cur //45
    })
<----------------------------------------------------------------------------->

Q:闭包的理解
A1
    1: 闭包就是一个父函数里边有一个子函数,并且其子函数可以使用父函数作用域当中的变量;
    2:function demo(){
        var a='this is a demo';
        function second_demo(){
           console.log(a) //该函数的变量会随着作用域一层一层
           向上查找; 
        }
        return second_demo //关键
    }
  var save=demo() //将作用域链保存下来
  save() //this is a demo
 
<----------------------------------------------------------------------------->

 Q:ajax 跨域有哪些方法，jsonp 的原理是什么?
 A1
    1:产生跨域的原因
        (1):js当中有一个安全限制叫做同源策略 当端口,域名，协议不一样时会产生跨域问题
A2:
    1:nginx代理
    2:jsonp传值
    3:cros资源共享策略需要后端设置允许跨域
A3:
    1:动态生成一个script标签并且设置其src属性并且设置一个回调函数(和后端商议好要统一callback)
    2:然后前端再通过协议的callback写一个函数并且收到了后端返回的callback里的result

<----------------------------------------------------------------------------->

Q:web攻击有哪些
A1:
    1:SQL注入攻击
    2:(XSS 和 CSRF)攻击

<----------------------------------------------------------------------------->

Q:从敲入 URL 到渲染完成的整个过程，包括 DOM 构建的过程，说的约详细越好。
A1:
    1:用户输入url地址如果有历史记录浏览器自动补全
    2:查询的时候访问DNS缓存如果没有就去服务器取IP
    3:取到之后将IP缓存起来
    4:发起TCP连接三次握手
        (1):客户端向服务端发送SYN包
        (2):此时服务端处于监听状态,当接收到SYN包之后，然后对SYN包进行确认发送客户端
        (3):客户端接收到服务端发送过来的state,并且返回回答和一个SYN包
        (4):此时服务端接收到客户端的SYN包和ACK确认码,并且返回接收到SYN包的state（已经建立连接状态）
        (5):客户端收到服务端的state最后一次向服务端确认连接state
        (6):服务端收到state TCP建立成功
    四次挥手：
        (1)主动方向被动方发送FIN包
        (2)被动方接收之后返回ACK确认码
        (3)主动方收到之后返回确认关闭连接ACK
        (4)关闭连接
    5:服务端收到来自客户端的http请求
    6:客户端收到服务端返回的http状态码 
        (1):1xx请求已经接受
        (2):2xx请求完成 200请求成功
        (3)3xx请求被重定向
        (4)4xx客户端错误 404页面不存在 403服务端收到请求但是没有此服务
        (5)5xx服务端错误 500服务器关闭或者啥的
    7:客户端根据服务器响应的结果并进行处理
        (1)解析HTML构建dom树
        (2)解析css生成css规则树
        (3)合并dom树和css规则树生成render树
        (4)布局 render 树
        (5)绘制render树

<----------------------------------------------------------------------------->

Q:Http协议中Post和Get方法的区别
A1:
    1:post相对于GET请求相对安全
    2:post参数不可见(不会展示在URL当中),GET参数可见
    3:post请求不能缓存,GET可被缓存
    4:post参数长度无限制 GET参数长度限制在2048在URL当中

<----------------------------------------------------------------------------->

Q:说一下vue实例的生命周期
A1:vue 2.0
    (1)beforeCreate(el和data未被创建)
    (2)Created(el不可见初始化data)
    (3)beforeMount(render函数被调用el,data完成初始化,准备渲染)
    (4)Mount(渲染完成)
    (4)beforeUpdata
    (5)Updatad(DOM已经更新完)
    (6)beforeDestrioy (实例销毁之前调用，实例仍然完全可用)一般用来事件监听)
    (7)destroyed

<----------------------------------------------------------------------------->

Q:防抖函数和节流函数
A1
    (1)防抖函数指的是在一定的时间内无论你怎么触发函数只会执行一次
    (2)节流函数指的是在一定的时间才会执行此函数但是当你时间没到再次触发就重新计算时间

<----------------------------------------------------------------------------->

Q:说一说Js事件循环
A1 ES5
    (1)js属于单线程语言
    (2)当js遇到异步任务会把任务委托给宿主(消息队列)
        example:
            console.log('1')
            setInterval(()=>{
                console.log('2')   //委托宿主             
            },300)
            console.log('3')
            --> 1 3 2
    (3)js引擎会维护一个叫做执行栈的东西(栈里边放着js的基础数据类型 堆里边放着js的引用类型的值)
    (4)js引擎会优先执行完栈里边的任务
    (5)当js引擎空闲时(同步任务执行完毕),开始从消息队列取出任务 这个机制称为事件循环
A2 ES6
    (1)es6衍生出promise对象然后就产生了一个新的概念宏任务 微任务(异步任务)
    (2)事件循环就变成了  同步任务 --> 微任务 --> 宏任务

<----------------------------------------------------------------------------->

Q:vue的数据绑定是怎么实现的
A1
    (1):数据劫持和订阅发布
    (2)Object.defineProperty()来劫持各个属性的setter,getter
    (3)数据变动时发布给订阅者

<----------------------------------------------------------------------------->

Q:js对象的深拷贝浅拷贝
A1
    (1)深拷贝原始对象类型不受之前的影响 
    (2)浅拷贝原始对象类型互相影响 
    (3) var obj={
        name:'demo',
        age:'12'
    };
    var obj1=obj;
    obj.name='demo_second'
    console.log(obj1) //{name:'demo_second',age:'12'}   //浅拷贝
    (见图1.png)

    var x = 1;
    var y = x;
    x.name = 'hanna';
    console.log(y); //1    //深拷贝
    console.log(x.name); //undefined
<----------------------------------------------------------------------------->

Q:图像懒加载的原理是什么
A1
    1:获取到图片地址之后添加到自定义属性 example: data-imgSrc='imgSrc';
    2:监听页面滚动事件,当img的出现在视窗范围之内动态将data属性赋值给 src值

<----------------------------------------------------------------------------->

Q:解释一下MVVM
A1
    1:M表示model负责逻辑的处理
    2:v表示view负责UI的渲染
    3:vm表示viewModel负责驱动逻辑的处理和渲染(监听Model中数据的改变并且控制视图的更新，处理用户交互操作)

<----------------------------------------------------------------------------->

Q:请描述事件冒泡机制 
A1
    1:事件发生在目标元素上面当你给他添加事件的时候冒泡机制会一层一层的往上触发事件直到根元素 停止冒泡的方法 e.stopPropagation()

<----------------------------------------------------------------------------->

Q:JavaScript 宿主对象 (host objects) 和原生对象 (native objects)
A1
    1:宿主对象指的是DOM和BOM
    2:原生对象指的是Object Array Number 等

<----------------------------------------------------------------------------->

Q:Vue 有哪些指令
A1
    1: v-if v-for v-bind v-show v-text v-html

<----------------------------------------------------------------------------->

Q:v-if 和 v-show 有什么区别
A1
    1:v-show控制这个元素是否显示
    2:v-if控制元素是否存在dom节点上

<----------------------------------------------------------------------------->

Q:DOCTYPE作用?
A1
    1:doctype声明在最前头用于告知浏览器用什么模式来渲染文档

<----------------------------------------------------------------------------->

Q:事件代理和普通事件有什么区别
A1:
    1:事件代理可以给同个对象设置多个事件但是普通事件不行
    1:事件代理可以设置事件流是以捕获流执行还是冒泡流执行

<----------------------------------------------------------------------------->

Q:前端页面有哪三层构成，分别是什么？作用是什么
A1
    1:结构层负责处理HTML || XHTML 
    2:样式层负责处理 css 
    3:行为层负责处理用户交互功能

<----------------------------------------------------------------------------->

Q:变量提升
A1
    1:当js编译器开始执行的时候会把所有变量提升到该作用域的最顶端(仅仅是把声明提升,定义的值还在原来的位置)
    function demo(){                            
        console.log(a);//und    
        var a=1
    }
    function demo(){
        var a
        console.log(a);//und
        a=1
    }

<----------------------------------------------------------------------------->

Q:script标签中的async和defer
A1
    1:async:不会按照script标签的顺序执行而是谁先加载完谁就执行
    3:defer:按照script标签的顺序执行

<----------------------------------------------------------------------------->

Q:js上下文执行栈和作用域链
A:
   1:js执行上下文分为全局执行上下文 和 函数执行上下文（执行上下文的声明周期创建-->执行-->销毁）
   2:js创建执行上下文的时候首先是初始化对象，函数的参数，以及提升函数声明和变量 然后创建作用域链 最后确定this的值
   3:js执行栈执行的时候采用的是先进后出原则 全局变量进入环境之后被压入栈底然后遇到函数的进栈-->执行-->等待垃圾回收
   4:作用域链在创建上文执行的时候就生成了 作用域分为全局作用域 局部作用域 块级作用域
   5:作用域链就是当局部作用域找不到的时候就会一级一级往上查找，找到全局作用域的变量 如果还没找到的话就报错
   var a=1
   function demo(){    
    console.log(a)//首先会在demo中的局部作用域中寻找 a变量如过没找到就向上查找
   }

<----------------------------------------------------------------------------->

Q:display none visibility hidden opacity 0区别
A1
    1:display none不存在文档流当中 visibility hidden opacity 0存在文档流当中
    2:display none,opacity 0受父元素的影响 visibility hidden 不受父元素的影响(不会影响页面回流)

<----------------------------------------------------------------------------->

Q:谈谈垃圾回收机制方式
A1
    1:标记清除:当变量进入环境(入栈)标志进入环境当变量离开环境标志离开环境(出栈)等待垃圾回收
    2:计数清除:被引用一次则加1，当这个引用计数为0时,等待垃圾回收

<----------------------------------------------------------------------------->

Q:什么叫优雅降级和渐进增强？
A1
    1:优雅降级  针对低版本进行构造页面做出基本功能 然后再对高版本浏览器兼容 优化交互
    2:渐进增强  一开始构建完整页面功能 然后再对低版本浏览器进行兼容

<----------------------------------------------------------------------------->

Q:sessionStorage 、localStorage 和 cookie 之间的区别
A1
    1:sessionStorage ,localStorage 称为webstorage
    2:cookie会向服务端发送过去对带宽造成一定的浪费 ,webstorage会保存在本地
    3:cookie最大只能4k,webstorage可以5m左右
    4:cookie一旦设置了时间到时间会自动销毁 sessionStorage关闭当前会话销毁  localStorage不会被销毁除非手动销毁

<----------------------------------------------------------------------------->

Q:js内存机制
A1
    1:js内存空间分为 栈 和 堆
    2:js两大类型分为基础类型和引用类型 基础类型存放在栈(遵循后进先出规则)当中 引用对象的值存放在堆当中
    3:当我们获取对象的值的时候 首先会从栈当中获取对象的地址指针然后再根据指针从堆中取值
            var a=1 //储存在栈当中
            var b={c:2} //{c:2}储存在堆当中 b储存在栈当中
    
<----------------------------------------------------------------------------->

Q:判断数据类型的方法
A1
    1:instanceof 判断 A的原型链当中是否有B对象 A instanceof B如果有 true  (只能判断是否存在不能看到属于那种类型)
    2:typeOf 返回改对象的类型 (typeOf判断null为object)
    3:toString object.prototype.toString.call()
    4:constructor  object.constructor==Function //true

<----------------------------------------------------------------------------->

Q:什么是BFC
A1
    1:BFC是块级格式上下文(每个元素的布局都是互不影响的)
    2:形成BFC要素 具有overflow ,position float 
    3:根元素或其它包含它的元素

<----------------------------------------------------------------------------->

Q:js隐式转换
A1
    1:当遇到+逻辑运算符的时候如果有一边为字符串的话就把另一边转换为字符串toString
    2:当遇到- * / 等等如果有一边为number的话把另一边转换为数字 Number;
    3:当遇到！转换为Boolean
    4:当遇到复杂数据类型时先调用valueOf()然后toString然后再转换为Number比较