前端性能优化总结

概述

如今的前端开发已经从严重依赖后端演变成了node做中间层，MVVM框架进行服务端渲染做view层。性能优化也变得异常重要，我主要对以下几个方面做了几个总结：

1. performance面板。
2. 雅虎军规。
3. 首屏性能优化。
4. html，css和js的性能优化。
5. PC，移动端和服务端的性能优化。
6. react和vue框架的性能优化。
7. 前端工业化的性能优化。

虽然做不到面面俱到，但是过一段时间之后在看，也许会有不一样的体会呢~

performance面板

如何查看前端页面的性能？

1. 在chrome浏览器端可以打开开发者工具，查看performance面板，然后点击'Start profiling and reload page'就可以重载页面，然后显示页面性能了。
2. 如果是react，可以安装'react-devtools'查看各个组件的渲染情况；还可以安装'redux-devtools-extension'查看redux的数据流动情况。

雅虎军规

雅虎军规是业界最知名的性能优化指南，虽然有些已经不适用了，但是有很多条直到现在仍然很有参考价值的，非常适合一条条对着优化。

1.尽量减少 HTTP 请求个数——须权衡
2.使用 CDN（内容分发网络）
3.为文件头指定 Expires 或 Cache-Control ，使内容具有缓存性。
4.避免空的 src 和 href
5.使用 gzip 压缩内容
6.把 CSS 放到顶部
7.把 JS 放到底部
8.避免使用 CSS 表达式
9.将 CSS 和 JS 放到外部文件中
10.减少 DNS 查找次数
11.精简 CSS 和 JS
12.避免跳转
13.剔除重复的 JS 和 CSS
14.配置 ETags
15.使 AJAX 可缓存
16.尽早刷新输出缓冲
17.使用 GET 来完成 AJAX 请求
18.延迟加载
19.预加载
20.减少 DOM 元素个数
21.根据域名划分页面内容
22.尽量减少 iframe 的个数
23.避免 404
24.减少 Cookie 的大小
25.使用无 cookie 的域
26.减少 DOM 访问
27.开发智能事件处理程序
28.用 <link> 代替 @import
29.避免使用滤镜
30.优化图像
31.优化 CSS Spirite
32.不要在 HTML 中缩放图像——须权衡
33.favicon.ico要小而且可缓存
34.保持单个内容小于25K
35.打包组件成复合文本

首屏性能优化

首屏加载时间非常重要，严重影响用户的跳出率。下面是我总结的除了雅虎军规之外的首屏性能优化方案：

1. 把首屏用到的background-image里面的图片放到display: none的img里面进行预加载。
2. 必要的时候，把首屏css和js内嵌到html里面去。
3. 首屏的一些必要的数据js请求提前。

html，css和js的性能优化

除了雅虎军规，在html，css和js方面还有以下性能优化方法：

1. 在html里面对常用到的http请求host进行dns prefetch，设置dns预解析。
2. css里面用transform代替left或者top做动画。
3. 使用css3动画时开启GPU加速。
4. 不要用settimeout或者setinterval做动画，用requestAnimatinFrame。
5. 同步js请求编程异步js请求。
6. 对js使用混淆。
7. 必要时利用service worker。

PC，移动端和服务端的性能优化

除了雅虎军规，在PC，移动端和服务端方面还有以下性能优化方法：

1. 使用canvas做动画。
2. 图片进行懒加载或者延迟加载。
3. 尽量使用事件代理，避免使用事件绑定。
4. 对于多次http请求的数据，用localStorage或者sessionStorage进行缓存。
5. 移动端使用touchstart代替click。
6. 在服务端对图片，视频使用cdn加速，对css和js使用缓存，在前端给对应资源打上hash码或者md5码。

react和vue框架的性能优化

在MVVM框架比如react或者vue框架方面，有如下性能优化方法：

1. react的叶子节点使用纯函数组件，中间节点使用pure组件，必要的时候才使用类组件。
2. 使用reselect对action进行缓存。
3. 不要用{{}}方式直接定义object，而是用一个变量进行缓存。

前端工业化的性能优化

在前端工业化方面，也有一些性能优化方法：

1. 使用服务端渲染。
2. 对ui框架使用按需加载。
3. 把打包后大的js文件分成多个，不同的页面进行按需加载。
4. 使用gzip压缩。