合理选择移动端图标
图标Icon是网页开发中常用的资源，特别是在移动端。总所周知移动端由于一些列原因（硬件，网络等等），导致访问网页总体性能会比PC端性能低，所以如何在移动端开发的时候合理选择图标Icon是性能优化的一个关键。
使用IconFont
之前我们介绍过可以使用PNG格式的图片作为图标使用，但是PNG图片一般体积较大，请求资源变大。此时可以考虑使用字体图标（IconFont）来代替之前的PNG图片格式的Icon。字体图标好处如下：
- 多个图标：一套字体，减少获取时的请求数量和体积
- 矢量图形，可伸缩，不失真
- 可以直接通过CSS代码修改样式（大小，颜色等） 网上有很多成熟的IconFont实现，比如阿里巴巴矢量图标库，使用也非常的简单，这里不做演示
但是IconFont也有如下不足：
- 由于是字体，那么避免不了会出现字体闪烁的问题（网络慢，现象更加突出），但是可以使用我后面所讲的preload或者prefetch方法得到解决。
- 色彩单一，难以构建复杂的图标。
- 和PNG，JPG等（SVG除外）一样，没有任何语义（也就是搜索引擎压根儿不知道你这个是啥东西）
使用SVG
使用SVG作为图标有如下好处：
- 保证了图片能力，支持多彩色和复杂图标的绘制
- 矢量图形
- XML语法，利于搜索引擎进行SEO和无障碍读屏软件读取 如何使用SVG想必就不用介绍了吧，在这里介绍一个webpack-loader：@svgr/webpack，使用它，可以把SVG当作组件来使用。
正如我之前所说的，如果使用SVG绘制过于复杂的图标，可能最终体积比使用PNG图片实现的图标还要大（根据自己需求来）。
使用Flexbox布局
前端发展至今，出现了很多布局方式，比如什么table布局，grid布局，圣杯布局等等。但是我推荐使用本节中介绍的Flexbox布局，其好处如下：
- 拥有更高的渲染性能：使用Flexbox布局在Layout和Paint耗时小于其他布局方式。
- 容器可以决定子元素的几何属性：大小，顺心，对齐方式，间隔等
- 双向布局
Preload和Prefetch
浏览器在加载相关资源的时候，是有自己的默认优先级设置的：
绿色方框内表示的是当前网站资源加载的优先级，可以看见最先加载的永远是HTML资源（可以想想是为什么）。
有时候为了优化用户体验，我们想让相关资源进行优先级的调度，达到快速渲染。
使用Preload和Prefetch就可以改变浏览器默认的资源加载优先级，先看看两种方式适用的场景：
- Preload：提前加载较晚出现，但对当前页面非常重要的资源
- Prefetch：提前加载后续页面或者后续路由所需的资源，优先级低（可以认为是当前页面加载完以后，有空闲时间在去加载相关资源）。
预渲染
之前我们介绍过SSR，可以 用于SEO优化，其牺牲了TTFB来补救首屏渲染（First Paint）。即使有Next.js等技术，SSR整体实现也较为复杂。为了快速FP，这里还有一种解决方案，那就是预渲染（Pre rendering）。
之前的SSR都是把压力放在服务器端，所以增加了TTFB，而预渲染则是把压力放在了开发人员身上（预渲染打包很慢），预渲染操作以后，打包出来的HTML文件已经包括了首屏渲染的内容，请求该资源的时候，服务端压力就小了很多。
社区中有很多预渲染方案，在这里介绍一下React-Snap。
下图是没有经过预渲染打包出来的HTML文件中的内容：
可以看出没有包含任何首屏渲染内容。
下图则是使用react-snap处理过后的打包结果：
react-snap实现原理是在webpack打包以后，开启一个隐藏浏览器去爬取首屏的内容然后把抓取到的内容重新写入HTML文件中去。更多react-snap的使用请自行前往npm或者github查看,还是有些地方需要注意的。
Windowing
Windowing 是一种在任何给定时间只呈现一小部分行，并且可以显著减少重新呈现组件所需的时间以及创建的 DOM 节点的数量的技术。如果应用程序呈现长的数据列表，则建议使用此技术。react-window 和 react-virtualized 都是常用的 windowing 库，它提供了几个可重用的组件，用于显示列表、网格和表格数据。
简单点说就是，使用了该技术以后，你的列表页面不会永无止境的增加新的元素节点，而是你的元素节点始终保持在一定数量内，视图以为的都是虚拟列表。快去看看怎么使用吧。
使用骨架
先看一张图：
可以看见很多骨架（也就是内容占位），现在假设你是用户，你是喜欢这种等待加载的呈现还是一片空白的加载呈现了？我想只要正常人都会选择第一种吧。
是的，骨架现在是很常用的优化用户体验的手段，在这里推荐一个react的实现:react-placeholder。其实社区还有很多其他实现，可以根据自己的需求去查找。