长时间未写博客，聊聊从面试开始的北京培训之旅及感悟

好长时间没写博客了，距离上一篇博客是4月3号 ，这段时间一直在忙笔试 ，忙面试 ，还参加了培训 。故事先从面试说起 ，讲讲自己面试的经历和感悟 。有个孩子从小在南方长大 ，从没去过北方 ，带着憧憬 ，也有一丝害怕 ，拖着行李 ，背着书包 ，开启了为期9天的北京之旅 。下面的故事会很长 ，希望大家有耐心读完 。

4月9号

收到了 360 的笔试通知且通过了，接着要完成前端星计划的项目，为此花费了 3 天时间，最终把项目做完并提交了，然而感觉自己做得不太好，对于农历和阴历之间的转化算法不太清楚，所以这部分功能就没做，虽说在网上看到过这部分代码，但还是没把它复制上去，本来没抱什么希望，然后在 15 号晚上，接到了 360 奇舞团波波老师的电话，被告知要去北京培训，培训结束后会进行最后一轮筛选，对此有点犹豫要不要去，因为要是最后没被选上，时间、金钱和精力就都白白浪费了。事实证明这种想法是错的，真的没有白去

本来我是打算去北京的，因为收到的三个面试都在北京，所以准备16号去北京一起面试，之后接到波波老师的通知，就把票改签到19号去北京了。

4月20号

19号晚上出发，20号到达北京，和其他来自全国各地的同学相比，我来得很早，因为21号和HR约了面试，对于这三场面试，或许已有offer保底，所以我不太担心，不过要吸取经验教训，千万别这么想，这点稍后和大家详细聊聊。到达北京后，一位师兄来接我，真的特别感谢师兄，他人很好，代码技术也很厉害，哈哈！师兄把他住的地方让给我，自己去和其他人挤着住，我很感动，之后到了20号就睡着了，是坐车坐得晕头转向的状态 。

4月21号

早上七点钟起床，乘坐了两个小时的公交，抵达望京soho，与HR约定的时间是11点，不得不说soho确实高端大气上档次，这里面有许多大大小小的公司，随后我来到16楼，找到了Darel敢玩公司，开启了面试之旅，HR找来一位面试官，此人看起来精神不振、没精打采，我猜测是累的，这是程序员的宿命 。拿着我的简历，看着简历，不说话，我就主动和他说。

1：你githubl里面放了些什么项目？

谈到css动画效果，我向他展示我所做的项目，该项目涉及无缝滚动效果，面试官认为我这种做法不够优化，询问我是否有其他方法，我不太清楚，随后他进行了讲解......

面试官态度很直接，询问我是否带了电脑，我给予肯定答复后，他要求我打开代码。

问我margin能不能为负数，面试官让我敲代码，于是我就开始敲了，（这是自己给自己挖坑，有些话不该说就别讲）

面试官询问我，是否了解公司，为何想来公司，前端的就业前景如何，好像我回答得不够理想，这个问题还是得找个中规中矩的答案。

在敲代码时，为避免冷场，我努力找面试官交谈，结果证明我错了，面试官似乎很不喜欢别人问他问题，不该问的就别问，要等面试官让你问他问题时再问 。

差不多聊了半个多小时，我才知晓，他们公司仅他一人负责前端工作，还要兼顾安卓和苹果系统的开发，研发部总共六人，他需承担移动端与电脑端的任务。天哪，怪不得没精打采，小公司就是如此，公司总人数三十多个。之后，便没后续了，当天晚上询问了人力资源，没通过。

面试后的反思是，与面试官交流时，不能过于随便，要正式且专注，不然可能会给人留下不踏实、不务实的印象。

面试完Darel敢玩公司后，吃了顿饭，我便坐上公交，坐了两个小时，前往参加下午人人公司的面试。

首先，HR 给了我一份笔试题，是 4 页的原生 JS 内容，不过都是基础题目，我觉得不难，写完大概花了一个小时，之后 HR 找了个程序员来面试我 。

