聊聊关于性能优化（一）

隔了许久都没有更新博客，前一阵子是因为忙其他事去了，现在想写点什么，但是思前想后不知道该写些什么，这是这个系列的第一篇，这篇文章没有干货，只是聊聊关于前端优化，关于5G的到来，关于前端的未来。

关于为什么要优化

前端的大咖们在推动前端届蓬勃发展的同时，越来越多的人能抄起手上的工具（ React、Vue、Angular ）加上各种 CLI 一键生成， 再加上天然的 UI 库（ Antd、Element-UI、iView、Bootstrap ）就能快速构建写出一个用户界面，加上在这个性能过剩的年代，非大厂能够投入人力优化前端性能，大部分网页能加载出来功能没问题就告之大吉，只要不是太 过分 的代码编写，一般来说，电脑端的网页加载也就差个 1~3 秒，更多的则是网络问题。

这么一看，性能优化仿佛不是那么重要，但是由于前端圈的蓬勃发展，越来越多的功能实现放置在前端页面上，现代的网站拥有比以往多很多的功能，页面数量都是几倍的增长，甚至该网站是这个企业的核心业务，尤其是这几年移动设备的爆发式发展，如果这么多的功能放置在移动端时，轻微的性能问题可能只会导致轻微的延迟、等待，仅仅会给用户带来短暂的不便，但是严重的性能问题就会导致用户无法访问或者无法响应用户的动作之类，很多人意识到这个问题，可惜的是，大部分网站都将这个原因归结于网络条件不好或者用户设备太差，从而忽略真正的前端性能的优化。

对于一般网站来说，用户进入浏览，关心的是自己的用户体验、网页浏览舒适度，他们很大一部分并不关心网络和设备问题，有很多数据表明，一个网站的舒适度决定了用户的去留。

对不起，我真的不想等（优化和用户去留的关系）

我们希望我们所构建的页面能和用户进行互动，而不是呆板的纯静态页面，一个可交互的页面可以留存很多的用户。

如果我们构建的是博客，我们希望用户能顺畅的读完博文，并给予点评。

如果我们构建的是商城系统，我们希望用户能快速精准的定位到需要购买的商品。

如果我们构建的是社交系统，我们希望用户能快速找到对应的人并进行彼此的互动。

而这一切，差异化是一条出路，但是差异化很容易就被抄袭、模仿，企业更多的这是面对同质化的红海竞争，与此同时，性能扮演着至关重要的角色。

有几组数据来表明性能优化与用户留存的关系：

根据 DoubleClick by Google 更多研究，如果一个网站加载时间越短，优势越大。

根据大量测试发现，同一个页面，加载时间 19 秒和加载时间 5 秒是两种截然不同的结果，加载在 5 秒之内的网站，用户浏览率增长 70%，流失率下降 35%，广告可见率提升 25%。

大家可以使用 Speed Scorecard 工具进行移动网站的加载速度测试，由于没有中国大陆节点，大家移步至香港节点进行测试。

以下是我对一些常用网站4G加载的测试：

高优化和收入的关系

从上一小节可以看出来，一个好的优化可以提升用户的转化率，反之流失率会大大增加。

下面一些小栗子显示了一些优化对收入的影响：

用户体验的哲学

关于加载速度

当用户在用移动设备访问某一个网站时，由于各种外在条件的因素（网速、设备硬件条件），打开同一网站的效果可能截然不同（某锤官网）：

然而，实际情况下，由于地理位置、人流量等环境因素，很少有移动设备能满速 5MB 的下载。

而用户体验的基础是在于已经看到显示的内容，在此之前就谈不上用户体验，如果网络较快可能还好点，如果网速不好，用户就不得不等待，还可能会遇到各种各样的问题，例如，JS 加载不完整导致点击事件无效等。
全部加载完毕之后的某锤网站使用感觉还可以，我们来看一下此次加载了多少 JS 资源：

居然有一个 JS 文件达到了 2.3MB，这显然是不合理的，纵使网站优化再好，加载很慢就会导致用户的不耐烦。

关于代码优化

得益于现在移动端 CPU 的高速发展，甚至有些媲美桌面端处理器，但是用户不可能一直手持最新设备，所有现在不要高估了移动端的处理器，其计算能力和内存大小依旧有限。

