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

面试

Daily-Interview-Question

typescript

• 深入理解typescript

Nodejs

JS

web安全

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

React

微前端

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

NodeJs

• koa2

css

前端工程化

网络

浏览器相关

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

数据结构与算法

• 前端面试分享

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

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

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

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

• 滑动窗口算法
• 双指针

• nodejs 事件循环

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

• Node.js 调试指南

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

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

go分布式源码:dtm

hybird

pwa

• 最小任务队列

• 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（渲染器）—— 负责将变化的组件渲染到页面上

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

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

三大原则

• 单一数据源
• 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源码解析

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