性能优化清单

source/_posts/前端性能优化清单.md

@@ -0,0 +1,48 @@
+---
+title: 前端性能优化清单
+date: 2018-08-02 09:34:51
+tags: [性能优化]
+categories: 前端
+---
+# 简介
+
+作为一个前端，总是希望自己做的网站比较酷炫，牛逼。所以它的性能需求就比较强烈，这可以让我在不改变原来的内容的情况下加更多有趣的东西进去。那么我们今天就来聊聊对于开发一个这样的网站，需要遵守的一些原则。
+
+## 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 文件。这在一定程度上加快了网页加载的速度，提升了网站的性能。