网易互娱一面复盘

网易互娱一面复盘

前言

最近在忙实验和项目，断断续续的学习和面试，眼看要四面了，发一波在硬盘里放了很久的面经，攒攒人品，许愿offer！

（4.20晚）
面试总的来说体验很好，在牛客网上面进行的视频面试。这是我第一次视频面试，没想到能见到面试官的真容，还是两位面试官，当时就感觉很有排面。
过程中面试官那边卡顿了三次（也可能是我网络的问题），虽然网络原因，交流起来有时候会互相打断对话，但是主面试官很耐心也很友善，会让我先讲完，有一位小姐姐在旁边负责调试视频设备，两位面试官人都很nice，没给我太大负担，所以我把会的都讲出来了。只是没有提到什么时候会约下一次面试，许愿一个二面的机会吧哈哈。
（4.24晚）
这天晚上我玩了一会儿公主连结R，刚在新卡池抽了60连，果不其然沉了，结果复试邮件突然就发来了（这就是传说中的非极必欧？），有点小惊喜，然后去准备第二天的二面了。
其实我笔试成绩并不是很优秀，因为是第一次用JavaScript做笔试题，时间安排不是很妥当，当时有一道最长上升序列的题没有来得及交，最后只有160/400，感谢面试官给了我面试机会。

自我介绍

（因为断网，介绍了两次，然后问了对响应式网页怎么理解）
我答的比较浅显，讲了两方面，一个是可以适应不同设备，另一个是内容（如内容的显示、隐藏）和布局的变化。

我在逛知乎的时候看到轮子哥有个很好的回答，他放了个Word软件缩放变化的动图，浅显易懂。我觉得面试的时候就该拿个例子来讲，顺便讲出自己的理解，这样面试官更能懂你的意思。
下面是轮子哥回答的链接：
什么是响应式布局设计？

关于响应式网页的具体理解

概念的话，响应式网站设计（RWD）是指这个网站可以适应不同设备的访问(手机、平板电脑、桌面计算机)，方便用户的浏览，减少用户放大缩小的操作，给用户更好的体验，简单而言就是一个界面，能在不同的设备上访问并看到不同的效果，针对的是展示形式。
与RWD概念相似的还有自适应网站设计（AWD），AWD设计出的网站同样也能适应不同的设备，但区别在于AWD版式统一，只会让页面随着宽度变化进行自适应的变化。所以AWD的缺点很明显，如果页面太小，内容就会非常拥挤。而RWD正是为了解决这一问题而衍生出的概念。

1、作为项目的队长、组长，你是怎么在前端这方面发挥作用的

先是在需求分析阶段组织好成员沟通需求，必要时通过交互原型或者静态的原型图的方式来形成设计稿。

2、了解css中有哪些属性是可以继承的吗

说实话这个问题问到我了，学艺不精，只知道宽高透明度和字体什么的(然而盒模型的height、width和透明度opacity其实是没有继承性的)。
关于继承这个定义其实我之前理解得也很模糊，我讲一下理解：
子元素的某个属性在没有给定值（在css语法中看起来就像没声明一样）的时候，子元素会选取父元素的相同属性为默认值，这种属性叫做继承属性。
有个浅显的例子是width属性，在子元素没有给定值的时候，会取父元素的宽度，然而这对width属性来说其实是特殊情况，width并不是严格意义上的继承属性。

下面是我从网上找到的一些答案。

1、字体系列属性:
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
2、文本系列属性:
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
direction：规定文本的书写方向
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色
3、元素可见性：
visibility：控制元素显示隐藏
4、列表布局属性：
list-style：列表风格，包括list-style-type、list-style-image等
5、光标属性：
cursor：光标显示为何种形态

3、了解css预编译吗

（我讲了浏览器网页渲染的cssom的构建，其实应该答Sass、Less、Stylus那些预处理器）
目前很多大厂的求职要求里都会赫然写着Sass、Less这些语言，实际上它们就是css预处理器。它们基于css的语法基础，引入了一些编程语言才具备的功能，可以通过表达式、函数、变量、循环、判断等功能来帮助我们书写一些重复的css，在一些极端的情况下，可以省下开发者很多时间。

css预处理器解决了我们书写css时的一些问题：
1、语法不够强大，比如说无法嵌套书写，导致模块化开发汇总需要书写很多重复的选择器；
2、没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

