前端页面优化
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
- 页面懒加载
- 通过委托机制等减少dom操作
- 尽量减少对象