前端优化的方案

一.css优化

1.打包css文件
2.易维护：少用ID， !important，多用class
3.样式用外部样式，最好不要用行间样式，内嵌样式
4.选择器的层级最好不要超过4层，减少层级可减少渲染速度
5.可读性：类名的命名规范
6.可扩展性：css的整体设计，公用的样式抽取，减少冗余的，重复的样式
7.样式的引入放在头部

二.js优化

1.打包js
2.减少全局变量，全局方法的定义
3.减少闭包的使用，避免多层循环的嵌套
4.减少dom节点的事件绑定
5.删除多余的代码，公用方法的抽取
6.减少http请求次数
7.js的引用放在底部
8.避免重写，重绘次数
9.行为与页面分离：js最好写在外部文件
10.js的延迟加载 deffer

三.h5的优化

1.减少多余的dom节点嵌套
2.标签的语义化使用，比如标题就用h1-h6，图文列表用figure figcaption，头部用 header，底部footer，导航nav，侧边菜单栏 aside，文章用article，模块用section等
3.使用数据缓存，sessionStorage，localStorage，离线缓存，indexedDB本地数据库
4.页面SEO的优化：title、keyword、description，图片的alt，a标签的title

四.图片的优化

1.减小图片的的大小，小图标使用svg,png，背景图片用jpg
2.雪碧图的使用，减少对服务器的请求次数
3.图片预加载
4.字体图标的使用（阿里巴巴字体图标库IconFont）

五.用户体验的优化

1.加载页面，请求接口的loading
2.页面的平滑滚动，颜色的渐变，适当的动画
3.减少操作次数，减少表单输入
4.优化页面加载的速度，缓存的合理使用，预加载的使用
5.操作图标的易读性，比如说

个人中心的icon user.png
菜单的icon menu.png

6.符合用户的行为，比如说菜单的点击放在屏幕的右边
7.搜索引擎的优化能够提升用户的访问量