黄婉芳/迅雷用户体验设计中心高级重构工程师

1. 微观重构 迅雷网络 黄婉芳 2011年9月

2. 关于主题

3. 这是一个最好的年代 设备、平台、技术 ？ 硬件、带宽、webkit、Android、IOS…… chrome13、 IE10、FF6、Html5、CSS3…… 环境 引导、学习、交流、成长……

4. 我; 两年 ; 在 迅 雷

5. 谈谈“微观”

6. 重构 一张散乱的网 宏观 中观 微观

7. 细微到每一个细节 开始 结束 过程

8. 开始 了解需求背景、内容 拿来干嘛的？功能要求？什么平台？ 清晰的规划和架构 不盲目、不慌乱 可参考项目（你或者别人的） 增加熟悉感 E.g. 你陌生的领域 明确的判断

9. 过程 你， 认真并专业地在做网页重构

10. 结束 休整 做得足够好了 么?

11. 寻找适合你的最优途径 别人的路可以引导你但不一定适合你

12. 模块的提取复用

13. ！意外 团队协作良好 规划足够清晰 足够产品了解 构建项目模块 丰富的项目经验 ………… 即使需求穿插或者长时停顿也能应对自如

14. 生命在于挖掘 ——提炼

15. 看新的知识，寻找旧的踪影；

16. 伪元素 图片替换 :before :after

17. 2. 从旧的东西，回顾遗漏的点；

18. word-break (no ie only)

19. 3. 挖根究底。 247K 221K 200K内

20. 你做的东西可能并不会有用武之地 但我们不会因为这样就不去多做尝试

21. li:nth-child(2n) margin-top:height margin-left:-width

22. IE678 Chrome等 .cmt_list li{opacity:0.3} .cmt_list li:nth-child(1){font-size:1.1em;font-weight:bold;opacity:1} .cmt_list li:nth-child(2){font-size:1.1em;opacity:0.9} .cmt_list li:nth-child(3){opacity:0.7} .cmt_list li:nth-child(4){opacity:0.6} .cmt_list li:nth-child(5){opacity:0.5} .cmt_list li:nth-child(6){opacity:0.4} .cmt_list li:nth-child(7){opacity:0.3} .cmt_list li:hover{opacity:0.9}

23. 看，这些问题

24. 成长 谁都无法一口气吃成胖子，除非得了糖尿病

25. 瓶颈 充实 – 了解得越多越强大； 版本迭代 – 全力以赴； 拟想你是：产品、设计、开发……

26. 或者，纯粹只是 一个新人

27. E.g. 1. 邮件页 2. 背景色 3. 强调内容 4. 接收端多 5. 人工发布 6. 排版固定 7. 每月发布 8. 测试繁琐 …… http://xlbb.xunlei.com/201108/

28. E.g. 设计稿 1. 邮件页 2. 背景色 3. 强调内容 4. 接收端多 5. 人工发布 6. 排版固定 7. 每月发布 8. 测试繁琐 …… 内容 自动化 测试 上线

29. End~ 欢迎来论:）

30. 相关链接： http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/demo http://cued.xunlei.com/css-image-replacement-and-pseudo-elements http://ued.taobao.com/blog/2010/10/14/research-of-word-wrap/ http://www.webrebuild.org/2010/guangzhou/ 联系我： QQ：469220334 邮箱：hbaeor@gmail.com