标签：很多 repaint 像素 style 合并 浏览器 重绘 ref 没有
前端性能优化方法：
一 . 减少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">
前端性能优化-减少http请求，dns预解析，减少repaint和reflow
标签：很多 repaint 像素 style 合并 浏览器 重绘 ref 没有
原文地址：https://www.cnblogs.com/leiting/p/9386144.html
