Performance性能检测

亮学长

已于 2023-12-07 09:39:37 修改

阅读量123

点赞数

文章标签：前端

于 2023-12-02 15:28:48 首次发布

本文链接：https://blog.csdn.net/formylovetm/article/details/134752362

版权

在vue项目开启

performance
2.2.0 新增

类型：boolean

默认值：false (自 2.2.3 起)

用法：Vue.config.performance = true

设置为 true 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪。只适用于开发模式和支持 performance.mark API 的浏览器上。

许多小task，浏览器系统的执行的，不用管他

在浏览器的 Performance 面板中，如果你看到一些不知名的任务或事件，这可能是由于浏览器执行的内部操作引起的。这些任务通常是浏览器执行的一组相关操作，例如解析 HTML、处理 CSS、执行 JavaScript、渲染页面等。不同的浏览器可能会有不同的命名和标识方式来表示这些任务。

这些不知名的任务通常被浏览器自动记录并显示在 Performance 面板中，对于开发者来说，它们可能不是非常有用或具体的信息。在某些情况下，它们可能只是浏览器内部为了使页面加载和渲染过程正常运行而执行的操作。

尽管这些任务可能没有具体的标识或说明，但你仍然可以通过其他方式来获得更多关于性能的信息。例如，你可以查看网络请求、JavaScript 执行、渲染事件等详细信息，以了解页面加载和渲染的整体性能情况。

如果你对某个特定任务或事件感到特别困惑，我建议你在浏览器的官方文档中寻找更多信息。不同浏览器的 Performance 面板可能会有不同的行为和术语，浏览器文档将为你提供有关这些任务的更多解释和说明。

此外，你也可以尝试通过搜索关键字和浏览器开发者社区来找到其他开发者在类似情况下的经验和解决方案。有时候其他开发者可能已经提到了类似任务的含义或原因，这会帮助你更好地理解 Performance 面板中的不知名任务。

区间详情面板

Network
Frames
Timings
Main - http://127.0.0.1:5500/a.html
Raster
GPU
Chrome_ChildOThread
Compositor
ThreadPoolServiceThread

task详情面板

Summaray
Bottom-Up
Call Tree
Event Log

performance.mark

只是做一个标记，可以看到performance栏目上看到这个标志
显示的是一个函数的执行，但是不花费时间

测试代码1

<!DOCTYPE html>
<html>
<head>
    <title>Performance Example</title>
</head>
<body>
    <h1>Hello, Performance!</h1>
    <script>
        // 模拟一些耗时的操作
        function simulateLoad() {
            for (let i = 0; i < 100000000; i++) {
                Math.sqrt(i);
            }
        }
        // 页面加载完成后开始记录性能
        window.addEventListener('load', function () {
            // 在 Performance 面板开始记录之前的操作不会被捕获
            simulateLoad();
            performTimeConsumingTask();
        });
        function performTimeConsumingTask() {
            // 开始记录性能
            console.log('开始记录性能！');
            performance.mark('startTask');
            // 执行耗时的操作
            simulateLoad();
            // 结束记录性能
            performance.mark('endTask');
            performance.measure('taskDuration', 'startTask', 'endTask');
            // 打印任务耗时
            const measurements = performance.getEntriesByName('taskDuration');
            if (measurements && measurements.length) {
                console.log('任务耗时:', measurements[0].duration + 'ms');
            }
        }
    </script>
</body>
</html>

DOMContentLoaded 和 load 之间执行的 recalculate style 是什么

在浏览器加载和渲染页面时，有两个非常重要的事件：DOMContentLoaded 和 load。

DOMContentLoaded 事件在浏览器已经完成解析 HTML 文档，并构建完 DOM 树后触发。也就是说，当页面的所有 DOM 元素都被解析并放置在 DOM 树中时，DOMContentLoaded 事件被触发。通常情况下，这个阶段发生在 CSS 和 JavaScript 文件的下载和执行之前。

load 事件发生在整个页面（包括所有资源如样式表、图片、脚本等）都已经加载完毕后触发。也就是说，当页面中的所有资源都已经下载完毕，并且浏览器已经完成资源的布局和渲染时，load 事件被触发。

在这两个事件之间，浏览器执行了一系列的操作，其中之一就是 “recalculate style”（样式重计算/重新计算样式）。样式重计算是浏览器根据当前的 DOM 结构和样式规则来确定每个元素的最终样式。

当浏览器解析完 DOM 树后，它会遍历每个元素，并计算每个元素应用的样式。这个过程涉及解析和应用 CSS 规则、继承属性值、计算最终的样式值等操作。样式重计算是确保页面显示正确的样式和布局的关键步骤之一。

在 DOMContentLoaded 事件之后和 load 事件之前，进行样式重计算的时间段是浏览器进行样式计算和布局的重要阶段。这个阶段的运行时间会受到多个因素的影响，例如 DOM 树的复杂度、CSS 规则的数量和复杂度、JavaScript 对 DOM 和样式的修改等。

如果样式重计算花费了过长的时间，可能会导致页面加载速度变慢，并且会在页面初始显示时出现闪烁或布局问题。因此，在开发过程中，我们应该注意优化样式和布局的性能，减少不必要的样式计算和重绘操作，以提高页面加载速度和用户体验。

亮学长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Performance性能检测

在浏览器的 Performance 面板中，如果你看到一些不知名的任务或事件，这可能是由于浏览器执行的内部操作引起的。这些任务通常是浏览器执行的一组相关操作，例如解析 HTML、处理 CSS、执行 JavaScript、渲染页面等。不同的浏览器可能会有不同的命名和标识方式来表示这些任务。这些不知名的任务通常被浏览器自动记录并显示在 Performance 面板中，对于开发者来说，它们可能不是非常有用或具体的信息。在某些情况下，它们可能只是浏览器内部为了使页面加载和渲染过程正常运行而执行的操作。
复制链接

扫一扫