经典面试题目之：前端页面优化

前端页面优化

1、html

• 加载顺序:css放head里面(用户看到顺畅页面)，js放尾部（会阻塞dom渲染，且dom树没搭建好时，js里面的dom操作会有问题）
• 减少页面请求：合并img,合并css，避免使用@import方式引入css文件
• 减少文件大小：主要减少img文件大小，选用合适的格式并且用工具进行压缩(ImageOptim,ImageAlpha,JPEGmini)，删除不必要的标签

2、css

• 选择器：越简单越短越好,同样的样式进行选择器合并
• 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;

• 减少文件大小:YUI Compressor,cssmin
• 少用耗性能的属性:expresion,border-radius,filter,box-shadow,gradients等
• 图片设置宽高，不要缩放，减少浏览器的回流和重绘。
• 所有表现用css实现
• 模块化
• 命名规范、语义化
• 尽量减少hack

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

3、javascript

1. 页面懒加载
2. 通过委托机制等减少dom操作
3. 尽量减少对象