(亲爱的不二)
第三方登录：2016十家公司前端面试小记 - WEB前端 - 伯乐在线
& 2016十家公司前端面试小记
春节前离职了，年后来了有一周了，把简历丢到网上后大概收到了将近七十多个面试邀请，挑了几个稍微知名一些的公司如国美京东美团百度彩票等和一些中小型公司去面试，这星期一共面了11家公司，除了阿里似乎没戏了其他的十家基本都发了口头或是正式offer，也不打算再面了，社保断了也是个麻烦事，打算从这其中挑一个就可以了。
面试过程中有做面试题的，也有直接聊的，实话讲有些面试题其实就是背书，随便一百度就能出答案的东西其实不太适合用于面试题中。例如某某css属性的用法，js某函数的作用等等。个人倾向于将实际工作中可能会遇到的问题的场景，以及各种技术的坑作为面试题，这样一则可以看出他的经验多少，二则也可以防止他做笔试题的时候手机搜索结果。
不过总体来讲基本上每家问的问题也差不多，可能不同业务的公司问的问题的侧重点不太一样，有点侧重于移动端适配css布局浏览器兼容IE hack，而有的侧重于JS逻辑面向对象设计模式考察等，如果你有三到五年左右的开发经验这些问题基本也都遇见过，就算是做个总结吧。
手写事件模型及事件代理/委托
这个算是被问到的最多次数的问题了，首先要求描述下js里面的【事件的三个阶段】，如果没听说过三个阶段，那基本上就没戏了。分别是捕获，目标，冒泡阶段，低版本IE不支持捕获阶段。然后可能问到IE和W3C不同绑定事件解绑事件的方法有什么区别，参数分别是什么，以及事件对象e有什么区别等等。
如果上述都没问题，接下来可能会问【事件的代理/委托】的原理以及优缺点，这是靠事件的冒泡机制来实现的，优点是
1、可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒
2、可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适
事件代理的应用常用应该仅限于上述需求下，如果把所有事件都用代理就可能会出现事件误判，即本不应用触发事件的被绑上了事件，事实上我见过有人把页面里的所有事件都绑定到document用委托的，这是极其不明智的做法。
所谓劲酒虽好，可不要贪杯哦~
之后对方可能要求你手写原生js【实现事件代理】，并要求兼容浏览器，其实就是考核对事件对象e的了解程度，以及在IE下对应的属性名。其实此时如果你说就是用target，currentTarget，以及IE下的srcElement和this，基本就可以略过了。
如果上述都ok的话，那么极有可能要求让你【实现事件模型】，即写一个类或是一个模块，有两个函数，一个bind一个trigger，分别实现绑定事件和触发事件，核心需求就是可以对某一个事件名称绑定多个事件响应函数，然后触发这个事件名称时，依次按绑定顺序触发相应的响应函数。
这个需求如果对于做过C#的人来讲就再熟悉不过，他根本就是C#中的【委托】（delegate）。而委托与事件几乎是一家子。回到前面说的题目，大致实现思路就是创建一个类或是匿名函数，在bind和trigger函数外层作用域创建一个字典对象，用于存储注册的事件及响应函数列表，bind时，如果字典没有则创建一个，key是事件名称，value是数组，里面放着当前注册的响应函数，如果字段中有，那么就直接push到数组即可。trigger时调出来依次触发事件响应函数即可。
不过还有很多细节，比如触发响应函数时的上下文应该是什么，触发响应函数的参数列表应该是什么，如果要求把调用trigger的参数列表都传到响应函数中还要考虑到吧arguments对象转化为纯数组才行等等。
还有一些面试官会问到事件如何派发也就是事件广播（dispatchEvent）等等，这里不再展开。
有关事件的考核点大概也就这么多了
前端性能优化
这个简直老生常谈，不管是园子里还是园子外，关于前端优化的东西太多太多了，不同角度不同方向也有很多，网络性能优化，加快访问速度，浏览器并行加载数量，怎样实现原生JS异步载入，CDN加速的原理，如何将不同静态资源发布到多个域名服务器上，发布后这些静态字段的url路径改怎么批量改写，用什么工具进行项目打包，css打包后的相对路径怎么转换为绝对路径，用什么工具进行项目模块依赖管理，怎么进行cookie优化等等，
这个说起来就很多了，尽可能的按照自己做过的优化来讲，否则面试官随便挑一项深究都可能会卡壳，与其这样还不如不讲
闭包原理及应用
这个问题的经典性，几乎所有面试官都会问到这个问题，什么情况下会发生闭包，为什么需要闭包，什么场景下需要，闭包闭了谁，怎么释放被闭包的变量内存，闭包的优点是什么，缺点是什么等等。
关于闭包，有的是上述提问，有的是直接做闭包面试题。关于概念网上一搜一大把，关于闭包面试题，可以参考我之前写过的一篇文章：（）
不夸张的讲，如果这篇文章完全弄懂了，基本上没有可以难住的闭包的题目了。
手写Function.bind函数
首先会要求解释下这个函数的作用，以及在什么场景下需要用到它，最后手写一个Function.bind函数。
只要掌握核心几点就没问题：
1、Function.bind返回的也是一个函数，所以注定发生了闭包，
2、在返回的这个函数中去调用一个其他的函数，这其实本质上就是函数钩子(HOOK)
关于在JS里的函数钩子，我认为只需要维护以下三点即可：
1、保持函数的this指向
2、保持函数的所有参数都传递到目标函数
3、保持函数的返回值
有了以上这几点，这个函数就非常好写了，下面是MSDN上的标准Polyfill：
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP
: oThis || this,
aArgs.concat(Array.prototype.slice.call(arguments)));
fNOP.prototype = this.
fBound.prototype = new fNOP();
<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e
if (!Function.prototype.bind) {&&Function.prototype.bind = function (oThis) {&&&&if (typeof this !== "function") {&&&&&&// closest thing possible to the ECMAScript 5&&&&&&// internal IsCallable function&&&&&&throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");&&&&}&&&&&var aArgs = Array.prototype.slice.call(arguments, 1), &&&&&&&&fToBind = this, &&&&&&&&fNOP = function () {},&&&&&&&&fBound = function () {&&&&&&&&&&return fToBind.apply(this instanceof fNOP&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ? this&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& : oThis || this,&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& aArgs.concat(Array.prototype.slice.call(arguments)));&&&&&&&&};&&&&&fNOP.prototype = this.prototype;&&&&fBound.prototype = new fNOP();&&&&&return fBound;&&};}
手写数组快速排序/去重
不管是排序也好，还是去重也罢，都是计算机基础知识了，虽然快排写出来了，去重也用多种方式实现了，但是算法是我的弱项，这里就不展开了。不过对于准备面试的童鞋来讲，准备下常用算法还是比较重要的，大部分公司还是比较看重此类基础知识的。
JS的定义提升
利用js的特性定义提升这个知识点衍生出来的面试题相当之多，诸如以下等等
(function(a){
console.log(a);
function a(){};
(function(a){&&&&console.log(a);&&&&var a=10;&&&&function a(){};}(100))
这算是我做过的定义提升里面的最简单的题目了,建议可以看下我的上一篇文章:（）
基本上能做对那篇文章中所说的题目的话，此类面试题基本平趟无悬念
关于跨域大概可以分iframe的跨域，和纯粹的跨全域请求。
关于跨域的可以去看园子里的这几篇文章:
其实正统的跨全域的解决方法大致也就，JSONP,Access Control和服务器代理这么三种
只要你聊到跨域，就必须聊到JSONP，那么就必须要讲一下JSONP的实现原理，以及你在项目中那个需求使用了JSONP，这里简单讲就是HTML里面所有带src属性的标签都可以跨域，如iframe，img，script等。
所以可以把需要跨域的请求改成用script脚本加载即可，服务器返回执行字符串，但是这个字符串是在window全局作用域下执行的，你需要把他返回到你的代码的作用域内，这里就需要临时创建一个全局的回调函数，并把到传到后台，最后再整合实际要请求的数组，返回给前端，让浏览器直接调用，用回调的形式回到你的原代码流程中。
基本讲到这也就没什么要再讲的了。
将url的查询参数解析成字典对象
这个题目不约而同的出现在了多家公司的面试题中，当然也是因为太过于典型，解决方案无非就是拆字符或者用正则匹配来解决，我个人强烈建议用正则匹配，因为url允许用户随意输入，如果用拆字符的方式，有任何一处没有考虑到容错，就会导致整个js都报错。而正则就没有这个问题，他只匹配出正确的配对，非法的全部过滤掉，简单，方便。
实现代码：
function getQueryObject(url) {
url = url == null ? window.location.href :
var search = url.substring(url.lastIndexOf("?") + 1);
var obj = {};
var reg = /([^?&=]+)=([^?&=]*)/g;
search.replace(reg, function (rs, $1, $2) {
var name = decodeURIComponent($1);
var val = decodeURIComponent($2);
val = String(val);
obj[name] =
<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e<div class="crayon-num" data-line="crayon-5a3a6e<div class="crayon-num crayon-striped-num" data-line="crayon-5a3a6e
function getQueryObject(url) {&&&&url = url == null ? window.location.href : url;&&&&var search = url.substring(url.lastIndexOf("?") + 1);&&&&var obj = {};&&&&var reg = /([^?&=]+)=([^?&=]*)/g;&&&&search.replace(reg, function (rs, $1, $2) {&&&&&&&&var name = decodeURIComponent($1);&&&&&&&&var val = decodeURIComponent($2);&&&&&&&&&&&&&&&&&&&&&&&&val = String(val);&&&&&&&&obj[name] = val;&&&&&&&&return rs;&&&&});&&&&return obj;}
对于常见的场景，如网页滚动时，经常会有滚动到哪时做什么样的动画效果，遂要注册onscroll事件，如何减少触发次数，到达优化性能，同时又满足效果要求不卡顿，一个是优化事件内代码，减少代码量，二就是做函数节流。
大部分节流都采用时间做节流，即时间间隔小于多少的不再调用，但同时保证一个最小调用间隔。（否则拖拽类的节流都将无效果），也可以用调用次数做节流，但要考虑最后一次调用需要要执行。
可以参考：()
这方面被问到的比较多的有观察者模式，职责链模式，工厂模式
主要是应用于js开发组件中会经常涉及，纯粹的页面业务逻辑可能涉及不多。
比如如何去设计一个前端UI组件，应该公开出哪些方法，应该提供哪些接口，应该提供哪些事件。哪部分逻辑流程应该开放出去让用户自行编写，如何实现组件与组件之间的通信，如何实现高内聚低耦合，如何实现组件的高复用等等
css垂直居中方法
可以看到我提到上面大多数都是关于JS的面试题，主要是因为css并不是我的强项，但有几个出现频率很高，就是经典的垂直居中问题。
这个问题又可以细分为，被垂直居中的元素是否定高，是文字还是块，文字是单行还是多行文字等等
这个可以百度下，有N多种解决方案，主要还是看应用场景的限制。
自适应布局
这个问题可以划分为，左固定右自适应宽度，上固定下固定中间自适应高度等等布局要求。
关于左右自适应的，不低于10种解决方案，还要看dom结构要求是并列还是嵌套，是否允许有父级元素，是否允许使用CSS3，是否有背景色，是否要两列等高，等等
而关于自适应高度的解决方案就略少一些，大致也是靠，CSS3的calc属性，内padding，绝对定位后拉伸，动态js计算等等解决方案，同样也是要看应用场景能用哪个
移动端自适应
也被问到了很多移动端开发中的各种坑，比如2倍屏，3倍屏的自适应等，我移动端的经验略少，所以只是按照我做过的经验去尽可能的描述清楚，这里就不多说了
其他关于前端
除了技术以外，因为带过一个小团队，所以更多的时间都是去聊关于项目，关于团队，关于如何管理，关于如何处理团队内问题，如何跨团队协作等等。这部分纯属工作经验了，按照做过的不同项目也会有不同。
总之，大部分聊得还算比较愉快，京东评定的是T3，美团评定的是P6，我也不太清楚这算是个什么等级，不过大部分公司都是评定为中级最多中高级开发水平。大概就这样了，从参加工作到现在也有4年了，只混到这么个水平似乎也确实有些说不过去。
总之，2016年，加油吧↖(^ω^)↗
PS：元宵节快乐~
可能感兴趣的话题
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
&#8211; 好的话题、有启发的回复、值得信赖的圈子
&#8211; 分享和发现有价值的内容与观点
&#8211; 为IT单身男女服务的征婚传播平台
&#8211; 优秀的工具资源导航
&#8211; 翻译传播优秀的外文文章
&#8211; 国内外的精选文章
&#8211; UI,网页，交互和用户体验
&#8211; 专注iOS技术分享
&#8211; 专注Android技术分享
&#8211; JavaScript, HTML5, CSS
&#8211; 专注Java技术分享
&#8211; 专注Python技术分享
& 2017 伯乐在线查看: 86483|回复: 195
我的前端准备+面试之路！！不要放弃！
精华主题学分
在线时间 小时
月)-[11]CS硕士+<3个月短暂实习/全职
- 内推| 码农类全职@Linkedin
注册一亩三分地论坛，查看更多干货！
才可以下载或查看，没有帐号？
发现做前端的人真是少之又少啊！也没有人讲讲怎么学习啊，怎么准备啊，面试都考什么啊之类的。于是，在我今天拿到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！我先来说说看怎么准备！
如何学习/准备
没错，还是要准备算法！虽然我一开始真的是想起递归就害怕，想起算法就头疼，但是真的没有办法。有很多公司真的会考这个。我的做法就是cc + leetcode.
先说CC 我主要就是用它来入门的。因为我最开始连递归都不知道怎么做T.T,所以就用cc看每一章大概比较基础的题。不会就看答案啊，然后自己研究啊，总算是递归入门了。我记得cc那会我就看了比较重要的几章，string, array, linkedlist, tree大概也就这样了吧。。主要因为有讲解可以入门！
.鏈枃鍘熷垱鑷1point3acres璁哄潧
然后说重头Leetcode!
我总共做了105道。其中80道左右做了两遍。先说为什么要做Leetcode,真不是为了能碰上原题。几率有，但是真不大。可是为什么还要做呢，因为真的提高编程能力啊！！！这才是重点！还有遇到新题你能套用道某题做法或者思路上，就对了！我就发现，做到后面，一次或者两次submit就通过的几率大大增加。那时就是越来越有信心的时候了。
Leetcode怎么做呢？
第一遍！ 从简单道中等：这是别人总结的难以程度
毕竟是前端，需要算法但是不需要那么难的算法，不像后端。我觉得100+就真的够了。我每次做题就感觉吧就像打仗，每种武器比如刀啊 剑啊 斧头啊之类的吧你都得会用啊，都得知道怎么用，什么时候用啊然后道真正打仗的时候，就知道该用什么杀敌了吧。做题也是一样，你得先知道都有什么data structure，一般的操作方法都有什么，还有什么算法，或者什么类似做法，然后来一道新题你才能有思路。第一遍就是用来学使用方法的。所以尽快做完！不用150啦，可以先做简单再做中等，总共100道左右。
就比如吧，linkedlist， 可以一个指针，两个或多个指针， 两个指针可以挨着， 两个指针可以相隔一定距离，可以添加头指针。。。。。。array 可以一个index，可以两个index， 可以两个index但是一个从前扫一个从后扫。。
还比如，两个array or string or linkedlist， 长度不一样时，怎么样两个一起扫一遍，是for loop 嵌套 for loop， 还是一个while 但是由长度短的那个决定什么时候退出，还是一个while但是由长度长的那个决定什么时候退出，同时会在长度短的那个已经扫描道头时做相应处理。。还有dp 问题怎么做啊，NP问题怎么做啊之类的，都得有起码的思路。
所以在时间紧的时候 别一道题憋个一天半天的。第一遍过的时候，我一般一天做7道新题，做到 leetcode accept为止，各种大牛肯定比我多啦。有思路的自己做，没思路的想清楚确定没思路，看答案。学别人的思路！基本不copy别人的代码，，偶尔python不知道为什么总是超时实在烦了 保证算法对的情况下还是copy过。
第二遍其实相当管用啊！别觉得自己一遍过肯定对肯定还记得，第二遍的时候，不看答案，手写！！！！手写完再用leetcode跑一遍或者和之前的答案进行比对，我保证你会很吃惊！！吃惊有两种，我靠之前怎么那么聪明，或者， 我靠之前怎么那么笨！但是最管用的一定是，发现有很多edge case自己竟然忽略了！然后用红笔大大的标记出来，不断提醒自己， 别尼玛再犯错了啊！！！这样真的真的，很管用！
算法说完了，我就用了这几个，还是做题最有用！真心的！我后来再面算法都坦然了。。。反而紧张html 和 css原因等会说
2.JavaScript （这是我学的顺序）
这我绝对要说怎么学的啊！！！超爱JS！很有心得！. 1point 3acres 璁哄潧
A. MDN JS tutorial:
(其中讲inheritance的我看过至少3次)
看见这10几章没有，一章一章看，一章一章做笔记。前端东西多还有杂，做笔记绝对管用！
B. JavaScript the good part:
我买的kindle版，我记得我看了中间几章，array 之前。最好的就是讲了一些pattern啊，几种function invoke的方式和不同啊之类的，被奉为业内经典，是Yahoo!以前某著名JS 架构师（大概啊）写的
C.The secret of JS ninja: . more info
绝对是进阶的超好书籍！apply call的用法都讲的相当清楚。我看到第6章我记得，觉得应该再好好复习.1point3acres缃
D.JS tricky question test: -google 1point3acres
决定自己超懂JS的时候，做做这套题。。你就知道自己还不够了。。答案和讲解在这里：.鐣欏璁哄潧-涓浜-涓夊垎鍦
E.绝对的一套好题：node.js tutorial functional JS:
找到Electives那部分的functional js 安装然后一道一道做，node会有test， 有verify的程序 你按照操作来，会发现超好的学习资料！
. 鍥磋鎴戜滑@1point 3 acres
就大概是这些吧。。今晚困了。。明天继续html css DOM 然后是面试。。不要急。。睡了晚安！
. 鐣欏鐢宠璁哄潧-涓浜╀笁鍒嗗湴
<p id="rate_067" onmouseover="showTip(this)" tip="给你点个赞！&大米 + 5 升
" class="mtn mbn">
<p id="rate_86" onmouseover="showTip(this)" tip="给你点个赞！&大米 + 2 升
" class="mtn mbn">
<p id="rate_926" onmouseover="showTip(this)" tip="感谢分享！&大米 + 5 升
" class="mtn mbn">
<p id="rate_481" onmouseover="showTip(this)" tip="感谢分享！&大米 + 3 升
" class="mtn mbn">
<p id="rate_050" onmouseover="showTip(this)" tip="很有用的信息！&大米 + 5 升
" class="mtn mbn">
<p id="rate_726" onmouseover="showTip(this)" tip="感谢楼主！小弟以后也想做前端！向楼主学习.&大米 + 3 升
" class="mtn mbn">
<p id="rate_13" onmouseover="showTip(this)" tip="很有用的信息！&大米 + 10 升
" class="mtn mbn">
<p id="rate_09" onmouseover="showTip(this)" tip="感谢分享！&大米 + 10 升
" class="mtn mbn">
<p id="rate_490" onmouseover="showTip(this)" tip="回答的很好！&大米 + 3 升
" class="mtn mbn">
<p id="rate_473" onmouseover="showTip(this)" tip="&大米 + 50 升
" class="mtn mbn">
<p id="rate_82" onmouseover="showTip(this)" tip="很有用的信息！&大米 + 3 升
" class="mtn mbn">
<p id="rate_590" onmouseover="showTip(this)" tip="感谢分享！&大米 + 3 升
" class="mtn mbn">
<p id="rate_31" onmouseover="showTip(this)" tip="很有用的信息！&大米 + 2 升
" class="mtn mbn">
<p id="rate_234" onmouseover="showTip(this)" tip="回答的很好！&大米 + 3 升
" class="mtn mbn">
<p id="rate_582" onmouseover="showTip(this)" tip="很有用的信息！&大米 + 1 升
" class="mtn mbn">
本帖被以下淘专辑推荐:
& |主题: 142, 订阅: 134
& |主题: 103, 订阅: 46
& |主题: 14, 订阅: 40
& |主题: 8, 订阅: 17
& |主题: 13, 订阅: 7
& |主题: 6, 订阅: 2
& |主题: 2, 订阅: 2
精华主题学分
在线时间 小时
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:
是个很好的网站！不过一般都是需要的时候查，会查道这个网站讲的最清楚
这个吧我真不能说自己是砖家。。但是说说我知道的吧！
1.html5都有什么新的东西啊。其中提到web storage，那你说说sessionStorage localStorage有什么区别啊，他们的存储形势是什么啊（string!!!）怎么存array啊 obj啊（JSON.stringify, JSON.parse）还有个XX问我知不知道polling啊 long polling啊。当时真不知道。。。。后来知道了。
2.doctype干嘛用的。. 1point 3acres 璁哄潧
3.能不能nest &a&
4.data attribute知道什么时候要用，做题的时候需要，linkedin电面某题我就是用data-id解决的，再加上其他地方做的也不错那俩面试官相当满意啊一个劲说linkedin很适合开始第一份工作啊知不知道啊啊啊！！！
. From 1point 3acres bbs
我还是给大家贴格链接吧，那里面的前端题目有些公司在开始电话面试的时候真的会问到，其中真有人问我你最喜欢IE哪点。。我直接说 啊这个我不喜欢IE。。下次再有人问我，我一定说，我最爱他那种不断努力追赶其他浏览器的态度!!!
这个是Front-End Interview Question总结：，我看了大部分但不是所有，有些还是很管用的，比如JS那部分== 和 === 区别啊，call apply区别的都很基本但是真的有被问到。. 鐣欏鐢宠璁哄潧-涓浜╀笁鍒嗗湴
还有front end tricky question： 做这种题真的很容易发现自己不清楚的地方。尤其这套题里面css specificity的部分。我后来花了几个小时把这个问题搞的crystal clear 再也不怕了。
一般不会考，但是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.常考的几道题：. 鍥磋鎴戜滑@1point 3 acres
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?. From 1point 3acres bbs
5.what's iframe?
6.what's csrf? (其实不太长考但是最好知道，我大概被问了两次？). 鍥磋鎴戜滑@1point 3 acres
好像差不多了。。反正我有个笔记本，专门记录html js css的学习笔记还有每次被问过的题目以及答案，面试前看那个本心里好踏实，最后面linkedin的时候，只剩最后一页是空白的，（当然 呵呵，我笔记只写单面，看着清楚哈）厚厚一本还蛮有成就感的。我就觉得我算法也复习好了，前端知识我能想到的我都看了，再过不去，就真的不是我的问题了。.1point3acres缃
回头继续面经！总共5次onsite经历，肯定没有大牛多，但是鉴于这里这么少的前端经验，还是对大家应该有点用的。
<p id="rate_073" onmouseover="showTip(this)" tip="超级有帮助， 感谢楼主~!&大米 + 3 升
" class="mtn mbn">
<p id="rate_06" onmouseover="showTip(this)" tip="很有用的信息！&大米 + 60 升
" class="mtn mbn">
<p id="rate_29" onmouseover="showTip(this)" tip="加油加油！&大米 + 10 升
" class="mtn mbn">
<p id="rate_03" onmouseover="showTip(this)" tip="回答的很好！&大米 + 3 升
" class="mtn mbn">
精华主题学分
在线时间 小时
大赞楼主很努力的码字！
我也是很喜欢用js，现在找工作也打算找js相关的，之前担心搞前段和js开发的都是老 ...
我从来不管他们那些牛人。。他们爱干嘛干嘛。。我就喜欢前端，前端我感觉多少还和艺术沾点边儿啊，不会感觉太ds哈哈哈。而且我就是喜欢那种成就感，做个东西那个界面就很听话，该干嘛干嘛，然后再想想怎么和数据绑定最有效率，就觉得很有意思，不会觉得无聊啊。不要管他们哈，自己喜欢js就做js好啦，我发现他们不会前端的找你帮忙弄个很简单的东西，他们就觉得好神奇哈哈哈。我无可救药的虚荣心~~~~~其实就是感觉被需要嘛。。。lol
精华主题学分
在线时间 小时
网站现在看不到了啊，还有链接可以看吗
不好意思啊。。我因为没有续费就看不了了。。我想等一段时间再做一个个人网站 然后会来更新的。。我想先学学ios 做个app 练手 然后做个个人网站 展示自己做的东西。
精华主题学分
在线时间 小时
. 鐗涗汉浜戦泦,涓浜╀笁鍒嗗湴
楼主MM有一点让我很佩服，就是一开始就知道自己要做什么，怎么做，唉，走了好多弯路
我其实只是知道自己想做什么，具体怎么做，都是摸爬滚打出来的啊！不过我现在觉得我做的最对的决定就是当所有人都和我说不用写自己的网站，只要做算法就好的时候我坚持先做自己的网站。虽然有很多问题，可是获益匪浅
精华主题学分
活跃农民-感谢提供高质量信息和讨论, 积分 904, 距离下一级还需 96 积分
在线时间 小时
目前在公司里转成前端了，主要是觉得性格上就是喜欢fancy的东西。.1point3acres缃
前端还特别适合外貌协会和颜控！对于设计一定到比选男女朋友还要挑啊！
前端面试时间不够的话，可以把leetcode难的题都跳过吧。
有时间的话我也写一篇文章说说前端和万能的JS！
精华主题学分
在线时间 小时
求问楼主， 想做这种个人网站应该如何开始啊。我大概有一点html和css的基础，原来有的assignment要做简单网 ...
如果是自己做网站的话，我自己的那个完全没有用任何框架。只用了jquery.原因是我觉得框架做web application，需要user intertaction的话比较好。真的像我这样很多DOM manupulation的东西其实jQuery 更合适。想做这种网站的话，其实可以先从小练习做起。coderpen还有cssdeck会有很多很多好的想法，可以模仿别人做一个，然后慢慢就会有自己想做的效果，找到相关教程或者自己研究，把想做的效果做出来，慢慢积累就会有好的素材，然后可以开始着手设计自己的网站了。我就是这样做的。然后之前练习的slider效果，在linkedin就被考到了。
<p id="rate_640" onmouseover="showTip(this)" tip="sorry，手滑点到反对了。。。&大米 + 3 升
" class="mtn mbn">
<p id="rate_37" onmouseover="showTip(this)" tip="谢谢楼主啊&大米 + 10 升
" class="mtn mbn">
精华主题学分
在线时间 小时
.1point3acres缃
有！！前端new grads最重要的就是展示！虽然无数人和我说过很多遍什么就刷题最重要啦，但是我坚持先做了 ...
恩，感觉这个展示也很重要哈，能看的出你对新技术的passion
精华主题学分
在线时间 小时
顶楼主，好心分享面经，祝一切顺利
精华主题学分
在线时间 小时
赞前端总结！lz有没有什么项目经验帮你过简历关的？
精华主题学分
在线时间 小时
哇，必须赞啊！之前看前端那些东西也觉得没有说的那么简单，在那边找工作会觉得有很多NEU这边的学生在竞争么？不过真心厉害，面了就给口头offer了，我也要好好刷题了呢！
精华主题学分
在线时间 小时
大赞楼主，等着看后续！！！
精华主题学分
在线时间 小时
顶楼主，好心分享面经，祝一切顺利
谢谢啦！！今天继续努力！
精华主题学分
在线时间 小时
赞前端总结！lz有没有什么项目经验帮你过简历关的？
有！！前端new grads最重要的就是展示！虽然无数人和我说过很多遍什么就刷题最重要啦，但是我坚持先做了个自己的网站
现在还有问题。。但是看过的面试官都说 impressed之类的。我觉得这个网站绝对给我带来了一些电面机会！
精华主题学分
在线时间 小时
哇，必须赞啊！之前看前端那些东西也觉得没有说的那么简单，在那边找工作会觉得有很多NEU这边的学生在竞争 ...
一路走来，我总结出来的前端就是，有了电面之后 Algorith + HTML + CSS + JS都准备好了。。就好了。。。所以先加油刷题！！！
精华主题学分
在线时间 小时
大赞楼主，等着看后续！！！
哇！有人看好激动，现在继续！
精华主题学分
在线时间 小时
拿到offer的那一刻，感觉一切都是值得的，楼主加油。。。
精华主题学分
在线时间 小时
有！！前端new grads最重要的就是展示！虽然无数人和我说过很多遍什么就刷题最重要啦，但是我坚持先做了 ...
赞你的网站 做的很有意思啊~！！~
精华主题学分
在线时间 小时
我也喜欢搞前端，之前一直在搞node+angular的纯js网站开发。同为前端为你大赞一个。 同爱ninja这本书，大赞！
精华主题学分
在线时间 小时
. 涓浜-涓夊垎-鍦帮紝鐙鍙戝竷
一路走来，我总结出来的前端就是，有了电面之后 Algorith + HTML + CSS + JS都准备好了。。就好了。。。 ...
恩恩，刷题确实很有用，准备好了的话还是会好很多，之前Brandeis一些前辈给我的反馈不是很好，所以当时没选，LZ还是很努力的，要向LZ学习！
精华主题学分
在线时间 小时
恭喜楼主! 这可真不是一点点飞 楼主大大的！
精华主题学分
在线时间 小时
我也喜欢搞前端，之前一直在搞node+angular的纯js网站开发。同为前端为你大赞一个。 同爱ninja这本书，大赞 .... 1point 3acres 璁哄潧
赞！！！同在用node + angular! 马上要做的一个side project就是这个组合！一般还会加上sass, mongoDB，弄个MEAN Stack出来。Ninja必须爱！！
精华主题学分
在线时间 小时
. 鐣欏鐢宠璁哄潧-涓浜╀笁鍒嗗湴
目前在公司里转成前端了，主要是觉得性格上就是喜欢fancy的东西。
前端还特别适合外貌协会和颜控！对于设 ...
对对对，fancy的页面效果之类的。不过我如果去了Linkedin应该就不会太fancy了，但是只求天天写JS！！！大爱万能JS~~
精华主题学分
在线时间 小时
<form method="post" autocomplete="off" id="fastpostform" action="forum.php?mod=post&action=reply&fid=28&tid=104335&extra=&replysubmit=yes&infloat=yes&handlekey=fastpost"
onSubmit="
// TODO Howard 11/3/2015
var sbtn = $('fastpostsubmit');
sbtn.disabled =
sbtn.innerHTML = ' 回复发表中... ';
sbtn.setAttribute('background', sbtn.style.background);
sbtn.setAttribute('bordercolor', sbtn.style.borderColor);
sbtn.style.background = '#C7C7C7';
sbtn.style.borderColor = '#8B8B8B';
var form =
// --product--
var isValid = fastpostvalidate(form, null, 0);
if(!isValid) reoverBtn();
return isV
// --product--
// --testing--
//setTimeout(function() {
// var isValid = fastpostvalidate(form, null, 0);
// if(!isValid) reoverBtn();
//}, 2000);
// --testing--
您需要登录后才可以回帖
回帖并转播
回帖后跳转到最后一页
一亩三分地推荐 /5
地主Warald亲手做你的申请，针对你的背景和目标，考虑申请、学习、就业、移民等系列问题，制定申请策略。
“offer”指全额奖学金，免学费全免+每月工资，Berkeley, CMU, JHU, UIUC, Gatech, UMich, UCLA, Columbia，欢迎观赏。
电子工程、计算机、统计、金数金工、化工等, Stanford, Berkeley, CMU, Cornell, Yale, Columbia, Chicago, Duke, UPenn, UIUC, Brown, UMich, JHU等
有留学、申请、找工、职业规划上的难题？先上论坛提问！
论坛考古也帮不上忙，发帖得到的回答仍然不够？电话找Warald来解答！
WARALD新书上市啦：《你不知道的美国留学》清华大学出版社，各大电商发售
Powered by}