css预处理器通过函数、循环等方式，解决了第一个问题，通过变量复用等等，解决了第二个问题。因此，我们很容易看到css预处理器对我们的帮助在于：提供样式复用、减少冗余代码，提供样式代码的可维护性。css预处理器的存在，并不是锦上添花的存在，因为在正常的开发中，使用它不一定会减少代码量；它恰恰适合那种需要我们用编程语言特性才能解决的场景，下面有个很好理解的例子：

.w1{
    width：1%;
}
.w2{
    width：2%;
}
......
.w100{
    width：100%;
}

实际开发中不会有这么极端的例子，但这种需要大量书写的情况正是传统css难以解决的难题（就不怕Ctrl键用坏了吗哈哈哈），而css预处理器扩展了css的边界和能力，比如说用sass可以这么写：

/* 从1遍历到100 */
@for $i from 1 through 100{
    /* 样式名，#{}是一个插值语句，我们把变量i插入了样式名 */
    .w#{$i}
    /* 属性值 */
    {width:1%*$i;}
}

4、平时有遇到一些js的转换吗

讲了用babel进行es6到es5的转换，当时在写小程序的时候，也是有默认将es6转为es5的。

5、每天花在学习前端的时间

最近是上午上网课，下午学习大概4小时（一般是看书和文档），晚上是睡前写2-3小时的博客，就顺便整理下每天学习的内容（有项目或者作业也会在晚上做）。
总共是7个小时吧。

6、平时除了项目以外怎么学习前端知识

看书看文档，刷刷博客，也会和同学交流。

7、前沿的前端知识怎么去接触和学习

恕我直言，平时靠公众号和博客了解，github上没怎么看前端的内容（除了框架源码）。

8、小程序web-view那个是什么，服务器上的php怎么实现的

讲了下项目，web-view是小程序的一个用来显示h5页面的组件，我拿来显示公众号文章，代码其实很简单，传入一个h5地址即可；php是用curl请求获取了公众号文章，为了公众号密钥的保密性，所以是在服务器上调用接口来保存access_token，而不是在小程序的js代码中去调用接口。

9、你平时用过哪些服务器

阿里云和腾讯云。

10、canvas那个证件裁剪怎么实现的，是借鉴了网上的还是自己想的

自己想的，在ps上取了证件模板的尺寸，还有相框尺寸之类的，然后写了个证件和人脸图片的图层覆盖的算法，主要是需要进行旋转和平移，最后在canvas组件上进行显示，并且生成图片到相册。

11、平时是自己写css，还是会用一些现成的样式库

一般是自己写，比较靠谱（bootstrap还是用得挺多的）

12、对Cookie怎么理解的，讲下你知道的

讲了服务端分发（当时被面试官问了是不是服务端分发的，我立马说是，后来仔细琢磨，感觉好像被忽悠了），大小4K，不适合作为存储。

确切地说，Cookie是通过在客户端记录信息确定用户身份，进行会话跟踪的。cookie里的信息是服务端发送给客户端的特殊信息，但这些信息最后以文本文件的形式存放在了客户端。也就是说并不是服务端分发，是客户端（浏览器）把服务端响应的信息存入了Cookie文件，这个Cookie其实是客户端的行为生成的。

13、平时玩网易游戏吗

玩得少，因为游戏瘾不大，所以只看不玩，对率土之滨、第五人格这些有了解，看过视频解说。

14、遇到一些开发问题，一般是怎么解决的

举了个栗子，之前centos部署mysql应用崩了，内网查不到外网查原因，了解是操作系统问题，对mysql数据库不支持之后，换ubuntu后解决

15、对全栈怎么理解，除了前端还对哪些方面感兴趣

讲了下自己后端有一些实践，以后想要进阶成全栈攻城狮，对人工智能也很有兴趣，在校期间有做竞赛和科研实践。

16、向面试官提问：

~平时主要做网页吗，会不会接触页游？
（我面试的面试官是Web前端的，他说他们一般是做游戏产品的网页，页游一般是没有的，但不排除未来会接触到，网易是做端游和手游为主）
二面的时候从小姐姐那里了解到，也会有游戏的嵌入式网页（我想大概就是webview做容器吧，玩少女前线的时候经常见到）。

~提前实习ok吗？
（这个要和hr沟通）

~互娱的web前端技术栈是怎样的？
（vue，但支持学习新的框架，只要方便且有利于开发）