阿里巴巴无线前端团队

[wintercn]

题目来自阿里巴巴无线前端团队，我们招聘Web前端工程师。

为什么会有这些题目？这些题目代表了我看重的技能和方向，如果你觉得自己有能力有才华，但是苦于自己没有大公司经历简历被筛掉，请试试发这些题目的答案给我。

为什么没有职位描述？这些题目就是职位描述。

选择下面题目中的一个或者几个回答，可以直接写在评论里，并请留下邮箱。也可以把回答写在简历里直接发到我的邮箱 csf178 [at] gmail.com

• 你对前端职业发展有何看法？
• 前端和后端程序员应该如何合作？
• 讲几个你在项目中解决的让你印象最深的问题（难、匪夷所思、解决方案有趣都可以）
• 在JavaScript面向对象方面，你有什么体会和实践？
• 谈谈JavaScript中的闭包，以及你的实践。
• 说说 http://m.taobao.com 前端做的最烂的地方，以及你的改进。
• 谈几个有趣的html标签，以及它们的语义。
• 讲一讲CSS的position/float/display都有哪些取值，它们相互叠加时的行为都是什么？
• 说几个你觉得有趣的CSS3选择器，以及他们有趣的用法。
• 自己问自己一道代表你水平的面试题，然后回答。

一些提示 :

• 一个深入的答案强过十个正确的答案。
• 展现你的能力，有时候只需要一句话，有时候需要一篇长文
• 可以google，但是没有任何题目有标准答案
• 我保证认真看你的答案，但是不保证一一回复

[youhua]

哈哈，沙发，说一点点感触，前端和后端我目前经历中最愉快的合作方式是后端只负责API，输出JSON，前端负责模板渲染

[myst729]

嗯……似乎其中有些题目就是你跟贺老当时问过我的

[YuhangGe]

js面向对象的实现方式很多，有多种框架都有很完善的解决方案。但是出于越简单越好不引入庞大框架的目的，曾经写过一个非常简单的面向对象实现，在自己写的很多项目（虽然都不是成熟的商业项目，目前本人学生）中都会使用。为了和老师讨论，特地把代码放在了github上，https://github.com/YuhangGe/js-oo , 求老师鉴定～

[wintercn]

@myst729 哈哈哈 你别看这样的题目 通过率很低的

[TRRrrr]

好题帮顶。谈谈JavaScript中的闭包，以及你的实践。答不上来。CSS八百年没用过了，记得position跟float有点冲突，要重新做实验才知道。

代表我水平的面试题，“人类全基因组序列在Reference基础上拼接后点突变、增加/缺失变异的筛选”可以么？？？

[wintercn]

@YuhangGe 谈谈思路比代码要好哦

[wintercn]

@TRRrrr 你妹…… 不过这题真风骚啊

[TRRrrr]

真事儿，我面试的时候真讲了这些。我之前面IBM、一家midwareJava、网络工程师时候公司的人脑袋上都带着问号的重点问了为什么我简历里有两篇Genomic的publication，都做了什么，然后我讲的就是这些。看过回我一条，我自觉删留言……咱哥们不捣乱的！

[zack-lin]

没有用到响应式布局，有些机型屏幕很大，页面区域就那么小；太多的小圆角很耗性能，在一些机型和一些低端配置机下滑动会很卡，一些大屏机也会的。UC的夜间模式下，这个页面完蛋鸟~还有，淘宝网的logo，基本上是几年不变的，怎么不用appcache呢？还有，localstorage的key命名太简单了，不怕冲突么？
列表页的分页那块，中间的页码选择，点击一下，箭头朝上，下拉菜单出现，原点再点击，下拉菜单隐藏，箭头没反应；
最最不能忍受的是：那个瀑布流图片显示的，点击进某个分类进去之后，展现一堆图片出来，其中有三张加载显示不出来，也没什么提示，这也就算了，当我进入首页的时候，本来可以判定我的UA和devicePixelRatio，然后加载相应宽高的图片，但是一律加载的是两倍的，太浪费流量了，最最最最不能忍受的是，点击那个红心赞的，竟然跳转去登录，好吧，我是没有耐心的用户，我也懒得点击赞了，我后退，结果，图片又要重新加载过了~~这个地方应该用hashchange的，这样图片才不会再去load一次。
还有就是，box-shadow也是很耗性能的，一些微小的阴影可以用border代替，性能会大增！
以上说的都是错的！

