Repository: linbudu599/FE-Basics Branch: master Commit: 26f05418eace Files: 18 Total size: 19.0 KB Directory structure: gitextract_b6yp3m6v/ ├── Advanced/ │ ├── CS-Basic.md │ ├── Mini-Program.md │ ├── React.md │ ├── Reality.md │ ├── Tool.md │ ├── Ts.md │ ├── Webapck.md │ └── Wonder.md ├── Basic/ │ ├── Browser-WebSafety.md │ ├── Database.md │ ├── ES6.md │ ├── HTML-CSS.md │ ├── HandWritting.md │ ├── JS-Basic.md │ ├── Network.md │ └── Node.md ├── LICENSE └── README.md ================================================ FILE CONTENTS ================================================ ================================================ FILE: Advanced/CS-Basic.md ================================================ # 计算机基础 - 并行 并发 - IPC - 管道 - FIFO - 消息队列 - 共享存储 - 信号量Semaphore - 套接字Socket - 信号Signal - 操作系统调度算法 - 进程 线程 协程 纤程 - 计算机网络,见网络章节 ================================================ FILE: Advanced/Mini-Program.md ================================================ # 小程序 - 基础架构 - properties / data - behavior(封装性) - DOM BOM 是如何禁止访问的? - 生命周期 - 页面级 - 应用级 - 性能优化 - vs PWA / Hybrid / RN / Flutter ... - setState为何表现为数据更新同步UI更新异步? - 小程序中的鉴权 ================================================ FILE: Advanced/React.md ================================================ # React - 性能优化 - pureComponent shallowEuqal - React.memo - 分析问题: React Devtools 的`Highlight Update`与`Profiler`, Chrome 的`Performance`工具 - 阻止无意义的重渲染, 通常通过缓存/更新控制(`useMemo`/`shouldComponentUpdate`) - 懒加载(`React-Loadable` & `Suspense` + `React.lazy()`) - 细粒度更新 - 谨慎使用 Context 或基于 Context 的数据流方案 - 不可变数据 - ImmutableJS - ImmerJS(安利下IceStore) - 减少不必要的重新计算, 如`useCallback`与`Reselect` - 虚拟列表 - 生命周期, 按照顺序, 废弃原因参见 [React16.4 生命周期初探](https://linbudu.top/posts/2020/06/29/react-life-cycle.html) - 挂载 - **constructor** - **static getDerivedStateFromProps** - **componentWillMount** **已废弃** - **render** - **componentDidMount** 为什么数据获取要在这里? 而不是 WillMount? - 更新 - **componentWillReceiveProps** **已废弃** - **static getDerivedStateFromProps** - **shouldComponentUpdate** - **componentWillUpdate** **已废弃** - **render** - **static getSnapshotBeforeUpdate** - **componentDidUpdate** - 错误 - **static getDerivedStateFromError**, 在页面崩溃时, 与`componentDidCatch`如何搭配降级? - 为什么要废弃掉这几个生命周期? - 为什么新增的生命周期是静态方法? - Hooks - useState - useEffect - deps array - 与useLayoutEffect差异 - forwardRef & useRef & useImperativeHandle - useCallback - useMemo - React Hooks倒计时(闭包陷阱) - RenderWithHooks &`Render Fewer Hooks Then Expected...`错误 - Fiber - reconciliation - commit - Concurrent Mode - Suspense - Suspense 编排 资源竞态控制 见[聊聊 Concurrent 模式中的 Suspense](https://linbudu.top/posts/2020/07/06/concurrent-suspense.html) - useTransition - Redux 与 Mobx 起码熟练一个 - 源码 看看吧 真不多不难 - Redux中间件原理 - 其他数据流方案, 如**Dva/Icestore/Hox/Reconciler...** - setState - 批处理 - 延迟更新 - 同步? 异步? - React 的合成事件机制(为什么 Class 组件要 bind 方法的原因) - V-Dom 与 Diff 算法 - 与 Vue 的比较 - 约束 / 迎合开发者 - 思想 - React-Router(Reach-Router)等路由方案 #### Vue > 实际不止这些 但我不是主要写 Vue 的 - MVVM 原理 - Observer - Compile - Watcher - Vue 3.0 为什么使用 Proxy? 相比 defineProperty 有什么优势? ================================================ FILE: Advanced/Reality.md ================================================ # 业务场景 - 页面优化 - 重绘重排 - 首屏优化 - 缓存 - 构建体积 - SSR - OPR（离线预渲染） - 白屏问题排查 - IP 地址 - 日志 - 路由 - 请求返回 - 骨架屏 - 超长列表 - requesAnimationFrame - 虚拟列表 - 埋点 - 部分埋点 - 可视化埋点 - 全埋点 - 设计埋点 SDK - 扫码登陆 - 长连接 - 文件上传 -
& multipart/form-data & POST - [File MIME](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types) - koa-body - 进度监听 xhr.upload.onprogress - 取消 xhr.abort() - 预览 window.URL.createObjectURL - 拖拽上传 dragover drop dragleave drop 事件中 e.dataTransfer.files - 剪贴板上传 contenteditable paste 事件 event.clipboardData(window.clipboardData) getAsFile - 大文件上传 - Blob.prototype.slice() 文件块标志（时间戳/索引） 合并告知请求 服务端合并文件 - TCP 并发控制 - 服务端 stream + pipe - 断点续传 - spark-md5 contenthash webworker，本地保存已上传切片信息，重新上传时比对 hash 值 ================================================ FILE: Advanced/Tool.md ================================================ # Tool ### Git - 暂存区 等基本概念&命令 - git fetch - **git rebase** - git merge - git reset - git revert - git branch 相关 - Git Flow 工作流 - 场景 - 回退 - 分支 - 清除已提交到暂存区/本地仓库的记录 ### Babel - 工作阶段 - 解析 babylon - 转化 babel-traverse - 生成 babel-generator - babel-plugin - babel-preset - babel-polyfill - @babel/plugin-transform-runtime\ - AST相关 ================================================ FILE: Advanced/Ts.md ================================================ # TypeScript - TS相比于JS多了...? - 类型系统 - 预实现的ES提案语法, 如可选链与空值合并 - type 与 interface 的异同 - Class 增强 -> 关键字 - 类型编程 > 推荐阅读: [TypeScript 类型编程初探](https://linbudu.top/posts/2020/05/30/ts%E7%B1%BB%E5%9E%8B%E7%BC%96%E7%A8%8B%E5%88%9D%E6%8E%A2.html) > > 深入点: [TypeScript的另一面: 类型编程](https://linbudu.top/posts/2020/10/19/typescript%E7%B1%BB%E5%9E%8B%E7%BC%96%E7%A8%8B.html) - 泛型 - 条件类型 - 分布式有条件类型 - 映射类型 - 索引类型 - 类型守卫 & is 关键字 - infer - 工具类型 - Partical PowerPartical(深层 Partical) - Exclude - Pick - 扩展: 自定义工具类型, 见上面的博客链接 - 装饰器 / IoC 体系 - 声明文件 ================================================ FILE: Advanced/Webapck.md ================================================ # Webpack & Parcel > Parcel 是可选的 - compiler 与 compilation, Webpack 构建流程 - HMR(`Hot Module Reloading`)原理 - Webpack 构建流程 - 校验配置文件, 生成本次构建配置及初始化Compiler对象 & Compilation实例 - 解析文件,生成依赖关系图, 依次执行loader - 递归解析处理依赖, 生成chunk, 拼接文件 - 过程中plugin会在tapable的钩子上被调用 - Plugin生命周期 - Parcel 构建流程 - @parcel/transformer-xxx - parcel-plugin-xxx - 无配置(内置配置) - 内置依赖, 自动安装缺失依赖 - HMR - Loader - 以 Babel-Loader 为例, 讲讲 loader 都做了什么 - 常用的 loader - Plugin - plugin 都做了什么? - Webpack 事件流模型 [Tapable](https://github.com/webpack/tapable) - 性能调优 - 确定问题 - bundle-analyzer-plugin - speed-measure-plugin - 打包速率 - 分离Dev与Prod配置! - 减少查找时间 - resolve - extension - resolve - alias - 在 loader 中针对性的 exclude 掉无关文件夹, 比如在 url-loader/file-loader 处理图片的配置你就可以把 assets 以外的目录去掉 - DLL(`Dynamic Link Library`, 动态链接库, 已经不推荐使用) - 开启多进程打包(thread-loader) - 缓存(babel-loader与terser都有, webpack5默认的是hard-source-plugin) - 合理配置source-map - 打包大小 - 擦除JS&CSS死代码 - JS/CSS 摇树优化(仅在ESM的静态加载下生效) 按需加载 - 压缩 & Uglify(`Terser`) - 代码分割(`Code Spilting`), 讲讲`SplitChunksPlugin`, 讲讲 Dynamic Import - chunk hash值 & http缓存配置 - 打包交互友好度(可选, 但很好玩 hhh) - 进度指示(`webpackbar`) - 错误友好提示(`friendly-errors-plugin`) ================================================ FILE: Advanced/Wonder.md ================================================ # 漫谈 ## 跨端 - 运行时跨端 与 编译时跨端 - Remax Kbone Taro Rax... - Taro原理 - 运行时标准 - XML类(小程序/H5)与JSX类(RN等) - 生命周期与事件处理函数 - 异步API Promise化 - RN & Weex 生成虚拟DOM，并调用原生控件进行渲染（编译为），即JS调用Native组件 - Flutter - 底层是Skia(2D跨平台绘图引擎库), 安卓自带Skia - Why Dart Yes? 性能 Fuchsia 类型安全 安卓上有V8提供Native Binding，但IOS上JSCore就没那么容易了。由Dart可以很好实现Native Binding ## 测试 - 单元测试 - Jest - Mocha - 集成测试 - React-Testing-Library - Enzyme - 端到端测试(E2E) - Puppeteer ## 工程化 - 错误监控 - Sentry 原理, 重写?方法 - 你理解的错误监控是如何的? 收集哪些信息? 如何上报? - Web 埋点 - 客户端埋点 - 性能优化 - Webpack - http 缓存 - 使用**Performance API**获取应用表现并针对性的进行优化 - 针对框架的性能优化, 如上面提到的 React - 脚手架 - 如何自建脚手架? -> yeoman - 自建脚手架的思路, 类似 Feflow - Vue-CLI 思路 - GraphQL & BFF & Apollo - vs RESTFul 优劣势 - BFF 意义, 解决了什么问题? - 接口清洗 聚合 胶水层... - 带来的新问题 - **FaaS** + **BFF**! 现在你不需要担心自己的胶水层顶不住流量了 - GraphQL-Client, **Apollo** or **Relay**? - CI / CD, 自动化构建流程解决了什么问题? - GitHub Actions - Travis - CircleCI - Serverless - **Serverless 解决了什么问题...?** - FaaS - 冷启动 & NodeJS 冷启动优势(V8 JIT) - 即用即毁 & 常驻进程 - 触发器 - FaaS 分层: 容器 runtime 代码 - 横向 & 纵向缩扩容 - BaaS - BFF & SFF - Midway-FaaS - 小程序云函数思路 - 前端趋势 - 智能化 如 Imgcook - 跨端 - 5G 物联网带来的影响 - Flutter / RN / Taro / Rax / ... - 演进 - 前端工程师的自我定位与市场定位 - 技能深度 & 广度 - 工程化 - 模块化 - 以 React 为例, 你的组件模块化思路? - Rax 开发的模块化 - 规范化 - 各种各样的 Lint - Pre-Commit Hook(`Husky` + `Lint-Staged`) - Code Review - 规范的测试! - 系统化 - 微服务 - 微前端 - Serverless - BFF 中间层 - ... ## 新趋势 下一代前端思路? Maybe - Svelte 和 Sapper - Midway-Hooks & RedwoodJS & BlitzJS: 前后端一体化开发 构建时分离 ================================================ FILE: Basic/Browser-WebSafety.md ================================================ # 浏览器 & Web 安全 - 浏览器架构 - 主进程 - 渲染进程(单个Tab, 内有Blink布局引擎 + V8等) - 站点隔离Site Isolation策略 - IE8的多进程: 依赖于Windows的DLL - 事件机制 - IE的特殊事件流及监听方式 - 捕获 & 冒泡 & 委托 - 跨域与跨站 - 强缓存与协商缓存 - 优先级 - 请求与响应中的缓存相关请求头 - cache-control private - E-tag 与 Last-Modified 及 if-none-match - 对比: 性能 & 精度 & 优先支持 - prepload & prefetch(低优先级,在后台下载) - DNS prefetching <\link rel="dns-prefetch" /> - 从输入 URL 到页面呈现 - 构建DOM树 - 样式计算 - 布局树 布局计算 - 分层 - 图层树 绘制指令 绘制列表 - 显式提升(显式合成) - 隐式提升(层爆炸) - 层叠上下文 - 绘制 - 分块 - 光栅化 栅格化线程池 位图 - 合成显示 - 重绘 回流 - GPU加速原理 - DOM 树与 CSSOM 树建树过程 - 令牌化->建树 - 样式收集 - 阻塞 - 加载 js 阻塞 dom - css & js 的加载 - 给 js 标签添加 async & defer 的作用 - 操作 DOM 为什么慢? - 引擎切换 - 互斥 - cookie / session / token - Chrome80 默认 cookie samesite 属性为 Lax, 造成的影响? - 推荐阅读: [预测最近面试会考 Cookie 的 SameSite 属性](https://juejin.im/post/5e718ecc6fb9a07cda098c2d) - 啊哦, Chrome83 又把这个属性默认值回滚了(因为考虑到新冠肺炎的影响), 最早恢复也要在 84 版本了(大概七月下旬) - 双令牌机制 `auth_token` & `refresh_token` - cookie session_id - jsonwebtoken 机理 - 本地存储（web storage） - service worker（随便了解一些即可） - requesAnimationFrame - 动画的循环时间间隔难以确定, 如果过短会导致浏览器重绘频率极限(16ms). - 定时器只是指示多久以后将动画任务添加到 UI 线程任务队列中,不一定会被立刻执行 - rAF: 自动优化性能(不可见时不执行) & 绘制间隔为浏览器刷新频率 - 回调会在每一帧保证执行 - requestIdleCallback（可以在被问到 React Fiber 时提到） - 不会保证被执行 - 只有在每一帧有空闲时间时间时执行 - 事件机制 - 委托发生的阶段 - IE 的事件模型 - 阻止事件与冒泡 - addEventListener 的第三个参数: useCapture - RESTFul 规范（URL & 方法 & 请求头...） - 跨域 - JSONP 原理 - Nginx 原理 与 实际配置 - CORS - Options 预检请求 - 简单 / 复杂 请求 - 相关字段 - 前端路由原理 - hash - onHashChange - history - go - push - replace - pushState - replaceState - onPopState - XSS - 文档型 & 反射型 & 存储型 - 防范: httpOnly & 转义 & CSP - XSRF - GET 型 POST 型 链接类型 - 防范: X-XSRF-TOKEN cookie的samesite属性(Chrome 80 82 84做出的更改) - 同源检测 - origin - referer - 同源检测伪造 - axios 的 XSRF 防御手段(X-XSRF-TOKEN) - samesite！ - Fetch & XHR 对比 - cookie - abort - 使用`onProgress`监听进度 - 性能优化指标 - **First Pain**: 首次绘制，即页面第一次绘制像素的时间，越快越好 - **First Contentful Paint**: 页面第一次绘制文本/图片等非空元素的时间，越快越好 - **Largest Contentful Paint**: 视窗内最大元素绘制时间，会随着渲染过程变化（大元素可能会发生改变），会在用户第一次交互后停止记录。官方推荐在**2.5s**内为优秀，**2.5s-4s**为需要改进，比FP与FCP更能体现用户页面体验。 - **Time to Interactive**: 首次可交互时间，重要指标，代表页面进入真正可用状态。 - **First Input Delay**: 首次输入延迟， FCP与TTI之间用户首次与页面交互时3的响应延迟。 - **Cumulative Layout Shift**: 页面非预期位移波动，如影响体验的大块内容插入。 - 基于[Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk)获取指标 - 资源大小及加载速度&网络速度：FP FCP LCP ================================================ FILE: Basic/Database.md ================================================ # 数据库 - 脏读 / 幻读 / 不可重复读 - 事务及边界 - 索引 - ORM(`Object Relationship Mapping`)的原理 ================================================ FILE: Basic/ES6.md ================================================ # ES6 - Next - let const var - 暂时性死区Temporal Dead Zone - 变量提升 - 块级作用域 - Number.EPSILON，无误差最小值 - 尾调用优化：单项调用帧 - 尾递归 - Object: - keys() - values() - entries() - ES6的Class实质, 与ES5继承异同? - Babel编译结果分析，见Babel-Playground - 为什么需要先调用`super()`? - Generator - 纤程 & 协程 & 线程 & 进程 - yield - co模块 - Iterator接口 - 统一的访问接口（`Symbol.iterator`）与排列顺序 - 供for...of消费 - Symbol类型使用, 一些类库的底层都用它来干什么? - 不可使用new关键字，因为不是对象嘛 - 使用for方法, 使用同一个Symbol值 - 作为key值, 无法被枚举, 但可以使用`getOwnPropertySymbols()`获取 - Promise - Promise/A+ - 回调函数延迟绑定 - 链式调用 - 错误穿透 - 状态机制 - all race allSettled 及实现 - 实现并发限制Promise - finally() - 有一个抛错的promise 在.all中获得正确结果 - Async/Await 的原理 - NodeJS 14.3.0版本实现的顶级await - Decorator，建议直接看ts的 - Proxy - 为什么Vue抛弃了Object.defineProperty - 元数据 & 元编程 - revocable() -> { proxyInstance, revoke } - Immer中的使用 - Reflect - 设计目的 - 函数式操作 - 更合理的行为 - 与Proxy的结合 - map set - map与对象互转 - set与数组互转 - weakMap weakSet - 其他新增API - 关于TC39的标准制定过程 - Strawman - Proposal - Draft - Candidate - Finished - ES 7/8/9/10 /... - Promise.allSettled() resolve与reject都会返回 - Dynamic Import: import() - [可选链(Optional-Chaining)](https://github.com/linbudu599/Penumbra) `a?.b?.c` - null判断运算符（空值合并） `null ?? "default" ` - 私有变量 - 装饰器(ES的实现还没确定下来, 可以看TS的实现)，但是ES现在的装饰器提案感觉越变越诡异了，所以不要以TS的装饰器为准。 - 第七种原始类型 `BigInt` - `Array.flat()` - `Object.fromEntries()` - 稳定的`Array.sort()`方法 （稳定：键值相等的对象排序前后顺序相同） - `export * as otherName from "../xx"` ================================================ FILE: Basic/HTML-CSS.md ================================================ # HTML CSS 基础 > 这一块的话，我的个人想法是不需要准备的太细致，大概的知识点足矣。 - 语义化 - SEO - DTD `` - W3C与WHATWG规范 - Html5新增API - DOM/BOM API - 常见布局 - Flex - Grid - Flex布局及容器/子元素属性取值 - flex:1 -> ? - 优先级 - 伪类与伪元素 - 预处理器与后处理器 - 盒模型 - CSS3动画 - GPU加速原理 - 定位 - 文档流 - 子绝父相 blabla... - position - 文档流 相对位置 - relative - absolute - static - sticky - src & href 区别 - 伪类与伪元素 - DOM下状态 - 冒号 - Flex 布局属性及其可取值 - rem & em & px-> 手淘的Flexible方案, 小程序与Rax的rpx方案 - BFC / IFC - 水平 / 垂直 / 水平垂直居中 - 预处理器与后处理器 - reset与normalize.css - 移动端 - 像素比 - 检测横屏 - 图片模糊问题(`srcset`, 自动选择符合像素比的图片) - 视口类型 - vw vh - 1px ================================================ FILE: Basic/HandWritting.md ================================================ # 基础手写/算法 > 算法我就帮不上太多忙啦，以下这些，不仅要会基本实现，还要会各个方面的优化版本。 - 原生ajax，axios思路（浏览器与Node中），我有一个仓库是自己实现的axios的http部分，有兴趣的同学可以翻翻，[ts-axios](https://github.com/linbudu599/ts-axios) - bind / call / apply - debounce / throttle - instanceof - Object.create() - 花式去重 - 深浅拷贝 - Promise - 实现符合Promise/A+规范的Promise - race() - abort() - 并发限制的all() - lazy man - new - 用setTimeout实现setInterval, 为什么要这么做 - 继承 - 各种xx式继承 - 实现ES6 Class实质的继承 - 冒泡 / 快排 / 选择 ... - 观察者与发布订阅模式 - 数组展平 - 实现一个函数，每隔wait秒执行func，一共执行times次 - TS类型编程，可参考[TS类型编程初探]([https://linbudu.top/posts/2020/05/30/ts%E7%B1%BB%E5%9E%8B%E7%BC%96%E7%A8%8B%E5%88%9D%E6%8E%A2.html#%E7%B4%A2%E5%BC%95%E7%B1%BB%E5%9E%8B-%E6%98%A0%E5%B0%84%E7%B1%BB%E5%9E%8B-infer-%E5%85%B3%E9%94%AE%E5%AD%97](https://linbudu.top/posts/2020/05/30/ts类型编程初探.html#索引类型-映射类型-infer-关键字)) - 刷刷leetcode吧... - 大数相加 - 比较版本号 - 回文 - 格式化（三位隔一个','） ================================================ FILE: Basic/JS-Basic.md ================================================ # JavaScript基础 - 常用设计模式 - 单例 - 装饰者 - 中介者 - 观察者 - 迭代器 - 设计模式的实际应用 - 装箱 & 拆箱 & 类型转换 - 数据类型判断 - typeof 基于底层机器码的判断 对于对象不准确(都会显示object) - typeof - instanceof 基于原型链的判断 可准确判断Array/Function/Object - 对于基本数据类型? - 111 instanceof Number -> false 字面量值(111) 与 实例(new Number())的不同 - constructor 同样可以理解为基于原型链, 但修改原型会使得结果不准确 - **Object.prototype.toString.call()** 最准确的判断 可用于深拷贝中判断数据类型, 返回`"[object array]"`这种形式 - 常用位运算 - 位运算在算法中也可以起到让人眼前一亮的作用，如`~~undefined -> 0` - 原型与原型链 - 原型链的设计初衷 - _\_proto__与prototype - 顶级原型对象Object - Function与Object，鸡生蛋与蛋生鸡问题 - 原型链继承与类式继承的本质差异, 二者的同名属性分别会如何起作用? > 两种继承的多态分别如何体现 - ES6的Class与原型链的关系(编译结果中静态成员 与 实例成员的添加方式) > 可阅读 [从Babel编译结果看ES6的Class实质](https://linbudu.top/posts/2020/03/25/babel-class.html) - 闭包 - 实现 & 应用 & 原理 - 经典问题 setTimeout + for循环 - 尝试使用一句话通俗的讲清闭包概念 - 执行上下文 > [搞懂执行上下文+闭包+AO/VO+作用域(链)]([https://linbudu.top/posts/2020/03/17/js%E5%9F%BA%E7%A1%80-%E9%83%A8%E5%88%86.html](https://linbudu.top/posts/2020/03/17/js基础-部分.html)) - 变量对象(VO)与活动对象(AO) - 调用栈 - 作用域链 - 扩展: 尾递归优化 - 继承 - 寄生组合式继承(组合+原型) - 异步 事件循环 - 微任务 & 宏任务 - 浏览器UI渲染与事件循环?（UI渲染属于哪种任务，它的执行时机？） - async与await在其中的处理 - 可扩展至NodeJS的事件循环 - Promise - 实现Promise(race/all(并发限制版)/abort/allSettled...) - 并行 顺序 中断 Promise - [Promise A+规范](https://segmentfault.com/a/1190000002452115) - 立即resolved的Promise执行时机 >>> 事件循环 - 垃圾收集 - 内存泄漏(如何使用Chrome排查) - 标记清除 - 引用计数 - 循环引用如何处理? - 扩展 -> ES6的WeakSet与WeakMap设计原因 - this指向 - 作用 & 意义 - 隐式丢失 - 四种优先级 - 箭头函数的this - Object.defineProperty() 与 descriptor(修饰符，即可配置(**configurable**) 可写(**writable**) 可枚举(**enumerable**) 及值(**value**)) - 与 Proxy 差异, 为什么Vue3.0切换到Proxy? 这解决了Vue2.x的哪些问题? - 模块化 - AMD UMD ... - ES Module与CommonJS差异 - 语法 & 导入 & 导出 & 加载方式 - export default可能存在的问题 - **二者对循环引用的处理** - 为什么Webpack使用摇树优化, 需要将Babel编译结果设置为ES6? - 其他 - new操作进行的步骤 - call & bind & apply - caller / callee - 柯里化(**尾递归优化**) & 函数式编程 - 类数组 - isNaN() 和 Number.isNaN() - Obejct.is() 的不符直觉的处理（扩展：React的`ShallowEqual`底层对Object.is()进行了优化, 见[shallowEqual.js](https://github.com/facebook/react/blob/a9b035b0c2b8235405835beca0c4db2cc37f18d0/packages/shared/shallowEqual.js)） - 深浅拷贝 - ...运算符 - JSON.parse(JSON.stringify()) - 真-深拷贝 ================================================ FILE: Basic/Network.md ================================================ # 网络 - 七层与五层模型 - DNS查找机制 - CDN CNAME - DNS 负载均衡 - CDN原理 - 请求/响应报文 - 头 & 主体 - http1 - HTTP队头阻塞 与 TCP队头阻塞 以及解决方式 - (非)管道化 - http2 - 解决方式 - http1.1 -> http1 - 身份认证 - 断点续传(206状态码) - 缓存 - keep-alive - http2 -> http1.1 - 多路复用 - 头部压缩 - server-push - 主动释放 - https 会话层机制 - (非)对称加密算法 - 中间人攻击 - 证书 数字签名 摘要 公钥 - 扩展: 浏览器预置的CA证书链 - TCP 握手/挥手 过程中出错? - 泛洪攻击 - RST包 - TCP/UDP适用场景 - QUIC协议(Http3底层) - 为什么DNS使用UDP - TCP拥塞控制 - 慢启动 & 拥塞避免 - 快速重传 & 快速恢复 - 正向代理与反向代理 - Get与Post区别 - 长度(GET受限实质) - 幂等性 - 安全性 - 缓存(GET主动缓存) - TCP数据包个数(100 continue) - 状态码 - 100 101 - 200 201 204 - 301 302 304 - 400 401 403 404 405 413 418 429 - 500 501 502 504 - 轮询 长轮询 长连接 ws ================================================ FILE: Basic/Node.md ================================================ # Node - Node架构：标准库 - Node Bindings - V8 & Libuv & C-ares & http_parser & zlib... - GC - 标记清除：全部标记 - 清除运行及被运行引用 - 清除带有标记的 - 引用计数 循环引用 - 新生代: Scavenge算法，From空间 To空间 - 对象晋升到老生代条件 - 老生代 - 标记-清除 - 标记整理 - 增量标记 - 架构 - Node标准库（JS） - Node Binding(C++) - **V8** + C-ares + Http-Parser + Zlib + **Libuv** - 优缺点 适用场景 - 高性能 - 非阻塞I/O + 事件驱动模型 - 单线程 - 适用于I/O密集型应用，不适用于CPU密集型，因为单线程可能会导致线程卡住 > Nginx也是事件驱动 - 进程 & 线程，单线程 - Node创建子进程的方式，这几种方式的底层，异同 - spawn - exec - execFile - fork - `child_process`与`cluster`: 多进程 - worker_threads`: 多线程 - `exports` 与 `module.exports` - npm install过程 - 确定首层依赖，以工程本身作为依赖树根节点，Node开启多进程寻找深层节点 - 获取模块信息 - 获取模块实体（检查缓存） - 查找是否有依赖 - 递归或回到上一步 - dedupe（flat / 扁平化）遍历所有节点，将依赖都放在根节点下，将模块名相同且在兼容范围内的重复依赖去掉，否则留在自己的依赖树里。 - 更新node_modules，执行生命周期。 - npm script - pre & post 钩子 - npm ci: 根据lock文件安装，且安装确切版本而非计算依赖，加速安装过程。删除已有的模块目录。不会写入package.json - npm i eslint-{plugin-import,plugin-react,loader} express - npm run env -> process.env.xxx - && 串行 与 & 并行 - npm docs / npm home / npm repo 导航至文档/仓库 - npm dedupe(ddp) 删除重复依赖 - npm audit 扫描依赖漏洞 fix: 安装所有漏洞包的补丁版本 - npm doctor - npm link 本地调试包 - npm list - npm outdated --long / npm outdated -l 列举过时依赖 - 版本冲突 与 dedupe - Buffer - Stream - 可读/可写/可读可写/可转换流 - 错误优先的回调函数风格 - V8内存管理GC - V8内存限制，64位1.4G，32位0.7G（1.5GB执行一次GC需要50ms以上（增量式），甚至可能达到1s（非增量）） - Scavenge算法 - 新生代与老生代机制 - From空间与To空间 - 标记清除与标记整理 - 触发点 - 增量标记 - 内存泄漏 排查 - Express / Koa项目 - Cluster & IPC - child_progress - 主从模式 - Node异步I/O & Libuv工作线程池: Libuv是如何赋予NodeJS高并发能力的? - 事件循环 - timer - I/O - Idle prepare - poll - 阻塞 - check - close CB - 每一阶段均有的nextTick与microTask - Koa - vs Express: 异同点 & 各自优势 - 中间件原理 与 洋葱模型(Koa-Compose模块) - 选择Koa与选择Express的考量权衡 - 服务端渲染(SSR) - SEO - 首次有效渲染 - **同构** - 数据注水 & 脱水 ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2020 Linbudu Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # 2020 前端基础知识 > **注意: ** 这份清单里的知识点不包括解答, 因为我感觉如果知识点随着答案一起列出, 那么很容易使得你看过后产生了自己会的 **错觉** , 最好的方式是把这份总结当成知识图谱, 你要做的是根据这些点来构建自己的知识体系, 比如看到一个你能立刻回忆起相关知识. > > 不提倡以八股文的方式背面经知识点, 前端的知识自有其可爱之处. ## 基础 ### [JavaScript 基础](./Basic/JS-Basic.md) ### [HTML & CSS 基础](./Basic/HTML-CSS.md) ### [基础手写/算法](./Basic/HandWritting.md) ### [ES6 基础](./Basic/ES6.md) ### [Node 基础](./Basic/Node.md) ### [浏览器 & Web 安全](./Basic/Browser-WebSafety.md) ### [数据库](./Basic/Database.md) ### [网络](./Basic/Network.md) ## 进阶 ### [TypeScript](./Advanced/Ts.md) ### [Tool](./Advanced/Tool.md) ### [Webpack](./Advanced/Webapck.md) ### [React](./Advanced/React.md) ### [业务场景](./Advanced/Reality.md) ### [小程序](./Advanced/Mini-Program.md) ## [漫谈](./Advanced/Wonder.md) ## 巨佬博客链接 - [粥里有勺糖](https://www.sugarat.top/) - [艾浩的个人博客](https://sherrybabyone.github.io/) - [2NaCl的Java校招面试点总结](https://blog.csdn.net/qq_41936805)