一面：程序员

看我的简历，简历上附着作品和项目网址，之后他针对性地问了一些问题，还看了我的博客和一些作品。

拿着他的苹果电脑，让我回答一些前端问题，例如浮动、清除浮动的问题，null和undefined的区别，setTimeout的原理并要求给出代码，问我输出的值是多少，还有URL加密和解密的问题，跨域问题等等。

问的难度不算大，笔试题目我存在答错的情况，不过我依旧冷静地进行分析。大概聊了40分钟，面试官表示，行，我这边没什么问题了，你稍等一下，我去帮你叫O面（前端主管面）过来

二面：前端主管面

我感觉他问的问题并非特别难。只想说，这位前端主管的眼神十分坚定。我和他一直相互对视着。他问我问题时，同样一直看着我。然而，我就这样和他对视着，哈哈哈。

1：json和jsonp以及AJAX的区别？

如何解决跨域问题，我自己给自己挖了个坑，提到了iframe，不过我对其了解并不深入，我讲了五种方法。

聊到TCP、IP、udp、http、https的问题，前端主管一直紧抓着udp和tcp的问题不放手，实际上他并不了解UDP，这是他自己给自己挖坑，机智的我把话题转移了，可是前端主管依旧揪着这个问题不放，我便说，这方面我不太清楚......

针对我的笔试题目，我写了满满四大页，写得头晕目眩，之后面试官问了一些问题。。。。。。

5：是否了解公司？这个问题，好像每个面试官都会问

差不多聊了40多分钟，我表现得似乎还可以，回答得也不错。随后前端主管让我等着，他要找人来面试我 。

我感觉这两位面试官，与我颇为契合，彼此能聊得来，哈哈哈，他们性格都很开放，充满激情、动力与活力。总之，他们和我上午面试时遇到的那位面试官的精神状态截然不同。

三面：HR面

hr面试时氛围很轻松，对方问什么就回答什么，眼睛要看着对方，以此展示自己的自信，不要低着头，我总结出说话看着对方是对对方的尊重和真诚，也是自信的体现。会跟你聊实习工资、到岗日期等，还会涉及个人性格、家庭地址等一堆个人信息，如实回答即可。

面试到这里就结束了，原本22号还有一场穷游网的面试，只是22号要去360大厦参加培训课程，因此，我把那场面试推掉了。

22号到27号是在360大厦总部度过的，先介绍一下北京，从网申开始，经过笔试，参加360前端星云计划，再到北京培训，这一路不断有人被刷掉，自己还算幸运，能够过来上课，虽说一路上奔波劳累，但也算是值得了，有这么多从全国选拔过来的小伙伴，还有一群优秀的老师，也就是360技术高管给我们上课，收获非常大！

每个老师都给我们讲解了涉及前端的各个不同领域的东西。主要包括http，TCP服务器端原理，JavaScript的开发规范，移动端的介绍，thinkjs（创始人李云银老师亲自授课），nodejs，前端架构流，cdn托管，以及如何读懂技术文档（编写javascript高级程序设计的译者李松峰老师讲解），每一个前沿技术，对自己都是一个冲击，收获真不是一般的大啊！真的要万分感谢这些老师，他们是 IT 界的技术大牛，程序员的境界竟然如此美妙！

在每一个领域，老师们都引申出了许多前沿的学习工具与新技术，总而言之，收获颇为丰富！现将这些天涉及的知识点列举出来，以供学习前端的孩子参考，依据时间的先后顺序 。

