前端性能优化方面

每月分享-2020年9月

一．优化的目的。
每减少0.1秒加载速度可能会带来几百甚至几千的用户活跃；每减少100K的内容请求可能会带来几千甚至几万的的服务端费用。

二．优化的方方面面
1.先说花里胡哨的css

1. 尽量减少标签选择器的使用
2. 尽量少使用id选择器，多使用样式类选择器（通用性比较强）
3. 减少选择器前面的前缀（选择器是从右向左查找的，前缀多，查询的时间多）
4. 避免使用css表达式（例如：calc）
5. css放在head中，让页面加载的时候，先加载css，再加载js(先呈现页面，再给用户提供操作)
   2.再说说和java一个没关系的兄弟js（javaScript）
6. 避免频繁操作 DOM
7. 模块就近加载（CMD）
8. 依赖后端数据的元素，可以先设置 display: none，有数据后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。
9. 要减少作用域链查找还应该减少闭包的使用（比如定时器使用完记得清空哦～）
10. 尽量使用css3动画代替js动画，因为css3的动画或者变形都开启了硬件加速，性能比js动画好。
11. 减少事件触发频率
12. 减少Http请求，减少http的主要手段是合并CSS、合并javascript、合并图片。图片较多的页面也可以使用 lazyLoad

三．划重点
优化方面这只是冰山一角，主要目的就是给用户提供更为良好的体验，给公司节约资源。