高性能HTML5

一.开发原则

　　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 {..........} 默认、平板、手机、手机横屏布局