一些未经优化的代码，我们在 Chrome 下调试可能没觉得有差，但是到移动设备上时，就会出现各种各样的问题，当问题多到一定程度时，用户必然忍受不了，将其抛弃。

利用 Google 提供的 Lighthouse 插件，我们可以直观的分析一个网站的优劣，以及优化点，让我们有方向的去改进：

嗯，再看看我们的掘金（还是挺不错滴）：

优化关乎用户成本

这是一个最好的时代，所有的一切都在迅速发展；这是一个最坏的时代，渐渐地越来越多的人们跟不上时代的步伐（比如我们的父母，哎）。

未来一定是移动的世界。

根据 statcounter 统计，全球范围内，移动端设备占据了较大比例，这一比例在中国更大，甚至占到了 70%-80%，我们要记住，绝大多数用户都是通过 LTE、4G、3G 访问网络，在 2017 年，Ben Schwarz做出真实网络与优化的调查：Beyond the Bubble: Real world performance 显示，愈加成熟的网络建设背后，用户数据流量的成本正在逐渐下滑，到了 5G 时代又是另一番景象，这个我们下面再讨论。这一现象表明，几乎任何用户都可以廉价的访问网络，在这个互通互联的时代，网络几乎成为我们生活的必需品。

另一研究表明，从 2011 年起，网站页面数量就开始稳步增长，其中移动端的 URL 总数甚至超过了桌面端，更多统计数据点击 这里 查看：

上图统计发现，2011 年起，网站页面数量就开始稳步增长，尤其是近几年，得益于移动端的爆发式增长，桌面端也配套了对应的页面，但是增速仍然低于移动端。

这一趋势发展下去，意味着我们需要花费更多的流量（貌似现在已经是这样了）。

关于如何优化

性能优化并不是一件很难得事，但也绝对不轻松，做到以下几点便提升性能，这次没有具体的实施细节，只有一些建议。

关于资源的加载

构建一个高性能高效的 WEBAPP 最为有效的一个注意点就是，检查用户在进入页面时，到底加载了多少有效的资源，又加载了多少无效的资源。尽管我们可以从 Chrome DevTools 的 Network 面板查看所有已加载的资源，但是如果开发者从未关注过，不知该如何下手，可以看看以下几个意见：

关于资源的传输

关于资源的大小

关于 5G 的到来

什么是 5G ？

写下这篇文章的时候，第一批支持 5G 的手机已经发布了。

在实验室测试结果上看，5G 的速度是 4G 的 65000 倍，能够直接实时传输 4K 流媒体，同时，5G 网络将具有接近零延迟。4G 的平均延迟 50 毫秒，当切割到 5G 后，只有 1 毫秒，这是 GSMA 设定的基准。

5G 的来临能改变很多行业，例如，视频直播互动，云，虚拟现实、增强现实，前端等行业，同时同等流量下的资费肯定愈发变低，带宽问题也可能不再是问题了。

随着技术的升级，HTTP2 也一定会越来越普遍，文件大小和数量可能不再是问题，以后优化的重点可能就是对应于浏览器（客户端）的优化，如何提升用户的使用体验可能是那个时候最重要的吧。

由于传输技术的巨大升级，一些很酷的客户端技术未来将可能在前端实现，随用随访问，比如 CAD 制图，power bi 等。

浏览器的地位将越来越重要。

目前来说，4G 的带宽已经足够，5G 的到来也只是加快了资源加载速度，最终阻碍 WebApp 的还是用户体验的问题，是有限的显示效果，不流畅的滑动，Native 硬件支持不完善，底下的性能等等，才是最重要的原因。

关于前端的未来

这几年前端层出不穷的框架技术让人有一种学不动的感觉，但是这大多是都是围绕着浏览器而进行的。

在我看来，其实就分两个端，客户端和服务端。一个和用户打交道，一个和服务器打交道而已。

真正让人兴奋不已的技术革新，Flutter、RN、WebAssembly、PWA 等技术让人眼前一亮； nodeJS 包揽后端一部分功能，让人心花怒放； 小程序 这种于 APP 之内的微小应用即用即开的能力。

未来

总之，前端的路是光明的。

转载于:https://www.cnblogs.com/liangyin/p/10875915.html