【22.上】
1.语义化的理解
2.font awesome
3.深刻理解问题的原理，修炼代码的细节
与用户进行交流互动，使得交互变得简单，在和人打交道时，能将复杂的事物简单化，这是公司日报的内容 。
JavaScript语言在脚本方面很重要，在服务器方面很重要，在客户端方面很重要，在硬件方面也很重要。
算法，可视化，数据交互，与后端的连接，新的技术，行业标准w3c标准
chrome下开发，断点调试工具。研究代码，而不是复制代码
关注新技术，写技术，业务分隔,200人做前端
代码遵循规范，拥有pc jquery mobile MVC think.js技术，适用于ios和安卓app的编译部署。
学习 积累沉淀 分享
掌握自己的方法论，形成体系的东西，关注js的安全问题，这属于程序模型与思考的范畴 。
6.中间人攻击--
客户端  ----->服务器端  
加私钥的问题A->B->C 同时给AC加私钥
【22.下】
从输入url开始，到页面加载完成，在这个过程中，HTTP与性能优方面都发生了什么事情？
2.UDP和TCP
3.三次握手，四次挥手
请求响应报文格式，TCP Clint，think.js
5.TCP Server升级为HTTP server
6.乱码问题
7.什么是http状态
header进行分类，其长度用content-length来表示。
9：压缩content-Encoding:gzip
10:get和post的区别？
11：cookie的理解？
接受编码/内容编码
抓包工具包括wireshark，抓包工具包括fiddle，抓包工具包括firebug，抓包工具包括IE8+自带工具
14：发包工具 telnet/curl | fiddle
15:http的历史
16：http性能优化问题？
17：keep-alive减少后续的握手时间
18：同域并发控制？
19：模块拆分导致更多的请求||合并请求
20：压缩
缓存存在问题，涉及Etag，涉及expires，涉及cache-control
浏览器请求有哪三种方式？分别是F5，cmd+r，忽略Expires和cache-control并发起协商请求。
23:样式内联|
24:用户心理?
大管道，异步加载，按需加载，加载提示，进度条，预判行为。
25：http性能指标 Yslow
26：http瀑布图
《图解http上野宣》，《http权威指南》，《web性能权威指南》
【23.上】
1.HTML的关键点（doctype与渲染模式|语义化）
2.doctype的作用？文档声明|
3.渲染模式 ？w3c标准模式|准标准模式
xhtml class要小写，属性用单引号，要有结束标签。
html的设计思想是什么，要兼容已有的内容，要避免产生不必要的麻烦，要解决现实问题（比如localstorage/geoloaction），要实现优雅降级，要尊重事实标准，用户的优先级高于开发者，开发者的优先级高于浏览器厂商，浏览器厂商的优先级高于标准制定者 。
6.html5标签（nav|embedded）
7.语义化（元素，属性及属性值都拥有语义含义）
8.语义化的好处？可访问性|便于seo|易读|易维护
base：用于指定基准url，以及链接打开方式（traget为空白时），meta：表示页面元数据
10：使用meta扩展html？<blockquote>--一段文字的引用|ol有序|ul无序
11：<figure>当图片无法被识别，当处于客户端时，阻止图片加载，此时可用alt表示说明
12；lang属性--规定元素内容的语言
怎样做到语义化呢？要了解标签的语义，手写html，避免使用生成工具，遵守行业通用标准，将行为、样式、结构分开 。
14：微格式|schema.org|ARIA
15：webplatform.org--学习网站
16：代码风格？rel:指定外部引入的资源与当前页面的关系
17：简单选择器的选择组合
继承时存在重叠样式，某些属性会自动继承其父元素的值，前提是没有显示指定一个值。字体系列有‘font-size，单位为px、em（一般是相对于font-size的计算值）以及百分比 。
颜色的关键字rgba，可解决使用opacity时的问题，使用opacity时，遮罩层会变为半透明，使用opacity时，文字所有的东西也会变为半透明 。
21：HSL：颜色值，饱和度，亮度
对齐方式是什么？是分散对齐，这种对齐方式适用于多行，只有多行时才会起作用。
【23.下】
1.盒模型和视觉可视化模型
2.viewport可视区域 视口
3.块级元素，inline-block元素本身是行级，
4.排版流（文档流）
  在排版流中块级元素独占一行，块级元素会受到浮动元素的影响
