Phone_interview

电面进行了38分钟，虽然总的来说回答的并不是很好，但是也初步了解了一线技术岗对前端岗位的需求和要求，收获很大。
之前学习前端的心一直飘来飘去，没有静下来学习基础知识和深入理解原理，只停留在对工具框架的使用学习上

面试的心得一句话来说就是基础很重要，
比喻说来就是，我去应聘车厂的员工，面试官会比较关心汽车零部件的型号大小和使用和维修方法胜过对驾驶技巧的考核。
这可能是从针对本科生的角度来考核，如果是社会招聘可能除了基础要扎实，可能对于一些框架的使用和理解也要有一定深度吧

第一次面试因为基础不牢，只答对了很少的题目，但是面试官很Nice，说没关系，继续引导和提问下一个方面的问题。虽然最后没有告诉我名字，但还是十分感谢！
知乎程墨老师在live里说过面试的英文是interview，重点是inter，互动是双方的，心态很重要，和面试官的地位也是平等的，会什么就说什么，要不卑不亢。

会我就说，不会我就学，下次再来不是吗?

自我介绍

blabla简要介绍自己的姓名学校专业，项目经历和学习过程，介绍的可以不必太细，但是亮点可以着重介绍，引导面试官接下来提问，

项目经历

小程序

虽然写在了项目的第一个，但是面试官一句话都没问，可能是网易云对小程序方面没有业务需求，或者说实现的原理较为简单，就没有考核

J2EE选课系统

这是你一个人做的吗？
这是你的课程设计吗？
为什么用jsp做前端？
偏向于后台对吗？

可能对后台方面的考核不是重点，项目也没什么亮点，问完这个问题，面试官就过了

js游戏引擎

是使用还是自己开发？
谈一下印象比较深刻的技术吗？

谈到Game Loop面试管还是很感兴趣的，但是可惜自己没有深入研究

Game Loop实现方法

通过函数控制

1
2
3
4
5
6
initialize();
while(game running) {
    input();
    update();
    draw();
}
具体的实现方法

回答的不好..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var _runLoop = function() {
    if(mIsLoopRunning) {
        // stepA: set up for next call to _runLoop and update input!
        requestAnimationFrame( function() {_runLoop.call(mMyGame);});
        
        // stepB:compute elapsed time since last RunLoop was executed
        mCurrentTime = Date.now();
        mElapsedTime = mCurrentTime - mPreviousTime;
        mPreviousTime = mCurrentTime;
        mLagTime += mElapsedTime;
        
        // stepC:update the game the appropiate number of times.
        // update only every Milliseconds per frame.
        // if lag larger then update frames, update until caugth up.
        while((mLageTime >= kMPF) && mIsLoopRunning) {
            this.update();
            mLagTime -= KMPF;
        }
        
        // stepD:now let's draw
        this.draw(); // call MyGame.draw()
        
    }
}
canvas表现动态效果的原因

getContext()控制canvas

方法应该是只能调用一次的呀，为什么能够实现动态变化呢？

通过update函数进行定时刷新

具体的函数方法能介绍一下吗？类似setTimeOut()和setInterval()的一个函数
getContext()参数的取值

“2d”, 导致建立一个 CanvasRenderingContext2D 对象代表一个二维渲染上下文。

“webgl” (或”experimental-webgl”) 这将创建一个 WebGLRenderingContext 代表三维渲染上下文对象。这种情况下只能在浏览器实现WebGL 版本1(OpenGL ES 2.0)。

“webgl2” (或 “experimental-webgl2”) 这将创建一个 WebGL2RenderingContext 代表三维渲染上下文对象。这种情况下只能在浏览器实现 WebGL 版本2 (OpenGL ES 3.0)。

“bitmaprenderer” 这将创建一个 ImageBitmapRenderingContext 只提供功能去替换指定 canvas 的ImageBitmap内容

在你们这个项目中使用的是那种类型的参数呢？

webgl

canvas不支持webgl的替代支持的类型是那个？
游戏开始加载过程器的执行逻辑？

资源管理的过程，保证游戏流畅性

基础部分

CSS

盒模型的组成
css中指的是那个部分

chorme 中的宽度属性100px 指的是哪几个部分？

box-sizing 属性

content-box
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit
规定应从父元素继承 box-sizing 属性的值。

清除浮动的方法

http://blog.csdn.net/xingxing1828/article/details/51245257

  • 父级DIV定义高度
  • 结尾处加空标签 clear:both;
  • 父级DIV定义伪类:after
  • 父级DIV overflow:hidden;
  • 父级DIV overflow:auto;
  • 父级DIV 一起浮动
  • 父级DIV display:table
  • 结尾br定义 clear:both;
clear:both是不是要在每一个清除浮动的元素上面都设置这个属性呢？能不能通过伪类来做呢？
可以通过一个额外的类加在dom上

div:after

IE8 和 非IE浏览器才支持:after,zoom属性可以解决IE6，iE7的浮动问题

css中的动画属性

css了解不多，用过wx小程序的api

动画是使元素从一种样式逐渐变化为另一种样式的效果。

语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

说来听听

真的不该给自己挖坑的…wx动画的api是封装的，没有理解过原理

是用js做的动画吗
css中的单臂(?)变化，就是对元素进行平移和缩放操作的话

transform: none|transform-functions;

能列举一下它的属性吗

translateX(x)
translateY(y)
…

http://www.w3school.com.cn/cssref/pr_transform.asp

能列举几个选择器吗

类，id,标签，后代，子元素选择器…

相邻兄弟选择器:
h1 + p {margin-top:50px;}

