From 08565ec5f7ae31da3027bb5fe3dd3bb4c917fb7c Mon Sep 17 00:00:00 2001 From: Aki Date: Sat, 11 Sep 2021 14:56:14 +0800 Subject: [PATCH] introduction (#54) --- README.md | 18 ++- SUMMARY.md | 47 ------- {static => backlog}/pic.sketch | Bin docs/book1/algorithm-balanced-binary-trees.md | 2 +- docs/book1/browser-cross-origin.md | 2 +- docs/book1/browser-repain-reflow.md | 2 +- docs/book1/coding-promise.md | 2 +- docs/book1/css-bfc.md | 2 +- docs/book1/engineer-webpack-workflow.md | 2 +- docs/book1/frame-vue-computed-watch.md | 2 +- docs/book1/frame-vue-data-binding.md | 2 +- docs/book1/js-closures.md | 2 +- docs/book1/js-module-specs.md | 5 +- docs/book1/network-security.md | 2 +- docs/book1/topic-enter-url-display-xx.md | 2 +- docs/book2/algorithm-reverse-linked-list.md | 2 +- docs/book2/browser-garbage.md | 2 +- docs/book2/browser-render-mechanism.md | 2 +- docs/book2/coding-throttle-debounce.md | 2 +- docs/book2/css-preprocessor.md | 2 +- docs/book2/engineer-babel.md | 2 +- docs/book2/frame-react-fiber.md | 2 +- docs/book2/frame-react-hoc-hooks.md | 2 +- docs/book2/js-inherite.md | 2 +- docs/book2/js-new.md | 2 +- docs/book2/network-http-cache.md | 2 +- docs/book2/topic-multi-pics-site-optimize.md | 2 +- docs/book3/algorithm-binary-tree-k.md | 2 +- docs/book3/browser-event-loop.md | 2 +- docs/book3/browser-memory-leaks.md | 2 +- docs/book3/coding-arr-to-tree.md | 2 +- docs/book3/css-mobile-adaptive.md | 2 +- docs/book3/engineer-webpack-loader.md | 2 +- docs/book3/frame-diff.md | 2 +- docs/book3/frame-react-hooks.md | 2 +- docs/book3/js-async.md | 2 +- docs/book3/js-ts-interface-type.md | 2 +- docs/book3/network-http-1-2.md | 2 +- docs/book3/topic-white-screen-optimization.md | 2 +- docs/introduce.md | 65 ++-------- docs/preface.md | 94 ++++++++++++++ docusaurus.config.js | 10 +- sidebars.js | 4 +- src/css/custom.css | 40 +++++- src/pages/guide.mdx | 3 - static/LICENSE | 121 ++++++++++++++++++ static/readme.md | 106 +++++++++++++++ 47 files changed, 427 insertions(+), 156 deletions(-) delete mode 100644 SUMMARY.md rename {static => backlog}/pic.sketch (100%) create mode 100644 docs/preface.md create mode 100644 static/LICENSE create mode 100644 static/readme.md diff --git a/README.md b/README.md index d69072d..34e5ec7 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,7 @@ # 小册开发必看 - - 1. 为了方便多人协作编写小册内容，所以使用 Git 仓库来进行管理。 -2. 为了方便本地环境预览小册的 markdown 内容，所以使用 gitbook 工具进行文件结构管理。 +2. 为了方便本地环境预览小册的 markdown 内容，所以使用 docusaurus 工具进行文件结构管理。 ## 内容选题 @@ -28,3 +23,14 @@ npm start 共 5 套模拟题，每套 12 题。按**题**开分支，需要提交 PR，review 通过后 merge 进 main 分支。 请基于 `.template` 中的内容模板进行写作。不硬性规定格式必须完全一致，但请在参考和贴近模板的前提下进行拓展。 + +## 部署流程 + +目前的方法是手动执行以下命令，触发部署流程。部署前请在群里先同步，也确保你的开发环境中没有其他未 push/Verified 的内容。 + +```bash +# Akiq2016 换成你的 GitHub 名称 +# 执行以下这条命令后，会将构建出的build目录下的内容，强推到开源库（https://github.com/HZFE/awesome-interview） +# 对应的静态页面（https://hzfe.github.io/awesome-interview）也会更新 +export GIT_USER=Akiq2016 && npm run deploy +``` diff --git a/SUMMARY.md b/SUMMARY.md deleted file mode 100644 index 153c727..0000000 --- a/SUMMARY.md +++ /dev/null @@ -1,47 +0,0 @@ -# Summary - -- [小册介绍](docs/readme.md) -- [模拟题一]() - - - [【浏览器】浏览器跨域](docs/book1/browser-cross-origin.md) - - [【浏览器】浏览器的重排重绘](docs/book1/browser-repain-reflow.md) - - [【工程化】Webpack 工作流程](docs/book1/engineer-webpack-workflow.md) - - [【框架】Vue 的数据绑定机制](docs/book1/frame-vue-data-binding.md) - - [【框架】Vue 的 computed 和 watch 的区别](docs/book1/frame-vue-computed-watch.md) - - [【基础】闭包的作用和原理](docs/book1/js-closures.md) - - [【基础】前端模块化规范](docs/book1/js-module-specs.md) - - [【样式】BFC 的形成和作用](docs/book1/css-bfc.md) - - [【网络】前端安全](docs/book1/network-security.md) - - [【编码】实现一个 Promises/A+](docs/book1/coding-promise.md) - - [【算法】平衡二叉树](docs/book1/algorithm-balanced-binary-trees.md) - - [【综合】浏览器从输入网址到页面展现的过程](docs/book1/topic-enter-url-display-xx.md) - -- [模拟题二]() - - - [【浏览器】浏览器渲染机制](docs/book2/browser-render-mechanism.md) - - [【浏览器】垃圾回收机制](docs/book2/browser-garbage.md) - - [【工程化】Babel 的原理](docs/book2/engineer-babel.md) - - [【框架】React Fiber 的作用和原理](docs/book2/frame-react-fiber.md) - - [【框架】HOC vs Render Props vs Hooks](docs/book2/frame-react-hoc-hooks.md) - - [【基础】ES5、ES6 如何实现继承](docs/book2/js-inherite.md) - - [【基础】New 操作符的原理](docs/book2/js-new.md) - - [【样式】谈谈 CSS 预处理器](docs/book2/css-preprocessor.md) - - [【网络】HTTP 缓存机制](docs/book2/network-http-cache.md) - - [【编码】实现节流去抖函数](docs/book2/coding-throttle-debounce.md) - - [【算法】反转链表](docs/book2/algorithm-reverse-linked-list.md) - - [【综合】多图站点性能优化](docs/book2/topic-multi-pics-site-optimize.md) - -- [模拟题三]() - - - [【浏览器】浏览器事件循环](docs/book3/browser-event-loop.md) - - [【浏览器】如何定位内存泄露](docs/book3/browser-memory-leaks.md) - - [【工程化】谈下 webpack loader 的机制](docs/book3/engineer-webpack-loader.md) - - [【框架】React Hooks 实现原理](docs/book3/frame-react-hooks.md) - - [【框架】常见框架的 Diff 算法](docs/book3/frame-diff.md) - - [【基础】JavaScript 异步编程](docs/book3/js-async.md) - - [【基础】TypeScript 中的 Interface 和 Type Alias](docs/book3/js-ts-interface-type.md) - - [【样式】移动端自适应的常见手段](docs/book3/css-mobile-adaptive.md) - - [【网络】HTTP2 和 HTTP1.1 的对比](docs/book3/network-http-1-2.md) - - [【编码】将列表还原为树状结构](docs/book3/coding-arr-to-tree.md) - - [【算法】二叉搜索树的第 k 个结点](docs/book3/algorithm-binary-tree-k.md) - - [【综合】如何减少白屏的时间](docs/book3/topic-white-screen-optimization.md) diff --git a/static/pic.sketch b/backlog/pic.sketch similarity index 100% rename from static/pic.sketch rename to backlog/pic.sketch diff --git a/docs/book1/algorithm-balanced-binary-trees.md b/docs/book1/algorithm-balanced-binary-trees.md index 65346ee..4f69d86 100644 --- a/docs/book1/algorithm-balanced-binary-trees.md +++ b/docs/book1/algorithm-balanced-binary-trees.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【算法】平衡二叉树 +sidebar_label: 算法：平衡二叉树 sidebar_position: 11 --- diff --git a/docs/book1/browser-cross-origin.md b/docs/book1/browser-cross-origin.md index c0c00c8..8680948 100644 --- a/docs/book1/browser-cross-origin.md +++ b/docs/book1/browser-cross-origin.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【浏览器】浏览器跨域 +sidebar_label: 浏览器：浏览器跨域 sidebar_position: 1 --- diff --git a/docs/book1/browser-repain-reflow.md b/docs/book1/browser-repain-reflow.md index b086f50..c5797f4 100644 --- a/docs/book1/browser-repain-reflow.md +++ b/docs/book1/browser-repain-reflow.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【浏览器】浏览器的重排重绘 +sidebar_label: 浏览器：浏览器的重排重绘 sidebar_position: 2 --- diff --git a/docs/book1/coding-promise.md b/docs/book1/coding-promise.md index f9cb93e..b7a3fbe 100644 --- a/docs/book1/coding-promise.md +++ b/docs/book1/coding-promise.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【编码】实现一个 Promises/A+ +sidebar_label: 编码：实现一个 Promises/A+ sidebar_position: 10 --- diff --git a/docs/book1/css-bfc.md b/docs/book1/css-bfc.md index eaad5a1..cf1078e 100644 --- a/docs/book1/css-bfc.md +++ b/docs/book1/css-bfc.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【样式】BFC 的形成和作用 +sidebar_label: 样式：BFC 的形成和作用 sidebar_position: 8 --- diff --git a/docs/book1/engineer-webpack-workflow.md b/docs/book1/engineer-webpack-workflow.md index d30647d..803bd13 100644 --- a/docs/book1/engineer-webpack-workflow.md +++ b/docs/book1/engineer-webpack-workflow.md @@ -1,4 +1,4 @@ --- -sidebar_label: 【工程化】Webpack 工作流程 +sidebar_label: 工程化：Webpack 工作流程 sidebar_position: 3 --- diff --git a/docs/book1/frame-vue-computed-watch.md b/docs/book1/frame-vue-computed-watch.md index c7ee33d..41f5df7 100644 --- a/docs/book1/frame-vue-computed-watch.md +++ b/docs/book1/frame-vue-computed-watch.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【框架】Vue 的 computed 和 watch 的区别 +sidebar_label: 框架：Vue 的 computed 和 watch 的区别 sidebar_position: 5 --- diff --git a/docs/book1/frame-vue-data-binding.md b/docs/book1/frame-vue-data-binding.md index c1320d8..56d25c1 100644 --- a/docs/book1/frame-vue-data-binding.md +++ b/docs/book1/frame-vue-data-binding.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【框架】Vue 的数据绑定机制 +sidebar_label: 框架：Vue 的数据绑定机制 sidebar_position: 4 --- diff --git a/docs/book1/js-closures.md b/docs/book1/js-closures.md index de2ed3e..6a2bb59 100644 --- a/docs/book1/js-closures.md +++ b/docs/book1/js-closures.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【基础】闭包的作用和原理 +sidebar_label: 基础：闭包的作用和原理 sidebar_position: 6 --- diff --git a/docs/book1/js-module-specs.md b/docs/book1/js-module-specs.md index 0091824..dcf7552 100644 --- a/docs/book1/js-module-specs.md +++ b/docs/book1/js-module-specs.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【基础】前端模块化规范 +sidebar_label: 基础：前端模块化规范 sidebar_position: 7 --- @@ -115,7 +115,8 @@ define("hzfe", [], function () { }); // index.js -require(["hzfe"], function (hzfe) { // 依赖前置 +require(["hzfe"], function (hzfe) { + // 依赖前置 console.log(hzfe.getHZFEMember()); // HZFE Member: 17 }); ``` diff --git a/docs/book1/network-security.md b/docs/book1/network-security.md index 1ef5687..c9c87d9 100644 --- a/docs/book1/network-security.md +++ b/docs/book1/network-security.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【网络】前端安全 +sidebar_label: 网络：前端安全 sidebar_position: 9 --- diff --git a/docs/book1/topic-enter-url-display-xx.md b/docs/book1/topic-enter-url-display-xx.md index e1c0986..9984100 100644 --- a/docs/book1/topic-enter-url-display-xx.md +++ b/docs/book1/topic-enter-url-display-xx.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【综合】浏览器从输入网址到页面展现的过程 +sidebar_label: 综合：浏览器从输入网址到页面展现的过程 sidebar_position: 12 --- diff --git a/docs/book2/algorithm-reverse-linked-list.md b/docs/book2/algorithm-reverse-linked-list.md index a8a1525..85a3463 100644 --- a/docs/book2/algorithm-reverse-linked-list.md +++ b/docs/book2/algorithm-reverse-linked-list.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【算法】反转链表 +sidebar_label: 算法：反转链表 sidebar_position: 11 --- diff --git a/docs/book2/browser-garbage.md b/docs/book2/browser-garbage.md index cbd8a71..616a411 100644 --- a/docs/book2/browser-garbage.md +++ b/docs/book2/browser-garbage.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【浏览器】垃圾回收机制 +sidebar_label: 浏览器：垃圾回收机制 sidebar_position: 2 --- diff --git a/docs/book2/browser-render-mechanism.md b/docs/book2/browser-render-mechanism.md index 466f0c4..9e5cd6b 100644 --- a/docs/book2/browser-render-mechanism.md +++ b/docs/book2/browser-render-mechanism.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【浏览器】浏览器渲染机制 +sidebar_label: 浏览器：浏览器渲染机制 sidebar_position: 1 --- diff --git a/docs/book2/coding-throttle-debounce.md b/docs/book2/coding-throttle-debounce.md index c3834ca..eff59ab 100644 --- a/docs/book2/coding-throttle-debounce.md +++ b/docs/book2/coding-throttle-debounce.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【编码】实现节流去抖函数 +sidebar_label: 编码：实现节流去抖函数 sidebar_position: 10 --- diff --git a/docs/book2/css-preprocessor.md b/docs/book2/css-preprocessor.md index 58e96a2..b3f8411 100644 --- a/docs/book2/css-preprocessor.md +++ b/docs/book2/css-preprocessor.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【样式】谈谈 CSS 预处理器 +sidebar_label: 样式：谈谈 CSS 预处理器 sidebar_position: 8 --- diff --git a/docs/book2/engineer-babel.md b/docs/book2/engineer-babel.md index f8d8130..23e79d8 100644 --- a/docs/book2/engineer-babel.md +++ b/docs/book2/engineer-babel.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【工程化】Babel 的原理 +sidebar_label: 工程化：Babel 的原理 sidebar_position: 3 --- diff --git a/docs/book2/frame-react-fiber.md b/docs/book2/frame-react-fiber.md index 13e0cf2..92d7191 100644 --- a/docs/book2/frame-react-fiber.md +++ b/docs/book2/frame-react-fiber.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【框架】React Fiber 的作用和原理 +sidebar_label: 框架：React Fiber 的作用和原理 sidebar_position: 4 --- diff --git a/docs/book2/frame-react-hoc-hooks.md b/docs/book2/frame-react-hoc-hooks.md index 478c4f8..6a5467e 100644 --- a/docs/book2/frame-react-hoc-hooks.md +++ b/docs/book2/frame-react-hoc-hooks.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【框架】HOC vs Render Props vs Hooks +sidebar_label: 框架：HOC vs Render Props vs Hooks sidebar_position: 5 --- diff --git a/docs/book2/js-inherite.md b/docs/book2/js-inherite.md index 691f25c..2bbd040 100644 --- a/docs/book2/js-inherite.md +++ b/docs/book2/js-inherite.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【基础】ES5、ES6 如何实现继承 +sidebar_label: 基础：ES5、ES6 如何实现继承 sidebar_position: 6 --- diff --git a/docs/book2/js-new.md b/docs/book2/js-new.md index 057cbce..aaf2e75 100644 --- a/docs/book2/js-new.md +++ b/docs/book2/js-new.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【基础】New 操作符的原理 +sidebar_label: 基础：New 操作符的原理 sidebar_position: 7 --- diff --git a/docs/book2/network-http-cache.md b/docs/book2/network-http-cache.md index 478fdda..3448215 100644 --- a/docs/book2/network-http-cache.md +++ b/docs/book2/network-http-cache.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【网络】HTTP 缓存机制 +sidebar_label: 网络：HTTP 缓存机制 sidebar_position: 9 --- diff --git a/docs/book2/topic-multi-pics-site-optimize.md b/docs/book2/topic-multi-pics-site-optimize.md index 7303f79..dec4ca8 100644 --- a/docs/book2/topic-multi-pics-site-optimize.md +++ b/docs/book2/topic-multi-pics-site-optimize.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【综合】多图站点性能优化 +sidebar_label: 综合：多图站点性能优化 sidebar_position: 12 --- diff --git a/docs/book3/algorithm-binary-tree-k.md b/docs/book3/algorithm-binary-tree-k.md index eff0683..6ba997c 100644 --- a/docs/book3/algorithm-binary-tree-k.md +++ b/docs/book3/algorithm-binary-tree-k.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【算法】二叉搜索树的第 k 个结点 +sidebar_label: 算法：二叉搜索树的第 k 个结点 sidebar_position: 11 --- diff --git a/docs/book3/browser-event-loop.md b/docs/book3/browser-event-loop.md index 61841b4..5deb9fd 100644 --- a/docs/book3/browser-event-loop.md +++ b/docs/book3/browser-event-loop.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【浏览器】浏览器事件循环 +sidebar_label: 浏览器：浏览器事件循环 sidebar_position: 1 --- diff --git a/docs/book3/browser-memory-leaks.md b/docs/book3/browser-memory-leaks.md index 4debe62..6f56889 100644 --- a/docs/book3/browser-memory-leaks.md +++ b/docs/book3/browser-memory-leaks.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【浏览器】如何定位内存泄露 +sidebar_label: 浏览器：如何定位内存泄露 sidebar_position: 2 --- diff --git a/docs/book3/coding-arr-to-tree.md b/docs/book3/coding-arr-to-tree.md index 4c121c6..cd1084e 100644 --- a/docs/book3/coding-arr-to-tree.md +++ b/docs/book3/coding-arr-to-tree.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【编码】将列表还原为树状结构 +sidebar_label: 编码：将列表还原为树状结构 sidebar_position: 10 --- diff --git a/docs/book3/css-mobile-adaptive.md b/docs/book3/css-mobile-adaptive.md index b3b0e14..be2e703 100644 --- a/docs/book3/css-mobile-adaptive.md +++ b/docs/book3/css-mobile-adaptive.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【样式】移动端自适应的常见手段 +sidebar_label: 样式：移动端自适应的常见手段 sidebar_position: 8 --- diff --git a/docs/book3/engineer-webpack-loader.md b/docs/book3/engineer-webpack-loader.md index 82d4641..a8ceedf 100644 --- a/docs/book3/engineer-webpack-loader.md +++ b/docs/book3/engineer-webpack-loader.md @@ -1,4 +1,4 @@ --- -sidebar_label: 【工程化】谈下 webpack loader 的机制 +sidebar_label: 工程化：谈下 webpack loader 的机制 sidebar_position: 3 --- diff --git a/docs/book3/frame-diff.md b/docs/book3/frame-diff.md index 14d76f4..f731791 100644 --- a/docs/book3/frame-diff.md +++ b/docs/book3/frame-diff.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【框架】常见框架的 Diff 算法 +sidebar_label: 框架：常见框架的 Diff 算法 sidebar_position: 5 --- diff --git a/docs/book3/frame-react-hooks.md b/docs/book3/frame-react-hooks.md index 9c07bee..5c68b06 100644 --- a/docs/book3/frame-react-hooks.md +++ b/docs/book3/frame-react-hooks.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【框架】React Hooks 实现原理 +sidebar_label: 框架：React Hooks 实现原理 sidebar_position: 4 --- diff --git a/docs/book3/js-async.md b/docs/book3/js-async.md index bb5ab21..8e2d296 100644 --- a/docs/book3/js-async.md +++ b/docs/book3/js-async.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【基础】JavaScript 异步编程 +sidebar_label: 基础：JavaScript 异步编程 sidebar_position: 6 --- diff --git a/docs/book3/js-ts-interface-type.md b/docs/book3/js-ts-interface-type.md index 61de5f0..0b375e8 100644 --- a/docs/book3/js-ts-interface-type.md +++ b/docs/book3/js-ts-interface-type.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【基础】TypeScript 中的 Interface 和 Type Alias +sidebar_label: 基础：TypeScript 中的 Interface 和 Type Alias sidebar_position: 7 --- diff --git a/docs/book3/network-http-1-2.md b/docs/book3/network-http-1-2.md index 25bf9ee..7fb815c 100644 --- a/docs/book3/network-http-1-2.md +++ b/docs/book3/network-http-1-2.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【网络】HTTP2 和 HTTP1.1 的对比 +sidebar_label: 网络：HTTP2 和 HTTP1.1 的对比 sidebar_position: 9 --- diff --git a/docs/book3/topic-white-screen-optimization.md b/docs/book3/topic-white-screen-optimization.md index 2df35db..734f6d1 100644 --- a/docs/book3/topic-white-screen-optimization.md +++ b/docs/book3/topic-white-screen-optimization.md @@ -1,5 +1,5 @@ --- -sidebar_label: 【综合】如何减少白屏的时间 +sidebar_label: 综合：如何减少白屏的时间 sidebar_position: 12 --- diff --git a/docs/introduce.md b/docs/introduce.md index f62c301..2338d4f 100644 --- a/docs/introduce.md +++ b/docs/introduce.md @@ -1,64 +1,21 @@ --- -sidebar_label: 小册介绍 -sidebar_position: 0.5 -slug: / +sidebar_label: 关于我们 +sidebar_position: 0.4 +slug: /about --- -# 小册介绍 +# 关于我们 -## 作者介绍 +Hi，我们是 HZFE，一群来自于五湖四海的 90 后技术人。 -HZFE 团队成立于 2016 年，由 17 位 90 后程序员组成。 +一群固定的人总聚在一起，不知不觉就会成为一个所谓的团队。而我们的团队代号“HZFE”，总让不明其意的人拼错或不知如何发音。曾经在我们三周年活动蛋糕上，店家就用心写下了“H2FF 三周年快乐”的祝福。 -HZFE 读作“杭州 FE”，本意为杭州前端（Hangzhou Front-End）。实际组成来自于五湖四海，爱好一起旅游和理财，是一群除了前端其他都想学的天马行空摄影师组合。 +我们最初相识于一个拥有 17 位成员的群聊，群聊名称正是 HZFE。其本意是杭州前端（Hangzhou Front-End），所以也读作“杭州 FE”。但需要额外解释的是，我们大多不在杭州，也不全是前端。所以您且当这是一个没道理的代号，而我们的相聚则是一场有趣的缘分。 -HZFE 成员 75% 任职于互联网中大厂（其中半数以上在 BAT 工作），还有 20% 看似没有黄金履历实则 WLB（Work-Life-Balance）的选手。 +和每个普通人一样，我们大多过着三点一线的生活。喜欢旅游也爱摄影，也像千千万个理财小白一般，在正向或是反向理财中来回波动。每天都在产出新的想法，一起头脑风暴，结局总是以没有设计师为借口不了了之，三分钟热度成了我们心照不宣的默契。每天都在做梦，讲些不切实际的幻想，平凡且平庸。 -开源过的技术组件，包含但不限于： +如果说，唯一值得小小炫耀一番的，便是我们这群人对于热爱编程这件事达成了共识。不论是做开源、做自己的产品亦或各自在工作岗位上，都有所成绩，有所收获。又也许正是因为我们比较幸运，能在刚踏入社会时相识相知相爱，才有了后来我们彼此影响，一同成长为此刻至少技术还不赖的人。 -- [vue-cropper](https://github.com/xyxiao001/vue-cropper) -- [vue-slider-component](https://github.com/NightCatSama/vue-slider-component) +我们在行业中打滚了近五年的时光，团队中的大部分人都任职于互联网大厂，因此也自许是比较了解中大型公司的面试规则和趋势的人。因缘巧合下，在某天如同往日的头脑风暴中，我们一拍脑袋，说要一起写本书，从而开启了这场坎坷的写作之旅。 -## 面试痛点 - -![image](https://user-images.githubusercontent.com/17002181/127108755-f58b475f-9f3a-4003-9bfa-a12419225d39.png) - -不少前端开发工程师准备换工作时，复习计划做得不合理，导致在有限时间内，无法对高频知识点进行吸收和总结，只能不断地在面试环节中试错，机会成本和时间成本极高。面试复习的常见问题有： - -- **面试表达能力弱：**“那些东西我会用，但面试的时候讲不好。” -- **复习摸不清重点：**“大厂面试感觉很难，要复习的东西有很多，也不知道会不会问到。” -- **学习效率低：**“各种面经我都有看，自己大致归类了题目出现频率，但答案还要再查一下。” -- **学习兴趣低：**“有的问题我有自己查资料，讲得很详细，也很难，啃一篇很久。” - -如果不能掌握自己的学习方法和节奏，仅通过从零到一这种机械模式去复习知识点，那么时间利用率和有效知识吸收率都会较低。 - -我们还可以从以下两个角度去分析：在有限时间里，自己看知识点总结或基于收集的面经进行答案查找所带来的效率低下的原因： - -1. **提纲**：市面上大部分的知识点总结的提纲排列顺序为由易到难。而主流面试一般有明确面试范围和考察频率。 -2. **内容**：市面上大部分的知识点内容类似于教程，事无巨细地去讲解，且内容良莠不齐。而面试考察候选人对知识点的理解和运用，要求候选人在有限时间内正确表达核心内容。 - -## 小册介绍 - -为降低前端工程师面试的准备和试错成本，我们撰写了这本**专为面试场景服务**的小册，意在成为面试者的技术高频题指南。 - -小册主要整理了**高频**面试题和对应**篇幅可控**的答案，从面试者角度出发，由浅入深的梳理相关知识点。使面试者快速获得面试常见技术问题的参考性回答，并对相关知识点深入了解： - -- **整合不同类型高频题** - - 技术面试时长一般控制在 30-60 分钟，围绕每道问题的时间一般控制在 3-5 分钟，会涉及不同知识面的题型。 - - 我们整理了 5 套高频面试题，共计 60 道不同知识点题目。每套题包含固定类型题目（如基础题、工程化题、网络题、编码题、综合题等）。由 HZFE 团队成员结合具体面试场景撰写总结。 - -- **提炼答题关键点** - - 面试回答和日常知识点学习有一定差别：日常知识点的学习需了解广度且深入细节，要求查阅各种教程、文档、规范。面试回答则需要做总结并且有侧重点，将所学知识浓缩为几句话。 - - 我们整理的每道题目一般以「相关问题」「回答关键点」「知识点深入」为内容基本结构进行梳理。从「回答关键点」出发，对问题进行一个概括性回答，并且做重要知识点的深入。总体上不以教程向的方式做教学，而以参考答案向的方式做总结。 - -小册是 HZFE 团队中的应试者对于前端高频面试题的一份知识总结，本质是各种高频题的参考答案。读者通过对小册的学习，能在面试中多一份从容和自信。同时也向前端从业人员传递一种学习方法和思路。 - -## 适宜人群 - -- 有意冲刺互联网大厂的前端开发者，可参考本书题目和答案提纲，自主深入学习，查漏补缺。 -- 需短时间内找到工作的前端开发者，可借助本书快速了解面试高频的技术问题和相关解答。 -- 前端面试官可参考本书的题型和题目，按岗位需求对候选人进行有梯度的考察。 +正如其名：剑指前端 Offer，希望在这本书的帮助下，我们和读者都能有所成长。 diff --git a/docs/preface.md b/docs/preface.md new file mode 100644 index 0000000..8334452 --- /dev/null +++ b/docs/preface.md @@ -0,0 +1,94 @@ +--- +sidebar_label: 前言 +sidebar_position: 0.5 +slug: / +--- + +# 前言 + +## 写作背景 + +在我们团队中，每年都会有部分人需要更换新的工作环境，因此我们的聊天话题总是阶段性的变成面试题探讨。随着这几年我们对前端面试方面的经验积累和总结，我们一致认为前端面试的复习是有关键路径的。基于我们内部需要，也曾迭代过几个面试题库版本。 + +从面试角度分析，面试最典型的特点是时间有限。这意味着面试官和候选人需要在有限时间内，做出最大程度的有效沟通。 + +面试官如何有效且全面的了解候选人，是另外一门学问。而候选人的挑战在于面对问题时，如何在一两分钟内作出有效回答。有效回答是指：用两三句话对问题作出概括性回答，并引导面试官对回答中提到的关键词进一步深入提问。 + +不少同行的心态是：如果面试问得难，那便是面试造航母，工作拧螺丝；如果面试问得简单，那便是东西我会用，但我不会说，没发挥好。由于各种原因，失去了更多的选择。本书希望能够帮助大家尽可能解决这方面的问题，让前端开发者在面试复习阶段事半功倍，以更好的状态进行面试。 + +基于以上写作背景，我们可以达成两个共识： + +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 道不同的高频面试题。每套题包含固定类型题目（如基础题、工程化题、网络题、编码题、综合题等）。 + + 通过组合不同题型，模拟一场面试中的题型分布情况，我们每套题都可以更加接近真实技术面试的体验。因此可以帮助候选人积累经验、提高面试成功率。 + +- **提炼面试回答要点** + + 面试回答和日常知识点学习有一定差别：日常知识点的学习需了解广度且深入细节，要求查阅各种文档、规范。面试回答则需要将所学知识浓缩为几句话。 + + 本书通过由浅入深的组织方式，以「相关问题」「回答关键点」「知识点深入」「参考资料」为内容基础大纲进行梳理。「回答关键点」作为高度概括的总结性语言，可用于第一时间回答面试官的问题；「知识点深入」以递进方式深入解析，可作为引导面试官进一步提问的方向。 + + 读者还可以模仿本书内容的编排方式，经过练习后，用更精炼的语言对其他问题作出有效回答。 + +总体而言，本书尽可能从候选人角度出发，使候选人快速获得面试常见技术问题的参考性回答，也提供给候选人一个相对精简的知识点深入总结。 + +读者通过对书中内容的学习，即便不能“一书在手，天下我有”，也能在面试中多一份从容和自信。同时本书也向前端从业人员传递一种学习方法和思路。毕竟每个人的学习方法不同，不可以机械照搬。对于如何在有限时间内，将复习效益最大化。读者可以尝试自行分析场景特点和自身痛点，找出属于自己的关键路径并制定复习计划。 + +## 适合人群 + +- 有意冲刺互联网大厂的前端开发者，可参考本书题目和答案提纲，自主深入学习，查漏补缺。 +- 短时间内参加面试的前端开发者，可借助本书快速了解面试高频的技术问题和相关解答。 +- 前端面试官可参考本书的题型和题目，按岗位需求对候选人进行有梯度的考察。 + +一千个人眼中有一千个哈姆雷特。而一个人眼中，在不同阶段也可以看到不一样的风景。 + +## 互动与勘误 + +本书目前在 [GitHub](https://github.com/hzfe/awesome-interview) 中开源了第一版内容的部分题目，旨在接受广大开发者的检验和收集读者反馈后，能将本书打磨得更好。 + +阅读时您可能会发现内容上的错误，可以直接在相关章节末尾的评论区进行留言，留言内容会被自动同步到仓库 Issues 中。您也可以在仓库 [Issues](https://github.com/HZFE/awesome-interview/issues) 中直接留下宝贵意见。欢迎读者对内容仓库进行 [订阅/Watch](https://github.com/hzfe/awesome-interview)，我们会持续添加和订正内容。 diff --git a/docusaurus.config.js b/docusaurus.config.js index 2c7ea42..8a28857 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -3,10 +3,10 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula"); /** @type {import('@docusaurus/types').DocusaurusConfig} */ module.exports = { - title: "HZFE interview book", + title: "HZFE - 剑指前端 Offer", tagline: "剑指前端 Offer", - url: "http://localhost:3000", - baseUrl: "/", + url: "https://hzfe.github.io", + baseUrl: "/awesome-interview/", onBrokenLinks: "throw", onBrokenMarkdownLinks: "warn", favicon: "img/favicon.ico", @@ -20,14 +20,14 @@ module.exports = { disableSwitch: true, }, navbar: { - title: "HZFE interview book", + title: "剑指前端 Offer", logo: { alt: "HZFE", src: "img/badge.svg", }, items: [ { - href: "https://github.com/Akiq2016/jjbook", + href: "https://github.com/hzfe/awesome-interview", label: "GitHub", position: "right", }, diff --git a/sidebars.js b/sidebars.js index 9efe9f4..452cd03 100644 --- a/sidebars.js +++ b/sidebars.js @@ -11,13 +11,13 @@ module.exports = { // docs: { - // 小册介绍: ["readme"], + // 前言: ["readme"], // 模拟题一: ["book1/browser-cross-origin", "book1/browser-repain-reflow"], // }, // By default, Docusaurus generates a sidebar from the docs folder structure tutorialSidebar: [ - { type: "link", label: "小册开发必看", href: "/guide" }, + // { type: "link", label: "小册开发必看", href: "/guide" }, { type: "autogenerated", dirName: "." }, ], diff --git a/src/css/custom.css b/src/css/custom.css index 60168c0..e647822 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -33,6 +33,7 @@ html[data-theme="dark"] .docusaurus-highlight-code-line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + font-weight: 400; } .menu__list-item--collapsed .menu__link--sublist:after { @@ -40,10 +41,10 @@ html[data-theme="dark"] .docusaurus-highlight-code-line { } .menu__link--sublist:after { - margin-left: 0.5em; + margin-left: 0.2em; width: 0.75em; height: 0.75em; - vertical-align: middle; + /* vertical-align: middle; */ background-image: url(/static/img/arrow.svg); transform: rotateZ(90deg); } @@ -55,3 +56,38 @@ main { .utterances { max-width: 100%; } + +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 0; + margin-bottom: 0; +} + +h1 { + font-size: 32px; + font-weight: 600; +} +h2 { + font-size: 24px; + font-weight: 600; +} +h3 { + font-size: 20px; + font-weight: 600; +} +h4 { + font-size: 16px; + font-weight: 600; +} +h5 { + font-size: 14px; + font-weight: 600; +} +h6 { + font-size: 12px; + font-weight: 600; +} diff --git a/src/pages/guide.mdx b/src/pages/guide.mdx index 9cada21..3a36d36 100644 --- a/src/pages/guide.mdx +++ b/src/pages/guide.mdx @@ -1,6 +1,3 @@ import BackLink from "../components/BackLink"; -import README from "../../README.md"; - - diff --git a/static/LICENSE b/static/LICENSE new file mode 100644 index 0000000..0e259d4 --- /dev/null +++ b/static/LICENSE @@ -0,0 +1,121 @@ +Creative Commons Legal Code + +CC0 1.0 Universal + + CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE + LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN + ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS + INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES + REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS + PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM + THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED + HEREUNDER. + +Statement of Purpose + +The laws of most jurisdictions throughout the world automatically confer +exclusive Copyright and Related Rights (defined below) upon the creator +and subsequent owner(s) (each and all, an "owner") of an original work of +authorship and/or a database (each, a "Work"). + +Certain owners wish to permanently relinquish those rights to a Work for +the purpose of contributing to a commons of creative, cultural and +scientific works ("Commons") that the public can reliably and without fear +of later claims of infringement build upon, modify, incorporate in other +works, reuse and redistribute as freely as possible in any form whatsoever +and for any purposes, including without limitation commercial purposes. +These owners may contribute to the Commons to promote the ideal of a free +culture and the further production of creative, cultural and scientific +works, or to gain reputation or greater distribution for their Work in +part through the use and efforts of others. + +For these and/or other purposes and motivations, and without any +expectation of additional consideration or compensation, the person +associating CC0 with a Work (the "Affirmer"), to the extent that he or she +is an owner of Copyright and Related Rights in the Work, voluntarily +elects to apply CC0 to the Work and publicly distribute the Work under its +terms, with knowledge of his or her Copyright and Related Rights in the +Work and the meaning and intended legal effect of CC0 on those rights. + +1. Copyright and Related Rights. A Work made available under CC0 may be +protected by copyright and related or neighboring rights ("Copyright and +Related Rights"). Copyright and Related Rights include, but are not +limited to, the following: + + i. the right to reproduce, adapt, distribute, perform, display, + communicate, and translate a Work; + ii. moral rights retained by the original author(s) and/or performer(s); +iii. publicity and privacy rights pertaining to a person's image or + likeness depicted in a Work; + iv. rights protecting against unfair competition in regards to a Work, + subject to the limitations in paragraph 4(a), below; + v. rights protecting the extraction, dissemination, use and reuse of data + in a Work; + vi. database rights (such as those arising under Directive 96/9/EC of the + European Parliament and of the Council of 11 March 1996 on the legal + protection of databases, and under any national implementation + thereof, including any amended or successor version of such + directive); and +vii. other similar, equivalent or corresponding rights throughout the + world based on applicable law or treaty, and any national + implementations thereof. + +2. Waiver. To the greatest extent permitted by, but not in contravention +of, applicable law, Affirmer hereby overtly, fully, permanently, +irrevocably and unconditionally waives, abandons, and surrenders all of +Affirmer's Copyright and Related Rights and associated claims and causes +of action, whether now known or unknown (including existing as well as +future claims and causes of action), in the Work (i) in all territories +worldwide, (ii) for the maximum duration provided by applicable law or +treaty (including future time extensions), (iii) in any current or future +medium and for any number of copies, and (iv) for any purpose whatsoever, +including without limitation commercial, advertising or promotional +purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each +member of the public at large and to the detriment of Affirmer's heirs and +successors, fully intending that such Waiver shall not be subject to +revocation, rescission, cancellation, termination, or any other legal or +equitable action to disrupt the quiet enjoyment of the Work by the public +as contemplated by Affirmer's express Statement of Purpose. + +3. Public License Fallback. Should any part of the Waiver for any reason +be judged legally invalid or ineffective under applicable law, then the +Waiver shall be preserved to the maximum extent permitted taking into +account Affirmer's express Statement of Purpose. In addition, to the +extent the Waiver is so judged Affirmer hereby grants to each affected +person a royalty-free, non transferable, non sublicensable, non exclusive, +irrevocable and unconditional license to exercise Affirmer's Copyright and +Related Rights in the Work (i) in all territories worldwide, (ii) for the +maximum duration provided by applicable law or treaty (including future +time extensions), (iii) in any current or future medium and for any number +of copies, and (iv) for any purpose whatsoever, including without +limitation commercial, advertising or promotional purposes (the +"License"). The License shall be deemed effective as of the date CC0 was +applied by Affirmer to the Work. Should any part of the License for any +reason be judged legally invalid or ineffective under applicable law, such +partial invalidity or ineffectiveness shall not invalidate the remainder +of the License, and in such case Affirmer hereby affirms that he or she +will not (i) exercise any of his or her remaining Copyright and Related +Rights in the Work or (ii) assert any associated claims and causes of +action with respect to the Work, in either case contrary to Affirmer's +express Statement of Purpose. + +4. Limitations and Disclaimers. + + a. No trademark or patent rights held by Affirmer are waived, abandoned, + surrendered, licensed or otherwise affected by this document. + b. Affirmer offers the Work as-is and makes no representations or + warranties of any kind concerning the Work, express, implied, + statutory or otherwise, including without limitation warranties of + title, merchantability, fitness for a particular purpose, non + infringement, or the absence of latent or other defects, accuracy, or + the present or absence of errors, whether or not discoverable, all to + the greatest extent permissible under applicable law. + c. Affirmer disclaims responsibility for clearing rights of other persons + that may apply to the Work or any use thereof, including without + limitation any person's Copyright and Related Rights in the Work. + Further, Affirmer disclaims responsibility for obtaining any necessary + consents, permissions or other rights required for any use of the + Work. + d. Affirmer understands and acknowledges that Creative Commons is not a + party to this document and has no duty or obligation with respect to + this CC0 or use of the Work. diff --git a/static/readme.md b/static/readme.md new file mode 100644 index 0000000..6b8ba48 --- /dev/null +++ b/static/readme.md @@ -0,0 +1,106 @@ +# [剑指前端 Offer](hzfe.github.io/awesome-interview/) + +## 互动与勘误 + +本书目前在 [GitHub](https://github.com/hzfe/awesome-interview) 中开源了第一版内容的部分题目，旨在接受广大开发者的检验和收集读者反馈后，能将本书打磨得更好。 + +阅读时您可能会发现内容上的错误，可以直接在相关章节末尾的评论区进行留言，留言内容会被自动同步到仓库 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 道不同的高频面试题。每套题包含固定类型题目（如基础题、工程化题、网络题、编码题、综合题等）。 + + 通过组合不同题型，模拟一场面试中的题型分布情况，我们每套题都可以更加接近真实技术面试的体验。因此可以帮助候选人积累经验、提高面试成功率。 + +- **提炼面试回答要点** + + 面试回答和日常知识点学习有一定差别：日常知识点的学习需了解广度且深入细节，要求查阅各种文档、规范。面试回答则需要将所学知识浓缩为几句话。 + + 本书通过由浅入深的组织方式，以「相关问题」「回答关键点」「知识点深入」「参考资料」为内容基础大纲进行梳理。「回答关键点」作为高度概括的总结性语言，可用于第一时间回答面试官的问题；「知识点深入」以递进方式深入解析，可作为引导面试官进一步提问的方向。 + + 读者还可以模仿本书内容的编排方式，经过练习后，用更精炼的语言对其他问题作出有效回答。 + +总体而言，本书尽可能从候选人角度出发，使候选人快速获得面试常见技术问题的参考性回答，也提供给候选人一个相对精简的知识点深入总结。 + +读者通过对书中内容的学习，即便不能“一书在手，天下我有”，也能在面试中多一份从容和自信。同时本书也向前端从业人员传递一种学习方法和思路。毕竟每个人的学习方法不同，不可以机械照搬。对于如何在有限时间内，将复习效益最大化。读者可以尝试自行分析场景特点和自身痛点，找出属于自己的关键路径并制定复习计划。 + +### 适合人群 + +- 有意冲刺互联网大厂的前端开发者，可参考本书题目和答案提纲，自主深入学习，查漏补缺。 +- 短时间内参加面试的前端开发者，可借助本书快速了解面试高频的技术问题和相关解答。 +- 前端面试官可参考本书的题型和题目，按岗位需求对候选人进行有梯度的考察。 + +一千个人眼中有一千个哈姆雷特。而一个人眼中，在不同阶段也可以看到不一样的风景。