Chrome Performance性能分析

jason_yang
1,001 阅读3分钟

1.三大面板

image.png

1.概览面板

image.png

  1. FPS(页面帧速)：出现红色点，证明一帧渲染时间过长，会导致卡顿
  2. NET网络请求：如果显示过长，证明网络或接口可能有异常
  3. CPU：图形占用过大，证明主线程执行时间过长，会影响其他任务执行
  4. HEAP：内存曲线一直增高，没有降下来可能是内存泄露 可以通过鼠标滚动或“WASD”四个键来可以调整选择范围

2.性能面板

image.png

  1. Main渲染主线程的任务执行过程
  2. Compositor 合成线程的任务执行过程
  3. Raster合成线程中光栅化线程池，多条线程
  4. GPU: GPU进程主线程的任务执行过程
  5. Frame显示的每一视图帧
  6. Network网络请求详情
  7. Timings 显示关键的FP、LCP、DOMContentLoaded、Onload节点
  8. Chrome_ChildIOThread 渲染进程中的IO线程，用于收发不同进程中的消息
  9. Interactions 用来记录用户交互操作，比如点击鼠标、输入文字等交互信息

3.详情面板

在性能面板点击对应的指标，详情会显示具体的信息

1. summary统计

image.png

2. bottom-up执行时间排序显示

企业微信截图_16661608717961.png

3. call tree 调用嵌套显示

企业微信截图_16661609372180.png

4. event log所有log信息

企业微信截图_16661589188162.png

通过loading、scripting、rendering、painting进行快速过滤

4.1 loading 网络请求+渲染进程解析

企业微信截图_1666160770490.png

4.2 scripting js执行，各种dom生命周期回调

企业微信截图_1666160795684.png

4.3 rendering 渲染

企业微信截图_16661608021243.png

4.4 painting 绘制输出

企业微信截图_16661608271696.png

2.性能面板-Main渲染主线程

1.包含各种复杂的任务

  1. 渲染流水线任务
  2. JavaScript函数执行
  3. V8的垃圾回收
  4. 定时器设置的回调任务

2.标记色区分

image.png

  1. 灰色：task主任务
  2. 橙色/粉色：子任务，可互相嵌套
  3. 蓝色：解析html
  4. 紫色：样式计算
  5. 绿色：绘制

3.完整的流程

完成流程包含 导航阶段，解析html阶段，合成生成位图阶段，3个阶段。

image.png

1.导航阶段

  1. 页面执行pagehide、visibilitychange和unload等事件
  2. Sendrequest发送请求
  3. ReceiveRespone过程接受到http响应头
  4. ReciveData已经接受到数据
  5. Finishload 表示网络请求已结束

2. 解析html阶段

  1. 解析js- EvaluteScript
  • ComplieScript编译脚本
  • 程序执行，调用匿名函数anonymous
  • 可能触发了dom节点变化
  • 再次触发ParserHTML
  1. 生成cssom，解析css，ReculateStyle
  2. 先执行页面dom事件 readyStateChange、DOMContentLoaded、load、pageshow

3. 合成生成位图阶段

  1. 执行布局 Layout
  2. 更新层树 UpdateLayerTree
  3. 准备绘制列表了Paint
  4. 根据绘制列表来生成相应图层CompositeLayers
  5. 合成线程Compositor的对执行记录逐个处理
  6. 合成线程维护Raster 线程RasterizePaint
  7. Rasterize线程传输数据给 GPU线程
  8. GPU生成图像显示到显示器

4. 分析demo

1.重排重绘demo

<html>
<head>
    <title>性能分析</title>
    <style>
        .box {
            background-color: blue;
            height: 50px; 
            width: 50px;
        }
        .box2 {
            background-color: red;
            height: 50px; 
            width: 50px;
        }
    </style>
</head>

<body>
    <div class="box" id="containerId"></div>
    <script>
       function setNewArea() { 
            let containerId = document.getElementById("containerId")
            containerId.setAttribute('class', 'box2') //设置样式触发重绘  
            let el = document.createElement('div') 
            el.innerHTML = '<div class="box"></div>'
            document.body.append(el)//设置样式触发重排
        }
        setNewArea()   
    </script>
</body>
</html>

通过刷新按钮进行诊断 image.png

这里点击后要快速点击stop，不然生成报告过长，不方便查看

image.png

生成的报告如下： 企业微信截图_16661585044028.png 点击main的空白处，则显示所有的main信息

企业微信截图_16661609641271.png

下面是顺序调用的方法

image.png

image.png

2.多<script>的demo

1.同一个<script>多个微任务

<html>
<head>
    <script>
        Promise.resolve().then(() => { console.log("Promise1执行") })
        console.log("xxxx")
        Promise.resolve().then(() => { console.log("Promise2执行") })
    </script>
</head>
<body>
</body>
</html>

企业微信截图_16661677687410.png 所有微任务会放在同一个执行上下文中执行。

2.不同<script>的微任务执行

<html>
<head>
    <script>
        Promise.resolve().then(() => { console.log("Promise1执行") })
    </script>
    <script>
        Promise.resolve().then(() => { console.log("Promise2执行") })
    </script>
</head>
<body>
</body>
</html>

企业微信截图_16661676273265.png 两个微任务分别在不同的执行上下文中执行，会导致执行效率降低。

参考学习：time.geekbang.org/column/arti…

avatar
文章
阅读
粉丝