选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素

面试官：嗯嗯好好行…

知道啥是伪类选择器不

用在a元素上的
link
visited
hover
active

那个优先级高呢？

love & hate
Link–visited–hover–active

id 和 类 选择器优先级
有没有办法让类选择高于id选择器？能不能解释下？

当时没想到..

!important 提升样式规则的优先权

伪类和伪元素的概念

CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。

1
2
3
4
5
6
7
// 伪类
p>i:first-child { color: red; }
// 伪元素
p:first-leter { color: red; }
<p><i class="first-child">test</i></p>
<p>test</p>

https://segmentfault.com/a/1190000000484493

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

JS

document.querySelectorAll()用过吗

没有..

返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList

删除数组第一个元素，用数组的原生方法做到

array.splice(index,len,[item]):会改变原有数据
array.shift()
array.slice(start,end):不改变原有数据

咋么用呢？作用是啥呢？
pipeOf方法..？

这个没理解面试官的考点

jQuery()

each()方法怎么用，参数是啥？

each() 方法规定为每个匹配元素规定运行的函数。

$(selector).each(function(index,element))

ES6
箭头函数好处都有啥？

相当于匿名函数，简化了函数定义
修复了this指向，简化this绑定

更换方法的this对象

通过bind,call和apply可以重新定义函数的执行环境，即this的指向

https://www.cnblogs.com/tingyu-blog/p/6212392.html

如果不支持bind()呢,就是bind函数的兼容性知道吗？

https://segmentfault.com/q/1010000011713635/

异步请求你用的是jQuery封装好的吗？自己实现过吗？

考察ajax的实现方法

啥时候表示异步请求已经完成了呢？

xhr.readyState == 4 && xhr.status == 200

服务端数据如何转换为json对象

JSON.stringify() (JSON -> 字符串)
JSON.parse() (字符串-> JSON)

当时不知道怎么就说了个toJSON()方法…

那个对象有这个方法呢？

Date.toJSON()方法..

js中有哪些本地存储的方法呢？
比如说cookie呢，类似的还有别的方法吗？

localstorage , sessionStorage

http://blog.csdn.net/darrenzzb66/article/details/73012577

cookie有了解过吗？
怎么样使用localStorage设置一个值呢？

localStorage本身带有方法有

　　添加键值对：localStorage.setItem(key,value)

　　获取键值：localStorage.getItem(key)

　　删除键值对：localStorage.removeItem(key)。

　　清除所有键值对：localStorage.clear()。

　　获取localStorage的属性名称（键名称）：localStorage.key(index)。 　　

如果让你做一个弹窗的遮罩咋做
1
2
3
4
5
6
7
8
.modal {
    position:fixed:
    width:100%;
    height:100%;
    top:0px; //！！
    left:0px;  //!!
}
<div class="modal"></div>
这个div放在哪里

我以为是问div相对文本流的位置，然后面试官是我其实想问的是在html代码里，你把遮罩的html代码放在哪里
我说开头，我感觉这么问可能是有优化空间，我问面试官，他说，我就随便问问哈..幽默..

对于这个div还有别的设置吗？

z-index设置层级

position:fixed相对于那里定位

相对于浏览器的窗口

如果想让它可以上下滚动呢？

position:absolute

position:fixed可以设置相对的对象吗？

就是默认相对浏览器定位，有办法改变这个行为吗？

fixed相对父容器定位，不通过top和left等样式,通过margin定位

Es6你用的比较溜的有哪些

箭头函数，解构赋值, await async

await async 你是怎么使用的呢？
用过promise吗？

用过..(别挖坑了行吗…)

promise有哪些状态呢

等待（pending）、已完成（fulfilled）、已拒绝（rejected）

你能说一下怎么创建一个promise呢

https://www.cnblogs.com/huansky/p/6064402.html

ES6的class新特性用过吗?

可能面试官是想了解class基本语法，但是没能回答出来

你平时是怎么学习前端的呢？

可能是想了解学习路线和遇到问题时和解决问题的方法

平时技术选型是自己来定的，你是怎么决定的呢？

比如说Angular像React等，你在项目立项的时候是如何来确定项目使用的技术呢？

多考虑一些呢？除了对它是否熟悉之外？有没有别的考虑？

面试官可能想了解对框架的理解深度，回答的不是很好..

你有什么想问的吗？

您的笔名或者名字方便透露吗？

不太方便hhh..

JD中类React框架的使用场景？
项目组的技术栈和技术人员比例？

由于云音乐立项早，大部分用的是NEJ，已经有一些不太适合新的项目的开发，逐渐用React来取代原来的NEJ，所以对React有一些要求，最好能够熟悉，如果不了解也没关系

前端 * 1.5 ~ 2.0 = 后台

然后就是标准结局：有消息再通知你吧

结语

基础很重要，由于基础不太好，不太了解面试官想考什么，想让我回答什么，和这个知识引申出的其他知识点有啥…这导致没办法和面试官做进一步的交流，也无法给面试官留下一个好的印象

不要小看大厂的面试官，如果觉得你不了解，会继续问下去，所以最好避免给自己挖坑，当然这只是小事，重点还是需要提升自身的实力

并且对于项目来说一定要有亮点，或者说是对某一个知识点有自己的看法，可以和面试官深入讨论下去，引导面试官对你熟悉的东西进行提问，让他了解你对这个知识的了解深度，避免让面试官问你一些比较官方的内容来评价你的水平

嗯就这么多，第一次参加面试虽然失利但是确实能静下心来学习基础的知识了，明年三月再战。