一位女程序猿前端学习7天之“旅”的故事

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

4月9号

收到360的笔试通知过了，然后需要完成前端星计划的项目，花了3天时间，把项目做完了，然后交了，感觉自己做的不是很好，农历和阴历之间的转化算法不清楚，所以这一块的功能就没有做，虽然在网上看到过这部分的代码，但还是没有copy上去本来不抱希望的，然后15号的晚上，接到360奇舞团波波老师的电话，通知让去北京培训，培训完后，进行最后一轮筛选，有点犹豫要不要过去，因为，如果最后没有选上，时间，金钱，精力都白白浪费了。事实证明这种想法是错的，真的没有白去

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

4月20号

19号晚上出发，然后20号达到北京，相对其他全国各地的同学，我来的很早，因为21号和HR约了面试，对于这三个面试，可能是已经有offer保底的了，我不是很担心，经验教训，千万不要不要这么想，这个一会和大家详聊。到达北京后，一位师兄去接的我，真的非常非常感谢师兄，人好而且代码技术很厉害，哈哈！师兄把家让给我住，自己去和别人挤去了，感动ing，然后20号就睡过去了，坐车坐的昏天暗地。

4月21号

早上七点钟起床，做了两个小时的公交，达到望京soho，和HR约的是11点，不想说soho真的很高大上，这里面的大小公司很多，然后我到达16楼，找到了Darel敢玩公司，开始了面试之旅，HR找了个面试官，看起来萎靡不振，无精打采的，我估计是累的，程序员的宿命。拿着我的简历，看着简历，不说话，我就主动和他说。

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

2：谈到css动画效果？我给他看我做的项目，涉及到无缝滚动的效果，面试官觉得我这种做法不优化问我有木有其它方法，我不太清楚，然后他给我讲了。。。。。。

3：面试官很直接，问我带电脑没有，我说带了，他说开代码。。。。。

4：问我margin能不能为负数的问题？面试官让我敲代码，我就开敲了，（这个是自己给自己埋坑了，有的话不该说就不要说）

5：面试官问我，了不了解公司？为什么想来公司？对前端的就业前景怎么样？--好像答的不够理想。这个问题还是得找下中规中距的答案。。。。。

6：在敲代码的过程中，为了不冷场，我努力的找面试官说话，事实证明，我是错的，面试官好像很不喜欢别人问他问题，不该问的不要问，等到面试官让你问他问题的时候再问

差不多聊了半个多小时，我才知道，他们公司只有他一个人做前端，加上做Andriod和Ios，研发部加起来一共6个人，他要负责移动端和pc端。我的天，难怪无精打采，小公司就是小公司，总人员加起来30多个人。后来，就没有后来了，当天晚上问了HR，挂了。。。。。

这个面试的反思就是：和面试官聊天，不要太嘻嘻哈哈，正式专注，否则给人的印象可能就是不踏实，不务实。

面完Darel敢玩公司后,吃个饭，我就坐上公交坐了2个小时,去面下午的人人的面试。

首先是，HR拿给我一份笔试题，4页的原生JS，不过都是基础题目，我感觉不难，写完差不多花了一个小时，然后HR就找了个程序员面我。

一面：程序员

1：看我简历，简历上附有作品和项目网址，然后他针对性的问了一些问题，看我博客和一些作品。

2：拿着他的APPLE电脑，叫我回答一些前端的问题，比如浮动，清除浮动；null和undefined的区别;setTimeout的原理，这个给我代码，问我输出的值是多少；还有URL加密和解密的问题；跨域问题等等

问的不是很难，但笔试题目我有的回答错了，但我还是很冷静的分析。差不多聊了40分钟吧，面试官说，OK我这边没问题，你等下，我去帮你叫下O面（前端主管面）

二面：前端主管面

我感觉他问的也不是很难。只想说，这个前端主管的眼神好坚定，我和他一直对视着，他问我问题的时候，也一直看着我。然而，我就和他对视着，哈哈哈。

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

2：如何解决跨域问题？我自己给自己埋坑了，说了iframe，然而我也不太深入了解。我说了五种方法。。。。。

3：聊到TCP和IP，udp，http,https的问题？前端主管一直揪着udp和tcp的问题不放，事实是并不了解UDP，又是自己给自己埋坑，机智的我，把话题转过去了，然而前端主管还揪着这个问题不放，我就说，这方面我不太了解。。。。。。

4：针对我的笔试题目，写了整整四大页的笔试题目，写的我头晕目眩的，面试官问了一些问题。。。。。。

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

差不多聊了40多分钟吧，我表现的好像还不错，回答的也不错。前端主管就叫我等着，找人来面我。。。。

我感觉这两个面试官，和我都挺合拍的，聊的来，哈哈哈，性格上都很开放，有激情，动力，活力。。。反正和我上午面的那个面试官的精神状态，完全不一样。。。。。

三面：HR面

hr面，反正很轻松了，问啥你就回答啥，眼睛看着对方，展示自己的自信，不要低着头，这是我总结出来的，说话看着对方，是对对方的尊重和真诚，自信。跟我聊实习工资，到岗日期，啥啥啥的，个人性格啊，家庭地址，反正是一堆的个人信息之类的，如实回答就行了。

面试到此结束，本来22号还有一个穷游网的面试，但22号要去360大厦进行培训上课了，所以，我就推了。

4月22-4月27

从22号-27号便是在360大厦总部度过的，首先介绍一下北京吧，从网申-笔试-参加360前端星云计划-北京培训，一路路刷人，自己也算幸运的，能过来上课。虽然一路上奔波劳累，但也算值了。这么多从全国各个选拔过来的小伙伴，以及一群优秀的老师（都是360技术高管）给我们上课，收获很大很大啊！

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

每一个领域，老师们又引申出了很多前沿的学习工具和新技术，总之，收获很多啊！列举一下这些天涉及到的知识点，供学习前端的孩纸参考。按照时间的先后

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

总结

总而言之，收获很多，方向更加明确了，知道自己要学习哪些东西，虽然东西很多，慢慢来，很感谢360的各位大牛，分享自己的一些干货，相信，经过培训的46名同学未来都能进入很棒的互联网公司。（忘了说了，一起上课的有两位清华大学的学生，还有一半的研究生），呜呜，感觉自己弱爆了，不过，学到了很多东西。

虽然360面试挂了，但我还是大三，还有机会，秋招可以继续，哈哈哈，努力好好修炼，这次北京培训，对自己的眼界和技术各方面，都有了一个重新认识。前方很美好，继续努力，继续修炼。对于360面试的问题，比较细节，自己需要加强各方面的联系，多敲代码，多思考，多总结！

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

原文链接：