非软妹,非暖男,也不弯,前端求带走

2014-10-25 16:14:09 +08:00
 huaxinjiayou
http://www.360duzhe.com/
最近弄的(express + mysql),没做简历,能不能愉快的工作呢…
8520 次点击
所在节点    求职
50 条回复
otakustay
2014-10-25 22:39:00 +08:00
@zlgodpig

1. 楼主求的是前端的职,不发简历发一个网站,自然应该让人从网站中看出他的前端能力和对前端的态度,至少我从这个站点看到的是对前端技术的不求甚解只是完成而不深挖的态度,你愿意招一个前端跑到你公司接到任务跟你说“不就一个小网站么随便弄弄好了”这样吗?
2. jsp不熟悉,但楼主用的express这个我也用过,能弄出4个空行实属不易……至于问题,我也可以说确实没问题,毕竟HTML标准说了允许前面有空行,但作为一个工程师真的容忍这些空行就算了?不去发现为何有空行不去解决并积累心得吗?
huaxinjiayou
2014-10-25 22:41:22 +08:00
@otakustay
1、因为你只看到了4个页面… 不累…
2、是打算每次版本更新全部刷新缓存… 为了一个高大上的MD5而做更多的打包工作,我不喜欢…
3、额,不是 html 文件… 求浏览器版本… 已调整 ejs 模板文件…
4、没错,兼容IE6,都说你只看了4个页面就…(用什么浏览器是你的自由,我不嫌麻烦支持IE6是我的自由)
5、要用border画,以后footer最底下的元素变了你就同时要改css 和 html 了… 求证 class 命名方式和网站改版的必然联系(不恰当的例子,人家微博也是这样的呢)…
6、不知道 seajs-combo 模块,回去看文档(都不留链接)… 求 知道模块化 和不能写 window.globalData 的必然联系…
7、估计你的移动设备分辨率超过了1120… 有简单的兼容移动设备,看 style.css 最后一行… 都说你只看了4个页面就…

等我把打包代码开源,你帮我改下打包脚本?

以上的你指出的点,都不妨碍作为一个用户正常的浏览页面… 其实我的要求很低的…

最后,也不妨碍我的愉快的工作…

最最后,作为前端,我基本不写 html 和 css … 纯切图套模板不用找我了…
airyland
2014-10-25 22:52:59 +08:00
我觉得 @otakustay 过于严肃去纠结代码。任何页面都可以找到一堆可以批评的地方,包括其他人去看你写的页面。
otakustay
2014-10-25 22:57:17 +08:00
@huaxinjiayou
1. 你不累我的浏览器倒是累的,从Network图上一看就明白
2. 有时候,工作不由得你不喜欢,如果不喜欢就不干,那工作可能不会找上你
3. 好吧浏览器是不会有问题的这个我可以明确说,但是这4个空行真心很有趣不是吗
4. 也是,兼容IE6是不错,为此用<a>可以理解,那请问你的clearfix使用:after伪元素兼容IE6吗?还是在这一点上你有别的看法?
5. 于是我很好奇为什么header那边的border,同样也是一个颜色渐变的横条,你就不用单独元素了呢,是header不会变footer会变的意思吗?另外微博从纯前端的可见表现上来说烂!爆!了!无论是教主还是谁过来我照样当着他的面这么说
6. 为啥我要留链接……你在公司里的时候别人告诉你XX能解决问题你都是说不给链接我才不看吗?如果你知道模块化,并且深入学习了,理解模块化针对解决的总是,理解模块化的意义,理解所谓的基于模块去设计、封装、抽象代码,管理依赖,我想你不会在自己可控的范围内用全局变量
7. 我只是简单的拿Chrome开移动设备emulator看了下首页而已,banner看不到图片却让左右箭头依旧在,最新书籍一行只能放下一个但一个占了一半多一点点所以右边一片空白也不调整下大小,我前面说的是你“没有针对移动设备去做布局上的思考”,不是指你没有兼容移动设备,这是2个层次的事

另外我不会帮你改打包脚本的~

最后感叹下现在前端的要求真心好低好低……连认真去完善每个细节都是不必要的了……
otakustay
2014-10-25 23:00:23 +08:00
@airyland 是的,任何人看我的代码同样能发现很多问题,并且我会很认真地去接受和研究,在其中寻找自己所缺的知识并寻找方法去补充,所以我非常欢迎任何一个人对我的代码提出意见,我也工作/生活在一个这样的公司这样的团队中,一个Code Review做到变量命名是否合理、换行怎么换让读者更舒畅、2块颜色有微小差异是否应该使用同一种颜色或者从设计上就应该两种颜色这些都认真讨论的团队,让我感到非常的愉快
huaxinjiayou
2014-10-25 23:17:25 +08:00
@otakustay

有些考虑下个版本改… 我的想法是线上不出错,优化可以慢慢来…


