前端优化方案大全，这个男人太细了！！！

减少页面重绘(repaint)和回流(reflow)

回流：计算可见节点的位置和几何信息；
重绘：重新绘制节点，将渲染树的每个节点都转换为屏幕上的实际像素。

---

方式1： 尽量不要使用 css 属性简写，如：用border-width, border-style, border-color代替border。这样可以最小化重绘(repaint)和回流(reflow)

方式2：隐藏元素，应用修改，重新显示
这个会在展示和隐藏节点的时候，产生两次重绘

function appendDataToElement(appendToElement, data) {
    
    
    let li;
    for (let i = 0; i < data.length; i++) {
    
    
        li = document.createElement('li');
        li.textContent = 'text';
        appendToElement.appendChild(li);
    }
}
const ul = document.getElementById('list');
ul.style.display = 'none';
appendDataToElement(ul, data);
ul.style.display = 'block';

方式3：使用文档片段(document fragment)在当前DOM之外构建一个子树，再把它拷贝回文档

 const ul = document.getElementById('list');
 const fragment = document.createDocumentFragment();
 appendDataToElement(fragment, data);
 ul.appendChild(fragment);

方式4：将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素。

const ul = document.getElementById('list');
const clone = ul.cloneNode(true);
appendDataToElement(clone, data);
ul.parentNode.replaceChild(clone, ul);

SSR服务端渲染

渲染过程在服务器端完成，最终的渲染结果 HTML 页面通过 HTTP 协议发送给客户端，又被认为是‘同构’或‘通用’，如果你的项目有大量的detail页面，相互特别频繁，建议选择服务端渲染。
服务端渲染(SSR)除了SEO还有很多时候用作首屏优化，加快首屏速度，提高用户体验。但是对服务器有要求，网络传输数据量大，占用部分服务器运算资源。
可以看我另一篇文章现有Vue项目改造SSR（简单上手）

开启gzip压缩

vue 项目开启gzip压缩和部署nginx 开启gzip
第一步，在vue项目中安装依赖并将productionGzip改为true，开启Gzip压缩：
npm install --save-dev compression-webpack-plugin

第二步，运行 npm run build打包项目，这时可能会报错，提示ValidationError: Compression Plugin Invalid Options。根据官网提示，需要将CompressionWebpackPlugin的设置由asset改为filename。


第三步，npm run build打包项目，生成.gz文件即为成功

组件按需引入，组件异步加载，路由懒加载

 () => import('@/pages/modules/train/common/searchPage'),
resolve => require(['@/pages/modules/train/common/searchPage'], resolve), 

图片压缩，图片分割，精灵图

1.图片压缩

开发中比较重要的一个环节，我司自己的图床工具是自带压缩功能的，压缩后直接上传到CDN上。
如果公司没有图床工具，我们该如何压缩图片呢？我推荐几种我常用的方式
智图压缩 (百度很难搜到官网了，免费、批量、好用)
tinypng(免费、批量、速度块)
fireworks工具压缩像素点和尺寸 (自己动手，掌握尺度)
找UI压缩后发给你

图片压缩是常用的手法，因为设备像素点的关系，UI给予的图片一般都是 x2，x4的，所以压缩就非常有必要。

2.图片分割

如果页面中有一张效果图，比如真机渲染图，UI手拿着刀不让你压缩。这时候不妨考虑一下分割图片。
建议单张土图片的大小不要超过100k，我们在分割完图片后，通过布局再拼接在一起。可以图片加载效率。
这里注意一点，分割后的每张图片一定要给height，否则网速慢的情况下样式会塌陷。

3. 精灵图

所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。
其实说白了就是将精灵图设为一个大背景，然后通过background-position来移动背景图，从而显示出我们想要显示出来的部分。

扫描二维码关注公众号，回复： 13230512 查看本文章

精灵图虽然实现了缓解服务器压力以及用户体验等问题，但还是有一个很大的不足，那就是牵一发而动全身。这些图片的背景都是我们详细测量而得出来的，如果需要改动页面，将会是很麻烦的一项工作。

CDN内容分发

