实习面试题

1、算法部分

一、基本排序的方式

冒泡、快排、桶排、堆排序、归并排序、插入排序。

二、二分搜索等

三、二叉树遍历相关，例如前序遍历中序遍历后序遍历等，深度优先搜索和广度优先最好掌握。还有二叉树的反转

 

2、计算机网络部分

1.最重要的就是http协议

http报文解构都包含什么(大体就是那个三部分，请求实体、请求头、请求行这些)

http协议经常使用的状态码(https://blog.csdn.net/xiaozhuxmen/article/details/51934706)

http头部关于缓存的字段

http和https的区别

https是http+SSL/TSL,是http的安全版，包含对称加密，非对称加密，CA认证，http是超文本传输协议，信息明文传输，有窃听、篡改、冒充风险，https密文传输

http端口号80,https端口号443

http创建链接快，https创建链接慢一点，由于它还要和ssl握手

http1.0 1.1 2 大体的区别

http1.0每一个链接只容许一次请求，耗时

http1.1每次链接能够多个请求，可是这些请求有顺序，要是前面的有一个传输特别慢就会致使队头阻塞

http2复用tcp链接,请求无顺序，不用按顺序一一回应，避免了队头阻塞，头信息压缩

缓存字段和200、40四、304之类很是经常使用的状态码必定要记住。

2.tcp的三次握手和四次挥手。

3.udp和tcp的比较等等

进程和线程

进程是程序的一次执行，占有一片独有的内存空间，资源分配

线程，CPU的基本调度单位，是程序执行的一个完整流程，资源调度

浏览器内核

chrome,safari:webkit

firefox:Gecko

IE:Trident

360,搜狗等国内浏览器：Trident+webkit

内核模块组成：

html/css文档解析模块

dom/css模块

布局和渲染模块

定时器模块

网络请求模块

事件响应模块

3、 html和css基础部分。

1.盒模型概念

网页布局就像摆放一个个盒子，盒子由margin, padding, border, content组成

 

2.position定位属性和相关的关系，例如relative占用文档流，而absolute和fixed却不占用，还有relative和absolute结合使用会有变化，必定要搞懂。

static，默认

relative，

　　一、开启相对定位后，不设置偏移量元素不会发生任何变化

　　二、相对定位元素相对于自身在文档流中的位置进行定位

　　三、不会脱离文档流

　　四、不会改变元素性质

　　五、会提高一个层级

absolute

　　一、...

　　二、相对于距离最近的开启了定位的祖先元素进行定位，若都没开启，则直接相对于浏览器窗口定位

　　三、会彻底脱离文档流

　　四、会改变元素性质，内联变块

　　五、会使元素提高一个层级

fixed

　　一、是一种特殊的绝对定位，特色大部分和绝对定位同样

　　二、不一样的是永远相对于浏览器窗口进行定位，不会随滚动条滚动

层级关系

　　一、定位元素>浮动元素>文档流中的元素

　　二、元素开启了定位后，可经过z-index设置元素层级

　　三、z-index值越高元素越优先显示

　　四、若是z-index值同样，则优先显示下面的元素

　　五、父元素永远不会盖住子元素　　

3.display相关属性，经常使用的block、inline、等等。

flex响应式布局,css3，justify-content设置水平方向排列，align-items设置垂直方向排列

inline-block转为行内块级元素，使之能够设置宽高

block转为块级元素

inline转为行内元素

none不显示，不保留位置

4.IFC和BFC问题。

BFC块级格式化上下文, 开启了BFC的元素不受外界元素干扰，可用来解决垂直塌陷问题，开启方法：

一、float的值不是none。
二、position的值不是static或者relative。
三、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
四、overflow的值不是visible

BFC特色：

• BFC能够包含浮动元素（闭合浮动）
• BFC所肯定的区域不会与外部浮动元素发生重叠
• 位于同一BFC下的相邻块级子元素在垂直方向上会发生margin重叠
• 位于不一样BFC下的相邻元素之间不会发生margin重叠

 

5.双飞翼布局。

6.垂直居中、水平居中的多种方式和方法，这俩个都有不少的方法，尽可能每一个都记下来4个方法以上，使用line-height的时候须要知道高度等等。并且还有要注意字体的居中和块级元素等居中是不同的。

水平居中，行内元素text-aljgn:center, 块级元素margin:0 auto;

垂直居中，设置line-height和height同样，绝对定位，设置left, top 为50%，margin-left:-元素自己宽度一半，margin-top:-元素自己高度一半

css3，display:flex; justify-content:

7.圣杯布局

8.rem、em的使用。

rem相对网页根元素字体大小，通常为html, em相对父元素字体大小；

9.less等预处理语言。

像写编程语言同样写css, 好比你css里重复用到某个相同属性，那你能够用less写成一个变量，到时候若是要改只需改那个变量值便可，便于维护

10.媒体查询。

11.vh和vw，固然这个考的实在太少。

12.h5的语义化部分。当时就有一个问题问我实现删除线怎么办。固然有html基础标签和css样式了。他就问哪一种更好。当时楼主一脸蒙蔽的说html的方式更好。最后被问缘由的时候说了一大堆不重要的，最后面试官告诉我是在语义化的方面考虑的。。。

13.h5 的web worker 还有websocket。这些不须要你真正使用过，可是要明白他们在什么场景下使用。就能够了。本身拿菜鸟教程上代码的实验一下就能够了。websocket内部还有一些关于协议的部分。要本身弄懂。

14.h5的语义化标签都有什么，大体看一下，记住一部分。还有新加的例如video这些东西。

header, nav, session, article, footer, audio音频, video视频

 

15.css3的都很重要，包括transform、transition、animate这些都好好看一下。

16.css选择器的优先级，也就是class id 元素选择器这些的优先级计算。

!important>内联1000>id100>class10（伪类）>标签1（伪元素）

17.css样式表引用的优先级部分。例如link引用或者行内都设置了字体颜色，问字体此时显示什么字体。

内联样式表>内部样式表>外部样式表

18.清除浮动。

19.canves 某些特别的公司部门可能须要，可是我至今没有被问过。

20.css实现响应式的方式。

设置字体用相对大小

高度塌陷

产生缘由：父元素在文档流中高度默认被子元素撑开，当子元素脱离了文档流，将没法撑起父元素高度，也就致使了父元素高度塌陷

后果：父元素一旦塌陷，全部标准流中元素上移，布局混乱

方案一：

　　开启父元素的BFC

　　开启BFC后：

　　一、父元素的垂直外边距不会与子元素重叠

　　二、开启BFC的元素不会被浮动元素所覆盖

　　三、开启BFC的元素能够包含浮动子元素

　　四、计算BFC高度时，浮动元素也参与计算

 方案二：

　　在塌陷父元素最后添加一个空白的div，而后对该div清除浮动

　　clear:none left right both

方案三：使用after伪类，原理同方案2

　　.clearfiix:after{

　　　　content:' ';

　　　　display:block;

　　　　clear:both;

　　}

高度塌陷完善

　　一、子元素浮动，父标签高度塌陷

　　二、子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素，使用空的table标签能够隔离父子元素的外边距，阻止外边距重叠

　　三、通过修改后的clearfix是一个多功能的，既能够解决高度塌陷，又能够确保父元素和子元素的垂直外边距不会重叠

.clearfix::before,

.clearfix::after{

　　content:'';

　　display:table;

　　clear:both;

}

4、js部分

这个是重中之重了，若是你js掌握的很是很是好，面试官的问题你都回答上来了，那么html、css部分问题没答上也没有什么。毕竟js才是前端的重点。

1.js的做用域做用域链。

js没有块级做用域，有函数做用域，函数执行时js引擎会预解析函数内部的变量，将它们提高到所在做用域的顶部，可是赋值操做还在原来位置，当用到某个变量时，js会首先在函数内部查找这个变量，若是没有找到，就去外层找，逐级向上找，直到window, 这就是做用域链，是单向的，也就是外层做用域是没办法访问内层做用域的变量的。

 

2.js的原型原型链，来一张巨经典的图片。能看懂或者你给面试官讲明白就ok了。还有instanceOf那些判断。

对象包含实例和原型，实例包含实例属性和实例方法，原型包含原型属性和原型方法，当进行访问对象操做时，首先会访问对象实例，若是对象实例里没找到，就会到对象原型里找，若是对象原型也没找到，就会到建立这个对象的对象的原型库里找，逐级向上，这就是原型链。

 

3.js的dom元素操做插入删除等等。

添加：

someNode.appendChild(newNode);

移动：

someNode.insertBefore(newNode,null);

移除：

someNode.removeChild(someNode.firstChild);

someNode.remove()(删除自身)

复制：

someNode.cloneNode(true深复制/ false浅复制)

建立：

createDocumentFragment() //建立一个DOM片断

createElement() //建立一个具体的元素 

createTextNode() //建立一个文本节点

替换：

replaceChild()

查找：

getElementsByTagName() //经过标签名称 

getElementsByName() //经过元素的Name属性的值 

getElementById() //经过元素Id，惟一性

4.js的垃圾回收机制。(问的比较少)。

标记清除，引用计数

5.js中String或者Array或者Math内部经常使用的方法。这些在菜鸟教程上均可以看的。

 

6.ajax请求详细怎么实现，和其中的响应状态。

状态码：0 未初始化，1 初始化， 3 数据传输中， 4 完成

Ajax status :

XHR.status>=200&&XHR.status<300||XHR.status==304

7.js的基础类型和引用类型

基础类型undefined, null, number, boolean, string, symbol(es6), 引用类型object

内置对象类型判断

typeof obj;

obj.constructor.name;

object.prototype.toString.call(obj);

obj.toString();

8.事件委托、事件冒泡、事件捕获。

事件委托就是在要监听的元素的父级以上元素设置事件监听，好比要监听li的点击事件，那么能够在ul上监听，这样能够提高性能

事件冒泡就是事件由比较具体的元素向非具体元素逐级向上传播，直到document

事件捕获和事件冒泡相反，由非具体元素向具体元素传播

9.addEventlistener和正常的onclick=()=> 的区别

 

10.js中new和object.creat区别

11.除了js中DOM的基础方法还有BOM中的方法。好比经过js直接取出相应的url的端口号，或者是协议名，或者url总体。

12.浏览器输入url以后最后网页渲染出来通过了什么（https://blog.csdn.net/xiaozhuxmen/article/details/52014901）

DNS解析，将域名解析成IP地址

TCP三次握手创建链接（为什么要三次）

浏览器向服务器发送请求

服务器回应请求

TCP四次挥手断开链接（为什么要四次）

浏览器构建生成渲染树，渲染页面

13.js跨域实现。我大概回答的有webpack和nginx等代理跨域。CORS和jsonp等。通常这些就能够了

14.浏览器的同源策略

浏览器基于安全考虑，仅限同源页面之间能够进行数据交互。所谓同源，即域名，端口，协议相同

同源对哪些行为有限制：

　　一、cookie, localstorage, IndexDB

　　二、DOM没法得到

　　三、AJAX请求没法发送

15.浏览器的回流和重绘，就是reflow那些东西。

回流指元素大小，位置发生了改变，须要从新解析html构建dom树，解析css生成css规则树，两者合并成render树，浏览器从新渲染页面

重绘指元素颜色等不影响结构的外观样式发生了改变，无需从新构建dom树，回流必定致使重绘，重绘不必定致使回流

16.call、bind、apply区别。

改变this指向，call传递参数，apply传递数组

17.js实现继承怎么实现。原理是？ 这个其实和上面的原型链原型是一块儿的。

类的建立、继承和闭包

new 一个Function ，继承经过prototype，超类和子类能够经过子类的prototype=new 超类（），而后把prototype 的constructor指回子类

继承，子类拥有父类的资源

原型链继承

　　一、每一个函数都能构造出一个对象，这个对象内部有个属性指向这个函数的原型对象

　　二、原型对象本质也是对象，也是由另外一个构造函数构造出来的，也指向那个构造函数的原型对象

借助构造函数继承

组合继承（原型链继承加构造函数继承）

寄生式继承

18.请求get和post的区别

get数据量小32k，post数据量大1G，get直接经过url传递参数，不安全

19.js方法参数argument

伪数组，具备length属性，也可像真数组同样遍历，可是没法使用数组的一些方法，实质是对象，

可经过Array.prototype.slice.call(arguments)转为真数组

Array.from()

20.深拷贝和浅拷贝，还能够引入序列化。还要明白序列化的缺点。

对引用类型而言，直接拷贝的话拷贝的是引用地址，两者指向同一个堆内存，对其中一个的操做会影响另外一个，即浅拷贝

object.assign()合并对象

深拷贝即对原来对象内存里的东西也拷贝出来，这样两者互不影响

如下都是es6

21.promise，最好本身声明一个构造函数尝试去实现，这样面试官会以为你学的很认真。若是实在本身写不出来上网查一下promise的实现原理或者源码应该就有。

解决异步的方案

22.闭包

当一个嵌套的内部函数引用了嵌套函数外部的变量，就造成了闭包。

　　一、使用函数内部的变量，在函数执行完后，仍然存活在内存中，延长了局部变量的生命周期。

　　二、在函数外部能够操做函数内部的变量

清除闭包：

var f=full();//全局变量，调用闭包

f=null;

小闭包（封闭做用域/自执行函数）

(function(){

 

})();

闭包场景应用：一、高级排他；二、节流

缺点：函数执行完后，函数内局部变量没有被释放，占用内存时间会变长，容易形成内存泄漏

解决办法：及时释放

内存溢出和内存泄漏

内存溢出：一种程序运行出现的错误，当程序运行须要的内存超过了剩余的内存时，就会抛出内存溢出的错误

内存泄漏：占用的内存没有被及时释放，内存泄漏累积多了就容易致使内存溢出

常见的内存泄漏：

　　一、占用内存很大的全局变量；

　　二、没有及时清理的计时器/定时器；

　　三、闭包

解决方法：设为null

 

23.let和const，最好全面一点解释，包括能够说一下变量提高引入一下var，和这些在什么场景下去使用。

定义变量的新方式，主要能够解决es5中var的一些缺陷，var没有块级做用域，有变量提高，变量能够重复定义赋值，会形成开发中一些问题，let具备块级做用域，不存在变量提高，const只能被定义一次，用来定义常量，声明的常量必须赋值，只在当前代码块有效，做用域不会被提高，不能被重复声明，

24.generator

set和map

set 相似于数组，没有重复元素，开发中用于去除重复元素

建立一个集合

let set=new Set();

console.log(set);//一个空集合

let set=new Set('张三','张三');//张三

四个方法

add(),delete(),has(),clear()

map数值集合，也可去重

相似于对象，本质是键值对的集合

键不局限于字符串，各类类型的值均可以看成键

四个方法

set(), get(), delete(), clear()

25.es6加上symbol的基础数据类型

26.set类型能够实现数组去重等。

27.箭头函数 重点，不少时候都会问 包括里面的简便写法和内部的this指针指向等等

对this的关联。内置this的值，取决于箭头函数在哪里定义，而非箭头函数执行的上下文环境。

new 不可用。箭头函数不能用new关键字来实例化对象，不然报错。

this指向不会改变。函数内置this指向不可改变，this在函数体内整个执行环境中为常量。有利于JavaScript引擎优化处理。

没有arguments对象。不能经过arguments对象访问传入的实参。只能使用显示命名或者其它新特性完成。

28.解构赋值

数组解构赋值，一一对应，匹配对应

let [arr,[arr2,arr3,[arr4,arr5]]];

console.log(arr1,arr2,arr3,arr4,arr5);

let name='张三', age=18;

let[name,age]=['李四',20];

对象解构赋值

let {name,age,sex}={name:'张三'，age:55};

console.log(name);//张三

基本类型的解构赋值

let [a,b,c,d,e]='我是中国人'；

console.log(a);//我

29.es6新增长的正则符号。

class的基本运用 语法糖

<script>
    //构造函数
    function Person(name,age){
        this.name=name;
        this.age=age;
    }
    Person.prototype={
        constructor:Person,
        print(){
            console.log('我叫'+this.name+'今年'+this.age);
        }
    };
    //实例化
    let person=new Person('张三',19);
    console.log(person);
</script>
<script>
    //经过class面向对象,语法糖
    class Person{
        constructor(name,age){
            thsi.name=name;
            this.age=age;
        }
        print(){
            console.log('我叫'+this.name+'今年'+this.age);
        }
    }
</script>

 

30.或者直接问你es6有什么新加的东西，说得越多越好

es6咱们能够去http://wiki.jikexueyuan.com/project/es6/这里面去学习。固然想要更深了解的话就须要看一下阮一峰大大的那本书了。可是这个我以为面向面试足够了。

如下就是亮点部分了，面试总要有一些亮点告诉面试官你基础很好。由于其实和面试官拽技术不必的，人家真正搞开发的，真的拽技术能甩你8条大马路(固然真正的大大大佬请无视我这句话)，并且我是面向我们不少仍是在蒙圈的同窗们写的。都是很基础的东西，毕竟不能说全部人都瞄准bat进发对吧？

1.js单线程和js具体怎么实现异步的。大概的技术名词有事件队列、执行栈、宏任务、微任务。具体的各位老铁们百度吧。。

2.webworke作分线程

3.vue-router原理实现。多看源码之类的

4.nginx负载均衡。redis共享数据等等等。

5.asm.js（这个我想不少人没听过都。。这个是我本身看的一个技术。比较有意思的。由于面试官总会问你最近在看什么比较新的技术这样的问题，专门准备的）。

 

还有一些其余的问题。

1.跨域。

2.网络安全，大多就是csrf和xss看明白原理和解决方式就能够了。

3.数据结构的栈、队列、链表、等等这些基础的数据结构要明白是什么。

4.设计模式（http://www.javashuo.com/article/p-okwuujts-k.html）

5.数据库相关操做语句(这个问得比较少，可是基础的数据库语句仍是要学的，仍是菜鸟教程。看一下就好了)

6.linex基础指令，通常不多问。就算问也是问你知道什么指令

7.bootstrap实现栅格的原理

8.webpack相关配置。例如跨域之类的