一.开发原则
1.减少HTML中的元素数量,用最少但最必须的HTML去语义化布局
关键词:语义化
2.减少重绘,例如用JS修改元素类名而不是逐个修改属性,这会导致多次重绘
关键词:什么是重绘,CSS与JS解耦
3.用CSS来布局,边界处理,让布局出现在盒模型内部,避免布局依赖上下文,比如margin等(但可以变通)
关键词:盒模型
4.渐进增强,特性检测
关键词:www.css3please.com
5.各司其职,尽一切可能用CSS完成交互
关键词:解耦
二.性能准则
1.减少HTTP请求
关键词:理解并行连接,合并资源文件,合并图片用位移显示
2.使用CDN加速
3.避免使用空的src和href,空值依旧会产生HTTP请求
4.增加过期头,使浏览器能合理缓存固定的文件
5.启用GZIP并压缩CSS与JS代码
6.CSS放置于头部,JS放置于尾部
7.避免CSS表达式,表达式会在网站运行时无限次计算,造成灾难性体验
8.删除多余CSS代码
9.减少重绘
关键词:规定图片宽高,使得浏览器在图片加载前可以空出位置,避免大范围重绘;莫用表格布局;定义字符集meta标签~;莫重组DOM元素
10.响应式设计与栅格设计(莫滥用)
关键词:@media xxx and xxx {..........} 默认、平板、手机、手机横屏布局