├── .github └── issue_template.md ├── .gitignore ├── .travis.yml ├── README.md ├── docs ├── .vuepress │ ├── config.js │ ├── override.styl │ └── public │ │ ├── favicon.ico │ │ ├── icons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon-152x152.png │ │ └── msapplication-icon-144x144.png │ │ ├── logo.png │ │ └── manifest.json ├── README.md ├── hzfe-qa-2017 │ ├── A-html │ │ ├── asyncdefer.svg │ │ ├── defer-async.md │ │ ├── dns-prefetch.md │ │ └── what-is-doctype.md │ ├── B-css │ │ ├── assets │ │ │ ├── 1.png │ │ │ ├── 10.svg │ │ │ ├── 2.svg │ │ │ ├── 3.svg │ │ │ ├── 4.svg │ │ │ ├── 5.svg │ │ │ ├── 6.svg │ │ │ ├── 7.svg │ │ │ ├── 8.svg │ │ │ └── 9.svg │ │ ├── center-elements-horizontally-and-vertically.md │ │ ├── flexbox.md │ │ └── what-is-bfc.md │ ├── C-javascript │ │ ├── array-like-object │ │ │ └── difference-to-array.md │ │ ├── es6 │ │ │ ├── class.md │ │ │ ├── promise.md │ │ │ └── require-and-import.md │ │ ├── expressions-and-operators │ │ │ ├── best-way-to-check-data-type-in-javascript.md │ │ │ ├── new.md │ │ │ └── this.md │ │ ├── function │ │ │ ├── call-apply.md │ │ │ ├── eval.md │ │ │ └── function-invocation.md │ │ ├── object-oriented │ │ │ └── inheritance-and-prototype-chain.md │ │ ├── render-tree │ │ │ ├── images │ │ │ │ ├── CSSOM-Tree.png │ │ │ │ ├── DOM-Tree.png │ │ │ │ ├── frame-no-layout.jpg │ │ │ │ ├── render-tree-construction.png │ │ │ │ ├── renderLayer.png │ │ │ │ └── rendering-pipeline.jpg │ │ │ └── render-tree.md │ │ ├── scopes-environments-and-closures │ │ │ ├── closures.md │ │ │ ├── execution-context.md │ │ │ └── img │ │ │ │ ├── 1.png │ │ │ │ └── 2.png │ │ └── types │ │ │ └── why-null-is-an-object.md │ ├── D-dom-and-bom │ │ ├── ajax │ │ │ └── XMLHttpRequest.md │ │ ├── dom-bom.md │ │ └── event │ │ │ └── no-bubbles.md │ ├── E-regexp │ │ └── email.md │ ├── F-framework-and-library │ │ ├── react │ │ │ ├── shallow-compare.md │ │ │ └── shouldComponentUpdate.md │ │ └── vue │ │ │ ├── component-communication.md │ │ │ ├── computed.md │ │ │ └── img │ │ │ └── props-events.png │ ├── G-performance-improvement │ │ ├── cdn.md │ │ ├── event-delegation.md │ │ ├── img │ │ │ └── repaint_reflow_1.png │ │ ├── reflow-repain.md │ │ └── throttle-debounce.md │ ├── H-computer-networking │ │ ├── HTTP.md │ │ ├── HTTPS.md │ │ ├── TCP.md │ │ ├── img │ │ │ ├── pic1.png │ │ │ ├── pic2.png │ │ │ ├── pic3.png │ │ │ ├── pic4.png │ │ │ └── pic5.png │ │ ├── net-http │ │ │ └── index.js │ │ └── post-and-get.md │ ├── I-algorithm │ │ ├── graphs.md │ │ ├── img │ │ │ ├── pic1.jpg │ │ │ └── pic2.png │ │ ├── in-order-traversal.md │ │ └── non-recursive-traversal-of-binary-tree.md │ ├── J-uncategories │ │ └── stringToInt.md │ ├── K-Mobile │ │ ├── 300ms-delay.md │ │ └── compatibility.png │ ├── L-coding │ │ ├── map.md │ │ └── removing-duplicates-from-an-array.md │ ├── M-browser │ │ └── cross-origin.md │ ├── N-debug │ │ ├── images │ │ │ ├── channels.png │ │ │ ├── channels2.png │ │ │ ├── difference.png │ │ │ ├── sharedEthernet.png │ │ │ ├── switchEthernet.png │ │ │ ├── wireless.png │ │ │ └── wireshark.png │ │ ├── mobile-debug.md │ │ └── packet-capture.md │ ├── O-HTTP │ │ └── most-common-status-code.md │ └── meta-element.md ├── note │ ├── .keep │ └── operating-system │ │ └── modern-operating-system-thread.md └── toc.md ├── package.json └── yarn.lock /.github/issue_template.md: -------------------------------------------------------------------------------- 1 | 17 | 18 | ### 面试题题目 ### 19 | 20 | ### 问题 ### 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: stable 3 | cache: 4 | yarn: true 5 | directories: 6 | - node_modules 7 | branches: 8 | only: 9 | - master 10 | install: 11 | - yarn install 12 | script: 13 | - yarn docs:build 14 | deploy: 15 | provider: pages 16 | skip_cleanup: true 17 | github_token: $GITHUB_TOKEN 18 | on: 19 | branch: master 20 | local_dir: docs/.vuepress/dist 21 | target_branch: gh-pages -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HZFE奶库 2 | 3 | [文档](https://hzfe.github.io/hzfe-questions-and-answers/) 4 | 5 | 1. 大厂面试精华 6 | 2. 成员亲自上阵 7 | 3. 支持离线阅读 8 | 9 | ## HZFE 10 | 11 | ### 官网 12 | 13 | [https://hzfe.org/](https://hzfe.org/) ([repository](https://github.com/HZFE/hzfe)) 14 | 15 | ### 成员 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | ### 博客 36 | 37 | [树树](https://code.geeku.net/) 38 | [盖盖](https://blog.xyxiao.cn/) 39 | [小鱼](https://blog.wanan.me/) 40 | [爆栈](https://is.daryl.moe/) 41 | [叶苗](https://nightcat.win/) 42 | [兔哥](http://noder.club/) 43 | [丹丹](http://www.funnycoder.cn) 44 | [清真](http://zhaoyuxiang.cn) 45 | 46 | ## 贡献者 47 | 48 | Thank you to all the people who already contributed to 奶! 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | base: '/hzfe-questions-and-answers/', 3 | title: 'HZFE奶库', 4 | description: '前端面试知识题库', 5 | head: [ 6 | ['link', { rel: 'icon', href: '/favicon.ico' }], 7 | ['link', { rel: 'manifest', href: '/manifest.json' }], 8 | ['meta', { name: 'theme-color', content: '#3eaf7c' }], 9 | ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }], 10 | ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }], 11 | ['link', { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` }], 12 | ['meta', { name: 'msapplication-TileImage', content: `/icons/msapplication-icon-144x144.png` }], 13 | ['meta', { name: 'msapplication-TileColor', content: '#000000' }] 14 | ], 15 | serviceWorker: true, 16 | themeConfig: { 17 | repo: 'HZFE/hzfe-questions-and-answers', 18 | repoLabel: 'GITHUB', 19 | docsDir: 'docs', 20 | editLinks: true, 21 | editLinkText: '在 GitHub 上编辑此页', 22 | nav: [ 23 | { text: '目录', link: '/toc' }, 24 | { text: 'HZFE', link: 'https://hzfe.org' } 25 | ], 26 | sidebar: 'auto', 27 | lastUpdated: '上次更新', 28 | serviceWorker: { 29 | updatePopup: { 30 | message: '新知识来袭！', 31 | buttonText: '更新' 32 | } 33 | } 34 | } 35 | } -------------------------------------------------------------------------------- /docs/.vuepress/override.styl: -------------------------------------------------------------------------------- 1 | $accentColor = #4895ec -------------------------------------------------------------------------------- /docs/.vuepress/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HZFE/hzfe-questions-and-answers/592f8a7565090d84debc6005522c42d4289fab09/docs/.vuepress/public/favicon.ico -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HZFE/hzfe-questions-and-answers/592f8a7565090d84debc6005522c42d4289fab09/docs/.vuepress/public/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HZFE/hzfe-questions-and-answers/592f8a7565090d84debc6005522c42d4289fab09/docs/.vuepress/public/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HZFE/hzfe-questions-and-answers/592f8a7565090d84debc6005522c42d4289fab09/docs/.vuepress/public/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/msapplication-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HZFE/hzfe-questions-and-answers/592f8a7565090d84debc6005522c42d4289fab09/docs/.vuepress/public/icons/msapplication-icon-144x144.png -------------------------------------------------------------------------------- /docs/.vuepress/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HZFE/hzfe-questions-and-answers/592f8a7565090d84debc6005522c42d4289fab09/docs/.vuepress/public/logo.png -------------------------------------------------------------------------------- /docs/.vuepress/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "HZFE奶库", 3 | "short_name": "HZFE奶库", 4 | "icons": [ 5 | { 6 | "src": "./icons/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "./icons/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "start_url": "./index.html", 17 | "display": "standalone", 18 | "background_color": "#fff", 19 | "theme_color": "#4895ec" 20 | } -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: /logo.png 4 | actionText: 开始学习 → 5 | actionLink: /toc 6 | features: 7 | - title: 快 8 | details: 大厂面试精华 9 | - title: 去 10 | details: 成员亲自上阵 11 | - title: 学 12 | details: 支持离线阅读 13 | footer: MIT Licensed | Copyright © 2016-present HZFE 14 | --- -------------------------------------------------------------------------------- /docs/hzfe-qa-2017/A-html/asyncdefer.svg: -------------------------------------------------------------------------------- 1 | 2 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | <script> 98 | 99 | 100 | Scripting: 101 | HTML Parser: 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | <script defer> 113 | 114 | 115 | Scripting: 116 | HTML Parser: 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | <script async> 126 | 127 | 128 | Scripting: 129 | HTML Parser: 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | <script type="module"> 141 | 142 | 143 | Scripting: 144 | HTML Parser: 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | <script type="module" async> 159 | 160 | 161 | Scripting: 162 | HTML Parser: 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | parser 180 | 181 | 182 | fetch 183 | 184 | 185 | execution 186 | 187 | 188 | runtime → 189 | 190 | -------------------------------------------------------------------------------- /docs/hzfe-qa-2017/A-html/defer-async.md: -------------------------------------------------------------------------------- 1 | ```bash 2 | # 此页面贡献者：树 3 | ``` 4 | # script 标签 defer 或 async 属性的作用及区别 5 | 6 | 目前，`script` 标签有以下几种加载模式，分别是普通模式，`defer` 模式，`async` 模式，`module` 模式和 `module+async` 模式。首先引用一下规范中对这几个模式的定义： 7 | 8 | [HTML Living Standard - scripting](https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async) 9 | 10 | > The async and defer attributes are boolean attributes that indicate how the script should be evaluated. Classic scripts may specify defer or async, but must not specify either unless the src attribute is present. Module scripts may specify the async attribute, but must not specify the defer attribute. 11 | > 12 | > There are several possible modes that can be selected using these attributes, and depending on the script's type. 13 | > 14 | > For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing completes). If the async attribute is not present but the defer attribute is present, then the classic script will be fetched in parallel and evaluated when the page has finished parsing. If neither attribute is present, then the script is fetched and evaluated immediately, blocking parsing until these are both complete. 15 | > 16 | > For module scripts, if the async attribute is present, then the module script and all its dependencies will be fetched in parallel to parsing, and the module script will be evaluated as soon as it is available (potentially before parsing completes). Otherwise, the module script and its dependencies will be fetched in parallel to parsing and evaluated when the page has finished parsing. (The defer attribute has no effect on module scripts.) 17 | > 18 | > This is all summarized in the following schematic diagram: 19 | > 20 | > ![](./asyncdefer.svg) 21 | > 22 | > With <script>, parsing is interrupted by fetching and execution. With <script defer>, fetching is parallel to parsing and execution takes place after all parsing has finished. And with <script async>, fetching is parallel to parsing but once it finishes parsing is interrupted to execute the script. The story for <script type="module"> is similar to <script defer>, but the dependencies will be fetched as well, and the story for <script type="module" async> is similar to <script async> with the extra dependency fetching. 23 | > 24 | > The exact processing details for these attributes are, for mostly historical reasons, somewhat non-trivial, involving a number of aspects of HTML. The implementation requirements are therefore by necessity scattered throughout the specification. The algorithms below (in this section) describe the core of this processing, but these algorithms reference and are referenced by the parsing rules for script start and end tags in HTML, in foreign content, and in XML, the rules for the document.write() method, the handling of scripting, etc. 25 | > 26 | > The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the blocking behavior that is the default. 27 | 28 | ## async 模式 29 | 30 | ```html 31 |