前端面试知识总结1

时间 2019-11-11

原文原文链接

这是我根据某个老师的视频整理出来的，这里是连接，技术是针对前端开发，可是还有别的技巧，因此，不分岗位，均可以看一看

这篇是这一系列的第一篇，也就是一面，为了防止篇幅太长致使混乱，我分开整理的

一面

面试技巧页面布局类 CSS盒子模型类 DOM事件 HTTP协议类面向对象类原型链类通讯类安全类算法类css

面试技巧
1）准备要充分，基础知识要扎实
2）知识要系统，前端知识点太碎，要有总体的把握
3）沟通要简介，一面考基础，不要拖泥带水，一语中的
4）心里要诚实，会就是会，不会就是不会，不要说什么，我看过，可是我忘了，这样子的话很让面试官反感
5）态度要谦虚，一面是基础面，不须要太深刻，点到为止，不要一直和面试官深刻讲，让他以为你高傲，目中无人
6）回答要灵活，不要把我说的太死，不要说 “就是这样子” 这类的话。这个尤为要注意，有的人是口头就习惯了这么说，好比，回答某个问题，多用“能够是，能够用”这样的修辞，不要说 “就是” 这样子的修饰语html

页面布局类
题目1：假设高度已知，写出三栏布局，其中左栏，右栏宽度各为300px，中间宽度自适应，这里至少要写出5中布局方案前端

1）浮动　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .box div{
            height: 100px;
        }
        .left{
            background: red;
            float: left;
            width: 200px;
        }
        .right{
            background: blue;
            float: right;
            width: 200px;
        }
        .middle{
            background: yellow
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">1</div>
        <div class="right">2</div>
        <div class="middle">3</div>
    </div>
</body>
</html>

View Code

　　2）绝对定位面试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        padding: 0px;
        margin:0px;
    }
    .box div{
        position: absolute;
        height: 100px;
    }
    .left{
        left: 0px;
        width: 300px;
        background: red;
    }
    .middle{
        left: 300px;
        right: 300px;
        background: yellow
    }
    .right{
        right: 0px;
        width: 300px;
        background: blue
    }
</style>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

View Code

　　3）flex布局ajax

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        padding: 0px;
        margin:0px;
    }
    .box{
        height: 100px;
        display: flex;
    }
    .left{
        flex:0 0 300px;
        background: red;
    }
    .middle{
        background: yellow;
        flex: 1 1 auto
    }
    .right{
        flex:0 0 300px;
        background: blue
    }
</style>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

View Code

　4）table-cell布局算法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        padding: 0px;
        margin:0px;
    }
    .box{
        height: 100px;
        display: table;
        width: 100%
    }
    .box div{
        display: table-cell;
    }
    .left{
        background: red;
        width: 300px;
    }
    .middle{
        background: yellow;
    }
    .right{
        background: blue;
        width: 300px;
    }
</style>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

View Code

　 5）grid布局后端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        padding: 0px;
        margin:0px;
    }
    .box{
        display: grid;
        width: 100%;
        grid-template-rows:100px;
        grid-template-columns:300px auto 300px;
    }
    .left{
        background: red;
    }
    .middle{
        background: yellow;
    }
    .right{
        background: blue;
    }
</style>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

</html>

View Code

题目2：这5种方法的特色是什么，各有什么优势缺点跨域

　　　 1）浮动布局：缺点是浮动的破坏性和包裹性，会涉及到清除浮动的知识点，优势是兼容性好
浏览器

　　　 2）绝对定位：绝对定位的破坏性，脱离文档流，优势是方便快捷缓存

　　　 3）flex布局：解决以上两种布局的不足，在移动端很流行，可是兼容性出现了问题，不支持ie8

　　　 4） table布局：单元格约束性太强，麻烦，可是能够解决flex布局不能兼容ie8的问题

　　　 5）grid布局：写出来是为了体现你关注热点技术，让面试官看到你的技术追求

题目3：若是高度未知，假如中间的内容不少，撑开了，但愿左侧和右侧的高度也随之撑开。以上5种布局，还有哪些能够实现，哪些已经做废

