Deploy website - based on 1664a073339f03cf5bd78106f47a48db87db8ec6

This commit is contained in:
akiq2016 2021-09-15 22:09:45 +08:00
parent e4b61fae13
commit a348714e3f
47 changed files with 123 additions and 183 deletions

View File

@ -6,13 +6,13 @@
<meta name="generator" content="Docusaurus v2.0.0-beta.5">
<link rel="preconnect" href="https://hm.baidu.com">
<script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?c7cd0fd77ac518cc6ef46461cdc9524b";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(e,c)}()</script><title data-react-helmet="true">Page Not Found | HZFE - 剑指前端 Offer</title><meta data-react-helmet="true" property="og:title" content="Page Not Found | HZFE - 剑指前端 Offer"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://hzfe.github.io/awesome-interview/404.html"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_tag" content="default"><link data-react-helmet="true" rel="shortcut icon" href="/awesome-interview/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://hzfe.github.io/awesome-interview/404.html"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/404.html" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/404.html" hreflang="x-default"><link rel="stylesheet" href="/awesome-interview/assets/css/styles.36d1aa8c.css">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.c8e42582.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.ab4de134.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/main.d4064b1a.js" as="script">
</head>
<body>
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
<div><a href="#" class="skipToContent_1oUP">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/awesome-interview/"><img src="/awesome-interview/img/badge.svg" alt="HZFE" class="themedImage_1VuW themedImage--light_3UqQ navbar__logo"><img src="/awesome-interview/img/badge.svg" alt="HZFE" class="themedImage_1VuW themedImage--dark_hz6m navbar__logo"><b class="navbar__title">剑指前端 Offer</b></a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/hzfe/awesome-interview" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_3J9K"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper"><main class="container margin-vert--xl"><div class="row"><div class="col col--6 col--offset-3"><h1 class="hero__title">Page Not Found</h1><p>We could not find what you were looking for.</p><p>Please contact the owner of the site that linked you to the original URL and let them know their link is broken.</p></div></div></main></div></div>
<script src="/awesome-interview/assets/js/runtime~main.c8e42582.js"></script>
<script src="/awesome-interview/assets/js/runtime~main.ab4de134.js"></script>
<script src="/awesome-interview/assets/js/main.d4064b1a.js"></script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -6,7 +6,7 @@
<meta name="generator" content="Docusaurus v2.0.0-beta.5">
<link rel="preconnect" href="https://hm.baidu.com">
<script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?c7cd0fd77ac518cc6ef46461cdc9524b";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(e,c)}()</script><title data-react-helmet="true">平衡二叉树 | HZFE - 剑指前端 Offer</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://hzfe.github.io/awesome-interview/book1/algorithm-balanced-binary-trees"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="平衡二叉树 | HZFE - 剑指前端 Offer"><meta data-react-helmet="true" name="description" content="题目描述"><meta data-react-helmet="true" property="og:description" content="题目描述"><link data-react-helmet="true" rel="shortcut icon" href="/awesome-interview/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://hzfe.github.io/awesome-interview/book1/algorithm-balanced-binary-trees"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/book1/algorithm-balanced-binary-trees" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/book1/algorithm-balanced-binary-trees" hreflang="x-default"><link rel="stylesheet" href="/awesome-interview/assets/css/styles.36d1aa8c.css">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.c8e42582.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.ab4de134.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/main.d4064b1a.js" as="script">
</head>
<body>
@ -19,7 +19,7 @@
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> left </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">height</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">root</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">left</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> right </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">height</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">root</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">right</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">left </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">-</span><span class="token number" style="color:#36acaa">1</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">||</span><span class="token plain"> right </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">-</span><span class="token number" style="color:#36acaa">1</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">||</span><span class="token plain"> </span><span class="token known-class-name class-name">Math</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">abs</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">left </span><span class="token operator" style="color:#393A34">-</span><span class="token plain"> right</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">-</span><span class="token number" style="color:#36acaa">1</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token known-class-name class-name">Math</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">max</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">left</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> right</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">+</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor anchor__h4 anchorWithStickyNavbar_31ik" id="时间复杂度分析-1"></a>时间复杂度分析<a class="hash-link" href="#时间复杂度分析-1" title="Direct link to heading">#</a></h4><p>由于是后序遍历,每个节点只会被调用 1 次,所以,该方法的时间复杂度是 O(n)。</p><h4><a aria-hidden="true" tabindex="-1" class="anchor anchor__h4 anchorWithStickyNavbar_31ik" id="空间复杂度分析-1"></a>空间复杂度分析<a class="hash-link" href="#空间复杂度分析-1" title="Direct link to heading">#</a></h4><p>该方法由于使用了递归,并且每次递归都调用了两次自身,导致会函数栈会按照等差数列开辟,所以该方法的空间复杂度应为 O(n^2)。</p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/awesome-interview/book1/coding-promise"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« 编码:实现一个 Promises/A+</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/awesome-interview/book1/topic-enter-url-display-xx"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">综合:浏览器从输入网址到页面展现的过程 »</div></a></div></nav></div></div><div class="col col--3"><div class="tableOfContents_35-E thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#题目描述" class="table-of-contents__link">题目描述</a></li><li><a href="#基本知识点" class="table-of-contents__link">基本知识点</a></li><li><a href="#题解" class="table-of-contents__link">题解</a><ul><li><a href="#解法一" class="table-of-contents__link">解法一</a></li><li><a href="#解法二" class="table-of-contents__link">解法二</a></li></ul></li></ul></div></div></div><div class="row"><div class="col"><div class="react-utterences"><div>Loading script...</div></div></div><div class="col col--3"></div></div></div></main></div></div></div>
<script src="/awesome-interview/assets/js/runtime~main.c8e42582.js"></script>
<script src="/awesome-interview/assets/js/runtime~main.ab4de134.js"></script>
<script src="/awesome-interview/assets/js/main.d4064b1a.js"></script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -6,7 +6,7 @@
<meta name="generator" content="Docusaurus v2.0.0-beta.5">
<link rel="preconnect" href="https://hm.baidu.com">
<script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?c7cd0fd77ac518cc6ef46461cdc9524b";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(e,c)}()</script><title data-react-helmet="true">实现一个 Promises/A+ 规范的 Promise | HZFE - 剑指前端 Offer</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://hzfe.github.io/awesome-interview/book1/coding-promise"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="实现一个 Promises/A+ 规范的 Promise | HZFE - 剑指前端 Offer"><meta data-react-helmet="true" name="description" content="这是一道有着成熟的业界规范的 coding 题,完成这道题的前置知识就是要了解什么是 Promises/A+。"><meta data-react-helmet="true" property="og:description" content="这是一道有着成熟的业界规范的 coding 题,完成这道题的前置知识就是要了解什么是 Promises/A+。"><link data-react-helmet="true" rel="shortcut icon" href="/awesome-interview/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://hzfe.github.io/awesome-interview/book1/coding-promise"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/book1/coding-promise" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/book1/coding-promise" hreflang="x-default"><link rel="stylesheet" href="/awesome-interview/assets/css/styles.36d1aa8c.css">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.c8e42582.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.ab4de134.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/main.d4064b1a.js" as="script">
</head>
<body>
@ -44,7 +44,7 @@
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> obj</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">promise</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Promise</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">resolve</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> reject</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> obj</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">resolve</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> resolve</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> obj</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">reject</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> reject</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> obj</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain">module</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token known-class-name class-name">Promise</span><span class="token punctuation" style="color:#393A34">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor anchor__h3 anchorWithStickyNavbar_31ik" id="2-运行命令"></a>2. 运行命令<a class="hash-link" href="#2-运行命令" title="Direct link to heading">#</a></h3><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly bash"><pre tabindex="0" class="prism-code language-bash codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token plain">$ npx promises-aplus-tests test.js</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor anchor__h3 anchorWithStickyNavbar_31ik" id="3-测试结果"></a>3. 测试结果<a class="hash-link" href="#3-测试结果" title="Direct link to heading">#</a></h3><p><img src="https://user-images.githubusercontent.com/17525377/125480978-5e2eaa69-0be4-4f8e-a321-c8e58af6a415.png" alt="测试结果"></p><p>完美通过!</p><h2><a aria-hidden="true" tabindex="-1" class="anchor anchor__h2 anchorWithStickyNavbar_31ik" id="参考资料"></a>参考资料<a class="hash-link" href="#参考资料" title="Direct link to heading">#</a></h2><ol><li><a href="https://promisesaplus.com/" target="_blank" rel="noopener noreferrer">Promises/A+</a></li><li><a href="https://github.com/promises-aplus/promises-tests" target="_blank" rel="noopener noreferrer">Promises/A+ Compliance Test Suite</a></li></ol></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/awesome-interview/book1/network-security"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« 网络:前端安全</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/awesome-interview/book1/algorithm-balanced-binary-trees"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">算法:平衡二叉树 »</div></a></div></nav></div></div><div class="col col--3"><div class="tableOfContents_35-E thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#编写代码" class="table-of-contents__link">编写代码</a><ul><li><a href="#1-基础框架" class="table-of-contents__link">1. 基础框架</a></li><li><a href="#2-then-方法" class="table-of-contents__link">2. then 方法</a></li><li><a href="#3-promise-处理程序" class="table-of-contents__link">3. Promise 处理程序</a></li><li><a href="#4-完整代码" class="table-of-contents__link">4. 完整代码</a></li></ul></li><li><a href="#测试代码" class="table-of-contents__link">测试代码</a><ul><li><a href="#1-暴露一个简单的适配器接口" class="table-of-contents__link">1. 暴露一个简单的适配器接口</a></li><li><a href="#2-运行命令" class="table-of-contents__link">2. 运行命令</a></li><li><a href="#3-测试结果" class="table-of-contents__link">3. 测试结果</a></li></ul></li><li><a href="#参考资料" class="table-of-contents__link">参考资料</a></li></ul></div></div></div><div class="row"><div class="col"><div class="react-utterences"><div>Loading script...</div></div></div><div class="col col--3"></div></div></div></main></div></div></div>
<script src="/awesome-interview/assets/js/runtime~main.c8e42582.js"></script>
<script src="/awesome-interview/assets/js/runtime~main.ab4de134.js"></script>
<script src="/awesome-interview/assets/js/main.d4064b1a.js"></script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -6,7 +6,7 @@
<meta name="generator" content="Docusaurus v2.0.0-beta.5">
<link rel="preconnect" href="https://hm.baidu.com">
<script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?c7cd0fd77ac518cc6ef46461cdc9524b";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(e,c)}()</script><title data-react-helmet="true">实现节流去抖函数 | HZFE - 剑指前端 Offer</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://hzfe.github.io/awesome-interview/book2/coding-throttle-debounce"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="实现节流去抖函数 | HZFE - 剑指前端 Offer"><meta data-react-helmet="true" name="description" content="节流"><meta data-react-helmet="true" property="og:description" content="节流"><link data-react-helmet="true" rel="shortcut icon" href="/awesome-interview/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://hzfe.github.io/awesome-interview/book2/coding-throttle-debounce"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/book2/coding-throttle-debounce" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/book2/coding-throttle-debounce" hreflang="x-default"><link rel="stylesheet" href="/awesome-interview/assets/css/styles.36d1aa8c.css">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.c8e42582.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.ab4de134.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/main.d4064b1a.js" as="script">
</head>
<body>
@ -19,7 +19,7 @@
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">timer</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function" style="color:#d73a49">clearTimeout</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">timer</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> timer </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:#00009f">null</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> self </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">this</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> args </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> arguments</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> timer </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">setTimeout</span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> func</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">apply</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">self</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> args</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> timer </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword null nil" style="color:#00009f">null</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> wait</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/awesome-interview/book2/network-http-cache"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« 网络HTTP 缓存机制</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/awesome-interview/book2/algorithm-reverse-linked-list"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">算法:反转链表 »</div></a></div></nav></div></div><div class="col col--3"><div class="tableOfContents_35-E thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#节流" class="table-of-contents__link">节流</a><ul><li><a href="#1-基本概念" class="table-of-contents__link">1. 基本概念</a></li><li><a href="#2-应用场景" class="table-of-contents__link">2. 应用场景</a></li><li><a href="#3-流程图" class="table-of-contents__link">3. 流程图</a></li><li><a href="#4-编写代码" class="table-of-contents__link">4. 编写代码</a></li></ul></li><li><a href="#去抖" class="table-of-contents__link">去抖</a><ul><li><a href="#1-基本概念-1" class="table-of-contents__link">1. 基本概念</a></li><li><a href="#2-应用场景-1" class="table-of-contents__link">2. 应用场景</a></li><li><a href="#3-流程图-1" class="table-of-contents__link">3. 流程图</a></li><li><a href="#4-编写代码-1" class="table-of-contents__link">4. 编写代码</a></li></ul></li></ul></div></div></div><div class="row"><div class="col"><div class="react-utterences"><div>Loading script...</div></div></div><div class="col col--3"></div></div></div></main></div></div></div>
<script src="/awesome-interview/assets/js/runtime~main.c8e42582.js"></script>
<script src="/awesome-interview/assets/js/runtime~main.ab4de134.js"></script>
<script src="/awesome-interview/assets/js/main.d4064b1a.js"></script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -6,7 +6,7 @@
<meta name="generator" content="Docusaurus v2.0.0-beta.5">
<link rel="preconnect" href="https://hm.baidu.com">
<script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?c7cd0fd77ac518cc6ef46461cdc9524b";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(e,c)}()</script><title data-react-helmet="true">如何定位内存泄露 | HZFE - 剑指前端 Offer</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://hzfe.github.io/awesome-interview/book3/browser-memory-leaks"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="如何定位内存泄露 | HZFE - 剑指前端 Offer"><meta data-react-helmet="true" name="description" content="相关问题"><meta data-react-helmet="true" property="og:description" content="相关问题"><link data-react-helmet="true" rel="shortcut icon" href="/awesome-interview/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://hzfe.github.io/awesome-interview/book3/browser-memory-leaks"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/book3/browser-memory-leaks" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/book3/browser-memory-leaks" hreflang="x-default"><link rel="stylesheet" href="/awesome-interview/assets/css/styles.36d1aa8c.css">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.c8e42582.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.ab4de134.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/main.d4064b1a.js" as="script">
</head>
<body>
@ -16,7 +16,7 @@
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">capture</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">/* 可能有内存泄漏的代码片段 start */</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// code</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">/* 可能有内存泄漏的代码片段 end */</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">capture</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor anchor__h2 anchorWithStickyNavbar_31ik" id="参考资料"></a>参考资料<a class="hash-link" href="#参考资料" title="Direct link to heading">#</a></h2><ol><li><a href="https://developer.chrome.com/docs/devtools/" target="_blank" rel="noopener noreferrer">Chrome DevTools</a></li><li><a href="https://developer.chrome.com/docs/devtools/memory-problems/" target="_blank" rel="noopener noreferrer">Fix memory problems</a></li></ol></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/awesome-interview/book3/browser-event-loop"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« 浏览器:浏览器事件循环</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/awesome-interview/book3/engineer-webpack-loader"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">工程化:谈下 webpack loader 的机制 »</div></a></div></nav></div></div><div class="col col--3"><div class="tableOfContents_35-E thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#相关问题" class="table-of-contents__link">相关问题</a></li><li><a href="#回答关键点" class="table-of-contents__link">回答关键点</a></li><li><a href="#知识点深入" class="table-of-contents__link">知识点深入</a><ul><li><a href="#1-排查内存泄漏常见问题" class="table-of-contents__link">1. 排查内存泄漏常见问题</a></li><li><a href="#2-使用-chrome-devtools-定位内存泄漏" class="table-of-contents__link">2. 使用 Chrome DevTools 定位内存泄漏</a></li><li><a href="#3-nodejs-中的内存泄漏定位" class="table-of-contents__link">3. Node.js 中的内存泄漏定位</a></li></ul></li><li><a href="#参考资料" class="table-of-contents__link">参考资料</a></li></ul></div></div></div><div class="row"><div class="col"><div class="react-utterences"><div>Loading script...</div></div></div><div class="col col--3"></div></div></div></main></div></div></div>
<script src="/awesome-interview/assets/js/runtime~main.c8e42582.js"></script>
<script src="/awesome-interview/assets/js/runtime~main.ab4de134.js"></script>
<script src="/awesome-interview/assets/js/main.d4064b1a.js"></script>
</body>
</html>

