获取css的当前状态

Question

我希望在给定时刻获得整个应用程序的当前css状态。该页面有很多动画，我需要在冻结的时刻获得css状态。

这是我到目前为止所拥有的，但我的页面高度为70.000像素，因此效率低且崩溃：

const allElements = await document.getElementsByTagName('*');
  let css = '';
  for (let i = 0; i < allElements.length; i++) {
    const styles = window.getComputedStyle(allElements[i], null);

    css += `${await this.getDomPath(allElements[i])} { \n`;

    if (styles.content) {
      Object.keys(styles).forEach(key => {
        if (isNaN(Number(key))) {
          css += `${key}: ${styles[key]}; \n`;
        }
      });
    }
    css += `}`;
    console.log('css :', css);

 getDomPath(el) {
  var stack = [];
  while (el.parentNode != null) {
    var sibCount = 0;
    var sibIndex = 0;
    for (var i = 0; i < el.parentNode.childNodes.length; i++) {
      var sib = el.parentNode.childNodes[i];
      if (sib.nodeName == el.nodeName) {
        if (sib === el) {
          sibIndex = sibCount;
        }
        sibCount++;
      }
    }
    if (el.hasAttribute('id') && el.id != '') {
      stack.unshift(el.nodeName.toLowerCase() + '#' + el.id);
    } else if (sibCount > 1) {
      stack.unshift(el.nodeName.toLowerCase() + ':eq(' + sibIndex + ')');
    } else {
      stack.unshift(el.nodeName.toLowerCase());
    }
    el = el.parentNode;
  }

  let selector = '';
  stack.forEach(element => {
    selector = `${selector} ${element}`;
  });
  return Promise.resolve(selector); // removes the html element
},