mrweilian/blog

notebook for my work

blog

前端成长笔记

记录一下菜鸟前端的面试路吧

多益

• 多益面试
  

37互娱

• 37面试
  

酷狗

• 酷狗
  

blog's Issues

37面试

三七面试也是先做了一轮笔试题

又要靠记忆力极力回想了

大概是：
1.用h5标签写一个标准的网页结构。
2.为一个input添加需求样式。（背景色，背景图，背景定位，圆角，对齐，清楚浮动。。。）
3.css选择器的优先级，及如何优化css代码编写
4.数组题。（记不太清了）①排序。②收尾插入元素。③中间插入几个元素。④数组去重。
5.正则校验手机、邮箱等等
6.以愤怒的小鸟h5游戏为例，解决游戏卡顿，闪退等优化建议

hr初试

谈了很多关于职业规划，我个人的性格爱好，交流能力，喜欢和怎么样的同事相处...很多很多

技术面

1.谈谈项目，项目的难点，怎么解决的。主要针对了我一个h5sdk的项目进行详细询问。iframe和父页面之间如何通信，html和ios客户端如何通信。知不知道postMessage底层实现是怎么做到的，在浏览器怎么运行的。postMessage在页面间的通信是否安全。postMessage怎么和客户端通信的，知道原理吗。（基本只能回答前面的问题吧，后面的都不会额）
这题后面查了查安全性，如果postMessage第二个参数用"*"，涉及到用户敏感信息，确实会存在安全风险。


2.localstorage是什么，可以用来做什么。
3.模拟了一个实际需求，给出设计稿尺寸，问我适配的方案，不能出现滚动条，主要是怎么兼容iphoneX。接着就谈到了viewport，对viewport在移动端的理解，以及相关属性设置的值会带来什么影响。还有对dpi的还原。
4.问了什么是rem，rem的原理，设置rem的方法（js动态设置，css media）
5.了解https吗，https怎么保证安全性的，说说https的证书。
6.（计算机网络）TCP协议的对应层的对应功能，对称加密和非对称加密是什么。
7.vue的v-model及v-for的问题，vue开发表单怎么最简化代码书写。（没用过vue开发表单，基本凉了）
8.看了笔试题问了我有关正则表达式的问题，要我列举匹配一个用户输入的时间需要主要的边界处理问题。（月份不能大于13，年份不能超过当前年，不能为负数等等）
9.问我对模块化的理解，如何实现模块化编程。
10.什么是原型，什么是原型链，举出具体的例子说明。
11.怎么实现继承，手写出常见的继承方式，说说不同的继承方式存在什么缺点。

酷狗

不管面试成功与否，机会我也自己争取了（脸皮真的变厚了哈哈哈哈哈）。不过感觉这句话是真的，机会都是要自己去争取的。

面试总结：
1.面试官进来先问了我关于项目的内容，这里就谈到了一些iframe的跨域，前端和ios客户端通过postMessage的交互，还有一些交互逻辑的处理。也谈到了ajax，还有一些对于敏感信息的转码。还问了我这个项目的用户量有多少等等吧。
2.http协议知道吗，说说http协议，tcp/ip的传输流程，分别在每个层做了什么。http1.1的一些相关。
3.https知道吗，https和http的区别是什么。ssl的整个请求流程是怎么样的。对称加密和非对称加密的原理，优缺点。证书是怎么来的。那https有什么样的不好，什么情况才要采用https。
3.了解http的缓存吗，强缓存和弱缓存有什么区别，他们的一些请求头和响应头是怎么样的，强缓存命中的时候，请求回返回什么样的状态码。
4.手写了一个for循环和setTimeout的考题给我，是考察关于闭包的，问我相关的输出是什么，我答了，然后问我怎么达到他想要的效果（采用闭包，let，setTimeout的第三个参数...）
5.手写了一个链式调用 Mask('jack').sleep(5).**()。大概是这样的吧，问我每次函数结束后要返回什么？
6.一个异步加载的元素，你需要获取他并绑定事件，怎么确定你一定能绑定到。知道事件绑定的原理吗。
7.promise和setTimeout有什么区别，他们怎么执行，什么是宏任务什么是微任务，执行顺序又是怎么样的。
8.讲一下js的原型，原型链。讲一下js的继承方式。（基本是我答一种，他就问一种的有缺点和解决方案）
9.对vue的生命周期钩子了解吗，用哪个用得最多，用来做什么处理，为什么要在这一步做着一种处理。
10.讲一下vue2.0的虚拟dom，还有vue怎么实现数组的数据驱动。（额，数组的没答上来，只答了vue内部另外封装了一个方法去...）
11.看到你这个播放器的项目，讲述一下他的整体，有哪些功能，哪些界面。
12.播放器的进度条怎么实现的，讲讲你的思路。
13.播放器有做过歌词吗，是怎么样实现的。（额，这不会，没答上来）
14.有做过什么动画吗？我答css的tansition，animation，还有js动画。有用过canvas做动画吗？有。做的什么动画？帧动画。那你做起来发现有什么缺点吗？图片资源需求量大，加载时长，容易出现白屏，闪屏
15.svg有用过吗，用来做了什么，使用js控制的吗。
16.如果一个用户打开了你的网页发现打不开，你说说可能出现的情况，你想到的都可以说。