最后感叹下现在前端的要求真心好低好低……连认真去完善每个细节都是不必要的了……


我代表不了现在的前端的… %>_<% … 无数人躺枪…
airyland
2014-10-25 23:18:51 +08:00
@otakustay 其实工作一段时间后我已经不会太追求这些细节的完美了。我会注意到,但不会当作紧急且重要的事去完成。我认为合理的规范是必要的,不和谐的交互应该讨论或者用数据来发现解决方法。但是在实际需求中最后一些细节的东西会被落下,因为时间不够了,上线后开始另一个需求了。另一个理由(借口)是这些代码层面的东西不影响用户看到的输出。过于严格(严苛)的Review很多情况下会直接导致需求不能按时上线,你怎么对待这样的情况?

然后,问一下你在百度哪个产品线呢?
otakustay
2014-10-25 23:18:57 +08:00
@huaxinjiayou 就像简历里大家都会拼命表达自己很不错很适合工作一样,我想前端使用一个自己做的小站代替简历是个很好的方向,但这个小站也应该和简历一样去拼命表达自己的前端能力和对前端技术的态度才是:)

虽然有4年多没去应聘了,不过面的人是不少,以上是感想- -
otakustay
2014-10-25 23:24:03 +08:00
@airyland 百度联盟相关部门,广告管家、移动SSP等若干个产品,主攻单页应用方向

我们这边很简单,PM对功能开发用时没有话语权,工程师依照能把东西做得优秀为前提进行时间估算并以此推进项目,轮不到PM急着上功能。对于特殊情况如市场限制某些重大功能不出来产品就完了,工程师表示理解并快速上线,但会在此前要求上线后PM会留出足够的时间来给工程师尽快完成相关的改造和优化,比如每个敏捷迭代要有1/2的时间由工程师自主控制

另一方面,本身开发团队这边就不会投入所有工程师人力做业务项目,始终有1/5左右的人力(比如团队10个人,就有2个人)在业务之外去做一些技术的积累和对代码的审查,从代码中发现问题并及时改进。在之前这1/5的人力一般是交给高级别工程师,最近想尝试使用转盘式让每个工程师都有这样的机会

百度是非常技术导向的一个公司(相比A和T),技术人员的话语权可是很强的,这也是为啥我快5年了也不想离开,在这里可以非常愉快地和技术人员相处并得到足够的时间空间自我提高,可以认真细致对待每一行代码,去思考大量可能的优化并付诸实施
taoche
2014-10-25 23:25:32 +08:00
我只是不明白楼上为啥执着于 js 文件合并,lz用了sea.js做加载,在后期还会继续完善这个项目前提下完全不用合并文件数。。就算后期不继续完善,做个CDN并发,也远比合并JS文件来的好。
zlgodpig
2014-10-25 23:49:07 +08:00
@otakustay 果然还是氛围决定思维方式。也认识一些百度的朋友,对细节的要求的确让我叹服。。我们向领导要时间整理代码,都要不到,所以都是功能优先,兼顾能快速更改,优化最次,有时也觉得很苦恼。风格问题,就不争论了
otakustay
2014-10-26 00:11:34 +08:00
@taoche 我们做网络层面的资源加载优化,重点考虑的是2个指标:

第一是单资源加载时间,这个主要由带宽和资源大小决定,所以我们会做压缩,会开gzip,会使用缓存
第二是网络延迟,这个和资源的大小几乎没有关系,哪怕就一个TCP包,要和服务器做一次Network Roundtrip的通信,也得经受2次的网络延迟,所以我们会有Connection: keep-alive来减少TCP链接打开的次数(因为三次握手是严重受网络延迟影响的),所以我们追求文件的合并

CDN能减少网络延迟但并不能消除,另一方面网络延迟也和客户端(比如开个迅雷试试)的网络状况有很大关系,网络是前端优化领域最不可控的部分,因此一个策略就是将不可控的内容尽可能减少,合并也是受这思想影响(当然我不是说全合并了就一定是最好的)

请求优化是一个很有意思的事,比如楼主站点在我的电脑(普通的10M带宽中国电信)下,是这样加载的:

http://img3.picbed.org/uploads/2014/10/QQ20141025_1_2x.png

从图里很容易能看到这些:

1. Chrome是一批次4个请求的,4个占满以后后面的请求会阻塞
2. base.js作为一个67KB的资源,同时是后面几个js的基础,所以这个67KB不加载完,其它js是不会加载的
3. 在base.js这个大家伙加载完以前,浏览器已经把其它的图片、CSS全下载完了,同时还有段时间空在那,也就是说这段时间有几ms可以用来加载其它js这个页面就能提前几ms可用
4. 因为其它资源较少都提前完成了,common.js和index.js可以并行下载,这2个不合并在网络延迟稳定的情况下不影响整站性能,但增加了一个SPOF