[myst729]

@wintercn 其实我想说……就目前而言，前端的职业发展挺尴尬的，会不会直接被你挂了……

[michaeljayt]

前端和后端程序员应该如何合作，这个我想我可以写一个自己糟糕经历的心得体会。。

[airen]

答题不如交谈，从谈话的过程中可以了解你需要的一切。从谈话的过程中可以展示你的风彩

[TRRrrr]

@michaeljayt 若我是面试官的话我感觉我会很喜欢听这个以及事后你对这次槽糕经验的反思和解决方法。不都说“经验”就是一次次的教训嘛～

[AKIo0O]

谈谈JavaScript中的闭包，以及你的实践。

闭包

说说 http://m.taobao.com 前端做的最烂的地方，以及你的改进。

最烂就是点击还会重新请求整个页面。然后地址栏就出来了。
改进的话就说做成SPA。

[lpgray]

1. 你对前端职业发展有何看法？
   前端其实就是页面、交互的开发者，如果不在大型、注重web产品形象气质的企业中，存在的价值就可以忽略，目前 我就在这样一家公司，不过我始终认为，前端工程师要比产品经理懂技术，要比后端工程师懂产品，他是技术人员，更是产品经理和后端工程师之间的桥梁，技术好了可以转后端，感觉到了可以做产品，进可攻退可守，算是比较不错的前端职业生涯规划。
2. 前端和后端程序员应该如何合作？
   如果是做基于后端某一框架（如SpringMVC, Django）的ERP或者进销存等管理软件，前端基本就是写界面的，js往往不需要特别的模块化，跟后端的合作也就是写好界面给他们、然后包装一些js或者css3的交互效果，不过前端开发者在这种项目中最好能懂一点后端代码，如果能承担后端MVC层中的C的编写就更好了，什么时候需要用ajax、什么时候跳转，懂前端的艺术家都会比纯后端感觉好一点（我现在就在团队中扮演这么一个角色），如果使用REST规范去做项目，那么前端与后端的耦合度就会降到很低了，这时候就是对页面展示的一些数据格式进行规范化定义，这个是需要前后端达成一致的。
3. 讲几个你在项目中解决的让你印象最深的问题（难、匪夷所思、解决方案有趣都可以）
   工作经验不足，没有什么特别匪夷所思的，讲一下用jquery选中select吧，今天刚遇到的，一直以为是要设置$('option').attr('selected',true);可是总生效不了，结果我无意中发现$('select').val('value')；就可以选中val = value的option。
4. 在JavaScript面向对象方面，你有什么体会和实践？
   js不够oo,因为我java出身同时掌握python语言，这两个无论动态还是静态语言的类定义继承等都很方便，js就有点太麻烦了，直接把类的引用做为构造函数，然后在prototype中定义实例变量，总是不够方便，不过原型继承这个概念很通透，也很利于扩展。实践方面，我没有做过很复杂的应用项目，没有自己定义过很多类，然后去扩展，不过jquery的插件是我工作中常用的，$.fn扩展jquery这个类的实例方法，能够很方便的使用jquery特性，让oo很舒服。
5. 谈谈JavaScript中的闭包，以及你的实践。
   闭包其实就是定义一个匿名函数，使其内部变量仅仅贡献于函数内上下文，无污染的代码始终维护都很方便。
6. 说说 http://m.taobao.com 前端做的最烂的地方，以及你的改进。
   不好找
7. 谈几个有趣的html标签，以及它们的语义。
   传统的 h1-h6, 后来html5又加入了更多语义化标签的支持，header（页眉）, footer（页脚）, acticle（文章主体）, aside（非主体部分）, nav（导航）, section（章节）, hgroup（标题组）, address（地址声明区） b, i（强调部分） 也被赋予了语义的角色。
