刘文柱

# 优化方案初探

# 从PNG到IconFont

  • 多个图表 -> 一套字体，减少获取时的请求数量和体积

  • 矢量图形，可伸缩

  • 直接通过CSS修改样式（颜色，大小等）

# 从IconFont到SVG

  • 保持了图片能力，支持多色彩

  • 独立的矢量图形

  • XML雨大，搜索引擎SEO和无障碍读屏软件读取

# Flexbox优化布局

# Flexbox的优势

  • 更高性能的实现方案

  • 容器有能力决定子元素的大小、顺序、对齐、间隔等

# 优化资源加载顺序

  • preload:提前加载较晚出现，但对当前页面非常重要的资源

  • prefetch：提前加载后继路由需要的资源，优先级低

# preload

Preload 来告诉浏览器预先请求当前页需要的资源，从而提高这些资源的请求优先级。比如,对于那些本来请求优先级较低的关键请求,我们可以通过设置 Preload 来提升这些请求的优先级。合理的安排优先级可以提升网站的性能,比如我们可以优先字体资源的下载

# prefetch

Prefetch 来告诉浏览器用户将来可能在其他页面(非本页面)可能使用到的资源,那么浏览器会在空闲时,就去预先加载这些资源放在 http 缓存,最常见的 dns-prefetch.

从加载优先级上看,Preload 会提升请求优先级;而Prefetch会把资源的优先级放在最低，当浏览器空闲时才去预加载。

# 预渲染

如果觉得 SSR 或者同构方案成本太大,可以考虑使用 预渲染,使用也是非常简单 react-snap (opens new window)

# 预渲染的作用

  • 大型单页应用的性能评级鞥：JS下载+解析+执行

  • SSR的主要问题：牺牲TTFB来不就First Paint;实现复杂

  • Pre-rendering 打包时提前渲染页面，没有服务端参与

# windowing（窗口化）提高列表性能

在遇到大量的列表渲染时,我们可以使用窗口化技术,在一定的区域内只显示一定的DOM元素,提高列表性能。 比较成熟的有 React-virtualized ,这里强烈推荐 react-window (opens new window),配合 AutoSize (opens new window)

# 使用骨架组件

骨架屏可以理解为是当数据还未加载进来前，页面的一个空白版本，使用骨架屏进行预先的占位,降低了用户的焦躁情绪，使得加载过程主观上变得流畅。在这里推荐使用 react-placehold (opens new window),也可以按照自己的布局进行自定义

# 首屏优化

# 分析

  • Web增量加载的特性决定了首屏性能不会完美

  • 过长的白屏影响用户体验和留存

  • 首屏（above the fold） -> 初次印象

# 主要分为

  • css,js 文件获取 阻塞
  • js 文件解析
  • dom 生成
  • cssom 生成

# 优化

# 资源体积太大？

资源压缩、传输压缩、代码拆分，Tree shaking, HTTP/2，缓存

# 首页内容太多？

路由/组件/内容 lazy-loading ，预渲染/SSR， Inline CSS

# 加载顺序不合适？

prefetch,preload

← 基本类型属性 →