前端性能优化

前端性能优化的宗旨即追求更快，但是也应避免过渡优化。以现有互联网产品为例各厂商性能标准也不一致，在各标准找到适合自己公司用户体量及业务要求的标准需要不断的实践。

前端性能指标

• TTFB : ResponseStart - RequestStart (首包时间，关注网络链路耗时)
• FPT : ResponseEnd - FetchStart （首次渲染时间 / 白屏时间）
• TTI : DomInteractive - FetchStart （首次可交付时间）
• Ready : DomContentLoadEventEnd - FetchStart （加载完成时间）
• Load : LoadEventStart - FetchStart （页面完全加载时间）

performance timing api

• 计算常见指标可以使用谷歌封装好的js库web-vitals
  

FMP(first meaningful paint)

• 含义：首次有意义绘制，通常指页面主要内容出现在屏幕上的时间，是用户感知加载体验的主要指标。
• 统计逻辑：目前没有统一的统计方法。
• 参考文章：
  前端监控 - 首屏统计的前世今生
  前端监控实践 - FMP的智能获取算法
• 算法流程：
  

const utils = {
  //获取当前样式
  getStyle(element, att) {
    //特性侦测
    if (window.getComputedStyle) {
      //优先使用W3C规范
      return window.getComputedStyle(element)[att];
    } else {
      //针对IE9以下兼容
      return element.currentStyle[att];
    }
  }
}

const START_TIME = performance && performance.timing.responseEnd;
const IGNORE_TAG_SET = ["SCRIPT", "STYLE", "META", "HEAD", "LINK"];
const TAG_WEIGHT_MAP = {
  SVG: 2,
  IMG: 2,
  CANVAS: 4,
  OBJECT: 4,
  EMBED: 4,
  VIDEO: 4
};
const LIMIT = 1000;
const WW = window.innerWidth;
const WH = window.innerHeight;
const VIEWPORT_AREA = WW * WH;
const DELAY = 500;
class FMPTiming {
  constructor() {
    this.statusCollector = [];
    this.flag = true;
    this.muo = MutationObserver;
    this.observer = null;
    this.callbackCount = 1;
    this.mp = {};
    this.initObserver();
  }
  firstSnapshot() {
    let t = window.__DOMSTART - START_TIME;
    let bodyTarget = document.body;
    if (bodyTarget) {
      this.doTag(bodyTarget, this.callbackCount++);
    }
    this.statusCollector.push({
      t
    });
  }
  initObserver() {
    this.firstSnapshot();
    this.observer = new MutationObserver(() => {
      let t = Date.now() - START_TIME;
      let bodyTarget = document.body;
      if (bodyTarget) {
        this.doTag(bodyTarget, this.callbackCount++);
      }
      this.statusCollector.push({
        t
      });
    });
    this.observer.observe(document, {
      childList: true,
      subtree: true
    });
    if (document.readyState === "complete") {
      this.calFinallScore();
    } else {
      window.addEventListener(
        "load",
        () => {
          this.calFinallScore();
        },
        true
      );
    }
  }

  initResourceMap() {
    performance.getEntries().forEach(item => {
      this.mp[item.name] = item.responseEnd;
    });
  }

  doTag(target, callbackCount) {
    let tagName = target.tagName;
    if (IGNORE_TAG_SET.indexOf(tagName) === -1) {
      let childrenLen = target.children ? target.children.length : 0;
      if (childrenLen > 0) {
        for (let childs = target.children, i = childrenLen - 1; i >= 0; i--) {
          if (childs[i].getAttribute("f_c") === null) {
            childs[i].setAttribute("f_c", callbackCount);
          }
          this.doTag(childs[i], callbackCount);
        }
      }
    }
  }

  calFinallScore() {
    if (MutationObserver && this.flag) {
      if (!this.checkCanCal(START_TIME)) {
        console.time("calTime");
        this.observer.disconnect();
        this.flag = false;
        let res = this.deepTraversal(document.body);
        let tp;
        res.dpss.forEach(item => {
          if (tp && tp.st) {
            if (tp.st < item.st) {
              tp = item;
            }
          } else {
            tp = item;
          }
        });
        console.log(tp, this.statusCollector);
        this.initResourceMap();
        let resultSet = this.filterTheResultSet(tp.els);
        let fmpTiming = this.calResult(resultSet);
        console.log("fmp : ", fmpTiming);
        console.timeEnd("calTime");
      } else {
        setTimeout(() => {
          this.calFinallScore();
        }, DELAY);
      }
    }
  }

