Blog

先简单了解下什么是 CSS Modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default

简单点说 CSS Module 是具有局部作用域的 css 文件。既然提到了局部作用域，那么肯定有全局作用域，在 create-react-app 中，我们引入 css 文件通常为以下形式：

1
2
3
4

/* index.css */
.color {
  color: red;
}

1
2
3
4
5
6
7

/* index.tsx */
import React, { Component } from 'react'
import './index.css'

export default class Index extends Component {
  // ...
}

interface是接口，type是类型，本身就是两个概念。只是碰巧表现上比较相似。希望定义一个变量类型，就用type，如果希望是能够继承并约束的，就 用interface。如果你不知道该用哪个，说明你只是想定义一个类型而非接口，所以应该用type。

在 TypeScript 中，interface 和 type 主要用于类型的声明，它们的相同点以及区别如下：

在开发过程中，会遇到在网站上传 100 MB 以上的文件经常失败，重试也要等老半天。那么应该怎么做才能快速上传，就算失败了再次发送也能从上次中断的地方继续上传呢？

整体思路

第一步是结合项目背景，调研比较优化的解决方案。 文件上传失败是老生常谈的问题，常用方案是将一个大文件切片成多个小文件，并行请求接口进行上传，所有请求得到响应后，在服务器端合并所有的分片文件。当分片上传失败，可以在重新上传时进行判断，只上传上次失败的部分，减少用户的等待时间，缓解服务器压力。这就是分片上传文件。

流程图如下：

前端性能优化主要是为了提高页面的加载速度，优化用户的访问体验。

今天要说的是最简单的 for 循环，一个简单的 for 循环看似没有任何优化的意义，但实质上优化前后差距挺大的，那么该如何优化呢？