我的前端杂货铺

要监控网页的卡顿，我们必须从 FPS 说起。 FPS 是来自视频或者游戏里的概念，即是每秒的帧数，代表视频或者游戏的流畅度，俗话说，就是“不卡”。 网页内容在不断变化之中，网页的 FPS 是只浏览器在渲染这些变化时的帧率。帧率越高，用户感觉网页越流畅，反之则会感觉卡顿。 最优的…

本文是如何监控网页的卡顿？的下篇。今天我们把话题聚焦在如何监控网页的崩溃上。 卡顿也就是网页暂时响应比较慢，JS 可能无法及时执行，这也是上篇网页卡顿监控所依赖的技术点。 但，天无绝人之路，方法总是有的。 搜遍互联网，几乎找不到方法，最终碰上了这篇文章。本文利用 window …

全局变量React是React库的入口。如果你通过一个script标签使用的React，那么它的顶级API都会在全局环境下一个名称为React的变量上。如果你是通过npm使用的ES6，你可以这样写：import React from 'react';。你是通过npm使用的ES5…

合理的使用缓存可以极大地提高网站的性能优势，还可以节约带宽从而降低服务器成本。但是很多站点有只弄对了一半或者一半都没有，如果是这样，就完全没有发挥出缓存的优势。很大程度上产生会由于静态资源的竞争关系而导致依赖的静态资源不同步。 以下为两个最佳静态资源缓存实践的例子。 资源的内容…

随着你的应用的变得越来越大，你可以通过typechecking来找到更多的bug。 对于某些应用，您可以使用JavaScript扩展（如Flow或TypeScript）对整个应用程序进行类型检查。 即使你不使用这些，React也有一些内置的typechecking能力。 要在组…

在React内部，React使用了几种比较聪明的技术来实现最小化更新UI所需的昂贵的DOM操作的数量。 对于许多应用来说，使用React将很快速的渲染出用户界面，从而无需进行大量工作来专门做优化性能的工作。 大概有以下有几种方法来加快你的React应用程序。 对于Create …

在大多数情况下，我们建议使用可控组件(参考本系列第9篇《表单处理》》)来实现表单功能。 在可控组件中，表单数据由React组件处理。 替代方法是使用不可控组件，其中表单数据是由DOM本身处理。 要编写不可控组件，不需要为每个状态更新都去编写事件处理程序，你可以直接使用ref从D…

React并不是强制要求使用JSX来编写应用。 当您不想在构建时设置并编译JSX，那么在开发阶段只是单独使用React而不去使用JSX会让应用在构建时变得特别方便。 每个JSX元素只是调用React.createElement(component，props，... child…

在典型的React数据流中，props是父组件与其子组件交互的唯一方式。 要修改子组件，需要使用一个新的props进行重新渲染。 但是，在某些情况下，您需要在典型数据流之外强制修改子组件。 要修改的子组件可以是React组件实例，也可以是DOM元素。 对于这两种情况，React…