我的前端准备+面试之路！！不要放弃！

发现做前端的人真是少之又少啊！也没有人讲讲怎么学习啊，怎么准备啊，面试都考什么啊之类的。于是，在我今天拿到Linkedin口头offer之后（明天谈细节），以及还有另外一个相对小公司的offer之后，决定造福大家！

先说说offer， 目前只知道是Linkedin Web Developer, 还不知道哪个组之类的。另外一个offer的公司是 AOL收购的mid-size company。明天看看情况，应该会应了Linkedin
Linkedin 把前端不算engineer 算是product组, 真是的。。怎么瞧不起人呢=。= 不过其实有他自己的道理啦，和designer走的更近，更方便工作。

LZ 背景： Brandeis U CS 硕士。没有在本科或者研究生学过算法。。。。说多了都是泪。。后来实习发现前端好有意思，从此踏入一趟“浑水”。但是实在喜欢JavaScript--我知道一般人都受不了它。。但是由于没好好学过java 学起JS 还是相当顺手的哈哈哈！就只好硬着头皮找前端工作啊。

前端的工作其实一点都不简单！谁说简单我一定找他拼命。。那真是没有深入接触过前端！其实很多公司希望你先是engineer 然后才是前端工程师，有点像是specialty的意思。所以我感觉前端的职位，面向new grads的其实不多。找起来也相当辛苦。我总共有过5个onsite 面试，前3个都悲剧了，从第四个开始发光了！！我最后到手的这两个offer可以充分说明前端要如何准备，要如何面试--因为！！因为！！因为这俩公司考的大方向，完！全！不！一！样！ 一个7轮基本纯算法，另一个6轮基本没算法（特指onsite 数量），全是html, css, js！我先来说说看怎么准备！

如何学习/准备

您好！
本帖隐藏的内容需要积分高于 188 才可浏览
您当前积分为 0。
使用VIP即刻解锁阅读权限或查看其他获取积分的方式

游客，您好！
本帖隐藏的内容需要积分高于 188 才可浏览
您当前积分为 0。
VIP即刻解锁阅读权限 或 查看其他获取积分的方式
Unlock interview details and practice with AI
Curated Interview Questions from Top Companies

记得我看了中间几章，array 之前。最好的就是讲了一些pattern啊，几种function invoke的方式和不同啊之类的，被奉为业内经典，是Yahoo!以前某著名JS 架构师（大概啊）写的

C.The secret of JS ninja:
绝对是进阶的超好书籍！apply call的用法都讲的相当清楚。我看到第6章我记得，觉得应该再好好复习

D.JS tricky question test:
决定自己超懂JS的时候，做做这套题。。你就知道自己还不够了。。答案和讲解在这里：

E.绝对的一套好题：node.js tutorial functional JS:
找到Electives那部分的functional js 安装然后一道一道做，node会有test， 有verify的程序 你按照操作来，会发现超好的学习资料！

就大概是这些吧。。今晚困了。。明天继续html css DOM 然后是面试。。不要急。。睡了晚安！

3.HTML和CSS
css和html 这东西吧我后来发现其实是最不容易的。为什么这么说呢？因为最难的没有规则的， 没有唯一解的东西。你说我写个js算法,无论怎么样, 总有个结果,对还是错。但是html css就不一样了，怎么写都可以，你怎么写都可以这里我是用div 还是用section, 要不要在这几个div外面加一个wrapper， 这几个element是加一个class还是分开不同的class.
写css的时候要不要特别具体，把parent class都列上来，还是就单独写个child element的类。无论你怎么做，结果可能都是对的，但是面试官喜欢哪一种，哪一种才是好的习惯，很少有定论的。。所以就很头疼。我linkedin的面试，绝对是第一个公司考我html css的我只能凭着自学来的东西，把我认为对的写上去。

然后说说怎么学CSS？
我真不记得我最最开始怎么学的了，应该就是w3school查的。
有几条得知道的：
1.css box model是什么？
2.padding margin 最基本了吧
3.inline element, block element, inline-block element 都有什么区别
4.position: relative, absolute, fixed 有什么区别
5.float:是干嘛的 如何clear float? parent div如果child divs都是float 会有什么情况发生？（parent div collapse. use overflow:hidden 可以清除）
6.两个并排的div,如何让左边的固定宽度，右边的占据whatever left。这样基本左边的div 宽度调整，右边的还是占据剩下所有的宽度
7.还被问过pesudo-element干嘛用。
8.!important干嘛用的
9.CSS SPECIFICITY！！！！！一定好好研究！光告诉我什么inline style=1000, id=100, class=10 就算了吧！没抓住重点呢还。而且这样想也不太对，那按照你这意思是11个叠加的class 就可以覆盖id的style了么？ 肯定错。。1，绝对不会覆盖，2，之前webkit的bug也不是11个会叠加 是256个，但是现在改过来了。自己好好看看去啊！还有first-letter first-line的特殊情况。这个我是没被考，但是glassdoor上面有人说考过很多。

css最好的办法就是实践！实践完把一些东西记录下来，不然以后肯定忘。。。
css trick: http://css-tricks.com/ 是个很好的网站！不过一般都是需要的时候查，会查道这个网站讲的最清楚

HTML呢？
这个吧我真不能说自己是砖家。。但是说说我知道的吧！
1.html5都有什么新的东西啊。其中提到web storage，那你说说sessionStorage localStorage有什么区别啊，他们的存储形势是什么啊（string!!!）怎么存array啊 obj啊（JSON.stringify, JSON.parse）还有个XX问我知不知道polling啊 long polling啊。当时真不知道。。。。后来知道了。
2.doctype干嘛用的。
3.能不能nest <a>
4.data attribute知道什么时候要用，做题的时候需要，linkedin电面某题我就是用data-id解决的，再加上其他地方做的也不错那俩面试官相当满意啊一个劲说linkedin很适合开始第一份工作啊知不知道啊啊啊！！！

