移动端图标SVG
从PNG到IconFont
- 多个图标一套字体，减少获取时的请求数量和体积
- 矢量图形，可伸缩
- 直接通过CSS修改样式（颜色、大小等）
从IconFont到SVG
- 保持图片能力，支持多色彩
- 独立的矢量图形
- XML语法，搜索引擎SEO和无障碍读屏软件读取
Flexbox优化布局
- 更高性能的实现方案
- 容器有能力决定子元素的大小、顺序、对齐、间隔等
- 双向布局
优化资源加载顺序
- 浏览器默认安排资源加载优先级
- 使用preload、prefetch调整优先级
- preload：提前加载较晚出现，但对当前页面非常重要的资源
- prefetch：提前加载后继路由需要的资源，优先级低
<link rel='preload' href='img/a.svg' as='image'>
<link rel='prefetch' href='css/a.css' as='style'>
预渲染页面
- 大型单页应用的性能瓶颈：JS下载 + 解析 + 执行
- SSR的主要问题：牺牲TTFB来补救First Paint，实现复杂
- Pre-rendering：打包时提前渲染页面，没有服务端参与
WIndowing（窗口化）提高列表性能
- 加载大列表、大表单的每一行严重影响性能
- Lazy loading仍然会让DOM变得过大
- windowing只渲染可见的行，渲染和滚动的性能都会提升
使用骨架屏Skeleton减少布局移动（Layout Shift）
