简单介绍几个优化的方式:1.减少请求数量;2.减少资源大小;3.优化网络连接;4.优化资源加载;5.减少重绘回流
一、减少请求数量
1.避免使用重定向
2.不使用CSS中的@impor
3.使用字体图标代替小图片
4.避免使用空的src和href
二、减少资源大小
1.代码压缩
2.图片压缩
3.开启gzip
三、优化网络连接
1.使用CDN
2.DNS预解析(提前解析之后可能用到的域名,加入到缓存中。方式:在head中添加<link rel="dns-prefetch" href="域名">)
3.开启keepalive(在http1.1以上的版本默认开启)
四、优化资源加载
1.CSS文件放在head中
2.JS文件放在body标签后面
3.按需加载模块(在SPA业务中)
五、减少重绘回流
重绘:当元素改变外观,而又不改变布局(如宽高、padding、margin、display等属性)时,就会触发重绘。
回流:当元素布局、宽高、display改变时,就会触发回流。
特点:回流最少触发一次,在页面初始加载时。回流必定触发重绘;重绘不一定会触发回流。
1.减少dom操作
2.使用class名操作样式
3.避免使用tabble布局
4.避免使用CSS表达式
5.给图片设置尺寸