5.float浮动
6.如何清除浮动？clear|BFC
  浮动元素会对后续的行级元素产生影响
  ：before|:after|伪元素，伪类
BFC即块级格式化上下文，它会将自身里面的内容框起来，其中包括浮动内容，这样能使其不影响外面的元素。
BFC的创建，overflow:hidden起作用，overflow:auto起作用，BFC不会和块级元素重叠。
  BFC作用：双栏布局|清除浮动|防止margin重叠
position:fixed是相对于viewport进行固定的
9：堆叠层次 z-index
10：兄弟选择器 h2~p--跟h2并列的共样式
当选择框处于被选择的状态，对nav执行一系列的操作。
11：background size背景图片的大小
转变：全部在两秒内发生变化
13：代码风格
14:代码规范：BEM|smacss
15:css预处理器：less|sass|postcss
16：mobile和pc端
17：viewport
18:Media Query-媒体查询
19：flebox属性
【24.上】
1.变量的赋值？动态绑定|动态类型
2.JQuery
3.zepto下data方法只能处理字符串
【25.上】
1.前端工作流问题
2.合并图片的好处？减少内存开销|减少请求的次数
grunt-编译管理工具grunt-cli，它能够解决版本问题，还能针对不同的版本进行兼并 。
4.js的注意点？代码审查->编译-> 合并->压缩
针对css，进行预编译，预编译工具包括sass、less、stylus，之后进行后处理，后处理工具包括autoprefixer、Mixin，然后进行合并，最后进行压缩。
6.图片处理？压缩->合并（css spirte）
进行完整处理，先处理js，接着处理css，再处理图片，然后进行自动化测试，随后处理版本（cdn处理），最后发布上线
8.开发版本？提供静态服务器|只做基础编译|实时编译|
9.GULP与Grunt的区别？
10.GULPfile.js配置|执行？
11.webpack配置|和webpack执行
12.FIS配置工具
【25.下】
1.读写文件
2.创建http服务
3.c10k问题
Nginx存在异步非阻塞的问题，它是高性能的HTTP服务器，也是高性能的反向代理服务器。
5.io.js
6.node.js的模块--基于CommonJS
  一个单独的文件就是一个模块|
var circle，通过相对路径的方式，引用require('./circel.js') 。
  绝对路径
7.模块加载的策略
8.删除模块缓存
9.原生模块 http|url...
npm对所有模块进行统一管理，它直接把npm打包到node里面。
node.js框架，包括express，koa，sails.js，think.JS
12.ES6/7特性如下：语法改进|开发方便|
省略function关键字，省略return，涉及arrows
classes，extends继承类，super调用方法。
15.template strings
16.destructuring
17.default+rest+spread
18.modules
19.node.js最大的问题？异步的问题
callback hell嵌套情况严重，不能对错误进行统一处理，try/catch无法捕获错误。
promise可转换为另外的两种状态，一种是resolved（成功），另一种是rejected(失败)
22.callback包装为promise
promise存在什么问题，this指向存在什么问题，局部变量需要借助外部变量才能开展
生成器函数定义为 *gen(){}
generators存在问题，语义不容易理解，需要借助执行器，无法与arrows一起使用，例如yield *yield 。
Async函数基于promise，返回promise，使用async/wait更加语义化，存在错误捕获、并行处理方面的问题？
   1.stage-3
   2.没有Runtime支持
Babel是一个JavaScript编译器，它基于v8 。
28.ES6/7+Babel
执行npm install -g npm@3这个命令来安装npm的3版本，用于demo
演示，npm，认为是JavaScript模块，管理模块
从管理员，到控制器，再到用户的JavaScript文件
   view->admin->
【26.上】
1.组织与结构 LC
2.岗位分工以及分工合作流程
  技术发展路线图
  前端后端架构模式