View File

@ -6,7 +6,7 @@
<meta name="generator" content="Docusaurus v2.0.0-beta.5">
<link rel="preconnect" href="https://hm.baidu.com">
<script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?c7cd0fd77ac518cc6ef46461cdc9524b";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(e,c)}()</script><title data-react-helmet="true">将列表还原为树状结构 | HZFE - 剑指前端 Offer</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://hzfe.github.io/awesome-interview/book3/coding-arr-to-tree"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="将列表还原为树状结构 | HZFE - 剑指前端 Offer"><meta data-react-helmet="true" name="description" content="需求来源分析:"><meta data-react-helmet="true" property="og:description" content="需求来源分析:"><link data-react-helmet="true" rel="shortcut icon" href="/awesome-interview/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://hzfe.github.io/awesome-interview/book3/coding-arr-to-tree"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/book3/coding-arr-to-tree" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/book3/coding-arr-to-tree" hreflang="x-default"><link rel="stylesheet" href="/awesome-interview/assets/css/styles.36d1aa8c.css">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.c8e42582.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.ab4de134.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/main.d4064b1a.js" as="script">
</head>
<body>
@ -26,7 +26,7 @@
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 如果当前 id 的 children 已存在,则加入 children 字段中,否则,初始化 children</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// item 与 record[id] 引用同一份 children后续迭代中更新 record[parendId] 就会反映到 item 中</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> newItem</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">childName</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> record</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">?</span><span class="token plain"> record</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">record</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">id</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">parentId </span><span class="token operator" style="color:#393A34">===</span><span class="token plain"> rootId</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> root</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">push</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">newItem</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">else</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token operator" style="color:#393A34">!</span><span class="token plain">record</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">parentId</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> record</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">parentId</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> record</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">parentId</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">push</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">newItem</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> root</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><p>时间复杂度分析:经历了一轮迭代,假设有 n 个元素,那么时间复杂度为 O(n)。</p><h3><a aria-hidden="true" tabindex="-1" class="anchor anchor__h3 anchorWithStickyNavbar_31ik" id="代码演示及总结"></a>代码演示及总结<a class="hash-link" href="#代码演示及总结" title="Direct link to heading">#</a></h3><p><a href="https://codesandbox.io/s/practical-sun-vo4yi?file=/src/App.js" target="_blank" rel="noopener noreferrer">Code Sandbox - List to Tree</a></p><ul><li>递归法:在数据量增大的时候,性能会急剧下降。好处是可以在构建树的过程中,给节点添加层级信息。</li><li>迭代法:速度快。但如果想要不影响源数据,需要在 record 中存储一份复制的数据,且无法在构建的过程中得知节点的层级信息,需要构建完后再次深度优先遍历获取。</li><li>迭代法变体一:按需创建 children可以避免空的 children 列表。</li></ul></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/awesome-interview/book3/network-http-1-2"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« 网络HTTP2 和 HTTP1.1 的对比</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/awesome-interview/book3/algorithm-binary-tree-k"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">算法:二叉搜索树的第 k 个结点 »</div></a></div></nav></div></div><div class="col col--3"><div class="tableOfContents_35-E thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#典型题目" class="table-of-contents__link">典型题目</a></li><li><a href="#解法" class="table-of-contents__link">解法</a><ul><li><a href="#解法一" class="table-of-contents__link">解法一</a></li><li><a href="#解法二" class="table-of-contents__link">解法二</a></li><li><a href="#解法二变体" class="table-of-contents__link">解法二变体</a></li><li><a href="#代码演示及总结" class="table-of-contents__link">代码演示及总结</a></li></ul></li></ul></div></div></div><div class="row"><div class="col"><div class="react-utterences"><div>Loading script...</div></div></div><div class="col col--3"></div></div></div></main></div></div></div>
<script src="/awesome-interview/assets/js/runtime~main.c8e42582.js"></script>
<script src="/awesome-interview/assets/js/runtime~main.ab4de134.js"></script>
<script src="/awesome-interview/assets/js/main.d4064b1a.js"></script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -6,13 +6,13 @@
<meta name="generator" content="Docusaurus v2.0.0-beta.5">
<link rel="preconnect" href="https://hm.baidu.com">
<script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?c7cd0fd77ac518cc6ef46461cdc9524b";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(e,c)}()</script><title data-react-helmet="true">HZFE - 剑指前端 Offer</title><meta data-react-helmet="true" property="og:title" content="HZFE - 剑指前端 Offer"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://hzfe.github.io/awesome-interview/guide"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_tag" content="default"><link data-react-helmet="true" rel="shortcut icon" href="/awesome-interview/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://hzfe.github.io/awesome-interview/guide"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/guide" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/guide" hreflang="x-default"><link rel="stylesheet" href="/awesome-interview/assets/css/styles.36d1aa8c.css">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.c8e42582.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.ab4de134.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/main.d4064b1a.js" as="script">
</head>
<body>
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
<div><a href="#" class="skipToContent_1oUP">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/awesome-interview/"><img src="/awesome-interview/img/badge.svg" alt="HZFE" class="themedImage_1VuW themedImage--light_3UqQ navbar__logo"><img src="/awesome-interview/img/badge.svg" alt="HZFE" class="themedImage_1VuW themedImage--dark_hz6m navbar__logo"><b class="navbar__title">剑指前端 Offer</b></a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/hzfe/awesome-interview" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_3J9K"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper mdx-wrapper mdx-page"><main class="container container--fluid margin-vert--lg"><div class="row mdxPageWrapper_3qD3"><div class="col col--8"><div style="margin-bottom:1.5em"><a style="cursor:pointer">返回</a></div></div><div class="col col--2"><div class="tableOfContents_35-E thin-scrollbar"></div></div></div></main></div></div>
<script src="/awesome-interview/assets/js/runtime~main.c8e42582.js"></script>
<script src="/awesome-interview/assets/js/runtime~main.ab4de134.js"></script>
<script src="/awesome-interview/assets/js/main.d4064b1a.js"></script>
</body>
</html>