从图中也可以得出一些优化的结论:

1. base.js中包含seajs,但也包含了其它东西,导致它太大了,且作为了性能的瓶颈
2. 如果把seajs单独拆开来,它依旧能和base.js并行加载不会影响性能(浏览器优先下载脚本,会把图片资源滞后),同时可以让依赖seajs的common和index提前开始下载更早可用,这是一种优化策略
3. 让seajs独立出来,通过seajs的并行加载能力(其实不用也可以实现并行),再把base拆成若干个小包,比如20KB一个共3个,从图中看几乎可以和那些图片同时完成下载,浏览器不会有段时间空着没事干,这个恰恰是和“合并”相反的一种策略,但有优化的效果,所以我说了并不是全合并一定是好的
4. 图片其实能合并或用datauri,但是考虑到图片并不是SPOF型资源,在这个Network图上也不会形成瓶颈所在,所以不合并不会造成什么问题

至于你提到的“做个CDN并发远比合并JS文件来的好”我确实不明白是什么意思,在哪几方面,怎么样的数据能显示出CDN并发好于JS文件合并呢?
Sivan
2014-10-26 00:33:10 +08:00
不切图不写 html 和 css 还当什么前端?!
crs0910
2014-10-26 00:58:06 +08:00
点赞。

这个应该算是 node.js 练手的作品吧。

从这个角度来看:
1. 全站设计靠 css 支撑,界面还感觉很舒服,有些地方配色和细节都不错(除了首页 banner 没做完)。 [审美方面没问题] [加分]
2. 设计 + 前端 + 后端 + 产品 [热情和能力都没问题] [加分]
3. 没用框架,兼容 IE ,响应式,js 和 css 模块化,做个后端练手的小站能有这样绝对 ok 了。 [加分]
4. 产品负分,如果只是后端练手的话就不用扣分啦。 [ - 0.5分]

至于使劲黑你的那位看起来好像是为了把你搞过去。说了一堆,其实 lz 未必不懂。

百度首页看看源码确实是优化到极致了。其实与其说极致,倒不如说是妥协。可这里 lz 根本不需要。

另外 lz 如果真被搞去了,记得提醒人家 clearfix 那个还真是兼容的写法。

ps 单从感官上来说,百度不仅设计丑,代码也丑。
TerranC
2014-10-26 01:50:25 +08:00
工作地点考虑长沙吗?
abelyao
2014-10-26 02:13:40 +08:00
纯粹为了顶 @otakustay 而回复,做前端,是有连 1px 都要调整的心态,心态问题,别的不多说了。
raincious
2014-10-26 09:21:57 +08:00
@otakustay 说服别人首先得以交流的语气,这是公共网络,别人不是你的同事(你不规则约束)或下属(还不能逼)。减少反问句的使用量能极大提高建议被接受的可能性(这也是你回这个帖子的原因,别忘了)。

(不信请看地下室的Demo)

除此之外,(以我浅薄的前端知识)你说的都是对的。

嗯,特别是打散模块,看你说完我就检查了自己的代码,发现一个121k的js文件可以被拆(捂脸,原先是为了文件依赖树整齐而放在一起的)。看来后面也要考虑拆了之后用单独域名+CDN的方法来提高并发效率同时降低应用程序服务器的负载了。

(CSS文件里那一堆糟糕的东西我就不说了,等上线功能固定之后指定标准然后修改)

作为原先在V2EX上被虐过来的,我想说的是,楼主,其实认真看了之后知识量涨不少(,虽然心理抵触可能是有的)。

============== 地表分界线 ==============

&nbsp;+--------+
&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
&nbsp;|&nbsp;&nbsp;Base&nbsp;&nbsp;|
&nbsp;|&nbsp;&nbsp;ment&nbsp;\| [::]
&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| This door may distorted by earthquake.
&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
&nbsp;+--------+

你语气好牛逼呢?忘了这是哪儿了?把别人都当你一组的了还是当成你下面的了?[纯语气辅助]别人认可你的答案是对你的赏识,给你面子[/纯语气辅助]。[Beep]一口牛逼[/Beep]的喷过去,当你是老罗么?

============== 地幔分界线 ==============

但,其实,别人不会这样说出来。毕竟太不理性:
https://zh.wikipedia.org/zh/%E8%A8%B4%E8%AB%B8%E6%83%85%E6%84%9F

So,只是作为劝告好了。
huaxinjiayou
2014-10-26 09:52:09 +08:00
感觉楼歪了…



后台换了张banner图,开心就好…
fclql
2014-10-26 10:55:40 +08:00
什么都不是要你干嘛?
otakustay
2014-10-26 11:33:47 +08:00
@raincious Thanks,确实一边看着吐槽类动画一边看这贴子,当时就想着用一些戏谑的语气但显然过火了,在此道个歉 @huaxinjiayou

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/141463

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX