我是如何把性能优化的颗粒度做的更细

直接只用 babel 转译的话，上述的文件都会通过 babel 转译一遍，那么这样对于我们来说并不是合理的，不能因为为了检测元素性能而导致页面构建速度变慢吗?更何况这还不是最优解

这时候我想到了一个办法，也是我目前使用的一个办法，大家可以看看是否真的是最优解，我目前是考虑到这里了：

「通过 webpack plugin 在 build 前，给当前模块添加一个 loader，在当前的 loader 内去通过 babel 转译添加 elementtiming」

知道了如何做就开始撸代码了，下面是调用方式：

// webpack.config.js 
 
const ElementRenderingWebpackPlugin = require('element-rendering-webpack-plugin') 
module.exports = { 
    plugin: [ 
        new ElementRenderingWebpackPlugin() 
    ] 
} 

plugin 的实现也比较简单，主要的工作是在 loader 部分：

// element-rendering-webpack-plugin.js 
 
class MyPlugin { 
  apply(compiler) { 
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => { 
      compilation.hooks.buildModule.tap('SourceMapDevToolModuleOptionsPlugin', module => { 
        if (module.resource) { 
          if (/(\.((j|t)sx?)$)/.test(module.resource) &&  
          !/node_modules/.test(module.resource)) { 
            if (module.loaders) { 
              module.loaders.push({ 
                loader: 'element-rendering-webpack-loader' 
              }) 
            } 
          } 
        } 
      })       
    })   
  } 
} 
module.exports = MyPlugin 

「上面代码就是在 compilation 生成后，就在模块 build 前去做模块的确认，只对我自己的业务和需要的代码添加该 loader，这样就可以绕过上面直接使用 babel 方法导致的构建速度问题」

在此要对文件做一些过滤，因为是 1.0 的出版，所以还有一些东西没有完全考虑，还需要继续优化，这里提示一下暂时是不支持 vue 使用的，vue 模块的 loader 太多了，我要多做测试才敢上线，还希望大家体谅

// element-rendering-webpack-loader.js 
 
 
const parser = require('@babel/parser'); 
const traverse = require('@babel/traverse').default; 
const { transformFromAstSync } = require('@babel/core'); 
const t = require('@babel/types'); 
let randomSet = new Set(); 
 
function UpdateAssets(asset) { 
  let code = asset 
  try { 
    const ast = parser.parse(asset, { 
      sourceType: 'module', 
      plugins: [ 
        'flow', 
        'jsx' 
      ] 
    }); 
    traverse(ast, { 
      JSXElement(nodePath) { 
        if (nodePath.node.type === 'JSXElement' && nodePath.node.openingElement.name.name === 'img') { 
          return 
        } 
        updateAttr(nodePath.node); 
      } 
    }) 
    code = transformFromAstSync(ast).code; 
  } catch(e) { 
    console.log(e) 
  } 
  return code; 
} 
 
function updateAttr(node) { 
  if (node.type === 'JSXElement') { 
    let { openingElement, children } = node; 
    let name = openingElement.name.name || openingElement.type 
    let className = openingElement.attributes.filter(attr => { 
      if (attr.type === 'JSXSpreadAttribute') return false 
      return /class(Name)?/.test(attr.name.name) 
    }) 
    if (className.length) { 
      name = className[0].value.value 
    } 
    if (!openingElement) return 
    const elementtimingList = openingElement.attributes.filter(attr => { 
      if (attr.type !== 'JSXSpreadAttribute' && attr.name.name === 'elementtiming') { 
        return true 
      } 
    }) 
    if (!elementtimingList.length) { 
      openingElement.attributes.push(addElementttiming(name + '-' + Math.ceil(Math.random() * 100000))); 
    } 
    const markList = openingElement.attributes.filter(attr => { 
      if (attr.type !== 'JSXSpreadAttribute' && attr.name.name === 'data-mark') { 
        return true 
      } 
    }) 
    if (!markList.length) { 
      openingElement.attributes.push(addMark()); 
    } 
    children.map(childNode => updateAttr(childNode)); 
  } 
} 
 
function addElementttiming(name) { 
  return t.jsxAttribute(t.jsxIdentifier('elementtiming'), t.stringLiteral(name)); 
} 
 
function addMark() { 
  let randomStatus = true; 
  let markRandom = 0; 
  while(randomStatus) { 
    markRandom = Math.ceil(Math.random() * 100000); 
    randomStatus = randomSet.has(markRandom); 
    if (!randomStatus) { 
      randomSet.add(markRandom); 
    } 
  } 
  return t.jsxAttribute(t.jsxIdentifier('data-mark'), t.stringLiteral(markRandom + '')); 
} 
 
module.exports = UpdateAssets; 

这里直接上代码了，东西太多就不一行一行解释了，代码会开源，链接在底部自取慢慢看

「大概做的就是把当前跑进来的代码通过 ast 转译，拿到 ast 对象后添加 elementtiming 属性，data-mark 是用来做数据去重的」

好了，这时候最基础的 「捕获数据」 和 「不把性能检测相关的代码植入到业务当中，实现上述需求」，那么接下来就该通过浏览器插件来展示这些数据

通过浏览器插件来展示这些数据

由于之前是真心没写过 chrome-extension ，可踩了不少坑，很多 version 2 可以用的东西 version 3 不支持

这里我直接就上核心部分的代码了，剩下一些基础配置类的大家自己到时候看代码吧：

// contentScript.js 
 
chrome.runtime.onMessage.addListener(function(request) { 
  const { type, data } = request.data 
  switch(type) { 
    case 'selectedElement': 
      createMask(data) 
      break; 
    case 'cancelElement': 
      cancelMask() 
      break; 
  } 
}) 
 
function createMask(data) { 
  cancelMask() 
  const div = document.createElement('div') 
  Object.keys(data).map(styleKey => div.style[styleKey] = data[styleKey] + 'px') 
  div.style.position = 'absolute' 
  div.style.background = 'rgba(109, 187, 220, 0.5)' 
  div.style.zIndex = '9999' 
  div.id = 'mask-element' 
  document.body.appendChild(div) 
} 
 
function cancelMask() { 
  const maskElement = document.querySelector('#mask-element') 
  if (maskElement !== null) { 
    document.body.removeChild(maskElement) 
  } 
} 
 
function getElementTreeData(element, elementTreeData, performanceElementTimingObj) { 
  let children = element.children 
  for (let i = 0; i < children.length; ++i) { 
    let childElement = children[i] 
    let argObj = {} 
    let nodeValue = '' 
    let parsePerformanceElementTiming = {} 
    if ('elementtiming' in childElement.attributes) { 
      nodeValue = childElement.attributes.elementtiming.nodeValue 
      argObj['elementtiming'] = true 
      argObj['key'] = childElement.dataset.mark 
      let performanceElementTiming = performanceElementTimingObj[argObj['key']] 
      if (performanceElementTiming) { 
        parsePerformanceElementTiming = JSON.parse(JSON.stringify(performanceElementTiming)) 
      } 
    } else { 
      nodeValue = childElement.nodeName 
      argObj['key'] = Math.ceil(Math.random() * 100000) 
    } 
    argObj = Object.assign({}, argObj, parsePerformanceElementTiming, { 
      intersectionRect: childElement.getBoundingClientRect() 
    }) 
    if (/(NO)?SCRIPT/.test(nodeValue)) continue 
    argObj['children'] = childElement.children.length ? getElementTreeData(childElement, [], performanceElementTimingObj) : [] 
    argObj['title'] = nodeValue.replace(/-([0-9]*)$/, '') 
    elementTreeData.push(argObj) 
  } 
  return elementTreeData 
} 
 
let performanceElementTimingList = [] 
const observer = new PerformanceObserver((list) => { 
  let elementTree = [] 
  let performanceElementTimingObj = {} 
  performanceElementTimingList = performanceElementTimingList.concat(list.getEntries()) 
  performanceElementTimingList.map(performanceTimingItem => { 
    if (performanceTimingItem.element !== null) { 
      return performanceElementTimingObj[performanceTimingItem.element.dataset.mark] = performanceTimingItem 
    } 
  }) 
  chrome.runtime.sendMessage( 
    { 
      type: 'performanceTree', 
      data: getElementTreeData(document.body, elementTree, performanceElementTimingObj) 
    } 
  ) 
}); 
observer.observe({ entryTypes: ["element"] }); 

contentScript 是 chrome-extension 内访问页面元素的一个配置文件，当然文件名自己随便取，为了方便阅读和理解，我直接跟着官方文档的节奏走的，这里大家可以发现我上面有一个方法是 createMark 里面有创建元素和定位，这里是配合 devtools 里面的树来使用的：

// app.js  
import { useState, useEffect } from 'react'; 
import { Tree } from 'antd'; 
import './App.css'; 
function App() { 
  const [treeData, setTreeData] = useState([])  
  window.addEventListener('message', msg => { 
    const { type, data } = msg.data 
    if (type === 'performanceTree') { 
      setTreeData(data) 
    } 
  }) 
  useEffect(() => { 
  }, [treeData]) 
  return ( 
    <div className="App"> 
      <Tree 
        showLine 
        titleRender={ 
          nodeData => { 
            return ( 
              <div onMouseOver={() => { selectedElement(nodeData) }} onMouseOut={cancelElement}> 
                {nodeData.title}{updateTime(nodeData)} 
              </div> 
            ) 
          } 
        } 
        treeData={treeData} 
      /> 
    </div> 
  ); 
} 
 
function updateTime(nodeData) { 
  let str = ' - ' 
  if (nodeData.renderTime) { 
    str += Math.round(nodeData.renderTime) 
  } else { 
    str += '该元素下非元素外不存在文本' 
  } 
  return str 
} 
 
function selectedElement(nodeData) { 
  console.log('selectedElement') 
  if (!nodeData.disabled) { 
    postMessage( 
      { 
        type: 'selectedElement', 
        data: nodeData.intersectionRect 
      }, 
      '*' 
    ) 
  } 
} 
 
function cancelElement () { 
  console.log('cancelElement') 
  postMessage( 
    { 
      type: 'cancelElement' 
    }, 
    '*' 
  ) 
} 
 
export default App; 

为了页面的美观度，我用了 antd 去对页面ui进行优化的，当点击某一个树的时候，会画一个框出来，标明当前元素的时间和对应的元素在哪里：

这就是最后的效果，我是直接 react 脚手架搭完直接安装的

尾声

大概的实现思路和思考的过程，基本上我都描述的差不多了，过程当中有很多次想过放弃，但是又不忍心抛弃自己之前的付出所以就坚持下来了，也算是做出来的了，但是 elementtiming api 那里那个问题，还是需要我继续研究和解决的，我会继续和 WICG 那边沟通，争取可以让它变得更好

可能有大佬看见会说这东西很简单啊，没什么值得思考地方，那我只想说dddd，我比较菜，得一步一步的学，你们轻点喷哈

代码开源了已经，欢迎大家互相讨论学习，也希望大家给点点 star，多提 issue，如果有兴趣的朋友我还希望大家一起来维护这个东西：

plugin: element-rendering-webpack-plugin

loader: element-rendering-webpack-loader

extension: element-rendering-extension