# 性能优化

# 性能优化指标

# 白屏时间

# 首屏时间

# 整页时间

# DNS 时间

# CPU 占用率

# 从文件方面

# CSS

# 内容可见性（content-visibility）

# 减少渲染阻塞时间

通过添加media属性附加媒体查询，告诉浏览器何时应用样式表。当浏览器看到一个它知道只会用于特定场景的样式表时，它仍会下载样式，但不会阻塞渲染。

<!-- style.css contains only the minimal styles needed for the page rendering -->
<link rel="stylesheet" href="styles.css" media="all" />

<!-- Following stylesheets have only the styles necessary for the form factor -->
<link rel="stylesheet" href="sm.css" media="(min-width: 20em)" />
<link rel="stylesheet" href="md.css" media="(min-width: 64em)" />
<link rel="stylesheet" href="lg.css" media="(min-width: 90em)" />
<link rel="stylesheet" href="ex.css" media="(min-width: 120em)" />
<link rel="stylesheet" href="print.css" media="print" />

# 避免@import导入多个CSS文件

@import是阻塞调用，与使用 @import 相比，我们可以通过多个 link 来实现同样的功能，但性能要好得多，因为它允许我们并行加载样式表。

# 开启GPU渲染动画

将元素提升为图层（也称为合成）时，动画转换属性将在GPU中完成，从而改善性能，尤其是在移动设备上。合成的属性包括 3D transforms (transform: translateZ(), rotate3d()，等)，animating， transform 和 opacity, position: fixed，will-change，和 filter。

# 合理使用will-change

# contain，让元素独立于文档树

# font-display解决布局偏移

# JS

# 从层次方面

# 网络层

# 构建策略

# 缩减构建范围

配置loader或者plugin的时候，排除「node_modules」文件夹

export default {
    // ...
    module: {
        rules: [{
            exclude: /node_modules/,
            include: /src/,
            test: /\.js$/,
            use: "babel-loader"
        }]
    }
};

# 多线程构建

使用thread-loader开启多线程构建（适合大型项目）