前端优化的方案

前端性能优化

• 1、减少http请求，合理浏览器缓存
• 2、启用压缩：HTML、CSS、javascript文件启用GZip压缩可达到较好的效果
• 3、CSS Sprites：合并 CSS图片，减少请求数的又一个好办法。
• 4、LazyLoad Images：在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片
• 5、CSS放在页面最上部，javascript放在页面最下面：让浏览器尽快下载CSS渲染页面
• 6、异步请求Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）
• 7.路由懒加载
• 8.减少cookie传输

一.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.搜索引擎的优化能够提升用户的访问量