1、css
避免过多样式嵌套
避免使用css表达式
使用绝对定位可以让动画元素脱离文档流(给动画元素做单独定位)
避免使用table布局(会引起多次重绘)
尽量不适用float布局
图片最好设置好width和height
尽量简化浏览器不必要的任务,减少页面重新布局
使用viewpoint设置屏幕缩放级别
避免频繁设置样式
避免使用引起回流的和重绘的属性
2、js
最小化回流和重排:避免频繁操作DOM,可以合并多次对DOM修改,尽量一次性批量处理
控制绘制过程和绘制区域
3、优化DOM
控制DOM大小:合理的业务逻辑(逻辑拆分)、延迟加载即将呈现的内容
简化DOM操作:统一处理DOM节点的操作后再统一插入到DOM TREE中;使用fragment;虚拟DOM技术,通过diff算法简化和减少DOM操作
4、静态文件压缩工具:
HTML压缩工具:html-minifier
CSS压缩工具:clean-css
JS压缩工具:uglify-js
5、静态文件打包方案:
公共组件拆分
压缩:JS/CSS/图片
合并:JS/CSS文件合并,CSS Sprite
Combo:JS/CSS文件