@nina 我的用户名[at]gmail v2没有私信我也不大敢就这么公开留个Q……

Safari的卡顿和BUG让我非常受不了，又会拖慢系统，但是考虑到全平台的支持和iCloud tab、Handoff等功能，还是被绑在上面了……

@raincious Thanks，确实一边看着吐槽类动画一边看这贴子，当时就想着用一些戏谑的语气但显然过火了，在此道个歉 @huaxinjiayou

我的Numbers可以

@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文件合并呢？

@airyland 百度联盟相关部门，广告管家、移动SSP等若干个产品，主攻单页应用方向

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

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

百度是非常技术导向的一个公司（相比A和T），技术人员的话语权可是很强的，这也是为啥我快5年了也不想离开，在这里可以非常愉快地和技术人员相处并得到足够的时间空间自我提高，可以认真细致对待每一行代码，去思考大量可能的优化并付诸实施

@huaxinjiayou 就像简历里大家都会拼命表达自己很不错很适合工作一样，我想前端使用一个自己做的小站代替简历是个很好的方向，但这个小站也应该和简历一样去拼命表达自己的前端能力和对前端技术的态度才是：）

虽然有4年多没去应聘了，不过面的人是不少，以上是感想- -

@airyland 是的，任何人看我的代码同样能发现很多问题，并且我会很认真地去接受和研究，在其中寻找自己所缺的知识并寻找方法去补充，所以我非常欢迎任何一个人对我的代码提出意见，我也工作/生活在一个这样的公司这样的团队中，一个Code Review做到变量命名是否合理、换行怎么换让读者更舒畅、2块颜色有微小差异是否应该使用同一种颜色或者从设计上就应该两种颜色这些都认真讨论的团队，让我感到非常的愉快

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

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

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

@zlgodpig

1. 楼主求的是前端的职，不发简历发一个网站，自然应该让人从网站中看出他的前端能力和对前端的态度，至少我从这个站点看到的是对前端技术的不求甚解只是完成而不深挖的态度，你愿意招一个前端跑到你公司接到任务跟你说“不就一个小网站么随便弄弄好了”这样吗？
2. jsp不熟悉，但楼主用的express这个我也用过，能弄出4个空行实属不易……至于问题，我也可以说确实没问题，毕竟HTML标准说了允许前面有空行，但作为一个工程师真的容忍这些空行就算了？不去发现为何有空行不去解决并积累心得吗？

我决定拍上一下

老实说你拿这求一个前端，但是无论HTML、CSS、JavaScript没一个能表现出一个合格的前端应该有的能力啊……

- 比如不知道为啥js要分那么多个，你说为了缓存把通用的和页面的分开吧，我看了4个页面都有base.js和common.js所以就不明白这2个为什么不合并了，一个1.2KB的common.js要占一次Network Roundtrip你不觉得累吗
- 比如你说文件路径有个时间戳肯定是为了版本管理刷掉缓存的关系我懂的吧，但是为啥要用时间戳不用MD5之类的呢，这是每上一次线哪怕文件没变化也得失去缓存吗，我看base.js就不像是每次上线都会变化的啊
- 比如好端端的首页的HTML文件，是怎么想的要在前面放4个空行呢，不怕浏览器遇上空行不认DOCTYPE吗？
- 比如banner上的左右方向，何苦用<a>元素啊何苦，还写个href="javascript:void(0)"，好好地用span会怎么着嘛，难道你还想兼容IE6吗
- 再比如看看这些神奇的class，hx-footer-border这是连个border也要用个元素来画啊，我看你好像也会用::after的更何况在上面一个元素里用background-image也可以的啊啊啊，还有hx-content-left、hx-content-right这表示你这辈子是不想改版了是吗在HTML里就写死了左边右边了CSS干啥去呢在一边咬着手帕怨念啊
- 别的比如既然用了seajs能按需加载又有后端的seajs-combo了还用script标签弄进来这么大一个base.js我就不说了（其实已经说了），比如都知道模块化了还写个window.globalData我就不说了（你真的已经说了），比如看上去用<meta>写了个移动的viewport但其实手机访问就发现完全没有为移动设备做过任何布局上的思考我也不说了（你够了）……

你确定想要愉快的工作吗- -

从互联网开放的角度来说可能是件好事吧，只是从Facebook这一个网站的角度来说，就算进来我个人也没啥兴趣……不喜欢玩在线交际圈类是因为老了么老了么……

首先无论怎么样最后先开个gzip再说

其次现在总的来说，流行工具压缩率上从高到低应该是Closure Compiler > Uglify > YUI > 一些其它工具，但是Closure如果想开Advanced模式的话对代码和注释都有很高的要求，所以一般我比较推荐上Uglify

@Koma 这个还真提醒了我，回头强制集显试试会不会卡……如果不卡那果断就是软件有问题

@Heracles Thinkpad T61P显卡门受害者表示烧显卡这事已经习惯了~

@vibbow 感觉这不是一个解不解Flash的问题，我系统的Mission Control动画卡得要死的时候看Flash能一点都不卡……更像是系统做了什么奇怪的事让系统的动画效果为其它应用或者功能让位了

产品经理竟然没有在想之后的产品要怎么发展而是很闲……那等产品经理想下一期的时候开发人员应该就很闲了