最近这段时间梳理了高级前端知识架构，发布在GitHub上，欢迎star
https://github.com/liuyongliang/Advanced-Frontend
异步
异步编程
- JS 是单线程的语言。运行的js ，可能会有大量的网络请求，而一个网络资源啥时候返回，这个时间是不可预估的。这种情况会出现等待卡顿。JS 对于这种场景就设计了异步 ———— 即，发起一个网络请求，就先不管这边了，先干其他事儿，网络请求啥时候返回结果，到时候再说。这样就能保证一个网页的流程运行
async/await
- promise的出现对于异步编程是一个跨越式的提高，但是往往在实际业务中存在很多更加复杂的流程，promise还是无法满足我们的需要，这时候在ES7中提出了async函数
Promise
服务器端渲染SSR
SSR指南
- 简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序
SSR框架
- Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置
函数式编程
函数式编程
- 函数式编程就像第三次工业革命，前两次分别为命令式编程（Imperative programming）和面向对象编程（Object Oriented Programming）
代码质量
代码规范
- 代码本身的质量: 包括复杂度, 重复率, 代码风格等。
- 复杂度: 项目代码量，模块大小，耦合度等
- 重复率: 重复出现的代码区块占比，通常要求在5%以下(借助平台化工具如Sonar)
- 代码风格: 代码风格是否统一(动态语言代码如JS, Python风格不受约束)
- 代码本身的质量: 包括复杂度, 重复率, 代码风格等。
JavaScript
TypeScript
性能优化
调试工具
H5优化
缓存
压缩
内存
- 在JS中具有自动垃圾回收机制，对于前端开发来说，内存空间并不是被常常提起的概念，容易被大家忽视。很多东西的原理与内存息息相关，如：闭包、深签拷贝、执行上下文等，要弄清楚这些，必须对内存空间有清晰的认知才行。
渲染
资源加载
《使用 Preload&Prefetch 优化前端页面的资源加载》
- 对于前端页面来说，静态资源的加载对页面性能起着至关重要的作用。本文将介绍浏览器提供的两个资源指令-preload/prefetch，它们能够辅助浏览器优化资源加载的顺序和时机，提升页面性能
监控
异常捕获
- JavaScript 中的一个错误是一个对象，错误会被抛出以暂停程序
- 在开发过程中，我们的目标是 0error，0warning。但有很多因素并不是我们可控的，为了避免某块代码的错误，影响到其他模块或者整体代码的运行，我们经常会使用try-catch模块来主动捕获一些异常或者错误
页面性能监控
- FrontJS 提供准确、实时、完整的程序错误、资源加载、网络请求信息及网站性能监测报告，帮助开发者快速追踪网站故障，及时修复问题，维护网站质量，指导改善用户体验。
埋点
- 关于埋点，作为用户行为过程数据采集的一种方式，被广泛用于各公司的站点中。它不仅可以收集页面浏览量，还能对访问用户的时间、地点、操作路径等用户行为进行多维度记录
用户行为
设计模式
概念
- 在软件工程中，设计模式是软件设计中常见问题的可重用解决方案。设计模式代表了经验丰富的软件开发人员所使用的最佳实践。设计模式可以看作是编程模板
单体模式
- 《JavaScript设计模式——单体模式》
- 单体模式(Singleton Pattern)的思想在于保证一个特定类仅有一个实例，即不管使用这个类创建多少个新对象，都会得到与第一次创建的对象完全相同。
工厂模式
工程化
构建工具
webpack
- webpack是一个打包模块化 JavaScript 的工具，在 webpack里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。webpack专注于构建模块化项目
脚手架
前端标准/实践
前端标准
- 通过分析github代码库总结出来的工程师代码书写习惯
《【译】Google 官方文章——如何去做coder review》
- CR(Code review)主要目的在于确保Google 的代码库代码质量越来越好。而所有相关的工具与流程皆是因应这个目的而生。为达到此目的，势必需要做出一连串的权衡与取舍
- Git 提供了丰富的分支策略和工作流方式，我们在深入学习业界 Git 工作流时，每种工作流都设计的非常好，似乎都能运用到团队实践
骨架屏
前端算法
递归
冒泡
动态规划
二分查找
链表和数组
浏览器
自动化
网络
OSI七层协议
- 《OSI七层模型各层知识解析》
- 简单理解其实就是为计算机与计算机链接所制定的通信框架。这个模型分为七层。
DNS解析
协议
TCP
- 《TCP详解》
- 概念
- 面向连接、可靠的基于字节流的传输协议。
- 将应用层的的数据分割成报文段并发送给目标节点的 TCP 层
- 每个数据包都有相对应的序号，对方收到后就发送 ACK 确认，未收到就重传
- 使用校验和来检测传输过程中是否出现错误
- 概念
- 《你管这破玩意儿叫TCP？》
UDP
测试
单元测试
自动化测试
- 测试是完善的研发体系中不可或缺的一环。前端同样需要测试，你的css改动可能导致页面错位、js改动可能导致功能不正常。由于前端偏向GUI软件的特殊性，尽管测试领域工具层出不穷，在前端的自动化测试上面却实施并不广泛，很多人依旧以手工测试为主
可视化
d3
- 《D3 源代码解构》
- D3是一个数据可视化的javascript库，相对于highchart和echarts专注图表可视化的库，D3更适合做大数据处理的可视化，它只提供基础的可视化功能，灵活而丰富的接口让我们能开发出各式各样的图表。
three.js
NodeJS
原理
V8引擎
移动web开发
Hybrid
Flutter
安全
抓包/代理
监控技术
机器学习
TensorFlow
客户端开发
electron
nw.js
chrome插件
- 《Chrome插件开发指南》
- Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件。它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包
源码分析
vue源码
- 简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。
react源码
TypeScript
JavaScript
项目管理
项目管理
- 前端项目如何管理
- 前端项目的管理分为两个维度：项目内的管理与多项目之间的管理