前端性能优化

前段时间项目中遇到性能相关的问题，用户反馈网页首屏加载时间过慢，操作点击反应迟钝，组内优化了一个星期，终于改善了很多，总结了几个比较重要的点

一、减少HTTP请求

        改善响应时间最简单的途径就是减少HTTP请求的数量。

        项目在首页的时候加载了太多的接口，真正的接口其实是有利有弊的，我们项目是react+redux的，首页加载的时候，把一些数据存在store里，后面直接从store里拿就行了，我们主要把一些使用量小的接口去掉，在用的时候再去请求接口。

        另外一个就是图片合并，减少HTTP请求，假设导航栏上有五幅图片，点击每张图片都会进入一个链接，这样五张导航的图片在加载时会产生5个HTTP请求。然而，使用一个图片地图可以提高效率，这样就只需要一个HTTP请求。但是有些小的图片是直接打包到js文件中的，这个时候就不需要合并图片了，需要的话可以使用webpack中的插件webpack-spritesmith，详细可查看https://github.com/mixtur/webpack-spritesmith。

二、使用CDN

       如果应用程序web服务器离用户更近，那么一个HTTP请求的响应时间将缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。

       CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如，CDN可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器。

       CDN还可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和Web流量峰值压力。

      CDN的缺点：

             1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。

             2、如果CDN服务质量下降了，那么你的工作质量也将下降

             3、无法直接控制组件服务器

       在我们项目中应用的是将前端静态资源，拷贝到一个文件中，放到CDN服务中，在index.html中更改文件的引用。

       因为我们CDN是测试环境没办法访问，就配置了两个入口， webpack里的默认配置是index.html, 在development模式下，配置start.html去覆盖默认的文件。

new HtmlWebpackPlugin({
    template: `${__dirname}/html/index.html`, //源html
    inject: 'body', //注入到哪里
    filename: 'index.html', //输出后的名称
    hash: true, //为静态资源生成hash值
    showErrors:true,
  }),

development: [].concat(
    new HtmlWebpackPlugin({
      template: `${__dirname}/html/start.html`, //源html
      inject: 'body', //注入到哪里
      filename: 'index.html', //输出后的名称
      hash: true, //为静态资源生成hash值
      showErrors:true,
    }),...})

 

三、将样式表放在头部    js文件放在底部

       这两个对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。

       我们总是希望页面能够尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来说是很重要的。

       将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的行为：如果样式表仍在加载，构建呈现树就是一种浪费，因为所有样式表加载解析完毕之前务虚会之任何东西

        js的下载和执行会阻塞Dom树的构建（严谨地说是中断了Dom树的更新），所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。下载脚本时并行下载是被禁用的——即使使用了不同的主机名，也不会启用其他的下载。因为脚本可能修改页面内容，因此浏览器会等待；另外，也是为了保证脚本能够按照正确的顺序执行，因为后面的脚本可能与前面的脚本存在依赖关系，不按照顺序执行可能会产生错误。

四、JS 和css的精简 组件的优化

       这些就是项目中细节，在渲染的时候不要使用行内样式，以及js的使用规范等等。看实际项目，我们使用了一个antd的table,z自己封装了一个可拖拽的表格，在每个用到Dtable的页面都进行了很多计算，这样，每次渲染都会从父组件传到子组件遍历DOM树，效率就很低，后面把所有公共的计算都直接放到最终使用的那个组件上，有些参数都放在子组件内部进行赋值计算，优化一波之后，表格的操作速度也提高了不少。

借鉴：https://www.cnblogs.com/MarcoHan/p/5295398.html