by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=3152

一、清明时节雨纷纷

明儿个清明节了，也是我在现在公司三年合同到期的时间，本来计划换个地方的，无奈面试智商低、个性不收敛、略显随性，面了两家上海心仪公司，都在最后被拒了。我跟总监说了这事，他说我是挺亏的（毕竟不是因为技术能力不足被拒），他建议我把棱角再磨掉些。要磨吗？

先不说这个，毕竟我还年轻，机会还会有，所以当作扩展眼界、自我学习的好机会。return;

面试时候，有被提问网站性能优化的问题。被问到这个问题的时候，第一反应是，这是我自认为做的不错的地方、我做了很多优化，于是扑面而来很多信息，但由于之前没有系统梳理过，很多非常基本的都漏了（可能潜意识觉得这是常识，没什么好说的），其他的技术点也有些乱，我自己觉得是糟糕的回答。

于是，才有今天这篇文章，自己梳理下，顺便跟大家交流交流。//zxx: 本文所述的优化以及问题都可以从订餐小秘书上找到。

二、最最基本的

• CSS顶部, JS底部
• YUI compressor/Gzip
• CDN 有
• 必要的CSS Sprite
• Ajax可缓存

以上没什么好说的。

三、CSS渲染、页面重绘以及回流

四、降低静态资源请求数

五、资源的复用

六、js/HTML交互相关

七、浏览器自身的潜力

• ol列表的数字、table的自适应性
• <strong><h1-6>粗体效果
• form相关特性，元素自身特性实现submit以及reset等效果
• HTML5 placeholder以及其他N多现代浏览器支持特性等

八、问题所在

• 没有模块加载机制，20个模块脚本参杂在一起，一个页面可能只使用了4个。
• 图片的拉伸很常见
• 各种广告跟踪代码，把网站前端性能拉低了一个等级。
• HTML没有顶边显示，去除冗余空白字符以及注释，因此HTML页面大小未优化。不难，程序那边一直没做相关处理。
  
• 头部无用的一段专为IE6的script输出，之前曾做过处理，只IE6输出的，后来因为不同城市不同站等原因，后台那边懒得折腾了。

九、结语

梳理过程中发现有些地方还可进一步改进，比如城市的下拉元素们默认可以放在隐藏的textarea中，我待会就去改掉。项目的实际情况不同，相关的处理优化策略也不一样，适用性也不一样。欢迎通过评论形式分享您的一些优化处理策略，或者帮忙指出我上面说法中有问题的地方。

互相交流，共同进步！

对了，诸位有没有靠谱职位可以推荐的，长三角地区，可以微博私信联系，小生先谢过了。

他人观点：

• @wo_is神仙 不要为了优化而优化，如有必要，尽量与后端配合。

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=3152

（本篇完）