8. 讲一讲CSS的position/float/display都有哪些取值，它们相互叠加时的行为都是什么？
   position: static[absolute, relative, fixed]. float:none[left,right]. display: block[inline,inline-block,...相当多，常用的就这三个]
   position:static时float才有用，position:一旦不是static或者relative它就脱离文档流了（其实我不是特别清楚，relative时是否脱离文档流）
9. 说几个你觉得有趣的CSS3选择器，以及他们有趣的用法。
   attr *="" ^="" ~="" $="", E:nth-child(n), 关系选择符 E+F(相邻的)
10. 【自定义问题】怎么能让前端开发的成本降低，让新手程序员快速融入团队？
    关键还是看体系，一个企业的技术架构体系，就像后端一样，有着完善的框架，一个刚毕业不久的java程序员很快就能上手基于SpringMVC的项目开发。前端之所以难上手，难做出高质量的应用，关键还是体系太乱，没有成型的技术体系，目前我就在公司内部推崇一套技术体系，主要基于Bootstrap + jquery + Modernizr + jquery.ui ，绝不随随便便就增减体系，然后针对这一套框架做二次开发，封装成插件，或者公用类库，整理成企业自己的前端技术体系，让很多小白程序员很简单就上手前端开发，写很少前端代码。

[YuhangGe]

思路蛮简单的。比如C继承自P，其中P和C都是通过function定义（比如function P(){}, function C(){}）则：

1. 检索P的prototype中出现的但C中prototype没有的，赋给C。
2. 给C添加静态成员（而不是prototype）base_objects（Array Type），里面保存P（如果P还有父亲K则也保存，以此类推），这样就相当于保存了继承关系树。
3. 为C的prototype添加函数base，该函数用于在构造函数中调用，相当于JAVA的this.super()，实现原理里在里面通过call或apply函数调用父亲的构造函数（P.call或P.apply）。
4. 为C的prototype添加函数callBase，该函数用在任意地方，用来调用父亲的某个函数。（比如this.callBase("Func");）。实现原理也是使用call或apply。
5. 为了实现多级继承，在每个C类的实例中添加成员inherit_base_deep和inherit_deep，依次用在base函数和callBase函数中，用来记录当前调用的继承深度，通过这两个成员在base_objects这个数组（继承关系树）中可以正确地找到当前应该执行到了第几层父亲的相关函数。

通过以上思路，则实现了一个简单的面向对象，支持多继承、重写、多态。通过使用闭包，使得这个思路很符合原生的js语言思想，代码没有额外过多的面向对象的影子（比如一些框架有明显的createClass函数），也没有真正的父亲类的实例的存在（有些框架是给prototype添加new Parent()的实例）。唯一的潜在问题是可能有闭包的性能问题，但似乎可以不用考虑在内。

[Rayi]

呀 这里就开始讨论起来了啊 不过好几道题不好答啊

[ibigbug]

• 你对前端职业发展有何看法？
  JS一统天下
• 前端和后端程序员应该如何合作？
  好基友什么都好说

我也来凑凑热闹～

[myst729]

@Rayi 目测楼上有几个答题的哥们已经杯具了 <(￣▽￣)> 哇哈哈…

[ibigbug]

m.taobao.com的搜索框莫名其妙。

直接在input上面加分类按钮不就好了，干嘛让我觉得是我浏览器坏了。。

[langxue]

关于闭包的看法
http://www.cnblogs.com/lwzz/archive/2013/04/14/2953117.html

关于面向对象的看法
http://www.cnblogs.com/lwzz/archive/2013/03/03/2941743.html

前端后端没事干喝喝酒吃吃饭打打羽毛球啊，增进感情。

印象最深的就是script # 生成的js代码看起来真心不爽啊，居然还要维护。

最能代表我水平的面试题就是：
越南语的变迁与两国之间的经贸关系

[TRRrrr]

@langxue "前端后端没事干喝喝酒吃吃饭打打羽毛球啊，增进感情。" 大赞！别忘了叫上QA/Test跟DBA

[byteshijinn]

