《自顶向下学 React 源码》学习笔记理念篇如何学？将 React 完整的运行过程可以分为三个部分：产生更新、决定更新什么组件、将更新的组件渲染到页面。即：调度、协调、渲染。 设计理念React 哲学:React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式 目前 web 端快速响应的两大瓶颈：计算能力和网络延迟。对应的也就分别是 CPU 和 IO。 1000ms/60Hz = 16.6ms 浏览器刷新一 2021-08-07 源码学习 React 源码
hybrid原理解析hybrid 是什么？hybrid 其实可以简单粗暴的理解为 一个原生应用内调用 webview，然后 h5 嵌套在 webview 中，并且 h5 可以与 native 应用进行交互。一个非常好的例子就是微信小程序/微信 H5 这种，在使用的时候通过调用 jsbridge 的方法，来调用微信原生的一些操作，比如分享到 xxx 这种。 所以 hybrid 开发重点应该是中间这个 jsbridge。 2021-11-14 原理解析 hybrid
再探webpack-dev-server之前写过一篇关于热更新的文章:开着飞机修引擎-热更新，但是只描述了 ws 是如何通知的，只是简单带过了客户端这面的更新流程，这次我们打开源码，从头到尾一探究竟。 服务端我们在上一篇文章中已经知道热更新的推送是依赖于 ws 的，所以我们先从熟悉的地方入手，找到创建 ws 的方法 123456789101112131415161718192021222324252627282930313233// l 2021-11-08 前端工程化 webpack
小试PWA文件结构首先 PWA 的与正常的 web 都是一样的，只是在 html 引入了一个叫manifest.webmanifest的 json 文件。官方名：应用清单 12345678<!DOCTYPE html><html lang="en"> <head> <link rel="manifest" href=& 2021-11-01 前端工程化 PWA
缓存背锅？起因我们国内站有做中国传统节假日的提醒，因为中国传统节假日不太方便计算，所以每年都要在对象存储桶里更新对应的文件。 大前天接到工单反馈说我们没有 2022 年的日历提醒，然后运维同学就在对应文件进行了文件的更新。 过了一会儿之后测试同学跟我说：web 这面没办法拉取到最新的文件，但是直接访问请求可以拿到。还给我截图看了一下请求头，说我没按照当时的方案做：请求的时候加上if-modified-sin 2021-10-30 随手记录 协商缓存 强制缓存
虚拟列表的实现什么是虚拟列表只渲染可是区域的列表节点，滚动的时候进行数据的动态替换。 实现步骤 计算出当前可视区域起始数据的索引 startIndex 计算出当前可视区域结束数据的索引 endIndex 计算出当前可视区域内的数据，并渲染 滚动发生时，计算 startIndex 对应的数据，在整个列表的偏移位置 startOffset ，并且更新到列表上 结构设计 真正渲染的元素 virtual-li 2021-09-23 手撕源码
页面性能调优记录前两天收到测试的反馈，日历页面会非常卡，每次切换月份都要卡顿 10s 多。 我寻思最近也没有这面的需求啊，也没有改动过什么，为啥会卡呢。 致命甩锅三连问： 是不是电脑问题啊，你先把你没用的都关了再看一下 最近也没这面的需求，要卡应该之前就卡了，不会这时卡啊。 不行你换个浏览器试试。 虽然测试这面应付过去了，但是本着求实的态度，默默的自己打开了 DevTools 开始按照测试说的操作来看一 2021-09-17 性能优化 Redux 性能优化
emoji在Chrome显示问题前几天接到一个莫名其妙的需求，说文本中有 emoji，然后文字和 emoji 粘连了，需要分开。 但是我打开看了一下产品说的位置，发现并没有粘连。 开始一顿甩锅操作，致命三连问： 你是什么浏览器？ 浏览器什么版本？ 是不是浏览器调整了其他字体。 发现这些居然跟我的都一样，居然会产生这种差异。 在经过一系列搜索后找到了答案： 原文连接:emoji 和文字会重合 原因如下： Chrome 2021-09-17 其他 emoji Chrome
手撕一个eventBus首先需要知道 eventBus 中的方法都有哪些。按照方法进行基础框架的搭建 12345678910111213141516class eventBus { // 初始化 constructor() {} // 触发事件 emit(eventName, ...args) {} // 注册事件 on(eventName, cb)  2021-08-29 手撕源码 eventBus
近期面试复盘滴滴就记住这几个。 react-router 动态路由 Webpack 中的 loader 和 plugin 区别Loader 的作用是让 webpack 拥有加载和解析非 JavaScript 文件的能力。Plugin 是扩展 Webpack 的功能，在 webpack 运行的生命周期中。 Chunk 和 bundle 的区别chunk 是打包过程中的文件，bundle 是打包的结果。 2021-08-09 面经 前端开发 面经
