前端性能优化
优化网络连接
【使用CDN】
CDN全称是Content Delivery Network，即内容分发网络，它能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度
【使用DNS预解析】
当浏览器访问一个域名的时候，需要解析一次DNS，获得对应域名的ip地址。在解析过程中，按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址
DNS Prefetch，即DNS预解析就是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度
方法是在 head 标签里面写上几个 link 标签
<link rel="dns-prefecth" href="https://www.google.com"> <link rel="dns-prefecth" href="https://www.google-analytics.com">
对以上几个网站提前解析 DNS，由于它是并行的，不会堵塞页面渲染，这样可以缩短资源加载的时间
减少http请求数量
【使用缓存】
使用cach-control或expires这类强缓存时，缓存不过期的情况下，不向服务器发送请求。
强缓存过期时，会使用last-modified或etag这类协商缓存，向服务器发送请求，如果资源没有变化，则服务器返回304响应，浏览器继续从本地缓存加载资源；如果资源更新了，则服务器将更新后的资源发送到浏览器，并返回200响应
【图片处理】
Base64：将图片的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量。但是，由于Base64编码用8位字符表示信息中的6个位，所以编码后大小大约比原始值扩大了 33%
使用字体图标来代替图片
减小资源大小
【压缩】
1、HTML压缩
HTML代码压缩就是压缩在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等
2、CSS压缩
CSS压缩包括无效代码删除与CSS语义合并
3、JS压缩与混乱
JS压缩与混乱包括无效字符及注释的删除、代码语义的缩减和优化、降低代码可读性，实现代码保护
【开启gzip】
HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。
大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。
这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。
一般对纯文本内容可压缩到原大小的40%
优化资源加载
【图片懒加载】
图片懒加载在一些图片密集型的网站中运用比较多，通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞，（页面滚动再去加载）
【资源加载位置】
通过优化资源加载位置，更改资源加载时机，使尽可能快地展示出页面内容，尽可能快地使功能可用
1、CSS文件放在head中，先外链，后本页
2、JS文件放在body底部，先外链，后本页
3、处理页面、处理页面布局的JS文件放在head中，如babel-polyfill.js文件、flexible.js文件
4、body中间尽量不写style标签和script标签
【资源加载时机】
1、异步script标签
defer: 异步加载，在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似
async: 异步加载，加载完成后立即执行
2、模块按需加载
在SPA等业务逻辑比较复杂的系统中，需要根据路由来加载当前页面需要的业务模块
按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载
减少重绘回流
给图片设置尺寸---如果图片不设置尺寸，首次载入时，占据空间会从0到完全出现，上下左右都可能位移，发生回流
不要使用table布局---因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间
webpack优化
【打包公共代码】
使用CommonsChunkPlugin插件，将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这会带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件
webpack 4 将移除 CommonsChunkPlugin, 取而代之的是两个新的配置项 optimization.splitChunks 和 optimization.runtimeChunk
通过设置 optimization.splitChunks.chunks: "all" 来启动默认的代码分割配置项
【动态导入和按需加载】
webpack提供了两种技术通过模块的内联函数调用来分离代码，优先选择的方式是，使用符合 ECMAScript 提案 的 import() 语法。第二种，则是使用 webpack 特定的 require.ensure
渲染完成后的页面交互优化
防抖（debounce）/节流（throttle）
输入搜索时，可以用防抖debounce等优化方式，减少http请求；
