梳理:提高前端性能方面的处理以及不足

这篇文章发布于 2013年04月3日,星期三,13:52,归类于 CSS相关。 阅读 137060 次, 今日 1 次 60 条评论

 

一、清明时节雨纷纷

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

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

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

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

二、最最基本的

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

以上没什么好说的。

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

四、降低静态资源请求数

  • 开始提到的CSS sprite,目前因降低后期维护成本,sprite的规模有所降低
  • 字符与图形生成,如: 该图效果之前有介绍
  • CSS图形生成,如三角
  • CSS模拟,如几像素的投影效果
  • CSS3技术,例如渐变效果CSS3 gradient+filter投影效果CSS3 box-shadow+filter blur。
    IE7浏览器下滤镜实现的按钮投影效果
  • base64 url技术,例如虚点效果:

五、资源的复用

  • 团队CSS样式库,快速构建网站 – Bootstrap有点类似我们这个味道,.span1,.span2,.span3,.span4,.span4,...
  • 高宽自适应 – 无论选项卡、按钮等还是各个大小模块都是高宽自适应的,以适用于各种环境、需求
    高宽自适应按钮
  • CSS3 font-face技术 – 纯色图标大小以及颜色可以随意控制,增强复用
    CSS3 font-face应用截图 张鑫旭-鑫空间-鑫生活 CSS3 font-face应用截图 张鑫旭-鑫空间-鑫生活

六、js/HTML交互相关

七、浏览器自身的潜力

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

八、问题所在

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

九、结语

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

互相交流,共同进步

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

他人观点:

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

(本篇完)

分享到:


