diff options
Diffstat (limited to 'files/zh-cn/tools/memory')
-rw-r--r-- | files/zh-cn/tools/memory/basic_operations/index.html | 64 | ||||
-rw-r--r-- | files/zh-cn/tools/memory/dom_allocation_example/index.html | 60 | ||||
-rw-r--r-- | files/zh-cn/tools/memory/index.html | 60 |
3 files changed, 184 insertions, 0 deletions
diff --git a/files/zh-cn/tools/memory/basic_operations/index.html b/files/zh-cn/tools/memory/basic_operations/index.html new file mode 100644 index 0000000000..32b44223e1 --- /dev/null +++ b/files/zh-cn/tools/memory/basic_operations/index.html @@ -0,0 +1,64 @@ +--- +title: 基础操作 +slug: Tools/Memory/Basic_operations +translation_of: Tools/Memory/Basic_operations +--- +<div>{{ToolsSidebar}}</div><h2 id="打开内存工具">打开内存工具</h2> + +<p>在Firefox 50以前,内存工具没有被默认启用。打开开发者工具设置并选择在默认的开发者工具中的内存选项以启用此功能:</p> + +<p>{{EmbedYouTube("qi-0CoCOXwc")}}</p> + +<p>从Firefox 50开始,内存工具默认启用。</p> + +<h2 id="创建快照">创建快照</h2> + +<p>点击“拍摄快照”按钮或者点击左侧的照相机图标来创建快照:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13651/memory-1-small.png" style="display: block; height: 244px; margin: 0px auto; width: 900px;"></p> + +<p>快照会占据右侧的面板,在左边你可以看到新的快照的入口,包括时间戳,大小和保存或者删除快照的控制:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13653/memory-2-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> + +<h2 id="删除快照">删除快照</h2> + +<p>点击"X" 以删除快照:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13655/memory-3-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> + +<h2 id="保存和加载快照">保存和加载快照</h2> + +<p>如果你关闭了内存工具,快照将会被忽略。点击保存按钮以保存快照:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13657/memory-4-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> + +<p>你需要选择一个保存位置,将会保存为以 <code>.fxsnapshot</code>为扩展名的文件。</p> + +<p>点击导入按钮(一个向上箭头和正方形组合的图标)来导入一个已有的 <code>.fxsnapshot</code> 文件(在Firefox 49之前有一个名为导入的标签):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13659/memory-5-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> + +<p>你可以在硬盘上找到这个快照文件。</p> + +<h2 id="比较快照">比较快照</h2> + +<p>从Firefox45开始,你可以比较两个堆快照。这个对比会向你展示在两个快照之间内存分配和释放的不同。</p> + +<p>你可以点击快照按钮右边的按钮来创建对比 (在Firefox 47以前它是一个"+/-"图标):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13661/memory-6-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> + +<p>你也可以选择一个基线来进行快照对比。工具将会向你展示两个快照的区别。</p> + +<p>{{EmbedYouTube("3Ow-mdK6b2M")}}</p> + +<div class="note"> +<p>对比的时候不能使用关联性和树状图。</p> +</div> + +<h2 id="记录调用堆栈">记录调用堆栈</h2> + +<p>内存工具可以告诉你你的代码里哪里在分配内存。然而,记录这些信息需要运行时进行 ,所以如果你想查看块中种内存调用的位置,你必须让你的工具在内存分配结束之前记录内存调用。选择“记录调用堆栈”以启用此功能(在Firefox 49之前叫做 "记录分配堆栈"):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13663/memory-7-small.png" style="display: block; height: 243px; margin: 0px auto; width: 900px;"></p> diff --git a/files/zh-cn/tools/memory/dom_allocation_example/index.html b/files/zh-cn/tools/memory/dom_allocation_example/index.html new file mode 100644 index 0000000000..29c92782ef --- /dev/null +++ b/files/zh-cn/tools/memory/dom_allocation_example/index.html @@ -0,0 +1,60 @@ +--- +title: DOM allocation example +slug: Tools/Memory/DOM_allocation_example +tags: + - 内存 + - 开发者工具 +translation_of: Tools/Memory/DOM_allocation_example +--- +<div>{{ToolsSidebar}}</div> + +<p>这篇文章描述了一个简单的 Web 页面,它被用于阐述内存工具的一些特性。</p> + +<p>你可以在这个网页中试试:<a href="https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html">https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html</a>。</p> + +<p>它仅仅包含了一个创建大量 DOM 节点的脚本:</p> + +<pre class="brush: js">var toolbarButtonCount = 20; +var toolbarCount = 200; + +function getRandomInt(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; +} + +function createToolbarButton() { + var toolbarButton = document.createElement("span"); + toolbarButton.classList.add("toolbarbutton"); + // stop Spidermonkey from sharing instances + toolbarButton[getRandomInt(0,5000)] = "foo"; + return toolbarButton; +} + +function createToolbar() { + var toolbar = document.createElement("div"); + // stop Spidermonkey from sharing instances + toolbar[getRandomInt(0,5000)] = "foo"; + for (var i = 0; i < toolbarButtonCount; i++) { + var toolbarButton = createToolbarButton(); + toolbar.appendChild(toolbarButton); + } + return toolbar; +} + +function createToolbars() { + var container = document.getElementById("container"); + for (var i = 0; i < toolbarCount; i++) { + var toolbar = createToolbar(); + container.appendChild(toolbar); + } +} + +createToolbars(); +</pre> + +<p>一段表示代码工作流程的伪代码:</p> + +<pre>createToolbars() + -> createToolbar() // 调用 200 次, 每次创建一个 DIV 元素 + -> createToolbarButton() // 每次调用 createToolbar() 时,调用 20 次,每次创建一个 SPAN 元素</pre> + +<p>它总共创建了 200 个 <code><a href="/en-US/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> 对象和 4000 个 <code><a href="/en-US/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> 对象。</p> diff --git a/files/zh-cn/tools/memory/index.html b/files/zh-cn/tools/memory/index.html new file mode 100644 index 0000000000..85e7ebe131 --- /dev/null +++ b/files/zh-cn/tools/memory/index.html @@ -0,0 +1,60 @@ +--- +title: 内存 +slug: Tools/Memory +translation_of: Tools/Memory +--- +<div>{{ToolsSidebar}}</div><p>内存工具可以帮助你获取当前标签页内存堆的快照,它可以提供每个对象在内存中的使用以及在你的代码中哪里分配了内存的堆视图。</p> + +<p>{{EmbedYouTube("DJLoq5E5ww0")}}</p> + +<hr> +<h3 id="基础">基础</h3> + +<div class="twocolumns"> +<ul> + <li><a href="/zh-CN/docs/Tools/Memory/Basic_operations#打开内存工具">打开内存工具</a></li> + <li><a href="/zh-CN/docs/Tools/Memory/Basic_operations#创建快照">创建快照</a></li> + <li><a href="/zh-CN/docs/Tools/Memory/Basic_operations#比较快照">比较快照</a></li> + <li><a href="/zh-CN/docs/Tools/Memory/Basic_operations#删除快照">删除快照</a></li> + <li><a href="/zh-CN/docs/Tools/Memory/Basic_operations#保存和加载快照">保存和加载快照</a></li> + <li><a href="/zh-CN/docs/Tools/Memory/Basic_operations#记录调用堆栈">记录调用堆栈</a></li> +</ul> +</div> + +<hr> +<h3 id="分析快照">分析快照</h3> + +<div class="geckoVersionNote"> +<p>树状图是在Firefox 48中新增的,关联性是在Firefox 46中新增的。</p> +</div> + +<p>创建一张快照后内存工具会提供以下三种视图:</p> + +<ul> + <li><a href="/zh-CN/docs/Tools/Memory/Tree_Map_view">树状图视图</a> 以树形结构展示内存使用情况。</li> + <li><a href="/zh-CN/docs/Tools/Memory/Aggregate_view">聚合视图</a> 以已分配类型的表格的形式展示内存使用情况。</li> + <li><a href="/zh-CN/docs/Tools/Memory/Dominators_view">关联性视图</a> 展示对象分配的大小,即对象的大小加上通过引用的其他对象的大小。</li> +</ul> + +<p>如果你选择记录快照的分配栈,聚合视图和关联性视图会准确列出在你代码中哪里进行了内存分配。</p> + +<hr> +<h3 id="概念">概念</h3> + +<div class="twocolumns"> +<ul> + <li><a href="/zh-CN/docs/Tools/Memory/Dominators">关联性</a></li> +</ul> +</div> + +<hr> +<h3 id="示例页面">示例页面</h3> + +<p>内存工具示例</p> + +<div class="twocolumns"> +<ul> + <li><a href="/zh-CN/docs/Tools/Memory/Monster_example">Monster示例</a></li> + <li><a href="/zh-CN/docs/Tools/Memory/DOM_allocation_example">DOM分配示例</a></li> +</ul> +</div> |