前端性能观察器

由于手机浏览器的性能往往比较渣，一些电脑上能正常运行的js代码，到了手机上就一卡一卡的，所以不得不对比较慢的代码部分进行优化。为了能找到哪些代码片段是影响性能的，我写了一个前端性能观察器用于统计各个代码片段之间的时间损耗。

/**
 前端性能观察器
 作者：雾海树妖 <http://treemonster.github.io/>
 */
let docter_time
let docter=(loc_kw,slow_ms)=>{
  let id=`docter_${Date.now()}`
  if(location.href.indexOf(loc_kw)<0)return ()=>{};
  document.body.innerHTML+=`<textarea id="${id}" style="
    position:fixed;
    left:0;
    top:20%;
    height:50%;
    background:#eee;
    border:1px solid #ccc;
    width: 50%;
    min-width: 300px;
    z-index:999999;
  "></textarea>`
  return {log:(tag)=>{
    let n=new Date
    let m=n-docter_time
    if(m>=slow_ms){
      let d=document.getElementById(id)
      d.value+=`${tag}: ${m}ms\n\n`
      d.scrollTop=d.scrollHeight
    }
    docter_time=n
  },reset:()=>docter_time=new Date}
}

使用范例：

<body>
<script>
/**
 前端性能观察器
 作者：雾海树妖 <http://treemonster.github.io/>
 */
let docter_time
let docter=(loc_kw,slow_ms)=>{
  let id=`docter_${Date.now()}`
  if(location.href.indexOf(loc_kw)<0)return ()=>{};
  document.body.innerHTML+=`<textarea id="${id}" style="
    position:fixed;
    left:0;
    top:20%;
    height:50%;
    background:#eee;
    border:1px solid #ccc;
    width: 50%;
    min-width: 300px;
    z-index:999999;
  "></textarea>`
  return {log:(tag)=>{
    let n=new Date
    let m=n-docter_time
    if(m>=slow_ms){
      let d=document.getElementById(id)
      d.value+=`${tag}: ${m}ms\n\n`
      d.scrollTop=d.scrollHeight
    }
    docter_time=n
  },reset:()=>docter_time=new Date}
}


let doc=docter('my_docter',100)

// 计时器清零
doc.reset()

doc.log('begin')
for(i=0;i<3e7;i++);
doc.log('step 1 done')
for(i=0;i<1e7;i++);
doc.log('step 2 done')
for(i=0;i<7e7;i++);
doc.log('step 3 done')


</script>
</body>

相关文档

随便看看

畅言模块加载中