静态文件，音频，视频，js资源，图片等都可以放CDN上。那么为什么用CDN会让资源加载变快呢？
举个简单的例子：
以前买火车票大家都只能去火车站买，后来我们买火车票就可以在楼下的火车票代售点买了。
所以静态资源度建议放在CDN上，可以加快资源加载的速度。

web worker

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
合理实用web worker可以优化复杂计算任务。这里直接抛阮一峰的入门文章：传送门

缓存

缓存的原理就是更快读写的存储介质+减少IO+减少CPU计算=性能优化。而性能优化的第一定律就是：优先考虑使用缓存。

缓存的主要手段有：浏览器缓存、CDN、反向代理、本地缓存、分布式缓存、数据库缓存。

Ajax可缓存

Ajax在发送的数据成功后，为了提高页面的响应速度和用户体验，会把请求的URL和返回的响应结果保存在缓存内，当下一次调用Ajax发送相同的请求（URL和参数完全相同）时，它就会直接从缓存中拿数据。
在进行Ajax请求的时候，可以选择尽量使用get方法，这样可以使用客户端的缓存，提高请求速度。

资源预加载Resource Hints

Resource Hints(资源预加载)是非常好的一种性能优化方法，可以大大降低页面加载时间，给用户更加流畅的用户体验。
现代浏览器使用大量预测优化技术来预测用户行为和意图，这些技术有预连接、资源与获取、资源预渲染等。
Resource Hints 的思路有如下两个：
当前将要获取资源的列表
通过当前页面或应用的状态、用户历史行为或 session 预测用户行为及必需的资源

实现Resource Hints的方法有很多种，可分为基于 link 标签的 DNS-prefetch、subresource、preload、 prefetch、preconnect、prerender，和本地存储 localStorage。

分包split chunks

在没配置任何东西的情况下，webpack 4 就智能的帮你做了代码分包。入口文件依赖的文件都被打包进了main.js，那些大于 30kb 的第三方包，如：echarts、xlsx、dropzone等都被单独打包成了一个个独立 bundle。
其它被我们设置了异步加载的页面或者组件变成了一个个chunk，也就是被打包成独立的bundle。
它内置的代码分割策略是这样的：

新的 chunk 是否被共享或者是来自 node_modules 的模块
新的 chunk 体积在压缩之前是否大于 30kb
按需加载 chunk 的并发请求数量小于等于 5 个
页面初始加载时的并发请求数量小于等于 3 个

大家可以根据自己的项目环境来更改配置。配置代码如下：

splitChunks({
    
    
  cacheGroups: {
    
    
    vendors: {
    
    
      name: `chunk-vendors`,
      test: /[\\/]node_modules[\\/]/,
      priority: -10,
      chunks: 'initial',
    },
    dll: {
    
    
      name: `chunk-dll`,
      test: /[\\/]bizcharts|[\\/]\@antv[\\/]data-set/,
      priority: 15,
      chunks: 'all',
      reuseExistingChunk: true
    },
    common: {
    
    
      name: `chunk-common`,
      minChunks: 2,
      priority: -20,
      chunks: 'all',
      reuseExistingChunk: true
    },
  }
})

没有使用webpack4.x版本的项目，依然可以通过按需加载的形式进行分包，使得我们的包分散开，提升加载性能。
按需加载也是以前分包的重要手段之一
这里推荐一篇非常好的文章：webpack如何使用按需加载

tree shaking

中文（摇树），webpack构建优化中重要一环。摇树用于清除我们项目中的一些无用代码，它依赖于ES中的模块语法。
比如日常使用lodash的时候

import _ from 'lodash'

如果如上引用lodash库，在构建包的时候是会把整个lodash包打入到我们的bundle包中的。

import _isEmpty from 'lodash/isEmpty';

如果如上引用lodash库，在构建包的时候只会把isEmpty这个方法抽离出来再打入到我们的bundle包中。
这样的化就会大大减少我们包的size。所以在日常引用第三方库的时候，需要注意导入的方式。
如何开启摇树
在webpack4.x 中默认对tree-shaking进行了支持。 在webpack2.x 中使用tree-shaking：传送门