yangw0223 / awesome

awesome

TODO

• sagas
• redux
• rxjs
• koa
• immutable 共享结构怎么实现的
• 微前端qiankun, 以及沙箱实现机制
• 为什么要用hooks
• http 常用的状态码
• 闭包 和 原型

面试

react 源码

1. React技术揭秘

前端基础

1. 前端基础相关

前端性能优化

1. 前端性能优化之旅
2. 雅虎前端优化35条规则翻译

微前端

1. 蚂蚁金融科技qiankuan 简介
2. qiankun 微前端原理与实践
3. icestark

SSR

1. Next.js
2. egg-react-ssr

英语

1. 薄冰英语语法
2. 解谜英语语法

数据结构与算法

1. 手把手撕LeetCode题目，扒各种算法套路的裤子。English version supported! Crack LeetCode, not only how, but also why. https://labuladong.gitbook.io/algo/

git

1. git reset soft,hard,mixed之区别深解

node

1. 入理解Node.js：核心**与源码分析
2. 深入学习 Node.js
3. 如何通过饿了么 Node.js 面试
4. 网易云音乐 API
5. 通过源码分析nodejs原理
6. Node.js 源码剖析

node 实战

1. node-elm
2. NodeWk
3. awesome-nestjs

serverless

1. midway

go

1. Go 可比较类型

Java

1. Java8
2. Spring Boot Demo 是一个用来深度学习并实战 spring boot 的项目

c++

1. C++ 资源大全中文版
2. libuv
3. C++ Standard Library
4. libuv中文教程
5. c-ares 异步 DNS 请求库
6. calculator
7. MyTinySTL

deno

1. 《Deno进阶开发笔记》

跨端

1. react-native
2. flutter
3. 一款跨平台的开源Github客户端App
4. flutter 豆瓣

Svg & Canvans

1. 百度脑图
2. D3
3. HTML canvas框架汇总

技术面试必备基础知识、Leetcode、计算机操作系统、计算机网络、系统设计、Java、Python、C++ 中华新华字典数据库和 API GitHub中文排行榜，帮助你发现高分优秀中文项目

ASP.NET Core awesome-dotnet-core中文版

awesome's Issues

微前端

1. 微前端框架 之 single-spa 从入门到精通
2. HTML Entry 源码分析
3. 基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇

redux

三大原则

• 单一数据源
• state 只读
• 使用 纯函数来修改

API

• createStore: createStore(reducer, [preloadedState], enhancer)
• combineReducers(reducers)
• applyMiddleware(...middlewares)
• compose(...functions)
• Store
  • getState()
  • dispatch(action)
  • subscribe(listener)
  • replaceReducer(nextReducer)

---

immer.js:也许更适合你的immutable js库

精读《Immer.js》源码

如何用React+Redux+ImmutableJS

---

react-redux源码解析

rxjs 学习笔记

面试

面试

---

Daily-Interview-Question

---

typescript

• 深入理解typescript

---

Nodejs

---

JS

web安全

---

[万字总结] 一文吃透 Webpack 核心原理

React

微前端

• 微前端在美团外卖的实践
• qiankun

---

NodeJs

• koa2

---

css

---

前端工程化

---

网络

---

浏览器相关

• 浏览器同源政策及其规避方法
  • 10 种跨域解决方案
• 前端安全
• 浏览器存储
• 浏览器缓存
• 浏览器污渲染原理

---

数据结构与算法

---

• 前端面试分享

Recently learned

1. 剖析 npm、yarn 与 pnpm 依赖管理逻辑
2. Node.js 如何创建软链接，与硬链接有什么区别？

CSS 相关

You-need-to-know-css
CSS-Inspiration
css_tricks
animista
spinkit

React 实现原理

• 最小任务队列

• react高阶组件
• setstate 同步还是异步
• 一文彻底搞懂react hooks的原理和实现
• React Hooks 原理与最佳实践
• React Hooks 原理
• react hoos 实现
• Redux 原理
• React的调度
• 深入剖析 React Concurrent
• 「源码解析 」这一次彻底弄懂react-router路由原理
• 手写系列-实现一个铂金段位的 React
• React的秘密
  • react中requestIdleCallback的实现原理
  • 一篇长文帮你彻底搞懂React的调度机制原理
  • Scheduler

JS 是单线程的，浏览器是多线程的，除了 JS 线程以外，还包括 UI 渲染线程、事件线程、定时器触发线程、HTTP 请求线程等等。JS 线程是可以操作 DOM 的，如果在操作 DOM 的同时 UI 线程也在进行渲染的话，就会发生不可预期的展示结果，因此 JS 线程与 UI 渲染线程是互斥的，每当 JS 线程执行时，UI 渲染线程会挂起，UI 更新会被保存在队列中，等待 JS 线程空闲后立即被执行。对于事件线程而言，当一个事件被触发时该线程会把事件添加到队列末尾，等待 JS 线程空闲后处理。因此，长时间的 JS 持续执行，就会造成 UI 渲染线程长时间地挂起，触发的事件也得不到响应，用户层面就会感知到页面卡顿甚至卡死了，Sync 模式下的问题就由此引起。

那么 JS 执行时间多久会是合理的呢？这里就需要提到帧率了，大多数设备的帧率为 60 次/秒，也就是每帧消耗 16.67 ms 能让用户感觉到相当流畅。浏览器的一帧中包含如下图过程：

异步可中断更新可以理解为：更新在执行过程中可能会被打断（浏览器时间分片用尽或有更高优任务插队），当可以继续执行时恢复之前执行的中间状态。

react filber 主要实现了可中断的异步更新.

• Scheduler（调度器）—— 调度任务的优先级，高优任务优先进入Reconciler
• Reconciler（协调器）—— 负责找出变化的组件
• Renderer（渲染器）—— 负责将变化的组件渲染到页面上

混合开发

hybird

pwa

HTTP 相关

1. cookie
   1. ajax会自动带上同源的cookie，不会带上不同源的cookie 2. 可以通过前端设置withCredentials为true， 后端设置Header的方式来让ajax自动带上不同源的cookie，但是这个属性对同源请求没有任何影响， 会被自动忽略

数据管理

mobx原理
从MobX的action出发谈谈JS的异步

数据结构与算法

• 滑动窗口算法
• 双指针

GO

go分布式源码:dtm

javascript

• 如何优雅处理前端异常？

Nodejs 相关

• nodejs 事件循环

• 深入理解Node.js：核心**与源码分析

• Node.js 调试指南

• 如何通过饿了么 Node.js 面试

Web安全

• 如果让你去实现一个 CSRF 攻击你会怎么做
• 前端鉴权：cookie、session、token、jwt、单点登录
• 前端安全系列（二）：如何防止CSRF攻击？
• 前端安全系列（一）：如何防止XSS攻击？

C++ 学习笔记

1. C++头文件中为什么只声明不定义，而类定义又可以放在头文件中
2. C++头文件保护符和变量的声明定义

1

• 如何编写一个d.ts文件