前端性能优化总结（面试向）

概述

现在的前端开发已经从严重依赖后端演变成了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压缩。