　　　浮动布局，绝对定位，都会出现问题，浮动布局会出现一个文字环绕效果，绝对定位会撑开中间元素，

flex布局和表格布局，还有网格布局，左右两边的宽度会增长，仍是能够实现

　　　延伸：怎么样去除浮动布局的文字环绕效果，让内容不影响左右布局，建立BFC等知识点，点击这里

页面布局类总结：语义化掌握到位页面布局理解深入 CSS基础知识扎实思惟灵活积极向上代码书写规范，这些很重要，现场写代码，面试官是很注重代码的规范的

思考题：页面布局的变通

三栏布局：上下宽度固定，中间自适应（适合移动端）

两栏布局：左宽度固定，右边自适应

两栏布局：右宽度固定，左边自适应

两栏布局：上宽度固定，下边自适应

两栏布局：下宽度固定，上边自适应

以上5种扩展延伸题，为了让这篇文章篇幅清晰，点击这里

CSS盒模型类

题目1：谈谈你对CSS盒子模型的认识

基本概念：标准模型+IE模型

题目2：标准模型和IE模型的区别

　　　　这个我在之前的博客总结过的，点击这里查看

题目3：CSS是如何设置这两种模型的

　　　　box-sizing:content-box 标准模型

　　　　box-sizing:border-box IE模型

题目4：JS如何设置和获取盒模型对应的宽高

　　　 dom.style.width/height 只能取到内联的样式

            dom.Currentstyle.width/height只有IE支持
            window.getComputedStyle(dom).width/height
            dom.getBoundingClientRect().width/height

题目5：根据盒模型解释边距重叠

题目6：BFC的基本概念，工做原理，如何建立，以及使用场景

题目5，6，设计到了BFC的知识，我在别的博客整理过的，点击这里

DOM事件类

题目1：DOM事件的级别

　　　　DOM0 elem.onclick=function(){}
　　　　DOM2 elem.addEventListener(‘click’,function(){},true)
　　　　DOM3 elem.addEventListener(‘keyup’,function(){},true)

题目2：DOM事件模型

　　　　捕获和冒泡

题目3：DOM事件流

　　　　捕获--目标阶段--冒泡

题目4：描述DOM事件捕获的具体流程

　　　捕获过程 window —document—-html—body—普通元素

延伸：怎么获取当前的html节点 documnet.documentElement

冒泡过程：普通元素--body--html--document--window

题目5：Event事件的常见应用　

　event.preventDefault() 
　　　　event.stopPropagation() 
　　　　event.stopImmediatePropagation() 
　　　　event.currentTarget 
　　　　event.target

题目6：自定义事件

var eve=new Event(‘custom); 
ev.addEventListener(‘custom’,function(){ 
    console.log(‘custom’); 
}) 
ev.dispatchEvent(eve)

HTTP协议类

题目1：HTTP协议的主要特色

　　　　简单快速：每一个资源的url是固定的，访问方便

　　　　灵活：http协议的的头部能够设置数据类型，完成不一样数据类型的传输

　　　　无链接：链接一次就会断掉

　　　　无状态：客户端和服务端是两种身份

题目2：HTTP报文的组成方法

　　　　请求报文：请求行，请求头，空行，请求体

　　　　响应报完：状态行，响应头，空行，相应体

题目3：HTTP方法

　　　　GET：获取资源
　　　　POST：传输资源
　　　　PUT：更新资源
　　　　DELETE：删除资源
　　　　HEAD：得到报文首部

题目4：POST和GET的区别

　　　　1）GET在浏览器回退的时候时候是无害的，而POST会再次的提交请求
　　　　2）GET产生的URL地址能够被收藏，而POST不会
　　　　3）GET请求会被浏览器主动的缓存，而POST不会，除非手动的设置
　　　　4）GET请求只能进行url编码，而POST请求支持多种编码方式
　　　　5）GET请求的参数会被完整的保留在浏览器的历史记录里面，而POST请求的参数不会被保留
　　　　6）GET请求在url中传输的参数是有长度的限制的，可是POST没有
　　　　7）对参数的数据类型，GET只能接受ASCII字符，可是POST没有限制
　　　　8）GET比POST更不安全，由于参数暴露在URL上面，不能用来传递敏感的信息
　　　　9）GET的参数经过URL传递，而POST的参数放在Request body当中

