前端性能优化汇总

前端性能优化汇总(尽量干货一些):
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中应该让拥有状态的组件尽量靠近叶子节点,这样状态改变的时候,涉及的组件范围小,减少重新渲染;

你可能感兴趣的:(前端性能优化汇总)