跟你们聊一下前端性能怎么优化

过完年了也是一直拖到了如今才有时间补交一下做业，去年出差出了一年，是时候好好沉淀一下了

目录

• 前言
• 设计角度
• UI   角度
• 开发角度

1、前言

我一直对我负责的项目成员讲，项目交付给客户的前提是不卡，以后是对用户的友好度必需要高。由于不管你的项目作的有多好，若是用着卡，用户终究会不承认，你们估计也是深有体会。随着时代节奏加快，人们趋向于快速便捷，容易上手的事物。

一、优质的用户体验

这一点很重要然而又让用户在通常状况下感受不到，在产品界有一句话，最好的用户体验就是让用户没感受，信手拈来。

就你们手机里的app来讲，大多数的用户体验都是极好的，产品团队天天都在维护调研，时时刻刻监测着用户需求的走向。

那么有没有反例呢：

某网购app你好：我买了一款榨汁机，并不表明我须要更多的榨汁机。

相信你也有这种体会，我虽然逛了很长时间为了买台榨汁机，可是在我买了以后，仍是会铺天盖地的给我“智能”推送榨汁机的产品，我看了这些推送产品以后，总会让我纠结。

后悔买内台了，我应该买这台

一种人工智能离咱们愈来愈远的感受。

二、简洁明了的界面

前端发展到如今，大多数客户端都已趋近于扁平化界面，还有不少公司的logo也设计成了扁平化，就是由于简洁明了。

随着显示屏的发展，可视区域能够展现的内容愈来愈多，用户找到本身须要的东西的花费的时间会愈来愈长，因此如何设计简洁明了的界面成为了大势所趋。

若是打开一个网站看几分钟以为刺眼，那么就可能就不够简洁

三、方便快捷的操做流程

这一点也是每一个产品必须考虑的一部，能用两步完成的步骤就不要让用户操做三步，能让用户少点一下是一下，除非你开发的是扫雷。

举个例子：

如今大多数登陆系统，都是注册完直接登陆系统，而后慢慢引导用户完善我的信息，若是反过来的话。注册完，还须要填写一堆我的信息才能登入系统，用户已经在崩溃的边缘了是吧，默默骂着街，你为何要查我户口。

中心思想是简化用户操做

2、设计角度

表面上的性能问题，本质上是用户反馈的体验差

一、数据加载等待

• loading效果
  
  在我看来，每一个请求数据接口，加载loading效果是必不可少的，绝对不可能让用户默默的看着一片空白愣神几秒钟，至少得盯着一个antd的菊花。别说用户了，你家产品经理也受不了。
• 预加载
  
  在开发中，可能会遇到这样的状况。有些资源不须要立刻用到，可是但愿尽早获取，这时候就可使用预加载。
  预加载实际上是声明式的 fetch ，强制浏览器请求资源，而且不会阻塞 onload 事件，可使用如下代码开启预加载
  
  <link rel="preload" href="http://example.com" />
  
  预加载能够必定程度上下降首屏的加载时间，由于能够将一些不影响首屏但重要的文件延后加载，惟一缺点就是兼容性很差。

二、首页加载等待

• 首页单独维护
  
  我曾经作过一个设备商城可下单的系统，首页作的很炫酷，可是身后的管理系统十分庞大，因此会拖延首页加载时间。这时咱们给出了解决方案就是首页单独维护，首页单独用原生html编写，采用双页面应用的结构，让用户访问首页的时候能够秒进，配合系统路由入口处作拦截认证
• 首页加载动画
  
  这个场景也很广泛，这时候就得找一个就算系统加载很慢，可是让用户看3分钟这个加载动画也不会感受到焦虑的效果。例如：
  

• 骨架屏
  
  京东惯用方式，针对一下网速过慢的状况，先弄了个“假”界面。

  

  大概这个样子，减小用户焦虑

三、页面切换过渡

业务跟业务之间切换时候加上过场动画效果，会给用户一种很丝滑的感受，要调试出一种下雨天跟angelababy一块儿吃巧克力的感受。

曾经有个项目中，由于时间比较富裕，也是产品展现类网站，我作了全套的页面切换过渡效果，在项目路由切换的时候封装一层，跳转以前，让当前组件淡出，跳转以后让下一个组件淡入。最终效果很好，无缝衔接。

四、适当的动画效果

每一个项目或多或少都会添加动画效果用来当作操做的过渡，一个很经典的案例，购物车抛物线问题，想当初淘宝天猫的购物车 点击商品右下角购物车图标的时候会有一个圆球，以一条优美的抛物线落在页面右下角购物车tab上，效果很是好，让人忍不住想多买几个产品，就想多看几回动画。极大的提高了用户体验。

3、UI角度

咱们得知道咱们能压榨UI多少资源

一、大型图片

减小像素点 减小每一个像素点可以显示的颜色

• png8
  
  这里我就直接推荐png8质量格式，直接让UI把图片压缩为png8 像素点64便可，而后注意一点，咱们开发时候用的图片都是须要200%大小的，由于须要适配高清屏，可是UI的宗旨呢是越大越高清越好，若是UI给你的图片尺寸大于200%，须要提出图片尺寸的问题。
  
  固然，UI没时间的时候，推荐fireworks，操做及其简单，为前端而生的photoShop。只需几步，UI就会爱上你。

• webp
  
  见怪不怪，刚出webp的时候本身吹的大小缩小了60%，图片效果上没有变化，纯算法压缩。由于兼容性不够好没有流行起来，最近我又查了一下，网上不少跨浏览器兼容解决方案有不少，好比webp.js。已经很好的解决了兼容性问题，能够投入使用。

