前端性能优化概述

前言

性能优化是一个让人很纠结的话题，每一个前端工程师都知道前端性能优化是很重要都一个环节。但是它涉及到的知识太过分散，很难系统学习，落到实践中更是碰到问题才去解决问题，很少去系统的、全局的去做性能优化。

本文会先概述一下前端性能优化要做哪些事情，之后几篇文章会系统的分析我们具体要怎么做、为什么要这样做以及这样做实践的效果如何。

一、目标

要做一件事情我们首先得知道这件事情的主体对象是什么，也就是目标对象是什么。那前端性能优化的目标是什么呢，目标是如何让用户更快的看到网页，进入网页后操作更加流畅顺滑。

既然目标是让用户更快的看到网页内容，那我们从我们输入网址到看到页面到底是一个什么过程呢？一个经典面试题是：

从输入 URL 到页面加载完成，发生了什么？

大概的过程是：将URL转化为IP(DNS服务)，然后根据IP地址与相应服务器（有可能是集群）建立TCP链接，连接完成后发起http请求获取资源，获取到资源后交给浏览器渲染处理。

总结如下：

• DNS服务

• TCP连接

• http请求

• 服务处理请求

• http响应返回资源

• 浏览器处理资源渲染页面

其中DNS服务、TCP连接不是前端优化主要内容，运维工程师更擅长，我们需要处理的是http请求、服务处理、http响应返回资源、浏览器处理资源渲染页面。

针对以上几个维度我们后面文章会有详细分析，在此之前我们先概述一下有哪些常用的优化方向：

• http请求：避免使用重定向；

• 服务处理请求：1、缩短服务器响应用时；2、静态资源存放CDN

• http响应返回资源： 1、启用压缩功能；2、缩减资源大小；3、优化图片；4、服务器缓存

• 浏览器处理资源渲染页面：1、优化CSS发送过程；2、优先加载可见内容；3、移除会阻止内容呈现的 JavaScript

二、常用优化方向

• 避免使用重定向

什么叫重定向？

常见重定向例子

example.com/home → www.example.com → m.example.com → m.example.com/home  

重定向会触发额外的 HTTP 请求-响应周期，并会拖慢网页呈现速度。在最好的情况下，每个重定向都会添加一次往返（HTTP 请求-响应）；而在最坏的情况下，除了额外的 HTTP 请求-响应周期外，它还可能会让更多次的往返执行 DNS 查找、TCP 握手和 TLS 协商

• 缩短服务器响应用时

这个运维工程师或者后端工程师更加擅长，涉及因素较多，这里不做讨论

• 静态资源存放CDN

CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

• 启用压缩功能

所有现代浏览器都支持 gzip 压缩并会为所有 HTTP 请求自动协商此类压缩。启用 gzip 压缩可大幅缩减所传输的响应的大小（最多可缩减 90%），从而显著缩短下载相应资源所需的时间、减少客户端的流量消耗并加快网页的首次呈现速度。

启动gzip压缩需要在服务器端配置，具体服务器配置方法不一样，可以参考相应文档。

下图是压缩和没有压缩文档大小的对比

gzip

• 缩减资源大小

这个是前端工程师主要方向也是重点方向，缩减大小是指在不影响浏览器处理资源的情况下移除冗余/不必要的数据（例如代码注释和格式设置）、移除未使用的代码、缩短变量和函数名称。

可以采用webpack做打包工具，webpack有很多插件能对html（HTMLMinifier）,css（minifyCss）,js(minifyJS)进行资源压缩。

关于缩减资源能讲对面非常多（预加载、懒加载、分包、公共文件提取等等）可以参考下（React资源性能优化）

• 优化图片

可以先参考下前端性能优化之图片优化,
Google官方的最佳实践中关于图片优化有下面这样一段描述：

对于网页来说，在所下载的字节数中，图片往往会占很大比例。因此，优化图片通常可以卓有成效地减少字节数和改进性能：浏览器需要下载的字节数越少，对客户端带宽的争用就越少，浏览器下载内容并在屏幕上呈现内容的速度就越快。

• 优先加载可见内容

首屏的加载速度，直接影响到用户的使用体验，也是我们做性能优化的主要方向，主要方式有

• 1、尽量减少非必要请求；
• 2、非必要资源设为异步加载或者延迟加载；
• 3、调整加载顺序，确定首屏资源优先加载；

启用浏览器缓存（cache）

浏览器缓存是提升非首次加载速度的最佳方式，网络请求资源永远没有缓存高效。每一个资源都应指定一种明确的缓存政策。
指定该资源是否可被缓存、可由谁缓存、可缓存多长时间。