Willdark

每一个不曾起舞的日子,都是对生命的辜负

[干货]求职的那些事儿与面试经验分享

<前言>忙碌的七月终于过去了,一直想找个时间把过去在七月的求职经历记录下来,没找到合适的时间,今天周六,天晴,睡到九点半就自然醒了,怀着愉悦的心情写一下博客。

目前在欢聚时代YYInc实习,做的是网页前端开发的内容,在这里遇到了一群有趣、可爱的人儿,蛮喜欢这样的工作环境和氛围

言归正传,说一下求职的事情,因为专业课程和还处身在校级组织的原因,还有的是三四五月份和参与了大学生创业大赛,所以在那段时间的春招几乎没有任何的准备,固然也失去了很多机会。现在回想一下,一切都是最好的安排

网申到面试主要在7月7-7月18日。在这之前有参与了来学校招聘的五帆科技、金山WPS和明动软件,也有拿到了五帆科技的入职邀请,金山WPS电话面试只到了二面和明动软件的面试未通过但是也让我积攒了很多经验和知识,包括下面分享面试题中很大部分来源于金山明动,怎么说,感谢这份成长。好啦,着重说一下七月的。

一、求职初体验
七月伊始就开始关注了一些求职公众号,这里也推荐一下的有(互联派、校招日历和内推军)这几个公众号,在上面看到有职位合适的又投了很多简历,几乎都石沉大海,有一大部分原因是估计企业只是在春招过后补录寥寥几个的名额(或许这也是自己能力不足的自我安慰哈哈哈),于是乎把投递重心转到求职网站上(有投递拉勾、BOSS直聘和实习僧),统计了一下数据,在拉勾一共投出了25份简历,19份被查看,14份被标记为不合适;在BOSS直聘上与121家企业岗位发起过沟通,投递了27份,去面试的有4家;在实习僧上有投递31份,8份被标记为不合适,去面试的有3家。所以说初出求职真的很艰难,大学期间一定要好好规划好自己的职业的发展,提前做好准备。

上面有说到七月份有去面试的有大公司也有小企业,包括有(按面试的时间排序)深远咨询、抵澳云、主题邦、汇思软件(前面的在BOSS投递)、欢聚时代、五百丁、华资软件(这三个在实习僧投递),因为前面的面试都在不断的总结经验和学习,所以在后面的汇思、欢聚、五百丁和华资的都有收到入职offer(华资是在我入职欢聚后才通知的),不过这几个offer上来说,自己最喜欢的还是欢聚时代嘻嘻,也算是得偿所愿吧(开心)。在面试的那段时间里,对自己的表现也还算满意吧,前面那几个没有下文通知的自我感觉回答的也不差(嗯再自我安慰一下)。那时候稍微带点小膨胀的心里设想是:就怕企业面试的机会都不给,一旦有面试邀请,我知道,我的机会来了…

关于面试上问的比较实用的技术问题在下面也会写出来,技术问的问题上,一个很直接的感受是:大公司看重你的学习能力,而小公司看重你目前的开发能力,所以在问题上直接延伸出来的是:比较大的公司考察了很多我的基础知识和知识的广度。越是小型的公司越是百般刁难,问我各种框架和知识深度(内心策马奔腾),还有值得一说的是在校期间在校级组织星空的经历(参与了大大小小的网页开发,获得项目实战开发经验;运营模式和互联网公司不相上下,了解开发的流程以及团队合作方面的知识;拥有管理层方面的经验)和参加的大学生创业大赛(团队获省赛铜奖,勇于探索和学习)为我加了不少分,在大公司面试的时候面试官也对这两段提起了很大的兴趣,所以也很感谢自己拥有这两段经历(比心)
好啦,附上自己的面经(比较多js和jq方面的内容)。

二、前端面试题整理
1.常见的一些http请求状态码
1)200:请求成功,返回数据。
2)202:服务器已经接受请求,但尚未处理。
3)304:未修改,所请求资源未修改,不返回任何资源。
4)401:请求要求身份验证。
5)403-Forbidden :客户端错误。服务器理解客户端的请求,但是拒绝执行此请求。
6)404-Not found:客户端错误。服务器无法根据客户端的请求找到资源(网页)。
7)408:客户端错误。发送请求超时。
8)500:服务器错误。服务器内部错误,无法完成请求。
9)505:服务器错误。服务器不支持请求的http协议的版本,无法完成处理。

