前端性能优化方法:

一 . 减少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">

05-11 17:27