发表评论(目前60 条评论)

  1. pod4g说道:

    做完性能优化之后,如何知道自己的优化是「正优化」还是「负优化」?具体优化了多少?大家可以使用这个性能统计分析工具,上述的问题就不存在了

    https://github.com/pod4g/hiper

  2. 汤烨说道:

    下拉/弹框等默认隐藏资源使用textarea隐藏。需要显示时候才真正显露。

  3. 集萤映雪说道:

    现在才看旭神的这篇文章,实在是搞不明白:怎么会有公司看不中你呢???!!!那两家公司的眼睛是不是瞎了啊。。。

  4. 陆斌说道:

    你好,最近遇到一个问题,浮动的图片没有加载出来的时候,页面是没有被撑开的。想知道,如果图片加载完成后,重新设置图片宽度,是否会触发全局样式重新计算呢?什么时候会重新计算呢?

  5. 婷婷说道:

    请介绍一些比较好的前端书籍!谢谢。

  6. danny说道:

    请问张大哥,“文字所占据高度为12px * 1.4 = 16.8px”,这个1.4是怎么得出来的?

  7. Nero说道:

    看了你2011年的一篇localstorage的文章,这篇文章页提到了,想请教一下,localstorage能不能用来存储页面的元素例如css、js脚本之类的呢?

  8. jellychow说道:

    张大哥,对于“CSS3 font-face技术 – 纯色图标大小以及颜色可以随意控制,增强复用”这点我有疑问:
    search了一下资料说,font-face会造成性能问题,您是怎么看待这个问题的?

  9. 你这个水平,去那里都不是问题。

  10. 秀才说道:

    腾讯上海这边有几个部门在招前端,不知你有兴趣没

  11. 不想做java开发了
    最近在学CSS
    转前端了准备

  12. 大超超。说道:

    又学习到不少前端的知识,旭哥很厉害!

  13. yxiao说道:

    好想学习前端。

  14. lemon说道:

    关于性能方面的书你可以看一下 Steve Souders 《高性能网站建设》

  15. lilian说道:

    你是千里马,只是还没有遇到伯乐。永远支持你。

  16. 过马路的老公公说道:

    张大哥是广东那里的?有空让我等凡人瞻拜一下。

  17. yatelu1说道:

    总觉的bootstrap的 .span3 .span4 .span5之类的有利有弊。
    好处:快速建站,资源复用。
    坏处:不够语义化。
    我们网站以前用这个后来被叫停了

  18. chaoren1641说道:

    杭州来吗?简历发我OK否?

  19. candoudou说道:

    重点讲讲localStorage在实际项目中的应用。

  20. 林小米说道:

    .fr, .fl, f12px 等 舍弃不掉, 我还是蛮爱用的···

  21. 蓝面小生说道:

    忍不住说下,面试这个东西还是需要提前准备一下的,毕竟那并不代表你的能力,但是却决定了你的去留。

  22. tgreen129说道:

    font-face不是css3技术,ie6/7也是支持的

  23. 小豪说道:

    加油哈

  24. wwj说道:

    最近行情不太好啊,我好多同学都还没有工作,在家待业

  25. Hls说道:

    想请问一下订餐小秘书的手机版使用什么技术完成的?3Q!!

  26. Daniel说道:

    这样的人才。。。公司都抢着要吧。。。
    TX上海。求去面

  27. Jerry说道:

    “下拉框/弹框 隐藏在textarea” 是什么意思?如何实现,这样做有什么好处?

  28. abc说道:

    来厦门吧,这边也好多鱼。

  29. andy说道:

    你的期望薪资多少啊?

  30. Exodia说道:

    则图片在首次载入时候,占据空间会从0到完全出现

    这个是不对的,浏览器在获得图片的头信息后, 就能确定图片宽高, 此时已经会给图片尺寸留下空间, 因此重绘次数没有那么夸张。

  31. 袁源说道:

    好全面,赞

  32. 树残由尔说道:

    CSS模拟,如几像素的投影效果 这个有例子么

  33. 树残由尔说道:

    不错啊 求学习

  34. 葵中剑说道:

    有些团队本来就比较狭隘容不下个性,有的团队虽然挺好,但leader却一根筋…博主实钻研和分享精神国内少有,确实可惜了。博主愿意跑杭州吗?

  35. 楔子说道:

    @张 “例如,如果是组件式的模块,页面很多地方使用的,且不同源(不是一个接口调出来的,例如按钮、选项卡等),显然不能使用.fl, .fr。因为后期维护你会玩完。” 这句是不是有问题,里面的类名应该是div.mod>div.col-l+div.col-main这个吧!

  36. 小安说道:

    @张 鑫旭
    哦明白了。谢谢~

  37. 玉面小飞鱼说道:

    很棒的梳理,遥祝张大哥拿到心仪offer啦

  38. 路人甲说道:

    大牛是在这个小秘书呆了三年吗?

  39. WXYCooL说道:

    长三角洲正在流行H7N9流感了,躲都躲不掉,还要来?

  40. 小安说道:

    @张 鑫旭
    应该是我的表述有问题,一丝说“ 太多.l ,.r这样的样式了?”
    那么意思是不是 这样的方案不够好,或者说不够优雅?
    如果不好,那应该怎么做呢?
    现在我做的还是在base里面定义好.fl, fr然后浮动去调用。
    那么实际上,更加好的做法是什么?
    是写在比如div.mod>div.col-l+div.col-main
    样式定义.col-l{float:left;…..} .col-main{float:left;……}
    这样?
    而不是写成div.mod>div.col-l.fl+div.col-main.fl?
    我还是前端新人 想学习一下。。

    • 张 鑫旭说道:

      @小安 这个要根据你布局的内容的性质来的。例如,如果是组件式的模块,页面很多地方使用的,且不同源(不是一个接口调出来的,例如按钮、选项卡等),显然不能使用.fl, .fr。因为后期维护你会玩完。
      但是,对于一般的不具有重用性的元素,.fl, .fr可以快速开发,节约代码,提高性能,以及维护,是没有任何问题的。
      所谓太多.l ,.r可能指独立样式太多,看了不舒服,不习惯。

  41. 行者说道:

    不输在技术上,没成功,确实有些可惜。
    面试时也需要一些运气成分,有些公司可能当时不急需人。

    最近也在搞优化相关的调研,
    想做的内容是发布时自动合并压缩js和css。

  42. 小安说道:

    请问既然.l, .r , .clearfix,这样的样式,不是好的方案,所以还是直接写在结构的CLASS里面嘛?

  43. 一丝说道:

    太多 .l ,.r 类似的样式了~