performance

performance是一种用于监控浏览器运行的时候性能变化的工具，他可以帮助我们观察页面运行时内存的变化，渲染的时长；并分析需要改进优化的地方。

任务管理器

通过shift+esc，我们可以调出浏览器的任务管理器。通过任务管理器我们可以观察页面的

内存占用空间
cpu使用率
网络情况
进程ID

这里我们使用较多的时内存的占用以及cpu的消耗，任务管理器可以实时的查看内存空间的占用，但缺点是，无法看到页面的内存空间占用的趋势图，没有办法很好的分析内存的使用情况

performance工具

打开控制台（按f12，或打开开发者工具）
点击performance
点击小圆点就可以开始记录页面运行的情况
点击stop可以停止记录，并分析运行的情况

内存的变化TimeLine

打开memory，可以看到页面在运行的时候内存的随时间的变化趋势图，红色框标识的地方就是内存的变化，通过这个变化我们就知道什么时候在哪里的内存消耗不合理或者有异常，并对代码进行优化

GC回收

GC在运行的时候，应用程序是停止的，所以频繁的GC会导致程序假死，导致用户有明显的使用卡顿。

我们可以从TimeLine去判断什么时候进行GC回收操作

当存在频繁的内存升高和下降的时候，就说明有频繁的GC回收操作，这是不合理的，也是需要优化的地方

堆块照查找分离DOM

首先我们得理解什么是分离DOM，DOM有三种形式

存在于DOM树中的DOM元素
垃圾DOM：不存在于DOM树，且没有被引用的DOM元素
分离DOM：不存在于DOM树，但被引用的DOM元素

分离DOM会导致DOM无法被回收，从而造成内存泄漏，通过堆块照的方式，我们可以找到代码中的分离DOM，并进行优化

实例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>分离DOM</title>
</head><body><button id="addDom">addDom</button><script>let dom = nulldocument.querySelector('#addDom').onclick = function (e) {// 点击按钮的时候，会新建一个dom元素，并保存在全局，但不插入DOM树内，这时就会产生一个分离domdom = document.createElement('div')}</script>
</body>
</html>

图解

疑问
GC回收操作是在一定的时间段内执行，还是当发现内存不足的时候再执行，或是其他？

注：本文章主要是对学习知识进行总结，如有不同观点欢迎讨论

performance的使用相关推荐

Improve Performance and Reduce Memory with PVRTC Textures and Cocos2d
转载自:http://www.uchidacoonga.com/2011/07/pvrtc-textures-and-cocos2d/ Hello everyone! A few months hav ...
笔试算法题（58）：二分查找树性能分析（Binary Search Tree Performance Analysis）
议题:二分查找树性能分析(Binary Search Tree Performance Analysis) 分析: 二叉搜索树(Binary Search Tree,BST)是一颗典型的二叉树,同时任 ...
mysql5.7 sql监控_MySQL5.7中 performance和sys schema中的监控参数解释
MySQL5.7中的mysql performance和sys 监控参数 1.performance schema:介绍在MySQL5.7中,performance schema有很大改进,包括引 ...
二值网络--Bi-Real Net: Enhancing the Performance of 1-bit CNNs
Bi-Real Net: Enhancing the Performance of 1-bit CNNs With Improved Representational Capability and A ...
CNN网络加速--Performance Guaranteed Network Acceleration via High-Order Residual Quantization
Performance Guaranteed Network Acceleration via High-Order Residual Quantization ICCV2017 本文是对 XNOR- ...
任务简介（Query Performance Prediction）
查询性能预测(Query Performance Prediction,简称QPP). 用户向搜索系统提交一个查询,搜索系统就返回结果.现在搜索系统希望多一个功能,即告诉用户,这次返回的结果是差还是好 ...
Windows Performance Toolkit
http://bigasp.com/archives/606 https://randomascii.wordpress.com/category/xperf/ ADK 8.0 (C:\Progra ...
Performance — 前端性能监控利器
2019独角兽企业重金招聘Python工程师标准>>> 最近在写一个监控脚本,终于有机会接触到了这一块,整理后写下了本文. Performance是一个做前端性能监控离不开的API, ...
25 iOS performance TipsTricks 笔记
原文:http://www.raywenderlich.com/31166/25-ios-app-performance-tips-tricks 1. ARC 防止潜在的内存问题如何使用instru ...
你了解 Performance Timeline Level 2 吗？
什么是 Performance Timeline? Performance Timeline是W3C性能小组提出的一个规范,定义了让开发者在应用整个生命周期内收集各种性能指标的接口. 最新的Perfo ...

performance的使用

performance工具的使用