3.web平台部--9个部门
4.网站架构
网站架构模式包括MVC分层，包括分割，包括分布式，包括集群，包括缓存，包括异步，包括冗余，包括自动化，包括安全。
6.高性能？前端性能优化|服务器性能优化|存储性能优化
7.前端性能优化？
减少HTTP请求，使用浏览器缓存，启用压缩，将css放在页面最上面，把js放在下面，减少cookie传输，进行cdn加速。
延迟一切可以延迟的，bigRender，switchable，遵循就近原则。
分布式缓存用于缓存热点数据，采用hash算法取模，使用memcache 。
9.高可用？getlab/git
10.代码协作管理
11.导航业务分析
导航特征页面简单，数据进行静态化处理，使用NGINX，采用异步方式，将文件抓取到本地文件
前端架构，浏览器优化技术，cdn，动静分离，静态资源独立进行部署，DNS，应用开发架构，开发框架
动态页面实现静态化，进行业务拆分，采用虚拟化服务器，运用分布式消息，使用分布式缓存，开展数据采集与监控，包括浏览器数据采集和服务器性能数据采集，设置系统监控报警，存在架构误区。
【26.下】
prototype是js构造器的一个特殊属性，它上面存在所有属性和方法，这些属性和方法被它的所有实例共享。
2.asynchronous
  异步：是单线程的javascript处理触发任务。
3.document ready
4.捕获阶段在最外层，先于内层
如果中间存在阻止冒泡的情况，那么会把后面的事件推到最前面去进行，这就是捕获阶段。
5.transform-origin:0 45px
计算Math.PI乘以2再乘以p的余弦值，将其结果乘以145，再加上单引号px组成的字符串
        sin
6.兼容性？框架底层封装和polyfill（实现标准库)
返回由参数组成的数组，通过调用数组的slice方法，再使用reduce方法将其元素累加起来，以此支持多个参数传递。
【27.上】
1.使用cdn以及开发工具
2.影响网络传输速度的因素
cdn是什么，接管dns，用户访问cdn节点，cdn节点内容来自源站。
4.dig|nslookup--可看到dns解析
5.cdn的优势？以前端角度看cdn
6.用于cdn加速的内容有哪些？
7.静态资源？依据url定位资源|内容允许被cdn节点缓存
8.cookie.frame.domain
9.动态资源是什么？可以被cdn加速吗？
采用jsonp方式调用，采用动态添加的方式，改变script中的src 。
11.合理回源
12.静态页面资源
13.前端公共库
14.ISP--运营商
15.流媒体加速
16.chrome|IE
17.高级js程序设计--李松峰老师
18.如何阅读和翻译？
19.如何把翻译一本书？
20.注意积累 

总结

总而言之，收获颇为丰富，方向变得更为清晰，清楚自己需要学习哪些内容，尽管学习内容众多，但可以循序渐进，非常感谢360的各位优秀人才，分享他们的一些实用知识，相信经过培训的46名同学未来都能够进入很不错的互联网公司。（忘了提及，一同上课的有两位来自清华大学的学生，还有一半是研究生），唉，感觉自己差得太远了，不过，学到了大量知识。

虽然在360的面试中失利了，不过我目前仍是大三学生，依旧存在机会，能够继续参加秋招，哈哈，要努力认真地提升自己，通过这次在北京的培训，在眼界以及技术等各个方面，都有了全新的认识。前方的前景十分美好，要持续努力，不断提升。针对360面试出现的问题，因其较为注重细节，所以自己需要在各个方面加强练习，多编写代码，多进行思考，多加以总结！

好了，一位女程序员码了3个小时的字，她的故事到此结束。希望正在学习前端的你们，看到这篇文章都能有所收获。这一字一句，都是她的真实感受。未来很美好，我们都要做一个努力上进的人。比你优秀的人很多，比你有天赋的人很多，比你学校好的人也很多。你只有更努力，更上进，更勤奋！加油！

小编推荐