2.常见的http请求方式
1)get方法:主要用于指定URL请求资源,可以带参数可以不带参数,带参数时是明文传参,参数会显示在地址栏上。
2)post方法:主要用于指定URL进行提交数据,通常用于表单发送,post方法将封装后的参数进行传递,安全系数较高。
3)put方法:html表单不支持,用法与post相似,区别在与put通常指定了资源的存放位置,而post方法位置一般存放的位置由服务器来决定。
4)delete方法:请求删除请求URL上的资源。状态码(200成功并执行202成功还未执行204请求没有返回)

3.解释一下es6里新增的箭头函数?
我们先来看看箭头函数的语法:
([param] [, param]) => {Statements;}
param => expression
param 是参数,根据参数个数不同,分这几种情况:
() => { … } // 零个参数用 () 表示;
x => { … } // 一个参数可以省略 ();
(x, y) => { … } // 多参数不能省略 ();
如:
1)一个参数
var selected = allJobs.filter(function (job) { //ES5
return job.isSelected();
});
var selected = allJobs.filter(job => job.isSelected()); // ES6
2)两个参数
var total = values.reduce(function (a, b) {// ES5
return a + b;
}, 0);
var total = values.reduce((a, b) => a + b, 0);// ES6
3)非return的情况
$(“#confetti-btn”).click(function (event) {// ES5
playTrumpet();
fireConfettiCannon();
});
$(“#confetti-btn”).click(event => {// ES6
playTrumpet();
fireConfettiCannon();
});
好处:对 this 的关联。函数内置 this 的值,取决于箭头函数在哪儿定义,而非箭头函数执行的上下文环境。

4.JQuery链式操作的原理?
1)链式调用:$(“div”).css(“height”,”100px”).attr(“color”,”red”).hide();
2)原理:每次方法执行完返回this对象。
3)示例:
//创建一个类
function Person(){};
//在原型上定义相关方法
Person.prototype ={
setName:function(){
this.name = name;
return this;
},
setAge:function(){
this.age = age;
return this;
}}
//实例化
var person= new Person();
person.setName(“Mary”).setAge(20);

4.JS防抖动与节流
1)解决痛点:针对一些会频繁触发的事件如scroll、resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能。
2)实现方法:https://blog.csdn.net/crystal6918/article/details/62236730
防抖动详解https://github.com/mqyqingfeng/Blog/issues/22

5.盒模型怪异变现形式
1)在标准模式下,一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
2)在怪异模式下,一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)
3)当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;
4)当设置为box-sizing:border-box时,将采用怪异模式解析计算;

6.this中的三大经典应用场景
1)全局作用域或者普通函数中this指向全局对象window。
//直接打印
console.log(this) //window
//function声明函数
function bar () {console.log(this)}
bar() //window
//function声明函数赋给变量
var bar = function () {console.log(this)}
bar() //window
2)方法调用中谁调用指向谁。
//对象方法调用
var person = {
run: function () {console.log(this)}
}
person.run() // person
//事件绑定
var btn = document.querySelector(“button”)
btn.onclick = function () {
console.log(this) // btn
}
3)构造函数或者构造函数原型对象中this指向构造函数的实例。
//不使用new指向window
function Person (name) {
console.log(this) // window
this.name = name;
}
Person(‘inwe’)
//使用new
function Person (name) {
this.name = name
console.log(this) //people
self = this
}
var people = new Person(‘iwen’)
console.log(self === people) //true
//这里new改变了this指向,将this由window指向Person的实例对象people

7.如何处理跨域问题
1)JSONP处理(只适用于GET请求)
例如:在www.aaa.com页面中:
function jsonp(json){
alert(json[“name”]);
}
script src=”http://www.bbb.com/jsonp.js”
在www.bbb.com的页面中:
Jsonp({“name”:”洪七”,”age”:24})
具体操作:
//前端代码
$.ajax({
type:”GET”,
url:”http://www.bbb.com/service.php?id=”+$(“#id”).val();
datatype:”jsonp”,
jsonp:”callback”,
success:function(data){}
error:function(jqXHR){}
})
//服务器端代码(在GET请求处理的函数中添加)
$jsonp = $_GET[“callback”]; //获取传过来的值
//改造返回的的值。把参数值和用括号括起来的返回值用.连接
$result = $jsonp.’({“success”:false,”msg”:”Not found”})’;
2)XHR2(主要用于服务端的改造,IE10以下不兼容)
//在服务器端头部加上
header(“Access-Control-Allow-Origin:*”);
header(“Access-Control-Allow-Methods:POST,GET”);