题目5：HTTP状态码

　　　　1xx ：指示信息，表示请求已经接受，继续处理
　　　　2xx：成功，请求已经被成功的接受
　　　　3xx：重定向，须要完成请求必须更进一步的操做
　　　　4xx：客服端的错误，请求的语法有错误，或者请求没法实现
　　　　5XX：服务器错误，服务器未能实现合法的请求

　　　　200：客户端请求成功
　　　　206：客户端发送了一个带有Range头的GET请求，服务器完成了他
　　　　301：所请求的页面已经转移到了新的页面
　　　　302：所请求的页面已经临时的转移到了一个新的url
　　　　304：客户端有缓冲的文档，并发出了一个条件下的请求，服务器告诉客户，原来缓冲的文档还能够继续使用
　　　　400：客户端语法错醋
　　　　401：请求未经受权
　　　　403：请求页面的访问被禁用
　　　　404：请求的资源不存在
　　　　500：服务器发生不可预期的错误，原来的缓冲文档还能够继续的使用
　　　　503：请求未完成，服务器临时过载或当机，一段时间后可能恢复正常

题目6：什么事持久链接
题目7：什么是管线化

原型链类

题目1：建立对象的几种方法

第一种

var obj1={
    name:'lili'
}

var obj2 = new Object({
name:'lucy'
})

这里，我把这两种方法都总结在了一块儿，由于对象实际上，都是经过Object这个构造函数生成的，上面的方法只是一种简写，语法糖而已

第二种

function Obj(){
    this.name='jack'
}
var obj3=new Obj()

这个就是经过构造函数的方式，生成一个对象，也是很简单的

第三种

var obj4={
    name:'fack'
}
var obj5=Object.create(obj4)
console.log(obj5.name)    //fack
console.log(obj5.hasOwnProperty(name))  //false

这也是建立对象的一种方式，这个Object.create方法，不知道的能够去这里看看

就是说，obj5对象的原型，直接指向了obj4，因此obj5拥有name属性，可是这个是原型链上的属性，不是本身的属性

题目2：原型，构造函数，实例，原型链

　　　每个对象，都拥有一个属性，叫作 _proto_，该属性的值是一个对象

　　　每个函数，都有一个属性（由于函数也是对象，因此函数也是能够拥有属性的），叫作 prototype，这个属性的值，仍是一个对象

　　　何时，对象的_proto_属性和函数的prototype属性会关联起来呢？

　　　咱们前面说过，对象都是经过函数来建立的，咱们把建立这个对象的函数，称为这个对象的构造函数，把找个对象，叫作构造函数的实例

　　　因此，对象的_proto_属性，和该对象的构造函数的prototype属性，指向的是同一个堆地址！

若是某一个属性，该对象没有，那么就会沿着_proto_属性向上查找，找到构造函数的prototype，看这个对象里面有没有咱们须要的属性

题目3：instanceof的原理

　　　 instanceof是用来判断，实例对象的_proto_属性，和函数的prototype属性，指向的是不是同一个内存位置，是就返回true，不然返回false

　　　这里须要注意，instanceof和constructor熟悉，这两个的区别蛮大的　　　

function M(){
   this.age=21
}
var obj=new M()
console.log(obj instanceof M)    //true
console.log(M.prototype instanceof Object)  //true
console.log(obj instanceof Object)   //true

obj的_proto_属性，和M的prototype属性，指向同一个地址，因此 obj instanceof M 为true

M.prototype是一个对象，而找个对象是经过构造函数Object产生的，因此，M.prototype instanceof Object 也是为 true

再看第三行，你就会发现，只要是沿着这一条原型链，都会返回true

这两个题目，推荐你们去看王老师的博客，一清二楚，点击这里
题目4：new运算符的工做原理

　　　　建立一个新的对象，这个对象的_proto_属性，指向函数的prototype属性

　　　　执行构造函数，将函数的执行上下文变为这个新建立的对象，而后返回这个对象

function newObj(fn){
     var obj=Object.create(fn.prototype)
     fn.apply(obj)
     return obj
}
function M(){
    this.age=21
}
var obj=newObj(M)
console.log(obj)

