项目性能优化

问题列表

初始阶段->加载优化

1. 首页加载慢的优化I
2. 优化图片的做法
3. 实现Webpack打包优化
4. 实现CDN加速
   **

运行阶段>渲染优化

**

1. 渲染十万条数据如何不造成卡顿

问题详解

初始阶段

1.首页加载慢的优化
问题分析

●首页加载图片过多

●首页的请求量过多

●首页请求的静态资源(HTML、 CSS、JS、图…)过大

结论: 所有加载慢的问题最终都可以归纳成两个问题多和大。

首页加载图片过多

1、可以通过懒加载的方式来减少首屏图片的加载量 (利用框架实现懒加载)

  懒加载原理就是监听滚动条事件，如果(滚动条距离浏览器顶部的高度===图片距离顶部的高度)， 
  那么就将data-src的值赋值到src上。

2、小图标很多的情况使用

1.对于纯色系小图标可以使用iconfont来解决

  设置font-family的CSS属性

2.对于一些彩色的小图片可以使用雪碧图

  把所有小图片拼接到一张大图片上   并使用background-position的CSS属性来修改图片坐标

资源请求过多

一、可以通过减少资源的请求量
.通过nginx服务器(可用来做CDN,用来处理静态资源)来做资源文件合井combo -将多个JavaScript、CSS文件合并成一个。扩展:日常企业项目中服务器按照功能区分:

  1、应用服务器:服务端语言运行的服务器Java, Nod...) 放淘宝应用的位
  2、数据库服务器:放数据库的服务器
  3、存储服务器:放大型文件的服务器(例如各种网盘)
  4、CDN服务器:放静态资源的服务器US, CSS, 图片,字体..)

通过打包工具(Webpack) 来做资源文件的物理打包(相对没有第一 种灵活)

二、除了从资源层面来解决问题，还可以从我们自己写的代码本身来考虑。

1.对于引入的一些比较大型的第三方库，比如组件库(antd, element-ui) ，函数库(lodash) 等，
务必设定按需加载。  Tips: 一般都是用Babel插件来实现的

2.可以通过前端路由懒加载的方式(只限于SPA应用)

。使用React lazy进行动态路由的加载(React 16.6以上版本才可以使用React lazy)
。演示React lazy的使用