49 lines
1.9 KiB
Markdown
49 lines
1.9 KiB
Markdown
---
|
||
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 文件。这在一定程度上加快了网页加载的速度，提升了网站的性能。
|