2、html前端页面优化

一、HTML

• 语义化标签
• 加载顺序：CSS放在head里面（用户看到顺畅页面），js放在尾部（会阻塞DOM渲染，且DOM树没搭建好时，js里面的DOM操作会有问题）
• 减少页面请求：合并img，合并css，避免使用@import方式引入css文件
• 减少文件大小

1. 主要减少img文件大小，选用合适的格式并且用工具进行压缩（ImageOptim,ImageAlpha,JPEGmini）
2. 删除不必要的标签

二、CSS

1. 选择器L越简单越短越好，同样的样式进行选择器合并
2. css值缩写：margin等，值为0对的省略单位

font:normal small-caps bold 14px/1.5em '宋体',arial,verdana;
等价于：
font-style:normal;
font-variant:small-caps;
font-weight:bold;
font-size:14px;
line-height:1.5em;
font-family:'宋体',arial,verdana;

3.减少文件大小

4.少用好性能的属性：expresion,border-radius,filter,box-shadow,gradients等

5.图片设置宽高，不要缩放，减少浏览器的回流和重绘

6、所有表现用css实现

7、模块化

8.命名规范、语义化

9.尽量减少hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

三、javascript

1.页面懒加载

2.通过事件委托机制减少对DOM的操作