貌似题都不好答....
话说觉得前端有意思也就是玩jqTouch那会，标准都还没定功能都用上了

[Hwangss]

小应届菜鸟也来玩玩。
1、页面仔——>高级页面仔——>页面佬
8、优先级position（除了relative和默认）>float>display。position中absolute和fixed都是可以触发BFC而且还是inline-block的效果，text-align有效。float也是触发BFC，包裹元素但是text-align无效。display可以用block，inline-block，table-cell等触发BFC。然后影响按照优先级来说话。
问题：!important IE6认识吗？
答：认识。
440362682[at]企鹅.com

[michaeljayt]

@lpgray 想要面向对象特性请 CoffeeScript 和 TypeScript

[ttch]

说说 http://m.taobao.com 前端做的最烂的地方，以及你的改进

ID 居然有3种命名风格，目测 是 linux/C程序员 ，java程序员（有点混血） ，lisp程序员

id="J_search"
id="inslist"
id="inp-search-index"

[shenqihui]

你们会不会使用less coffeescript nodejs 进行企业应用的开发？

[nightink]

1.你对前端职业发展有何看法？
2.前端和后端程序员应该如何合作？

---

前端驱动后端开发 这个是最近开发的感受 前端应用Backbone进行开发，后端使用NodeJS开发，很多时候都是前端处理好了事件，通过url直接扔个后端，然后NodeJS进行相关业务操作 凑个热闹，想去杭州啊

[hax]

题目不错！不过你忘记写妹子有加分了。

[michaeljayt]

@hax 一针见血

[HiZhaoxiaoyang]

大龄前端翻旧帖，谈谈经历：
你对前端职业发展有何看法？
--前端这个词感觉比较新，像是07年之后国内js渐渐丰富之后才有的，之前几种称谓：美工、网页制作、网页设计。frontpage和dreamweaver是比较流行的可视化网页工具，因为可视化做的较好，当时的web前端人员几乎不参与业务逻辑和代码编写，有时会分屏写写html和css， js偶尔会在表单上使用。而当时流行的asp(vbscript)、jsp和php，完成了大部分现在js前端人员的事情，当时不流行ajax，一些异步、封装性和交互体验更好的web app交给了java applet和flash等ria来完成，理论上来说，applet和flash开发者（闪客）、windows界面开发、gui开发，在理论上都属于前端， 只是不是web前端。

前端和后端程序员应该如何合作？
--接受渐渐清晰的前后端协作方式，即后端server page开发人员渐渐脱离混合着表现形式、色彩样式、用户交互等前端和ui设计人员该负责和考虑的事情，把精力更多的放在业务逻辑和数据接口和数据存储过程上，小量的数据存储做好接口交给前端，频繁使用的数据前端也做好有效合理的与后端配合。很多公司已经这么做了。
讲几个你在项目中解决的让你印象最深的问题（难、匪夷所思、解决方案有趣都可以）
当时的地铁多媒体终端项目（地铁里视频终端），车载终端是底层开发人员裁减的Linux，自制了系统可执行的flash播放器和裁减的mozilla浏览器，准备在终端用flash播放器或浏览器html dom展示界面，最后发现mozilla比较庞大裁减困难，dom文本字体展示是系统字体（带锯齿）， flash嵌入字体的矢量绘制可以保证边缘平滑两个因素，最终选择了flash做界面终端。

在JavaScript面向对象方面，你有什么体会和实践？
--面向对象比较重要的是编程思想， js本身丰富包容性较强，给一个纯oop人员看prototype和无类型的function封装类和用链式操作实例化对象，他可能会觉得不太顺眼，但一个优秀的oop开发者他会把js也能写出很类似java的oop风格也能封装很清晰的api，例如mrdoob开发的https://github.com/mrdoob/stats.js， 相信as3和java等面向对象开发人员也会喜欢。他开发的three也是很类似java oop风格的库。

谈谈JavaScript中的闭包，以及你的实践。
--js最常使用的函数就是闭包， 比作用域高一优先级。

说说 http://m.taobao.com 前端做的最烂的地方，以及你的改进。
--体验好，没有很细看，seajs+zepto等，如果适配手机横屏和宽屏pad也就好了

