上一篇主要说了FST的获取方法，这篇就看看其他的几个性能指标。 首字节时间 Dom构建完成时间 Dom Readly时间 页面完全加载时间 首屏时间 问题表象 问题分析 排查方向 首字节时间过长 该阶段耗时过长代表着服务器响应和返回的时间长。可以借助首字节时间之前的几个指标进行更具体的分析，包括redirectStart、domainLookupStart等。 重定向过多DNS 查询时间长TCP 连接时间长服务器性能差 DOM构建时间过长 浏览器解析 HTML 构建 DOM 树的过程中，会遇到 JavaScript…
性能优化是每个公司每个开发人员都会做的事情。性能优化是指通过各种手段，提高应用程序的响应速度、吞吐量、资源利用率等性能指标，从而提高用户体验和系统效率。 性能优化是软件开发过程中非常重要的一环。需要注意的是，性能优化需要根据具体应用场景和需求进行，不能一概而论。同时，性能优化也需要进行平衡，不能只追求单一指标的提升，而忽略其他指标的影响。例如，为了提高响应速度，可能会牺牲系统的可靠性和安全性，因此需要进行综合考虑和权衡。 今天我们就简单谈一谈前端性能优化那点事。 我们要有一个共识。 首先，性能优化不能盲目，一定是问…
对于一个从小不喜欢语文、不喜欢阅读、作文很少及格的理科生来说，做梦也没想到，有一天我会写一篇文章教人如何写文章 :) 一、为什么要写文章 懂了，不一定能说出来，说得出来，不一定能写出来。这就是写文章最大的好处，官方术语叫“费曼教学法”。写文章是一个逼迫自己深入理解问题、把问题想清楚，整理好思路，并能清晰表达出来的过程。其本质是一种自我学习、自我提升、构建知识体系的最佳方法。 除此之外，写文章还有一个副产品——帮助我们扩大影响力。就拿我来说，我大概是在4年前，开始有规划地搭建自己的知识体系，包括阅读、记笔记、写文章、…
起因 源于一次面试：我让面试者展开讲了一下她的项目经历（一个内部使用的组件库）。多个包的维护方式让她在开发过程中浪费了大量的时间。虽然是用的Multirepo的组织方式，但是她并知道Multirepo的管理理念，且更不懂Monorepo。这我岂能容忍，必须解释一番。 Monorepo 和 Multirepo 是两种不同的源码管理理念。 Monorepo 是把所有的相关项目都放在一个仓库中（例如：React, Angular, Babel, Jest, Umijs, ...） Multirepo 则是按模块把子项目拆…
金三银四已过半，各大公司抢人大战已进入白热化。能否进入一个自己心仪的公司，拿到自己满意的薪资。面试中的能力展现很重要，但是能不能进入面试环节更重要。 「无刷题，不面试」应该是当下初中级开发工程师的常态。 「BB is nothing，show me the code」应该是当下好多公司面试的常态。 目前在前端领域，人才供给呈现出一个底面特别宽的金字塔形状。 开发同学特别多，但是好多公司还是会出现用人荒、招人荒。不得已在当下时段好多公司会选择适当的降低面试标准。 这也让好多开发者有了相对简单的进入大厂的机会。 拿到一…
最近梳理了团队内的前端项目，发现React的状态管理工具用的很杂，有dva、rematch、mobx、hooks、redux等，如此分裂的工具会导致日常的工作效率极低，因为每个人都需要掌握多个工具库的使用，再加上最近团队扩招，好多新人入职，当前的项目状态无异于给新同学增加了额外的学习成本。 所以统一技术栈的事情迫在眉睫。本篇就介绍一下我是如何做状态管理工具的选型的。 背景 团队内： 状态管理库较杂，主要使用Redux+thunk和Dva两个框架，且存在混用的场景，新人熟悉项目有一定的阅读成本 Redux+thunk…
Recoil作为facebook官方提出的状态管理，与react结合度还是很不错。 核心概念 使用Recoil，您可以创建一个数据流图，数据从atoms（共享状态）通过selectors（纯函数）一直注入到React组件。atoms是组件可以预订的状态单位。selectors可以同步或异步转换此状态。 atoms atoms是状态单位,它们是可更新和可订阅的,当atoms被更新时，每个订阅的组件都将使用新值重新呈现（重新render）。 它们也可以在运行时创建,可以使用atoms来代替React本地组件状态。如果多…
新公司学习阶段，代码大多数是使用redux来做状态管理，并且使用Hooks。虽然之前了解，但是没有在实际项目中使用过。写一个小的Demo 供大家参考。 React Redux在19年6月11日发不了的7.1版中提供了对Hooks的支持（之前大多是使用一个redux-react-hook来做）。这我们就可以不使用高阶HOC的方式了。 具体什么是Hook我就不介绍了，不懂的请自行查看react官方文档。 react-redux 提供了两个Hook用来替代connect。 useSelector useSelector是…
在Mac上安装环境和软件时，brew比较常用。brew的安装在国内也不是特别友好，经常报各种错误。 Warning: The Ruby Homebrew installer is now deprecated and has been rewritten in Bash. Please migrate to the following command: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/mast…