8.HTML回流与重绘
1)当渲染树中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建,这成为回流(reflow)
2)当渲染树中的一些元素需要更新属性,而这些元素知识影响元素的外观、风格,而不会影响布局的,比如background-color,则就叫做重绘。
注:回流必定引起重绘,而重绘不一定引起回流
回流发生的情况:
1)添加或者删除可见的DOM元素;
2)元素位置改变;
3)元素尺寸改变——边距、填充、边框、宽度和高度
4)内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;
5)页面渲染初始化;
6)浏览器窗口尺寸改变——resize事件发生时;

8.display:none、visibility:hidden和opacity:0的区别
1)display:none->不占空间 回流和重绘 不被子元素继承 绑定的事件无法触发
2)visibility:hidden->占空间 重绘 被子元素继承(可设置visibility:visible显示) 绑定的事件无法触发
3)opacity:0->占空间 重绘 被子元素继续(不可设置opacity:1显示) 绑定的事件可以触发

9.几种排序法的思路
1)快速排序
思路:划分->求解子问题->合并
划分:以第一个值作为轴值,设立i,j分别指向前后,从后往前找一个比轴值小的值,交换位置。再从前往后扫描,找一个比轴值大的值,交换位置。当i=j时,一次划分结束。
求解子问题:以轴值为基准,递归求解左右子问题的解。
合并:子问题合并便是问题的解
时间复杂度:O(nlog2n)
2)起泡排序
思路:两层循环,里层循环两两比较,如果反序则交换,直到没有反序的记录为止。
时间复杂度:O(n2)
3)直接插入排序
思路:在排序过程中,每次将无序区的第1条记录插入到有序区的适当位置,使其仍有序。
时间复杂度:O(n2)
4)希尔排序
思路:缩小增量排序,按照相隔为某个“增量”的记录为一组,组内进行直接插入排序。直到增量缩小到1。
时间复杂度:O(nlog2n)
5)直接选择排序
思路:每次在无序区中选择一个最小的数字放到有序区里面。
时间复杂度:O(n2)
6)归并排序(二路归并)
思路:把序列分成若干个长度为1的子序列,然后两两归并,最后归并成一个有序序列。
时间复杂度:时间复杂度:O(nlog2n)

10.BFC与IFC
1)BFC布局
含义:“块级格式化上下文”,一个独立渲染的容器
特性:
01)box的边距有margin决定,同一BFC下的两个相邻的box的margin会发生叠加;
02)BFC区域不与float box叠加;
03)BFC是一个隔离的独立容器,容器里面的元素不会影响外面的元素;
04)计算BFC高度时,浮动元素也参与计算。
触发条件:
01)设置除float:none以外的属性;
02)设置除overflow:visible以外的属性值;
03)设置display为inline-block|flex|inline-flex|table-cell|table-caption中的一种;
04)设置position为absolute或fixed;
05)使用fieldset元素;
06)根元素如html和body
应用BFC:
01)解决margin叠加问题:给box应用BFC,使其成为独立的渲染容器。
02)应用于两栏布局。
03)用于清除浮动,计算BFC高度。
2)IFC布局
含义:行内格式化上下文
布局规则:在行内格式化上下文中,框(boxes)一个接一个地水平排列,起点是包含块的顶部。水平方向上的 margin,border 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐:它们的顶部或底部对齐,或根据其中文字的基线对齐。包含那些框的长方形区域,会形成一行,叫做行框。