谈几个有趣的html标签，以及它们的语义。
，很早的html4.01标签，主要是文字横竖屏滚动，不过貌似性能在webkit下不是最好，好处是所有浏览器兼容，呵。

，这个横屏居中在5里基本没人用了，记得10年左右的谷歌还在首页用，主要也是方便，肯定居中，兼容性好。 ，就说一点，valign='middle', 此属性一句话基本秒杀当下所有纠结的html css的垂直剧中问题。。我是不是有点教条复古了

讲一讲CSS的position/float/display都有哪些取值，它们相互叠加时的行为都是什么？
--这个暂时略过

说几个你觉得有趣的CSS3选择器，以及他们有趣的用法。
--input[type="password"] , 奇偶odd、even做颜色判断， 有些之前js才能做的选择判断css3可以做了

自己问自己一道代表你水平的面试题，然后回答。
--js和web技术未来的看法。
前端技术依赖的是宿主浏览器，觉得前端技术人员能做更多事情，参与到一些比较革命性的改变上来，而不过多依赖或也可参与既定标准，例如如何让宿主浏览器变得更轻量级，如何让解释文本执行的浏览器变得像二进制终端（例如swf和class）一样安全和封装性更好，如何改善浏览器体验弱项(地址栏，交互操作痕迹)。如何提高文件系统的读写权限和稳定性。。很多，主要是提高主动性，这样就更可以朝客户端应用靠近甚至超越。

[HiZhaoxiaoyang]

貌似github过滤了标签尖扣号问题，补充一下：

谈几个有趣的html标签，以及它们的语义。
marquee>，很早的html4.01标签，主要是文字横竖屏滚动，不过貌似性能在webkit下不是最好，好处是所有浏览器兼容，呵。
center>，这个横屏居中在5里基本没人用了，记得10年左右的谷歌还在首页用，主要也是方便，肯定居中，兼容性好。
td>，就说一点，valign='middle', 此属性一句话基本秒杀当下所有纠结的html css的垂直剧中问题。

[HiZhaoxiaoyang]

这里还是写一下忽略的题，承认自己技术广度有了，纵深不足：

讲一讲CSS的position/float/display都有哪些取值，它们相互叠加时的行为都是什么？
-- 没查字典，position常用的主要是absolute/relative/static/fixed/initial， float是left/right/initial，display是block/none/inline-block/inline/inline-table
position:fixed在安卓2.3以下和ios4.0以下的webkit是无效的。absolute在父级元素为定义relative时，默认父级为body，
且absolute和fixed个人理解在html排版上的元素占位自由度和优先级顺序如下：absolute,fixed > 块元素(float, display:block等) > 内联元素。

没有刻意叠加比较过行为，开发中会尽量避免叠加使用。 如果叠加，猜测是优先级高的方法生效， 不排除其它次优先级的属性方法会在叠加时交叉生效。

[wintercn]

@alvinhui 这篇文是第一题的完美答案，不过除了玉伯大概很少有人能想到这程度吧

[wintercn]

@alvinhui 所以你看，你要能写到这程度，我们就按P8来面试了 哈哈哈

[alvinhui]

@wintercn 求教寒冬哥，P8是什么代号？
我还稚气尚嫩，再磨枪一年再去阿里巴巴前端团队面试。加油。

[yisibl]

完了，@jixiangac 被我毒害不浅啊。

[yisibl]

@alvinhui P6开福克斯或科鲁兹，P7开迈腾或蒙迪欧，P8开A4L或BMW3，P9开路虎极光或X3，P10开途锐或X5，P11骑自行车，P13的司机开卡宴。

[nikogu]

@wintercn 《阿里前端的困局与突围》完美？...应该在前面加一个：“我觉得”

[alvinhui]

@yisibl 感谢一丝大侠的回复。
刚才google科普一下大概是淘宝的技术人员等级分类。

[gxcsoccer]

我的答案，请老师轻拍
http://gxcsoccer.github.io/blog/2013/05/29/exercise/

[HiZhaoxiaoyang]

