initial commit

1 files changed, 112 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/long_tasks_api/index.html b/files/zh-cn/web/api/long_tasks_api/index.html
new file mode 100644
index 0000000000..2593310df3
--- /dev/null
+++ b/files/zh-cn/web/api/long_tasks_api/index.html
@@ -0,0 +1,112 @@
+---
+title: Long Tasks API
+slug: Web/API/Long_Tasks_API
+translation_of: Web/API/Long_Tasks_API
+---
+<p>{{DefaultAPISidebar("Long Tasks")}}</p>
+
+<h2 id="目的">目的</h2>
+
+<p><em>Long Tasks，</em>这是一个实验性API，它可以直观地告诉我们哪些任务执行耗费了50毫秒或更多时间。50毫秒这个阈值标准来源于《<a href="https://developers.google.com/web/fundamentals/performance/rail">RAIL Model</a>》中 <a href="https://developers.google.com/web/fundamentals/performance/rail#response">"Response: process events in under 50ms"</a> 章节。</p>
+
+<p>阻塞主线程达50毫秒或以上的任务会导致以下问题：</p>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/2017/WD-longtasks-1-20170907/#intro">{{domxref("可交互时间")}} 延迟</a></li>
+ <li>严重不稳定的交互行为(轻击、单击、滚动、滚轮等)延迟（<a href="https://www.w3.org/TR/2017/WD-longtasks-1-20170907/#intro">High/variable input latency</a>）</li>
+ <li>严重不稳定的事件回调延迟（<a href="https://www.w3.org/TR/2017/WD-longtasks-1-20170907/#intro">High/variable event handling latency</a>）</li>
+ <li>紊乱的动画和滚动（<a href="https://www.w3.org/TR/2017/WD-longtasks-1-20170907/#intro">Janky animations and scrolling</a>）</li>
+</ul>
+
+<h2 id="概念">概念</h2>
+
+<p>长任务（Long task）API使用的一些关键术语或思想。</p>
+
+<dl>
+ <dt>
+ <h3 id="长任务（Long_task）">长任务（Long task）</h3>
+ </dt>
+</dl>
+
+<p>任何连续不间断的且主UI线程繁忙50毫秒及以上的时间区间。比如以下常规场景：</p>
+
+<ul>
+ <li>长耗时的事件回调（long running event handlers）</li>
+ <li>代价高昂的回流和其他重绘（expensive reflows and other re-renders）</li>
+ <li>浏览器在超过50毫秒的事件循环的相邻循环之间所做的工作（work the browser does between different turns of the event loop that exceeds 50 ms）</li>
+</ul>
+
+<h3 id="浏览上下文的罪魁容器">浏览上下文的罪魁容器</h3>
+
+<p>浏览上下文的罪魁容器，简称“容器”，指任务发生在其中的顶层页面（the top level page）、iframe、嵌入插槽（embed）或对象（object）。</p>
+
+<h3 id="清单（Attributions）">清单（Attributions）</h3>
+
+<p>即执行任务的容器清单。针对没有在顶层页面容器内执行的任务，<code>containerId</code>、<code>containerName</code>和<code>containerSrc</code>字段可以用来提供任务源信息。</p>
+
+<h2 id="用法">用法</h2>
+
+<pre class="brush: js">var observer = new PerformanceObserver(function(list) {
+    var perfEntries = list.getEntries();
+    for (var i = 0; i &lt; perfEntries.length; i++) {
+        // Process long task notifications:
+        // report back for analytics and monitoring
+        // ...
+    }
+});
+// register observer for long task notifications
+observer.observe({entryTypes: ["longtask"]});
+// Long script execution after this will result in queueing
+// and receiving "longtask" entries in the observer.
+</pre>
+
+<h2 id="接口">接口</h2>
+
+<dl>
+ <dt>{{domxref('PerformanceLongTaskTiming')}}</dt>
+ <dd>返回长任务实例。</dd>
+ <dt>{{domxref("TaskAttributionTiming")}}</dt>
+ <dd>返回长任务中涉及的工作及其关联的框架上下文信息。</dd>
+</dl>
+
+<h2 id="规范协议">规范协议</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范协议</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Long Tasks')}}</td>
+   <td>{{Spec2('Long Tasks')}}</td>
+   <td>初始定义</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<h3 id="PerformanceLongTaskTiming"><code>PerformanceLongTaskTiming</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.PerformanceLongTaskTiming")}}</p>
+</div>
+
+<h3 id="TaskAttributionTiming"><code>TaskAttributionTiming</code></h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.TaskAttributionTiming")}}</p>
+</div>
+
+<h2 id="相关推荐">相关推荐</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/longtasks">GitHub repository</a> 包含文档和代码范例。</li>
+ <li><a href="https://calendar.perfplanet.com/2017/tracking-cpu-with-long-tasks-api/">PerfPlanet article</a> on Long Tasks API from 20th December 2017.</li>
+</ul>