二、中小型图片

• sprite
  
  北方称 精灵图，南方叫
  雪碧图，经过请求一次大照片，经过background—position定位小图片的位置，节省带宽，一种经久不衰的方式。

• iconfont
  
  很少解释了，感谢iconfont

• base64
  
  这个颇有争议，争议在于多大的图片用base64才好，争论着争论着后来就没人用了。。。，webpack中能够配置多大如下的图片编码成base64打进js中。module中配置的limit为大小控制
  { test: /\.(png|jpg)$/, loader: "url?limit=0" }

• svg
  
  小技巧之：当你用到一张gif的时候，UI能够导成svg格式的给你。我说的是线性的。

三、UI不让动的图片

这种状况也是很常见的，产品渲染图之类的，例如刚出的米酒手机，官网上的海报

这种图片你压缩减小个像素点呐，减小每一个像素点展现的颜色啊，UI不来砍你，TF粉丝也会来砍你，是吧。

这时候果断：“老板，给我拿钱我去买个CDN”。

CDN 内容分发网络，这个我听过一个通俗的例子。

之前买火车票你们都只能去火车站买，后来咱们买火车票就能够在楼下的火车票代售点买了。

你们本身悟一下就懂了。

这里注意一下，注册CDN的帐号用老板的不要用本身的，否则很差离职（我就是）

四、图片渲染

• 懒加载
  
  老生常谈，只加载可视窗口的图片。
• 预加载
  
  新生没谈，提早加载下一个可视窗口的图片，并不是所有，只是下一个可视窗口。作过瀑布流的应该知道。没作过的能够按照这个思路本身探索一下。

4、开发角度

一、选择适合项目成本的架构

为何这么说呢，通常来讲pc站的项目架构对于移动站来讲就显得沉重，越往前追忆越注重这一点，尤为在jquery年代。为了解决此问题，不少框架都会出一款mobile版本、轻量版本。如今的UI框架大多都没有此问，例如antd，打包的时候只会把你引用到的组件打包到文件中，没引用到的组件不会被打包到文件中。bootstrap就正好相反。

我想这也是响应式项目逐渐gg的缘由，并无抗住2G 3G时代，我相信若是5G普及了，移动端项目也不用考虑框架大小的问题了。

然而，成本一说，还有一个比较基础的概念，按照开发周期来讲，理论上开发周期短的项目，咱们采用一些高度封装的开源组件高效完成。缺点就是，高度封装的开源组件引用以后不方便之后需求更新迭代。反之，较长的开发周期是咱们正想要的。

二、下降算法复杂度

我身边大多数人对算法的理解：

没有我两遍循环处理不了的数组！

最终咱们处理1w条数据的时候，底层一些组件render了100w+次，致使浏览器间歇性崩溃。

这种状况首先从组件角度来讲，并无作好拦截render的处理。相似于react的shouldComponentUpdate。

以后则是算法复杂度的问题。并无优化。

就比如最基础的查找算法，你们应该也该了解穷举法和二分法哪个好一些

算法复杂度是指算法在编写成可执行程序后，运行时所须要的资源，资源包括时间资源和内存资源。

这个值得单拿出一篇文章来说，可是我这边暂时直接给出一个如今不少大公司的招人规范，leetcode算法题库，腾讯前端要求leetcode easy难度。你们能够去刷刷题，颇有帮助。

三、按需加载

注意一下：这个并非每一个项目都适合

那么，什么样的项目才适合按需加载呢？

展现类项目，例如小米官网，每次发布一款手机后，我都须要加个菜单，加一个独立的展现类业务。

那么，什么样的项目不适合按需加载呢？

管理系统，系统为一个总体，中间参数串联太狠，本地开发没什么问题，按需打包以后扔到测试环境就各类undefined。

四、数据的预加载

在开发中，可能会遇到这样的状况。有些资源不须要立刻用到，可是但愿尽早获取，这时候就可使用预加载。

预加载实际上是声明式的 fetch ，强制浏览器请求资源，而且不会阻塞 onload 事件，可使用如下代码开启预加载

<link rel="preload" href="http://example.com" />

预加载能够必定程度上下降首屏的加载时间，由于能够将一些不影响首屏但重要的文件延后加载，惟一缺点就是兼容性很差。

还有一种，好比说我有两个tab页签。一般状况，用户点击第二个tab的时候才会去获取数据。其实当用户鼠标放上去的时候就能够获取数据了，点击操做结束后，数据已经请求回来了。这种方式也是很是不错，可是注意一下节流，鼠标来回晃，发起一万个请求，后台会觉得谁攻击服务器了。

五、缓存

资源文件走缓存，见怪不怪，用得好是利器。

个人项目统一，万年不变的文件通通走缓存，放在public中手动加hash，其余src下面的自动hash。

webpack能够配置，能够控制哪些文件加hash，哪些不加，也能够控制哪些文件的hash须要变，哪些不须要变。你们能够了解一下。

END

今年还没安排出差的任务，可是有预感也快了，有人就问了，为何你出差不写文章呢？ 有时间都出去玩了好嘛，哈哈。 沉淀了一波，我这边3月底以前会写4篇文章，分别为

• 《前端性能优化交流》
• 《前端代码质量优化交流》
• 《前端code监控交流》
• 《前端安全问题交流》

沉淀一下去年在开发流程方面的一些知识。 谢谢各位。