晕，这个话题还没关闭。。。

其实面试问一些技术行问题或者靠算法都是可以， 但以此才做为是否要人或者一刀切是不太合适，例如问
null==undefined和null===undefined的答案， 这个只能说明前端开发者对这个代码的熟悉，是w3c持续发展的一些纠结或错误产物。 只能考是否知道，而不是全面能力。
那么我是面试官的话，我也可以问些前端历史性问题，例如我写， readonly 和disable区别， 有几个人能回来出来是ie5和Netscape就开始的区别了。
我再出一个考题可以看看，js是弱类型或者说灵活类型， 我在做强制类型转换时， (number).toString(), String(number)和number+'' 在性能上有啥区别， 你说纠结不？

[wintercn]

@nikogu 我的意思是作为答案来讲是完美的，其实观点本身不重要（我本人跟玉伯的看法也有些不同），重要的是进行到这个深度的思考和意识。

[ChrisFan]

现在人实在太难招了...

[hax]

@survivol 性能区别主要考察对这些问题的基本sense，但是不宜过细，因为最终取决于每个JavaScript引擎。以你提的这个例子来说，如果是热点，最终都可以被引擎优化掉，性能应该没有区别。今天某款具体引擎性能可能有差异，只是引擎本身的能力不同，最后一个最容易被优化而已。

[gaoyibo]

1 、你对前端职业发展有何看法？
前端是一个交汇点，要对设计负责，还原设计图；对产品负责，用户体验要好；对后台负责，处理后台传过来的数据。
2 、前端和后端程序员应该如何合作？
前端应该值负责前端的事情，包括CSS、JS部分，和后端程序员应该沟通的是返回的JSON格式，传输方式是GET还是POST，使用AJAX还是JSONP等等
3 、谈几个有趣的html标签，以及它们的语义
div吧，最有趣的就是他没有语义
4 、讲一讲CSS的position/float/display都有哪些取值，它们相互叠加时的行为都是什么？
position有absolute，static，relative，fixed，float有left、right ，display有none，block，inline
position设置为absolute，float为left、right时会脱离文档流。

我邮箱gaoyibobo@126.com

[alvinhui]

楼上这答案，不够用心阿。

[markyun]

@wintercn

我对前端的理解：

前端的能力就是能让产品从 90分进化到 100 分，甚至更好，

项目的参与，实现效果图，精确到1px；

与团队成员，UI设计，产品经理的沟通；

做好的页面结构，页面重构和用户体验；

处理hack，兼容、写出优美的代码格式；

针对服务器的优化、拥抱最新前端技术。

[OpenGG]

搭车招前端:

金山网络, 前端, 水平不限, 收入中上, 工作内容偏JS, 有挑战和学习空间. 地点北京国贸附近, 私信联系.

[jjyr]

1. 前端和后端程序员应该如何合作？
   实现约定好数据的格式(可能是json)，这样前端可以用mock的api, 后段可以只测试输出的数据。便于双发开发且互相无依赖。
2. 讲几个你在项目中解决的让你印象最深的问题（难、匪夷所思、解决方案有趣都可以）
   在开发一个富文本编辑器时发现的问题，在contenteditable元素中，selection API无法精确的判断当然光标是否在某一元素之前或之后。
   设计师给出的图片区域的html是img标签和下方一行描述(div)，两个元素又都嵌套在一个div内。我按照大多数人直觉判断，用户选中图片后删除会删除整个div(img+描述div)，在其他情况下(但光标在div内)删除会变成删除图片的描述文字，当光标在描述div内时左右键是正常的向左向右移动，但在大div内却不在描述div时左右移动会变成移动到上一段结尾/下一段开头。
   于是写完逻辑后测试正常，但有些用户却反馈有时会出现bug(删除时只移除了图片或描述，描述的文字超出描述div，css失效)，于是在各个浏览器测试发现的确在极端情况下有一定概率会有问题(用鼠标乱选然后狂点H1, 加黑, 波浪线等等..)
   解决方法到是很简单，在用户输入完成后自动检测图片区域的格式，并尽量自动修正(remove 多余元素，讲文字放回描述块..)
   遇到过selection api的很多bug/兼容性问题，总结为文章
   http://jjyr.github.io/javascript,/browser/2014/03/28/some-cross-broswer-problems-during-my-richtext-editor-developing/
