前端面试知识总结1

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

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

一面

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

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

页面布局类
题目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布局

<!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：防御措施

算法类

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

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

posted @ 2017-09-15 18:05 阿柴与米阅读(595) 评论(1) 编辑收藏举报

刷新页面返回顶部

阿柴

前端面试知识总结1

公告