2019前端性能优化方案目录

2019前端性能优化方案目录

?前言

前端性能优化是个老生常谈的话题，基本入职两三年的程序员面试都会遇到这个问题。各个项目虽有不同，但思路相差不多。本文是对之前项目的前端性能优化做一个梳理，同时也希望能对社区的朋友有所帮助。

项目现状

目前做的项目（一款可视化平台，如果有了解过飞冰和稿定，大概比这两个要复杂一个层级）十分庞大且复杂，前端被分为10几个工程，又分为开发态和运行态，相互通过软链接依赖，总共将近200万行代码，分为两期，一期交接后用户才开始使用，这期间暴露了很多问题，其中就包括性能上的问题。

问题：

打开控制台，将network中的Online切换为Fast3G,点击控制台的Performance，点击刷新按钮，观测白屏时间，普通页面打开白屏时间需要5s,复杂页面需要14s

• 白屏时间： 地址栏输入网址后回车 - 浏览器出现第一个元素
• 首屏时间： 地址栏输入网址后回车 - 浏览器第一屏渲染完成

分析

• 编译的框架包太大
• 框架初始加载数据过多，逻辑繁琐
• 初始化加载了所有资源
• 服务端返回数据过于庞大且冗余
• 前端没有使用服务缓存

方案

1. 初始化页面加loding图

这其实没有优化加载时间，但是提升了用户体验。

2. 减少http请求和冗余数据

前端在初始化编辑窗口时分别通过了4个接口请求了不同资源。通过和后端协商将4个接口改为一个接口，同时对返回的数据进行删减，只返回前端使用到的数据。

3. 组件，路由懒加载

拆分页面。分担加载压力

4. 配置nginx优化

• 压缩文件
  开启gzip 可以在vue-cli2脚手架中把config/index.js 中的productionGzip设置为true

  location 
      { 
          gzip on;   //开启压缩
          gzip_typestext/htmltext/plaintext/css;  //指定需要压缩的文件类型，默认为text/html
          gzip_min_length 512;  //需要进行压缩的最小文件大小（单位字节)
      }
  

• 优化缓存分配
  nginx使用缓存存储请求和返回数据，优化缓存分配可以节约内存空间以及减少cpu的使用。可以将常用的js，CSS和和图片设置在浏览器本地长时间缓存，这样用户第一次打开页面后，会在本地缓存上述内容，提高了以后打开的页面加载速度，节省服务端大量带宽。

• 配置白名单

5. 优化wepack打包机制

使用插件件webpack-bundle-analyzer查看项目所有包及体积大小

• 精简打包代码,压缩代码
  purifyCS打包优化去重去无效代码
  UglifyJsPlugin对js文件进行压缩，从而减小js文件的大小，加速load速度。 注意此插件会拖慢webpack的编译速度，建议在开发阶段将其关闭，部署的时候再开启。
  Tree Shaking 删除没用到的代码。这样的功能对于构建大型应用时是非常好的
• 依赖按需引入 去除冗余依赖
  如：iview ui采用按需引入
• 代码分包
• 去除非必要文件

6.使用CDN

CDN主要功能是在不同的地点缓存内容，通过负载均衡技术，将用户的请求定向到最合适的缓存服务器上去获取内容

7.预渲染

预渲染相对于SSR比较简单，预渲染可以极大的提高网页访问速度。无需服务器实时动态编译，采用预渲染，在构建时针对特定路由简单的生成静态HTML文件
使用prerender-spa-plugin 插件

8.ssr

客户端渲染：
又称为前端渲染，起源于js的兴起，ajax让前端渲染更加成熟，前端专注于ui，后端专注于逻辑，真正意义上实现了前后端的分离，通过约定好的API来交互，后端提供数据，前端根据数据生成DOM插入HTML页面。初次渲染大都是将原html中的数据标记{{}}替换，鼠标右击查看源码，页面代码不可以在源代码中看到，性能消耗在客户端

优点：减少服务器压力，可以实现局部刷新，无需每次都请求完整的页面，体验更好
缺点：前端耗时较多，首屏渲染慢，渲染前要下载一堆js和css文件，不利于SEO，爬虫看不到完整的代码

服务端渲染：
又称为后端渲染，服务器端在返回html之前，在html特定的区域特定的符号里用数据填充，再给客户端，客户端只负责解析HTML。鼠标右击点击查看源码时，页面代码可以在源代码中看到。性能消耗在服务器端，用户达到一定程度的时候，后端会考虑缓存部分数据，避免消耗过多的资源重复渲染。

优点：前端耗时少，首次渲染快，更快的内容到达时间,利于SEO
缺点：网络传输数据量大，占用部分服务器运算资源,用户体验差,不容易维护，前端修改部分html/css后端也要改

9.图片转base64

wepack中的url-loader对未设置或者小于limi设置的图片进行转换，以base64的格式被img的src所使用；而对于大于limit byte的图片用file-loader进行解析。

10.后台分布式部署，负载均衡

结语

以上是最常见的前端优化方案，更多细节没有写上，可参考其他文章，每一个点延伸都能做为一篇单独的文章去深入了解，本文仅作为一个参考目录。