3. 在JavaScript面向对象方面，你有什么体会和实践？
   js(ES5)中没'class'，Object的格式无’约束‘，与一般支持OO的语言不同，从object取key时不会报错而是返回undefined，不利于bug的发现(写一堆js代码后经常遇到undefined的error)，js是弱类型也加剧了此问题，造成开发上的麻烦，个人认为大型项目时为了便于开发使用typescript之类的语言是个好选择。目前自己正在实现一个编译到js的动态类型语言，类ruby/python，取不存在的'key'时会报错，在语言中杜绝undefined。
4. 谈谈JavaScript中的闭包，以及你的实践。
   感觉最常用的还是用来隐藏变量，我用闭包来实现从instance取method时绑定self变量(类似python)

function get_instance_bounded_member(obj, key){
    // find key from object class
    var unbound = find_class_member(obj.$class, key)
    // pass obj as self
    var bounded = function(){
      // fun_args just concat obj & arguments like [obj, arg1,arg2]
      unbound.apply(undefined, fun_args(obj, arguments))
    }
    return bounded
  }

[bluetomlee]

对于大量图片，是否考虑过webp
商户端上传的插件可以做webp处理
在前端根据支持程度来返回jpg还是webp

[wintercn]

@bluetomlee 我们就是酱紫做的啊

[hax]

@wintercn 不考虑直接服务器端根据accept头来判的原因是？

[wintercn]

@hax 一个是静态CDN集群这么干不利于缓存，另一个是accept头大家不太认真发。

[hax]

@wintercn 我最近上了一个webp。方式是根据accept头返回不同的html（加了Vary: User-Agent），分别引用不同的图片（webp或jpg）。从我这两天的tracking数据来看，至少没有出现不支持webp但是发accept webp的情况。

[wintercn]

@hax 反过来呢 支持webp但是不发accept的情况?

[hax]

@wintercn 这种情况暂时没测（因为本身不会引起问题）。下周会再上一批用webp的页面，会一并测一下这种情况。

[kevinwang04]

先占坑，有机会过来试试^_=

[zcyzcy88]

你对前端职业发展有何看法？
（嘿，我不是职业前端）
虽然轮子越来越多，但是HTML+CSS+JS（JS迟早有新语言替代它）才是正统

前端和后端程序员应该如何合作？
后端写API，偶尔负责输出HTML为禁用JS的用户挽尊
前端写App

讲几个你在项目中解决的让你印象最深的问题（难、匪夷所思、解决方案有趣都可以）
jQuery触发click有可能无效，自己写了个方法覆盖掉它

$.fn.click = function (func) {
    if (func) { //太懒，不写类型检查
        return this.on('click', func)
    } else {
        return this.each(function () {
            this.click()
        })
    }
}

在JavaScript面向对象方面，你有什么体会和实践？
不关心多重继承什么的，函数很好用
$.fn实在是好用

谈谈JavaScript中的闭包，以及你的实践。
用于避开GC、隔离作用域

$('body').on('click', '.modal-wrapper .zu-button-more', function () {
    var self = this
    setTimeout(function () {
        self.click()
    }, 350)
})

说说 http://m.taobao.com 前端做的最烂的地方，以及你的改进。
网址太长

谈几个有趣的html标签，以及它们的语义。
<datalist>自动完成
<del>删除线

讲一讲CSS的position/float/display都有哪些取值，它们相互叠加时的行为都是什么？
略

说几个你觉得有趣的CSS3选择器，以及他们有趣的用法。
:before``:after
用来实现tooltip

自己问自己一道代表你水平的面试题，然后回答。
问：你觉得JS（无关DOM）最烂之处是什么？
isNaN()

[TobinXu]