我还是给大家贴格链接吧，那里面的前端题目有些公司在开始电话面试的时候真的会问到，其中真有人问我你最喜欢IE哪点。。我直接说 啊这个我不喜欢IE。。下次再有人问我，我一定说，我最爱他那种不断努力追赶其他浏览器的态度!!!
这个是Front-End Interview Question总结：https://github.com/darcyclarke/Front-end-Developer-Interview-Questions#js，我看了大部分但不是所有，有些还是很管用的，比如JS那部分== 和 === 区别啊，call apply区别的都很基本但是真的有被问到。
还有front end tricky question：http://davidshariff.com/quiz/ 做这种题真的很容易发现自己不清楚的地方。尤其这套题里面css specificity的部分。我后来花了几个小时把这个问题搞的crystal clear 再也不怕了。

4.DOM
一般不会考，但是linkedin只考html css js我还是担心会考。但是我真没有太多发言权说这个。找本书先看看基本方法吧.
1.搞明白nodeList, HTMLCollection 也就是querySelectorAll或者getElementById之类的seletor 返回的数据结构是什么，真不是array --> var newArr = Array.prototype.slice.call(ArrayLike) 就可以把ArrayLike"变成" array, 保存在newArr中这方法太常见一定要会
2.如何定义一个function使得所有node element都有这个function:HTMLElement.prototype.funcName
3.多练练，jquery也可以啦

比如我被问过写个数独游戏出来吧！你去试试看，其实真的是个不错的练习。虽然这公司把我拒了，但是我觉得每次练习都是为了最后那一次成功打下了基础！好久不做这种全套练习，做一次我觉得真的有助linkedin的面试。

5.常考的几道题：
1.what will happen after I input an url in a browser and hit enter?  StackOverflow原题，把那几步写下来，我被问了至少三次！
2.How do you make a website faster?  什么css sprite, load picture only when needed, load js only when needed, 我记得我写了7个方法，也至少被问过三次.
3.GET 和 POST区别！妈妈咪呀问了4，5次了。我现在可以说出6点不同至少。。
4.what's cookie and how tow set it?
5.what's iframe?
6.what's csrf? (其实不太长考但是最好知道，我大概被问了两次？)
好像差不多了。。反正我有个笔记本，专门记录html js css的学习笔记还有每次被问过的题目以及答案，面试前看那个本心里好踏实，最后面linkedin的时候，只剩最后一页是空白的，（当然 呵呵，我笔记只写单面，看着清楚哈）厚厚一本还蛮有成就感的。我就觉得我算法也复习好了，前端知识我能想到的我都看了，再过不去，就真的不是我的问题了。

回头继续面经！总共5次onsite经历，肯定没有大牛多，但是鉴于这里这么少的前端经验，还是对大家应该有点用的。

neusharon 发表于 2014-10-27 03:22
大赞楼主很努力的码字！
我也是很喜欢用js，现在找工作也打算找js相关的，之前担心搞前段和js开发的都是老 ...

我从来不管他们那些牛人。。他们爱干嘛干嘛。。我就喜欢前端，前端我感觉多少还和艺术沾点边儿啊，不会感觉太ds哈哈哈。而且我就是喜欢那种成就感，做个东西那个界面就很听话，该干嘛干嘛，然后再想想怎么和数据绑定最有效率，就觉得很有意思，不会觉得无聊啊。不要管他们哈，自己喜欢js就做js好啦，我发现他们不会前端的找你帮忙弄个很简单的东西，他们就觉得好神奇哈哈哈。我无可救药的虚荣心~~~~~其实就是感觉被需要嘛。。。lol

目前在公司里转成前端了，主要是觉得性格上就是喜欢fancy的东西。
前端还特别适合外貌协会和颜控！对于设计一定到比选男女朋友还要挑啊！
前端面试时间不够的话，可以把leetcode难的题都跳过吧。
有时间的话我也写一篇文章说说前端和万能的JS！

赞前端总结！lz有没有什么项目经验帮你过简历关的？

哇，必须赞啊！之前看前端那些东西也觉得没有说的那么简单，在那边找工作会觉得有很多NEU这边的学生在竞争么？不过真心厉害，面了就给口头offer了，我也要好好刷题了呢！

大赞楼主，等着看后续！！！

hellosniper 发表于 2014-9-12 21:51
顶楼主，好心分享面经，祝一切顺利

谢谢啦！！今天继续努力！

Deckardmzr 发表于 2014-9-13 00:00
赞前端总结！lz有没有什么项目经验帮你过简历关的？

有！！前端new grads最重要的就是展示！虽然无数人和我说过很多遍什么就刷题最重要啦，但是我坚持先做了个自己的网站 www.guangyi.me 现在还有问题。。但是看过的面试官都说 impressed之类的。我觉得这个网站绝对给我带来了一些电面机会！

huangyu 发表于 2014-9-13 00:42
哇，必须赞啊！之前看前端那些东西也觉得没有说的那么简单，在那边找工作会觉得有很多NEU这边的学生在竞争 ...

一路走来，我总结出来的前端就是，有了电面之后 Algorith + HTML + CSS + JS都准备好了。。就好了。。。所以先加油刷题！！！

小K 发表于 2014-9-13 01:58
大赞楼主，等着看后续！！！

哇！有人看好激动，现在继续！

一点点飞 发表于 2014-9-13 02:42
有！！前端new grads最重要的就是展示！虽然无数人和我说过很多遍什么就刷题最重要啦，但是我坚持先做了 ...

恩，感觉这个展示也很重要哈，能看的出你对新技术的passion