File diff suppressed because one or more lines are too long

128
readme.md
View File

@ -1,4 +1,6 @@
# [剑指前端 Offer](https://hzfe.github.io/awesome-interview/)
# 剑指前端 Offer
[阅读地址 1](febook.hzfe.org/) [阅读地址 2](https://hzfe.github.io/awesome-interview/)
## 互动与勘误
@ -6,101 +8,39 @@
阅读时您可能会发现内容上的错误,可以直接在相关章节末尾的评论区进行留言,留言内容会被自动同步到仓库 Issues 中。您也可以在仓库 [Issues](https://github.com/HZFE/awesome-interview/issues) 中直接留下宝贵意见。欢迎读者对内容仓库进行 [订阅/Watch](https://github.com/hzfe/awesome-interview),我们会持续添加和订正内容。
## 关于我们
Hi我们是 HZFE一群来自于五湖四海的 90 后技术人。
一群固定的人总聚在一起不知不觉就会成为一个所谓的团队。而我们的团队代号“HZFE”总让不明其意的人拼错或不知如何发音。曾经在我们三周年活动蛋糕上店家就用心写下了“H2FF 三周年快乐”的祝福。
我们最初相识于一个拥有 17 位成员的群聊,群聊名称正是 HZFE。其本意是杭州前端Hangzhou Front-End所以也读作“杭州 FE”。但需要额外解释的是我们大多不在杭州也不全是前端。所以您且当这是一个没道理的代号而我们的相聚则是一场有趣的缘分。
和每个普通人一样,我们大多过着三点一线的生活。喜欢旅游也爱摄影,也像千千万个理财小白一般,在正向或是反向理财中来回波动。每天都在产出新的想法,一起头脑风暴,结局总是以没有设计师为借口不了了之,三分钟热度成了我们心照不宣的默契。每天都在做梦,讲些不切实际的幻想,平凡且平庸。
如果说,唯一值得小小炫耀一番的,便是我们这群人对于热爱编程这件事达成了共识。不论是做开源、做自己的产品亦或各自在工作岗位上,都有所成绩,有所收获。又也许正是因为我们比较幸运,能在刚踏入社会时相识相知相爱,才有了后来我们彼此影响,一同成长为此刻至少技术还不赖的人。
我们在行业中打滚了近五年的时光,团队中的大部分人都任职于互联网大厂,因此也自许是比较了解中大型公司的面试规则和趋势的人。因缘巧合下,在某天如同往日的头脑风暴中,我们一拍脑袋,说要一起写本书,从而开启了这场坎坷的写作之旅。
正如其名:剑指前端 Offer希望在这本书的帮助下我们和读者都能有所成长。
## 前言
### 写作背景
在我们团队中,每年都会有部分人需要更换新的工作环境,因此我们的聊天话题总是阶段性的变成面试题探讨。随着这几年我们对前端面试方面的经验积累和总结,我们一致认为前端面试的复习是有关键路径的。基于我们内部需要,也曾迭代过几个面试题库版本。
从面试角度分析,面试最典型的特点是时间有限。这意味着面试官和候选人需要在有限时间内,做出最大程度的有效沟通。
面试官如何有效且全面的了解候选人,是另外一门学问。而候选人的挑战在于面对问题时,如何在一两分钟内作出有效回答。有效回答是指:用两三句话对问题作出概括性回答,并引导面试官对回答中提到的关键词进一步深入提问。
不少同行的心态是:如果面试问得难,那便是面试造航母,工作拧螺丝;如果面试问得简单,那便是东西我会用,但我不会说,没发挥好。由于各种原因,失去了更多的选择。本书希望能够帮助大家尽可能解决这方面的问题,让前端开发者在面试复习阶段事半功倍,以更好的状态进行面试。
基于以上写作背景,我们可以达成两个共识:
1. **面试时间总是有限的**
围绕一道普通技术题目的时长一般在 1-3 分钟,一轮技术面试的时长一般控制在 30-60 分钟,面试题目通常涉及不同知识面。
2. **问题的回答一般是自顶向下的**
以一个概括性较强的回答进行反馈,面试官获得反馈后,通常会基于候选人回答中提到的关键点或面试官认为的其他关键点展开进一步提问。
### 面试痛点
![image](https://user-images.githubusercontent.com/17002181/132717020-3fa8010a-ae1d-4921-88f9-5563b5b53c22.png)
上面这张结构图,我们梳理了从准备面试到最终获得 Offer 的大致过程。较多人的复习方法主要来源于系统地复习所有知识点,或者有目的性的查找面经并复习对应的知识点。在时间充分的情况下,系统复习在复习阶段初期会有一定成效。但是仅停留在这一步,也许并不是最好的选择。
我们可以从以下角度剖析面试复习阶段的关注点:
1. **复习什么**
候选人通常会系统地查看知识点总结,而市面上大部分的知识点总结,提纲排列顺序为由易到难,通常从基本数据类型章节开始讲解,内容比较冗长。系统复习有一定的必要性,但是在主流面试中一般有明确面试范围和考察频率。因此复习阶段应该有意识的复习高频内容。
1. **怎么复习**
学习知识点时通常尽可能查看具有权威性的文档、规范、源码等,进行从零到一的较全面的理解,耗时较长;而复习时更多的需要有侧重点,应当进行提炼和总结。候选人通常基于知识点去查找相关技术文章,希望从其他开发者的技术文章中获取“精华”,从而省去自己从零学习或是提炼总结的成本。
然而市面上充斥着良莠不齐的技术文章,也需要候选人在查找资料时“货比三家”,辩证对待文章内容。即便看到较好的文章,学会知识和面试中将知识进行输出也并非同一个概念。
因为这些文章通常较为详细,以教程的方式娓娓道来,而面试时考察候选人对知识点的理解和运用,需要候选人在有限时间内言简意赅的回答问题。有的候选人编程能力不弱,但口头表达能力和总结能力欠缺。因此复习阶段拥有一份非教程向,而是面试向的参考读物变得重要起来。
基于一些常见的面试案例,我们总结出以下面试通病:
- **面试表达能力弱:**“那些东西我会用,但面试的时候讲不好。”
- **复习摸不清重点:**“大厂面试感觉很难,要复习的东西有很多,也不知道会不会问到。”
- **学习效率低:**“各种面经我都有看,自己大致归类了题目出现频率,但答案还要再查一下。”
- **学习兴趣低:**“有的问题我有自己查资料,讲得很详细,也很难,啃一篇要花很多时间。”
在有限时间内,无法对高频知识点进行吸收和总结,只能不断地在面试环节中试错,机会成本和时间成本极高。
### 写作理念
![image](https://user-images.githubusercontent.com/17002181/132936463-bb9234e1-f48a-45c1-816d-2c0ba41118bd.png)
为降低前端候选人面试的准备和试错成本,我们撰写了这本专为前端面试场景服务的书,意在成为候选人的技术高频题指南。本书主要整理了高频面试题和对应篇幅可控的答案。高频题是为了提高候选人复习效率,篇幅可控的答案则节省候选人的阅读时间:
- **以高效方式组合高频题目**
技术面试时长一般控制在 30-60 分钟,围绕一道普通技术题目的时长一般在 1-3 分钟,会涉及不同知识面的细节。我们整理了 5 套面试题,共计 60 道不同的高频面试题。每套题包含固定类型题目(如基础题、工程化题、网络题、编码题、综合题等)。
通过组合不同题型,模拟一场面试中的题型分布情况,我们每套题都可以更加接近真实技术面试的体验。因此可以帮助候选人积累经验、提高面试成功率。
- **提炼面试回答要点**
面试回答和日常知识点学习有一定差别:日常知识点的学习需了解广度且深入细节,要求查阅各种文档、规范。面试回答则需要将所学知识浓缩为几句话。
本书通过由浅入深的组织方式,以「相关问题」「回答关键点」「知识点深入」「参考资料」为内容基础大纲进行梳理。「回答关键点」作为高度概括的总结性语言,可用于第一时间回答面试官的问题;「知识点深入」以递进方式深入解析,可作为引导面试官进一步提问的方向。
读者还可以模仿本书内容的编排方式,经过练习后,用更精炼的语言对其他问题作出有效回答。
总体而言,本书尽可能从候选人角度出发,使候选人快速获得面试常见技术问题的参考性回答,也提供给候选人一个相对精简的知识点深入总结。
读者通过对书中内容的学习,即便不能“一书在手,天下我有”,也能在面试中多一份从容和自信。同时本书也向前端从业人员传递一种学习方法和思路。毕竟每个人的学习方法不同,不可以机械照搬。对于如何在有限时间内,将复习效益最大化。读者可以尝试自行分析场景特点和自身痛点,找出属于自己的关键路径并制定复习计划。
### 适合人群
## 适合人群
- 有意冲刺互联网大厂的前端开发者,可参考本书题目和答案提纲,自主深入学习,查漏补缺。
- 短时间内参加面试的前端开发者,可借助本书快速了解面试高频的技术问题和相关解答。
- 前端面试官可参考本书的题型和题目,按岗位需求对候选人进行有梯度的考察。
一千个人眼中有一千个哈姆雷特。而一个人眼中,在不同阶段也可以看到不一样的风景。
## CHANGELOG
#### 2021/09/15
- 修复 issue 中提的 bug
- 更新 readme
#### 2021/09/14
- 添加 webpack loader 章节
#### 2021/09/05
- 发布第一版(模拟题 1 - 3
## Contributors
<a href="https://github.com/Akiq2016"><img src="https://avatars2.githubusercontent.com/u/17002181?v=4&s=400" style="border-radius: 50%" width="46" height="46" /></a>
<a href="https://github.com/gongpeione"><img src="https://avatars3.githubusercontent.com/u/3984824?v=4&s=400" style="border-radius: 50%" width="46" height="46" /></a>
<a href="https://github.com/yola-0316"><img src="https://avatars.githubusercontent.com/u/4338052?v=4&s=400" style="border-radius: 50%" width="46" height="46" /></a>
<a href="https://github.com/xiaokk06"><img src="https://avatars2.githubusercontent.com/u/12165373?v=4&s=400" style="border-radius: 50%" width="46" height="46" /></a>
<a href="https://github.com/NightCatSama"><img src="https://avatars0.githubusercontent.com/u/13888962?v=4&s=400" style="border-radius: 50%" width="46" height="46" /></a>
<a href="https://github.com/xyxiao001"><img src="https://avatars3.githubusercontent.com/u/15681693?v=4&s=400" style="border-radius: 50%" width="46" height="46" /></a>
<a href="https://github.com/LLawlight"><img src="https://avatars0.githubusercontent.com/u/17525377?v=4&s=400" style="border-radius: 50%" width="46" height="46" /></a>
<a href="https://github.com/uztg"><img src="https://avatars1.githubusercontent.com/u/17242380?v=4&s=400" style="border-radius: 50%" width="46" height="46" /></a>
<a href="https://github.com/Daryl-L"><img src="https://avatars0.githubusercontent.com/u/5457564?v=4&s=400" style="border-radius: 50%" width="46" height="46" /></a>
<a href="https://github.com/Yiiu"><img src="https://avatars3.githubusercontent.com/u/7876498?v=4&s=400" style="border-radius: 50%" width="46" height="46" /></a>
<a href="https://github.com/hellodigua"><img src="https://avatars1.githubusercontent.com/u/9943164?v=4&s=400" style="border-radius: 50%" width="46" height="46" /></a>
<a href="https://github.com/icemirror"><img src="https://avatars2.githubusercontent.com/u/14882452?v=4&s=400" style="border-radius: 50%" width="46" height="46" /></a>
<a href="https://github.com/yinmazuo"><img src="https://avatars1.githubusercontent.com/u/9531951?v=4&s=400" style="border-radius: 50%" width="46" height="46" /></a>

View File

@ -6,13 +6,13 @@
<meta name="generator" content="Docusaurus v2.0.0-beta.5">
<link rel="preconnect" href="https://hm.baidu.com">
<script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?c7cd0fd77ac518cc6ef46461cdc9524b";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(e,c)}()</script><title data-react-helmet="true">Tags | HZFE - 剑指前端 Offer</title><meta data-react-helmet="true" property="og:title" content="Tags | HZFE - 剑指前端 Offer"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://hzfe.github.io/awesome-interview/tags"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_tag" content="doc_tags_list"><link data-react-helmet="true" rel="shortcut icon" href="/awesome-interview/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://hzfe.github.io/awesome-interview/tags"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/tags" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://hzfe.github.io/awesome-interview/tags" hreflang="x-default"><link rel="stylesheet" href="/awesome-interview/assets/css/styles.36d1aa8c.css">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.c8e42582.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/runtime~main.ab4de134.js" as="script">
<link rel="preload" href="/awesome-interview/assets/js/main.d4064b1a.js" as="script">
</head>
<body>
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
<div><a href="#" class="skipToContent_1oUP">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/awesome-interview/"><img src="/awesome-interview/img/badge.svg" alt="HZFE" class="themedImage_1VuW themedImage--light_3UqQ navbar__logo"><img src="/awesome-interview/img/badge.svg" alt="HZFE" class="themedImage_1VuW themedImage--dark_hz6m navbar__logo"><b class="navbar__title">剑指前端 Offer</b></a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/hzfe/awesome-interview" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_3J9K"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-tags-list-page"><div class="container margin-vert--lg"><div class="row"><main class="col col--8 col--offset-2"><h1>Tags</h1><section class="margin-vert--lg"></section></main></div></div></div></div>
<script src="/awesome-interview/assets/js/runtime~main.c8e42582.js"></script>
<script src="/awesome-interview/assets/js/runtime~main.ab4de134.js"></script>
<script src="/awesome-interview/assets/js/main.d4064b1a.js"></script>
</body>
</html>