我基本上问完了，你有什么问题问我的吗。 1.我问了公司的技术栈，主要开发的业务。 2.还问了公司有没有自己的框架，还有没有使用jq这种比较老旧的技术。 3.问了他公司用什么做的动画，他告诉我也是canvas做帧动画，说效果不是很满意，正想方案代替。

最后面完了，面试官跟我说了一段话，让我非常的有感触吧，让我感觉自己的努力复习还是有一点效果的，我还是有在进步的。

他说：你是没有被邀请自己过来面试的，但是总体下来我觉得你挺不错的。我会把情况向上面反馈，接下来可能会有复试。因为今天面试的人比较多，你留个联系方式，如果有复试会通知你过来复试的。

嗯，其实吧，很感谢这个面试官。谢谢他面试我，给了我机会，当然这机会也算是我自己争取来的吧，还是非常感谢他面试我。面试这一场，学习到了很多，最深的感触还是那句话：机会都是自己争取来的，都是留给有准备的人的。是吧，希望接下来的一切都顺利，要是能进入复试就更好啦，哈哈。我就继续努力加油，继续期待幸运吧。

多益网络

总的来说多益网络的这次的考察，主要是一个前端的上限吧，也就是前端的天花板知识，这也反映出来了自己的很多不足，日后还要继续加强学习~

第一轮是笔试，印象中的题目

1.垂直水平居中的方法。
2. var a="a123",b="b234";不调用其他变量交换值。（我用的是解构赋值，不知道对不对）
[a,b] = [b,a]
3.正则表达式匹配邮箱。
4.写一个es5规范的继承
5.三个基于promise的异步函数，写一个A→B→C调用的代码，依次执行。
我用的是async。
6.长度超过10000且类型是number的数组args，求最大值。（我用的是冒泡排序的方法的第一层）
7.写对http的理解和http的底层实现。
8.2道关于闭包和输出考察题目，涉及for循环中的let和相关闭包考察。
9.关于event loop的考察。写出一段script代码+setTimeout+promise.then的输出顺序，并写明原理
10.除了压缩代码，合并文件，提出优化网站首屏显示速度的方法。
（这里手贱写了http2，结果面试官就深入考察，自己坑自己）
11.写vue的双向绑定原理和依赖收集的实现。
12.原生js实现一个前端路由。（比较简单吧，理好逻辑就行，hashchange）


总的来说笔试难度一般般吧，有点js基础的基本没什么问题

接着是面试了

面试是2个面试官来面试，我估计应该是一个前端一个后端吧，当时没问，考察的知识比较...开始总结吧哈哈

1.一开始主要是针对我的项目开始问我的，我做过的项目，优缺点有什么，实现什么功能，有什么开发难点，然后他现场给我提需求，叫我提供解决思路。（项目回答得还行）
2.问了vue的数据驱动原理，并且在set之后vue会做了什么。（答得一般）
3.vue的组件通信，$emit是怎么实现的，如果用原生js怎么实现。（只会第一问，后面不会）
4.浏览器缓存有什么，分别讲下强缓存和协商缓存。（这个回答得半斤八两吧，年前看过相关的文章，面试前没复习，那些设置的头部的忘记了）
5.问了了解什么安全知识，分别讲下。回答了xss和csrf。接着问csrf中文名是什么，攻击者怎么实现攻击，应该怎么防范。（也回答得一般，怎么实现攻击的自己也不太了解，大概说了一下嵌套iframe模拟点击按钮点击吧）
6.看到你这里写着http2，说一下http2对于优化的优势。我答多路复用，浏览器加载就不会限制在6条请求里，可以多资源加载。接着问我底层是怎么实现多路复用的。（emmm... 不会）
7.数据结构的相关，问了二叉树是怎么样的，怎么用js实现一个二叉树。
8.问了我一些算法的原理，时间复杂度。
9.https和http的区别是什么。我答了，接着问tcp和tls的过程是怎么样的。为什么要三次握手。为什么要四次挥手。四次挥手多出来的一次是什么。（问道后面就不太会了）
10.对称加密和非对称加密是什么，有什么区别。什么时候要用非对称和对称。怎么保证防止中间人攻击。https的证书是怎么工作原理的。（emmm...不会）


emmm，总体来说，面试正确回答率的话只有50%左右。。。然后面试官也很赏脸说可以培养，把我放进了终面

终面是个技术主管，问的技术层面的不多。依稀记得就问了js自己是怎么实现异步的，还有一道算法题。主要是讨论了很多人生方面的，探讨了我女朋友，和我的未来规划。

最后成功拿offer啦，我会继续努力的~