记一次 “超详细” 前端校招笔试和面试经历

时间 2019-11-08

标签一次详细前端笔试面试经历栏目快乐工作繁體版

原文原文链接

杭州个推前端笔试题以及面试分享（浙江每日互动网络科技股份有限公司）

笔试题照片

笔试解答

计算机基础题（必作）

1.略

2.内存溢出和内存泄露

内存溢出是指已有的数据超过了其得到到的内存所能存储的范围，好比用一个字节存放1000这个数字就属于内存溢出；
内存泄漏是指程序因为错误或漏洞形成的内存占用过多，或占用内存后没法释放（不少状况是申请了内存，但程序结束后没有释放）。css

3.数据库中索引，主键，惟一索引，联合索引的区别，对数据库性能有什么影响

索引是一种特殊文件，它包含对数据表里全部记录的引用指针
普通索引的惟一做用是加快访问速度
普通索引，被索引的数据中能够包含重复的数据，惟一索引就是规定了索引到的值各不相同
主键是一种特殊的惟一索引，一个表中只能容许有一个主键，用来惟一标识一条记录
联动索引就是索引能够覆盖多个数据列
索引加快了查询的速度，可是减慢了添加删除更新的速度，由于在执行这些操做以前须要先索引

4.数据库中内联接和外联接区别

内链接：指链接结果仅包含符合链接条件的行，参与链接的两个表都应该符合链接条件。
外链接：链接结果不只包含符合链接条件的行同时也包含自身不符合条件的行。包括左外链接、右外链接和全外链接。

内链接只能查询两个表中关系匹配的记录外链接不只能查询两个表中关系匹配的记录,并且能够查询不匹配的纪录前端

5.线程和进程，多线程中死锁怎么处理

联系：

一个线程只属于一个进程，一个进程能够拥有多个线程，但至少有一个线程，称为主线程
资源统一分配给进程，同一进程中的线程共享该进程的全部资源
线程在执行过程当中，须要协做同步，不一样进程之间线程须要经过消息通讯来达到同步

区别：

线程做为调度和分配的基本单位，进程做为分配资源的基本单位
并发性：不只进程之间能够并发执行，同一进程中的不一样线程之间也能进行并发执行
拥有资源：进程是拥有资源的独立单位，线程不拥有资源，但能够访问隶属于进程的全部资源

何时用多线程：

耗时或大量占用处理器阻塞用户界面操做
各个任务必须等待外部资源时

避免多线程中死锁

加锁顺序（线程按照必定的顺序加锁）
加锁时限（线程尝试获取锁的时候加上必定的时限，超过期限则放弃对该锁的请求，并释放本身占有的锁）
死锁检测

6.缓存的应用场景

咱们先解释下缓存，顾名思义，就是数据暂存的地方，你能够理解为从磁盘里取出来数据，暂时存放在内存，以待后面处理来读取。而能存放在缓存的数据，一般是频繁访问的，不会常常修改的数据。知道了什么是缓存，什么数据能够放缓存，就能够寻找合适的缓存(这里说的缓存，就是对象或者容器了)。
目前，缓存的操做主要是两种方式，一种是使用程序自带的map对象(像jdk的hashmap)，一种是缓存软件，第一种不细说，你们能够看看hashmap的实现和应用，这里主要说缓存软件。如今流行的缓存软件是memcached、redis(若是有不了解的，google)，有的博客还说到mongodb。我的认为，由于要兼顾DB的某些特性，因此作不到其余两个缓存的为了实现极高的吞吐量而采用的epoll 或 libevent事件驱动的方案，因此这里排除。下面所说的缓存，就指的是第二种。

7.略

8.略

9.TCP和UDP区别

基于链接与不链接
UDP程序结构简单
对系统资源的要求，TCP多，UDP少
TCP保证数据正确性，UDP可能丢包，TCP保证数据顺序，UDP不保证
流模式，数据报模式

10.观察者模式

当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。好比，当一个对象被修改时，则会自动通知它的依赖对象。观察者模式属于行为型模式。vue

前端笔试题

1.css有哪些选择器，如何区分优先级，下面的代码是什么效果

派生选择器（用HTML标签申明）
id选择器（用DOM的ID申明）
类选择器（用一个样式类名申明）

除了前3种基本选择器，还有一些扩展选择器，包括css3

后代选择器（利用空格间隔，好比div .a{ }）
群组选择器（利用逗号间隔，好比p,div,#a{ }）

CSS选择器的优先级的定义es6

基本原则：

通常而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。面试

复杂的计算方法：

用1表示派生选择器的优先级
用10表示类选择器的优先级
用100标示ID选择器的优先级
div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1
#xxx li 优先级 100 +1

<style>
#id{color:green;}
.class-a{
    color:blue;
}
#my-id.class-b{color:yellow;}
p.class-a.class-b{
    color:red;
}
</style>
<body>
    <p class="class-b class-a" id="my-id">123</p>
</body>

答案是yellow,黄色redis

2.如何用css让一个元素不可见

