前端性能优化-减少http请求，dns预解析，减少repaint和reflow

Posted 2020-12-26

前端性能优化方法：

一 . 减少http请求

（1）通过合并图片，减少请求，俗称css sprites(css精灵)css sprites 

（2）lazyload懒加载，在需要的时候再加载

　　1.定义：懒加载也称为延迟加载，图片需要用到的时候再去价值
　　2.用法：就是重写对象的get方法，当系统调用get方法再去加载对象
　　3.优点：(1)对象的实例化在getter方法中，各司其职，降低耦合性；(2)真正需要资源时，再去加载，系统的内存占用率会减小

（3）压缩/合并css和js

二 .减少repaint重绘和reflow重排

（1）repaint重绘: 元素的外观被改变，但没有改变布局（宽高）的情况下发生，如改变visibility,outline,背景色等

（2）Reflow(重排): dom的变化影响到元素的几何属性（宽高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，每次重排都会产生计算消耗，改变窗口大小/改变文字大小/style属性的变化，如果reflow过于频繁，cpu的占用就会上涨

如何减少：

　　1. 尽量少用style属性，用class重绘比重排的效率高
　　2. 有动画效果的元素设置绝对定位和固定定位
　　3. 权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
　　4. 减少不必要的dom层级，不要频繁操作dom

三 . dns预解析

让具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入使串行的网络操作，这个操作能减少用户的等待时间，提升用户体验
用法：放在meta标签后面<link rel="dns-prefetch" href="//www.zhix.net">