这个是模拟的构造函数的写法，从这个代码能够看出来new运算符的工做原理

面向对象类

题目1：类的声明

funciton Animal(){
　　this.name='name'
}

也许这个说法不是很严谨，在js当中，构造函数充当了类的做用

class Animal2{
　　constructor(){
　　　　this.name=name
　　}
}

这是ES6当中的新写法，你能写出来，面试官也会喜欢的，体现你的技术追求嘛

题目2：生成实例

var a = new Animal()
var b = new Anima2()

生成实例的方法是同样的，都是构造函数调用，很简单

题目3：如何实现继承

题目4：以上继承的几种方式的特色，有什么优缺点

这两个题目是重点，方法有不少种，咱们一块儿讲述，每讲述一种方法，就说出他的特色

1）原型链实现继承

function Parent1(){
    this.age=21
}
function Child1(){
   this.name='lili'
}
Child1.prototype=new Parent1()
var chi=new Child1()
console.log(chi)

直接看这个截图，因为咱们 Child1.prototype=new Parent1()，因此，将chi的原型指向了parent1，是实现了继承

这个方法存在问题吗？

　　function Parent1() {
        this.frid = [1,2]
    }

    function Child1() {
        this.name = 'lili'
    }
    Child1.prototype = new Parent1()
    var chi = new Child1()
    var chi2 = new Child1()
    chi.frid.push(3)
    console.log(chi2.frid)   //[1,2,3]

看到问题了吧，因为这两个实例对象的原型是同一个引用，当操做一个的时候，另外一个也是会发生变化的

咱们能够测试的看看

 console.log(chi.__proto__===chi2.__proto__)  //true

这两个对象的原型，是严格相等的。

2）构造函数实现继承

 function Parent1(){
     this.age=21
 }
 function Child1(){
    Parent1.apply(this)
    this.name='lili'
 }
 var chi=new Child1()
 console.log(chi)

 Parent1.apply(this)

这行代码的做用很大，在Child函数里面，执行了Parent函数，并且，将这个Parent函数的上下文，绑定到了this，在这里，这个this表示的是实例对象chi

为何不这么写？

Parent1.apply(Child1)

　　function Parent1(){
        this.age=21
    }

    function Child1(){
        Parent1.apply(Child1)
        this.name='lili'
    }
    var chi=new Child1()
    console.log(chi.age)  //undefined

这至关于，把age这个属性，添加到了Child1上面，可是并不会被Child1的实例对象所拥有

仍是回到最开始的正确状态的构造函数实现继承，这种方法的问题是什么？

　　function Parent1(){
        this.age=21
    }
    function Child1(){
        Parent1.apply(this)
        this.name='lili'
    }
    Parent1.prototype.sex = function() {}     var chi=new Child1()
    console.log(chi.sex)   //undefined

能够看到，这个chi实例对象，只能继承 Parent对象的属性，不能继承这个对象原型链上的属性，只能实现部分的继承

3）组合的方式

　　function Parent1() {
        this.frid = [1,2]
    }

    function Child1() {
        Parent1.apply(this)
        this.name = 'lili'
    }
    Child1.prototype = new Parent1()
    var chi = new Child1()
    var chi2 = new Child1()
    chi.frid.push(3)
    console.log(chi.frid)   //[1,2,3]
    console.log(chi2.frid)   //[1,2]
    console.log(chi.__proto__===chi2.__proto__)   //true

这个写法非常神奇啊，两个的原型指向的是同一个对象

这个Parent函数但是执行了两次的啊，发现没有

4）组合继承的优化方式

　　function Parent1() {
        this.frid = [1,2]
    }

    function Child1() {
        Parent1.apply(this)
        this.name = 'lili'
    }
    Child1.prototype = Parent1.prototype     var chi = new Child1()
    var chi2 = new Child1()
    chi.frid.push(3)
    console.log(chi)
    console.log(chi2)
    console.log(chi.__proto__===chi2.__proto__)

这个和构造函数相比，仅仅是多了一行，构造函数继承的方式当中，没办法继承Parent的原型属性，因此咱们手动添加