opcity: 0; 隐藏对应的元素而且挤占该元素原来的空间。
display : none; 隐藏对应的元素但不挤占该元素原来的空间。
visibility: hidden; 隐藏对应的元素而且挤占该元素原来的空间。

便是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各类属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（彻底透明），而它所占据的空间位置仍然存在。mongodb

3.补充一下.b的css代码，使得<div class="b"></div>在页面水平居中，列出你能想到的全部方法

.b{
    width:200px;
    height:100px;
    background:#ccc;
    //继续补充代码
}

传统的居中方式

添加代码margin:0 auto;便可数据库

绝对定位方式（必须已知子元素宽高，而且父元素须要relative定位）

添加代码json

position:absolute;
left:50%;
margin-left:-100px;

绝对定位方式（不用知道子元素宽高，但父元素须要relative定位）

position:absolute;
left:0;
right:0;
margin:0 auto;

4.若是一个页面由于图片大且多加载慢，应该如何去优化？

图片懒加载，在页面上的未可视区域能够添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，若是前者小于后者，优先加载。
若是为幻灯片、相册等，可使用图片预加载技术，将当前展现图片的前一张和后一张优先下载。
若是图片为css图片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
若是图片过大，可使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提升用户体验。
若是图片展现区域小于图片的真实大小，则因在服务器端根据业务须要先行进行图片压缩，图片压缩后大小与展现一致。

5.如何消除一个数组里面重复的元素？

这个是一个常考题，网上一搜方式不少。
首先介绍一种es6的解决方法

ES6里新添加了两个很好用的东西，set和Array.from。

set是一种新的数据结构，它能够接收一个数组或者是类数组对象，自动去重其中的重复项目。

var arr = [1,1,'1','1',null,null,undefined,undefined,NaN,NaN];
console.log(new Set(arr));

在这咱们能够看见，重复的项目已经被去掉了，包括NaN。正常状况下，NaN === NaN 返回的是false，可是在set里，同样可以帮你去重。

可是这里你们能够看到，set返回的是一个对象，可是咱们想要的是数组啊。

这回，就该轮到Array.from出场了，它的做用，就是能够把类数组对象、可迭代对象转化为数组。

var arr = [1,1,'1','1',null,null,undefined,undefined,NaN,NaN];
var newArr = Array.from(new Set(arr));
console.log(newArr);

再介绍一种利用indexOf方法的去重

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

var arr = [1,1,2,3,4,2,6,4,5,7];
var nArr = [];
function removeItem(arr){
    for(var i=0;i<arr.length;i++){
        if(nArr.indexOf(arr[i])==-1){
            nArr.push(arr[i]);
        }
    }
    return nArr;
}
console.log(removeItem(arr));

6.请简述var let const的区别

var定义的变量能够修改，若是不初始化会输出undefind,而且有时候会泄露到全局，形成一些影响
为了解决这个泄露的bug，有了es6的let，let至关于给行数定义了一个块级域，函数内部使用let定义的变量只能在函数内部起做用
const是用来定义一个不变的量，不能修改的量，必须赋初值

7.如何深拷贝对象，JSON.stringfiy须要注意什么

讲讲浅拷贝和深拷贝的概念，js中的浅拷贝和深拷贝，知识针对复杂数据类型（Object,Array)的复制问题。

浅拷贝：是拷贝引用，拷贝后的引用都是指向同一个对象的实例，彼此之间的操做会互相影响

var a = {c:1};
var b = a;
console.log(a === b); // 输出true。
a.c = 2;
console.log(b.c); // 输出 2

深拷贝：在堆中从新分配内存，而且把资源对象全部属性都进行新建拷贝，拷贝后的对象与原来的对象是彻底隔离，互不影响

常见方法有JSON.parse(),JSON.stringify()，jQury的$.extend(true,{},obj)

var a = {c: {d: 1}};
var b = $.extend(true, {}, a);
console.log(a === b); // 输出false
a.c.d = 3;
console.log(b.c.d); // 输出 1，没有改变。

JSON.stringfiy须要注意什么

首先讲一下JSON.parse()和JSON.stringfiy的概念

JSON.parse()是将字符串转黄成json对象

var str = '{"name":"zp","age":"22"}'
结果：
JSON.parse(str)

Object

    age: "22"
    name: "zp"
    __proto__: Object

JSON.stringfiy则相反，是将json对象转换成字符串

vara = {a:1,b:2}
结果：
JSON.stringify(a)

"{"a":1,"b":2}"

JSON.stringfiy须要注意的地方

JSON.stringfiy将不会转换不具备json表示形式的值

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

undefined不在其中。

8.<a onclick="a.click">和<a onclick="a.click()">二者的写法有差异吗，若是有，差异是什么

前者调用的是一个函数，当点击的时候能够执行函数
然后者只是将函数运行后的值赋值给了a，因此当点击的时候并不会执行函数

9.按时间顺序排序的日志信息，如何快速找到指定时间的日志。时间复杂度是多少

这个是数据结构中的日志信息，有兴趣的同窗能够自行百度

