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

title	date	tags	categories
前端性能优化清单	2018-08-02 09:34:51	性能优化	前端

简介

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

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