H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题

前端技术发展太快，有些库的版本一直在升级，现在网上的搭建教程不是不全面，就是版本太低，本人综合一些教程和自己的理解，整理了一下，方便大家快速入手react框架。本教程针对刚入门和技术栈转型人员。注：（本教程写于2019-3-29，请注意版本）！！！ 本人也是半路加入react大…

写出更好的 React 代码的 9 条实用提示：了解代码检查、propTypes、PureComponent 等。 使用 React 可以轻松创建交互式界面。为应用中的每个状态设计简单的视图，当数据变化时，React 会高效地更新和渲染正确的组件。 这篇文章中，我会介绍一些使你…

在开发好页面后，如何让页面更快更好的运行，是区分一个程序猿技术水平和视野的一个重要指标。所以面试时，面试官总会问你一个问题，如何进行性能优化呢？ 如果你这时是头脑一片空白，或是像之前的我一样，靠死记硬背或是之前的经历，答一下压缩代码，打包代码，雪碧图，cdn，事件代理，这说明你…

事情的起因是我们WMS系统内有一个批量打印的功能，今天仓库反应第一次打印的速度大概是2s，但是之后每次都越来越慢，到后面页面基本就直接卡死了。 从这个表现来看，这个问题基本可以定位成性能问题，而不是可以被try...catch到的异常。 一行行review这部分相关的代码，co…

通常情况下，HTML 中的图片资源会自上而下依次加载，而部分图片只有在用户向下滚动页面的场景下才能被看见，否则这部分图片的流量就白白浪费了。 所以，对于那些含有大量图片资源的网站，会采用“按需加载”的方式，也就是当图片资源出现在视口区域内，才会被加载，这样可能会影响一丢丢用户体…

2019 农历新年即将到来，是时候总结一下团队过去一年的技术沉淀。过去一年我们支撑的数据相关业务突飞猛进，其中两个核心平台级产品代码量分别达到30+万行和80+万行，TS 模块数均超过1000个，协同开发人员增加到20+人。由于历史原因，开发框架同时基于 React 和 Ang…

使用Redux进行开发时，遇到请求，我们往往需要很复杂的过程，并且这个过程是重复的。我们往往会把一个请求拆分成三个阶段，对应到三个Action Type中去，并且配合redux-thunk中间件，将一个异步action进行拆分，分别对应请求的三个阶段。如下所示： 同时，我们需要…

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。 能提升…