1. 你对前端职业发展有何看法？
   前端其实就是页面、交互的开发者，如果不在大型、注重web产品形象气质的企业中，存在的价值就可以忽略，目前 我就在这样一家公司，不过我始终认为，前端工程师要比产品经理懂技术，要比后端工程师懂产品，他是技术人员，更是产品经理和后端工程师之间的桥梁，技术好了可以转后端，感觉到了可以做产品，进可攻退可守，算是比较不错的前端职业生涯规划。
2. 前端和后端程序员应该如何合作？
   如果是做基于后端某一框架（如SpringMVC, Django）的ERP或者进销存等管理软件，前端基本就是写界面的，js往往不需要特别的模块化，跟后端的合作也就是写好界面给他们、然后包装一些js或者css3的交互效果，不过前端开发者在这种项目中最好能懂一点后端代码，如果能承担后端MVC层中的C的编写就更好了，什么时候需要用ajax、什么时候跳转，懂前端的艺术家都会比纯后端感觉好一点（我现在就在团队中扮演这么一个角色），如果使用REST规范去做项目，那么前端与后端的耦合度就会降到很低了，这时候就是对页面展示的一些数据格式进行规范化定义，这个是需要前后端达成一致的。
3. 讲几个你在项目中解决的让你印象最深的问题（难、匪夷所思、解决方案有趣都可以）
   工作经验不足，没有什么特别匪夷所思的，讲一下用jquery选中select吧，今天刚遇到的，一直以为是要设置$('option').attr('selected',true);可是总生效不了，结果我无意中发现$('select').val('value')；就可以选中val = value的option。
4. 在JavaScript面向对象方面，你有什么体会和实践？
   js不够oo,因为我java出身同时掌握python语言，这两个无论动态还是静态语言的类定义继承等都很方便，js就有点太麻烦了，直接把类的引用做为构造函数，然后在prototype中定义实例变量，总是不够方便，不过原型继承这个概念很通透，也很利于扩展。实践方面，我没有做过很复杂的应用项目，没有自己定义过很多类，然后去扩展，不过jquery的插件是我工作中常用的，$.fn扩展jquery这个类的实例方法，能够很方便的使用jquery特性，让oo很舒服。
5. 谈谈JavaScript中的闭包，以及你的实践。
   闭包其实就是定义一个匿名函数，使其内部变量仅仅贡献于函数内上下文，无污染的代码始终维护都很方便。
6. 说说 http://m.taobao.com 前端做的最烂的地方，以及你的改进。
   不好找
7. 谈几个有趣的html标签，以及它们的语义。
   传统的 h1-h6, 后来html5又加入了更多语义化标签的支持，header（页眉）, footer（页脚）, acticle（文章主体）, aside（非主体部分）, nav（导航）, section（章节）, hgroup（标题组）, address（地址声明区） b, i（强调部分） 也被赋予了语义的角色。
8. 讲一讲CSS的position/float/display都有哪些取值，它们相互叠加时的行为都是什么？
   position: static[absolute, relative, fixed]. float:none[left,right]. display: block[inline,inline-block,...相当多，常用的就这三个]
   position:static时float才有用，position:一旦不是static或者relative它就脱离文档流了（其实我不是特别清楚，relative时是否脱离文档流）
9. 说几个你觉得有趣的CSS3选择器，以及他们有趣的用法。
   attr *="" ^="" ~="" $="", E:nth-child(n), 关系选择符 E+F(相邻的)
10. 【自定义问题】怎么能让前端开发的成本降低，让新手程序员快速融入团队？
    关键还是看体系，一个企业的技术架构体系，就像后端一样，有着完善的框架，一个刚毕业不久的java程序员很快就能上手基于SpringMVC的项目开发。前端之所以难上手，难做出高质量的应用，关键还是体系太乱，没有成型的技术体系，目前我就在公司内部推崇一套技术体系，主要基于Bootstrap + jquery + Modernizr + jquery.ui ，绝不随随便便就增减体系，然后针对这一套框架做二次开发，封装成插件，或者公用类库，整理成企业自己的前端技术体系，让很多小白程序员很简单就上手前端开发，写很少前端代码。

闭包聊一下作用域链了。闭包就是作用域链的一个特殊应用，。