---
title: 前端性能优化清单
date: 2018-08-02 09:34:51
tags: [性能优化]
categories: web前端
---
# 简介

作为一个前端，总是希望自己做的网站比较酷炫，牛逼。所以它的性能需求就比较强烈，这可以让我在不改变原来的内容的情况下加更多有趣的东西进去。那么我们今天就来聊聊对于开发一个这样的网站，需要遵守的一些原则。

## CSS

### 首屏 CSS 内联

link 标签加载到 html 需要时间，在首屏 css 内容比较少的时候，可以考虑内联到 html 中。

### 减少使用价格昂贵的属性

需要浏览器操作或者计算的属性代价都比较大，涉及的属性有：box-shadow / border-radius / filter / opacity / :nth-child。如果有其他方案可选择，尽量选择其它的方案。

### 优化重排和重绘

FPS 为 60 是用户感觉性能流畅的的最低帧数，也就表示每一帧的渲染时间不能超过 16.67ms。所以有以下操作尽量避免去操作：

#### 减少重排

* 改变 font-size 和 font-family
* 改变元素 margin 和 padding
* 通过 js 改变 css
* 通过 js 获取 DOM 的位置属性
* css 伪类活动
* 重排性能方面可以优先考虑 flex（更快）

#### 减少重绘

visibility / color / background / hover 尽量不要用。使用动画的情况下可以考虑硬件加速和 will-change 来提升动画性能。
> 硬件加速属性：transform / filter / opacity , 新 ： will-change

## 其它

### 1. 减少 DNS 的解析

在页面加载的过程中，DNS 首先会对资源的域名进行解析，这需要耗费一定的时间，所以缩减这个时间对网站的性能有一定的帮助。
> 可以使用 dns-prefetch 进行预解析

### 2. 减少对象

对象加载越少越好，最简单的页面，一个 js 文件，一个 css 文件，一个 html 文件。这在一定程度上加快了网页加载的速度，提升了网站的性能。