前端性能优化汇总

前端性能优化汇总（尽量干货一些）：
1.减少事件注册，尽量利用事件冒泡原理进行事件代理，注册到父级元素上，减少内存开销；
2.css样式选择器 尽量采用类名的方式，不要采用标签，因为选择器是从右向左解析的，#id a 会先匹配所有的a标签，再判断#id，效率低下，不如#id .className 高效；
3.减少浏览器的reflow和repaint（重排和重绘），频繁的dom操作会触发浏览器的reflow和repaint，极耗性能，可以借用fragment文档片段、或者各种库：react、vue等，这些库都可以避免频繁的dom操作；
4.文档中尽量优先指明img的宽高，这样浏览器在解析的时候 会预留出相应的空间放置后续加载成功的图片，避免了浏览器的重排重绘；
5.尽量将样式文件放在head头部，js文件放在body底部，因为样式文件加载缓慢的话，可能造成FOUC（文档样式闪烁），js会阻塞文档的解析，导致页面加载缓慢，所以尽量延迟加载js；
6.减少http请求，浏览器对同一域名同时发起的请求数是有限制的，当某页面资源请求数比较多的时候，可以将资源分配到不同的服务器上，这样可以针对不同域名同时发起请求，加快请求的响应；同时对资源文件进行压缩，减少带宽浪费，加快传输速度；
7.尽量利用缓存，比如某些字体文件，不常发生变化，就可以缓存在本地，不需要每次都重新获取，可以是强缓存200 或者 协商缓存304；
8.对于一些维持客户端和服务器端激活状态的请求 ，服务器可以返回204（只返回报文头部，主体不返回），减少带宽浪费，提高性能；
9.做活动图片的时候，切图时图片大小尽量控制在200KB，当前网络环境下对于200KB图片的下载速度是普遍可以接受的；
10.React中应该让拥有状态的组件尽量靠近叶子节点，这样状态改变的时候，涉及的组件范围小，减少重新渲染；