Rocky.Wen 的工作总结,里面有很多东西值得大家学习。下面是原文
又搞首页了,这次我只抱有60%的希望。人浮于事估计还是做不好。
做东西不细致,不探讨,不接纳,好面子。so…
HTML、CSS篇
一个重要的概念:1k
我们经常听到这样的声音:“这样多几k而已,没事”,“几k会影响什么速度呢?”,“少这1k有什么好处啊?”…
1k看似很小,一个页面可能会和很多人进行配合,这个人要求多1k,那个人要求多1k,这个图要求多1k,那个图要求多1k,结果呢?就是多了很多k。有人会问多点就多点呗。如果在k数上这么随意的话,何必要编写精致的代码呢?
可知道,为了1k每天我们需要增加多少的成本?
1k*1000万PV=1000万k=10G 为了这1k,我们每天要多花费10G的流量。
算算10G流量是多少钱吧!市场价200元。
一、 速度
a) 减少页面的代码量,对于多tab的情况,页面载入时只显示第一个tab,其他的tab动态请求。
b) 外链脚本不在页面流中,页面中可以插入较少的触发性脚本。首页的广告代码是重点解决的一个部分,整个代码充斥在页面当中,使页面载入的时候有明显停顿。
c) 后请求内容图片,或者是第一屏载入后。
d) 模块化设计,使样式可以复用,减少特殊性设计,这样可以大大提高渲染的速度。
二、 显示
a) 确定重要现实区域,比如首屏幕的中间部分,确实重要显示区域,即可以在代码上优先书写。
b) 除tab第一个外,其他的tab不显示,用户点击后,附加loading效果,以粘住用户。而且只显示第一个tab和内容的话,会使页面加载的很流畅,代码量也会变小。
c) 为背景提供纯色的替代方案
三、 样式
a) 样式代码复用,基于复用的设计
b) 样式继承最大化
c) 选择符的优化和代码量的平衡
d) 导航设计不要繁琐和多样。线上的页面绝大部分,只导航就要用130行左右代码来表现。
e) 背景图片,不要过多样式背景,特别是不要在内容列表中设计渐变。每个渐变都基本会增加一个连接数。
f) 力争icon、 bg、导航3个css images
g) 字体与行高的规格制定
h) 绝对避免圆角下面是渐变。
四、 文件架构
a) 整站级别的js库、CSS库。
b) 每个页面预留类似append.css文件
c) 代替CS部门的脚本,他们的脚本是实在是影响性能。
五、 页面架构
a) 减少长度,页面越高,尾部的js加载就越晚
b) 减少inc,inc实在是影响速度。
c) 尽量不实用DNS解析慢的域存放图片。
d) 根据行高确定区域高度,不是根据高度塞新闻(这样可以在设计和代码上达到一个平衡)
六、 补充
a) 标准化各个模块。制定标准,标注样式
b) 避免单单为了修饰。
http://hi.baidu.com/rockywen/blog/item/c9dfca16f02d010c4a90a786.html
原创文章,转载请注明: 转载自焦秋野 | 关注网站设计,前端资讯,用户体验,SEO,网站设计
本文链接地址: 分享