10.写一个fiter函数执行器，第一个参数为filter函数，剩余的参数传入filter执行，并返回结果，exeFilter()

首先看看js filter()的用法，
array.filter(function(currentValue,index,arr), thisValue)
参数描述

function(currentValue, index,arr)
- currentValue 必须。当前元素的值
- index 可选。当前元素的索引值
- array 可选。当前元素属于的数组对象
thisValue 可选。对象做为该执行回调时使用，传递给函数，用做 "this" 的值。若是省略了 thisValue ，"this" 的值为 "undefined"

var ages = [32, 33, 16, 40];

function exeFilter(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(exeFilter);
}

11.这题是一个浏览器，console中报错信息，要求一条条解释，图片没拍到，能够自行脑补

面试

宣讲会6点开始，晚饭没吃，就跑去听宣讲会了，本来觉得7，8点就能结束，可是宣讲+笔试+面试，硬是拖到了10点钟才吃上晚饭。

废话很少说，讲重点

面试排队轮到我了，首先和面试官打个招呼，简历递给他，他直接开始看简历了，没说啥，我就本身先进行了自我介绍，讲了下基本状况，以及一些实习经历

接着面试官开始问问题，一上来就直接问的框架，看来框架仍是挺重要

面试官：你的简历上写了angular.js,你能讲讲angular吗？

因为临时接到的宣讲会通知，框架还没整理准备好，只说了一些简单的知识，加上单页面的跳转。而后我强调了vue，可是面试官嗯了一下，没太在乎，就过去了。应该公司侧重angular吧。感受这一问题没回答好

接着就是照简从来问了

gulp

面试官：你能说说gulp吗？
我：gulp是前端工程化开发工具，可以极大的加强工做流程
面试官：那你主要用gulp干了哪些具体的事呢？
我：主要用gulp进行图片压缩，less，sass编译，es6编译为es5以及其余自动化工做
面试官：那gulp有哪些api呢？
我：
- gulp.task 主要就是运用这个进行任务的建立，其余还有* gulp.src 用来查找一个或多个文件
- gulp.watch用来监听文件的变化，
- gulp.dest指定文件输出的文件夹路径
面试官：嗯好

es6

面试官：你能讲一下let和var的区别吗
我：var定义的变量有时候会泄露到全局，有必定的影响，而es6的let能够解决这个问题，let至关与赋予了一个块级做用域，let定义的变量只能在该做用域中起做用
面试官：嗯好的

响应式

面试官：你能讲一下你对响应式的理解吗
我：
- 响应式主要是文档呈现方式可以随浏览器宽度的改变而随之改变。
- 我主要是运用bootstrap的栅格化系统加上媒体查询来达到这一目的。
- 另外我还了解了fundation, fundation和bootstrap的主要区别我以为是，fundation是可以随着浏览器大小改变，实时改变文档样式，并且具备像css3中transition同样的过渡效果，而bootstrap是当浏览器宽度大小改变到一个固定值的时候，文档样式产生响应改变
面试官：嗯好的

'=='和'==='的区别

面试官：你能讲讲'=='和'==='的区别
我：'=='是有强制类型转换的，'==='没有转换
面试官：嗯好（接着手写了一个题目）

a={a:1}
b={b:1}

面试官：你能说说a==b和a===b这两个是真仍是假吗
我：（一开始没听懂面试官的意思，让他有复述了一遍，而后看着题目仍是一脸懵逼，没看懂啥意思，稍微想了下）
面试官：能给我正确答案了吗？
我：（感受有套路）我随便答了下，a==b是true，a===b是false
面试官：好的，你能解释一下吗
我：（含糊的说）好像对象typeof返回的值是什么什么

后来想一想，其实这是个很容易的题目啊，我居然没想到，我觉得他靠考的重点是==和===,往这钻去了，

其实这道题考的是引用类型，引用类型是存在堆中的，虽然a和b的值是同样的，可是存放在栈中的是指向不一样堆内存的指针，因此不存在类型转换,那么二者都应该是false

让我总结

面试官：差很少到这了，你能总结一些此次面试吗
我：我以为个人基础知识还须要多巩固，多看看
面试官：嗯，好的

收尾（由于当时已经很晚了，差很少晚上10点左右了，面试感受有点赶）

面试官：面试到这差很少了，你有什么问题想问个人吗？
我：（想了下这是个套路，还好有准备）公司目前所主要用的框架是什么呢？
面试官：咱们有用vue和angular，主要用angular
我：angular1和angular2差异挺大的
面试官：是的，可是angular2-angular4都差很少
我：个人表现如何呢，有哪些不足的地方呢？
面试官：不要太紧张了，放松点
我：哦，好的，那技术方面呢，有什么不足的吗
面试官：基础要看，框架也要再多学习多看
我：嗯好的

面试到此结束。等待通知中。。。

感受面试整体还好吧，能答的都答了，就是那道基础题坑了

二面也结束了，没有回答好，被刷了，一方面没有经验，一方面不少东西不经常使用忘记了。

二面具体问题请看前端面试经历

最后有什么不对的地方，欢迎指正。