11.常见的字符串操作函数(以下实例不指明都以var str = “hello world”为例)
1)charAt:返回指定位置的字符串
console.log(str.charAt(1));//e
2)concat:连接字符串,返回新的字符串
var res=str.concat(“world”);
console.log(res);//hello world
console.log(str);//hello 说明不改变原来字符串的值
var res1 = str.concat(“nihao”,”!”);
console.log(res1);//hello nihao! 说明可以接受任意多个参数
3)slice/substring:截取字符串,第一个参数指定子串开始位置,第二个参数指定子串最后的位置(省略则以字符串长度作为结束位置,“包头不包尾”)
console.log(str.slice(3));//lo world
console.log(str.slice(3,7));//lo w (7表示最后的一个字符的位置,不包含7)
console.log(str.slice(3,-4));lo w (-4+11=7,-4表示最后往回数的位置,不含-4)
4)substr:截取字符串,第一个参数指定子串开始位置,第二个参数指定子串的长度。(省略则以字符串长度作为结束位置)
console.log(str.substr(3));//lo world
console.log(str.substr(3,7));//lo worl
5)indexOf:返回字符/字符串第一次出现的位置(下标)。没有找到就返回-1,可接收两个参数,第一个参数是要寻找的字符/字符串(必须),第二个参数是开始寻找的位置。
console.log(str.indexOf(“o”));//4
console.log(str.indexOf(“o”,6));//7
6)tirm:去掉字符串两边的空格,不影响原来的字符串。
var str_space = “ hello world ”;
console.log(str_space.trim());//hello world
7)replace:替换指定子串,第一个参数是旧的串(可字符可正则),第二个参数是新的串。
var str_re = “sat,bat,cat,fat”;
console.log(str_re.replace(“at”,”one”));//sone,bat,cat,fat (参数为字符串所以只替换第一个值)
console.log(str_re.replace(/at/g,”one”));//sone,bone,cone,fone (参数为正则替换全部)
8)split:切割字符串,参数是切割的标识符,返回的是字符串数组
var str_sp = “red,blue,green,yellow”;
console.log(str_sp(“,”));//[“red”,”blue”,”green”,”yellow”]
console.log(str_sp(“,”,2));//[“red”,”blue”] 第二个参数是限制数组的大小
9)找到字符串所在的各个位置
var str = “asadajhjkadaaasdasdasdasd”;
var position = [];
var pos = str.indexOf(“d”);
while(pos>-1){
position.push(pos);
pos = str.indexOf(“d”,pos+1);
}
console.log(positon);// [3, 10, 15, 18, 21, 24]
10)字符串去重
var str = “aahhgggsssjjj”;
function unique(msg){
var res = [];
for(var I = 0;i<msg.length;i++){
if(res.indexOf(msg.charAt(i)==-1)){
res.push[msg.charAt(i)];
}
}
return res.join(“”);
}
console.log(unique(str));//ahgsj

12.ES6的一些新特性
1)增加let局部声明作用域
2)箭头函数
3)类的定义

13.html页面性能优化
1)减少http请求:例如导航栏的图标,可以集成在一张图片上,然后通过设置background-position来定位各个图标的显示,成为css sprite这样就可以只发送一次http请求即可。例如合并css、js文件。把多个css、js文件写在一个里面。
2)样式放在头部、js脚本放在底部
2)压缩图片、代码:把大图片压缩、代码分离后进行压缩。
3)使用预加载或懒加载:
3.1)预加载:在body中设置一个隐藏类,创建一个image对象,先为这个对象的src对象赋值,需要的时候直接用这个值。
var images = new Array();
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image();
images[i].src = preload.arguments[i];
}
}
preload(
“http://domain.tld/gallery/image-001.jpg”,
“http://domain.tld/gallery/image-002.jpg”,
“http://domain.tld/gallery/image-003.jpg”
)
3.2)懒加载:首先,不要将图片地址放到src属性中,而是放到其它属性(data-url)中。页面加载完成后,根据scrollTop判断图片是否在用户的视野内,如果在,则将data-url属性中的值取出存放到src属性中。

14.data-*属性:自定义私有属性,可读可写,可以使用getAttribute方法来获取。

15.cookie和session的区别:
1)cookie:http无状态连接的一些数据保存在浏览器本地。方便下次再请求时使用。
2)session:http无状态连接的一些数据保存在服务器。

16. cookies,sessionStorage 和 localStorage 的区别?
1)相同点:都是在保存在浏览器上的缓存数据。
2)不用点:
2.1)cookie:在浏览器和服务器上来回传递;大小限制4kb ;在设置过期时间前一直有效;
2.2)localStorage:本地保存,大小5M或更大;长久有效直到人为删除;
3.3)sessionStorage:本地保存,大小5M或更大;浏览器关闭后数据消失;
17.javascript垃圾回收机制与内存泄露

面试需要了解清楚->
1.问入职新人有没有培训?
2.试用期多久?试用期的薪资多少?
3.转正有名额吗?
4.公司会不会每年调薪的,涨幅多少?
5.周末双休吗?法定节假日是不是跟着国家的来?
6.有无年终奖?
7.有没有住宿补贴,餐补那些?

–至此,有错的再修改

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注