  calResult(resultSet) {
    let rt = 0;
    resultSet.forEach(item => {
      let t = 0;
      if (item.weight === 1) {
        let index = +item.node.getAttribute("f_c") - 1;
        t = this.statusCollector[index].t;
      } else if (item.weight === 2) {
        if (item.node.tagName === "IMG") {
          t = this.mp[item.node.src];
        } else if (item.node.tagName === "SVG") {
          let index = +item.node.getAttribute("f_c") - 1;
          t = this.statusCollector[index].t;
        } else {
          //background image
          let match = utils.getStyle(item.node, 'background-image').match(/url\(\"(.*?)\"\)/);
          
          let s;
          if (match && match[1]) {
            s = match[1];
          }
          if (s.indexOf("http") == -1) {
            s = location.protocol + match[1];
          }
          t = this.mp[s];
        }
      } else if (item.weight === 4) {
        if (item.node.tagName === "CANVAS") {
          let index = +item.node.getAttribute("f_c") - 1;
          t = this.statusCollector[index].t;
        } else if (item.node.tagName === "VIDEO") {
          t = this.mp[item.node.src];

          !t && (t = this.mp[item.node.poster]);
        }
      }
      console.log(t, item.node);
      rt < t && (rt = t);
    });
    return rt;
  }

  filterTheResultSet(els) {
    let sum = 0;
    els.forEach(item => {
      sum += item.st;
    });
    let avg = sum / els.length;
    return els.filter(item => {
      return item.st > avg;
    });
  }

  deepTraversal(node) {
    if (node) {
      let dpss = [];
      for (let i = 0, child; (child = node.children[i]); i++) {
        let s = this.deepTraversal(child);
        if (s.st) {
          dpss.push(s);
        }
      }
      return this.calScore(node, dpss);
    }
    return {};
  }

  calScore(node, dpss) {
    let {
      width,
      height,
      left,
      top,
      bottom,
      right
    } = node.getBoundingClientRect();
    let f = 1;
    if (WH < top || WW < left) {
      //不在可视viewport中
      f = 0;
    }
    let sdp = 0;
    dpss.forEach(item => {
      sdp += item.st;
    });
    let weight = TAG_WEIGHT_MAP[node.tagName] || 1;
    if (
      weight === 1 &&
      utils.getStyle(node, 'background-image') && 
      utils.getStyle(node, 'background-image') !== "initial"
    ) {
      weight = TAG_WEIGHT_MAP["IMG"]; //将有图片背景的普通元素 权重设置为img
    }
    let st = width * height * weight * f;
    let els = [{ node, st, weight }];
    let areaPercent = this.calAreaPercent(node);
    if (sdp > st * areaPercent || areaPercent === 0) {
      st = sdp;
      els = [];
      dpss.forEach(item => {
        els = els.concat(item.els);
      });
    }
    return {
      dpss,
      st,
      els
    };
  }

  checkCanCal(start) {
    let ti = Date.now() - start;
    return !(
      ti > LIMIT ||
      ti -
        ((this.statusCollector &&
          this.statusCollector.length &&
          this.statusCollector[this.statusCollector.length - 1].t) ||
          0) >
        1000
    );
  }

  calAreaPercent(node) {
    let {
      left,
      right,
      top,
      bottom,
      width,
      height
    } = node.getBoundingClientRect();
    let wl = 0;
    let wt = 0;
    let wr = WW;
    let wb = WH;
    let overlapX =
      right - left + (wr - wl) - (Math.max(right, wr) - Math.min(left, wl));
    if (overlapX <= 0) {
      //x 轴无交点
      return 0;
    }
    let overlapY =
      bottom - top + (wb - wt) - (Math.max(bottom, wb) - Math.min(top, wt));
    if (overlapY <= 0) {
      return 0;
    }
    return (overlapX * overlapY) / (width * height);
  }
}

new FMPTiming();

FCP(first contentful paint)

• 含义：浏览器第一次绘制非背景内容时间（文本、图片、非白色canvas或svg）
• 统计逻辑：通过performance.getEntriesByType(‘paint’)，取第二个pain的时间，或者通过Mutation Observer观察到首次节点变动的时间。

const domEntries = []
const observer = new MutationObserver((mutationsList)=>{
  for(var mutation of mutationsList) {
    if (mutation.type == 'childList') {
      console.log('A child node has been added or removed.')
    }
    if (mutation.type == 'addedNodes') {
      //TODO新增了节点，做处理，计算此时的可见性/位置/出现时间等信息，然后 push 进数组
      domEntries.push(mutation) 
    }
  }
})

function getFPTime(){
    const timings = performance.getEntriesByType('paint');
    if(timings.length > 1)return timings[1]
    return timings ? Math.round(timings.startTime) : null
    //伪代码,算 DOM 变化时的最小那个时间，即节点首次变动的时间
    return Math.round(domEntries.length ? Math.min(...domEntries.map(entry => entry.time)) : 0)
} 

前端性能分析工具

lightHouse
WebPageTest