Child1.prototype = Parent1.prototype 这一行代表，Parent的原型添加到了Child的原型上面，因此，能够继承Parent的原型了

可是这个方法仍是会出现问题的，请看

　　function Parent1() {
        this.frid = [1, 2]
    }

    function Child1() {
        Parent1.apply(this)
        this.name = 'lili'
    }
    Child1.prototype = Parent1.prototype
    var chi = new Child1()
    console.log(chi instanceof Child1)      //true
    console.log(chi instanceof Parent1)     //true
    console.log(chi.constructor == Child1) //false
    console.log(chi.constructor == Parent1)   //true

chi竟然不是Child的直接实例，竟然变成了Parent的实例

咱们知道，这个函数的prorotype指向的是一个对象，这个对象有一个constructor属性，这个属性又指向了这个函数对象

chi没有本身的constructor属性，因此沿着原型链查找，他的原型对象，也就是 Child1.prototype，可是，找个对象被从新赋值为了 Parent1.prototype，那么Parent1.prototyped的constructor指向什么？
固然是他本身啊—-Parent1

再回头去看看之前的写法，只要的原型链的方式继承，都会改变原来的 constructor 的指向

5）组合继承的优化方式 2

　　function Parent1() {
        this.frid = [1,2]
    }

    function Child1() {
        Parent1.apply(this)
        this.name = 'lili'
    }
    Child1.prototype =Object.create(Parent1.prototype)
　　Child1.prototype.constructor=Child1      var chi = new Child1()
    console.log(chi.constructor)

这两行代码，一个都不能少，也许有人好奇了？为何前面的代码，不直接加一句 Child1.prototype.constructor=Child1呢？

　　function Parent1() {
        this.frid = [1,2]
    }

    function Child1() {
        Parent1.apply(this)
        this.name = 'lili'
    }
    Child1.prototype = Parent1.prototype
    Child1.prototype.constructor=Child1
    var chi = new Child1()
    var pat=new Parent1()
    console.log(chi.constructor)
    console.log(pat.constructor)

这个会致使，pat.constructor也变成了 Child 构造函数，显然，是存在问题的

　　function Parent1() {
        this.frid = [1,2]
    }

    function Child1() {
        Parent1.apply(this)
        this.name = 'lili'
    }
    Child1.prototype =Object.create(Parent1.prototype)
    Child1.prototype.constructor=Child1
    var chi = new Child1()
    var pat=new Parent1()
    console.log(chi.constructor)   //Child
    console.log(pat.constructor)  //Parent

因此，综合以上，这总方式才是最完美的！！

通讯类

题目1：什么是同源策略以及限制
同源策略：同一个源才能交互，一个源包含三部分的内容，协议，域名还有端口号，这三个必须彻底同样，才是同一个源

限制：
1) Cookie，LocalStorge和IndexDB没法读取
2) DOM没法得到
3) AJAX请求没法发送

题目2：先后端如何通讯
Ajax WebScoket CORS

题目3：如何建立ajax

　var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange(function() {
    if (xmlhttp.readyState == 4) {
      if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status = 304){
        alert(xmlhttp.responseText)
      }
    }
  })
  xmlhttp.open('GET', 'url', trur)
  xmlhttp.send(null)

考察 XMLHttpRequest对象的工做流程 ,兼容性处理事件的触发条件事件的触发顺序

题目4：跨域通讯的几种方式 JSONP Hash postMessage WebSocket CORS

掌握以上5种，已经足够，还有别的方式，可是不是经常使用，比较的麻烦。

第一种：Jsonp，点击这里

第二种：Hash

什么是Hash：你的url地址当中，存在的那个＃号，这个就是Hash，可以用这个方法的基本原理就是，Hash的改变，页面是不会刷新的

第三种：postMessage

第四种：WebScoket

第五种：CORS

安全类

主要考点CSRF和XSS

题目1：基本概念和缩写
题目2：攻击原理
题目3：防护措施

算法类

考点：排序堆栈，队列，链表递归波兰式和逆波兰式

排序：排序算法，平均时间复杂度，最好状况，最坏状况，空间复杂度，排序方式，稳定性