前端性能优化的常用手段
前端性能优化的方法有很多，本文主要介绍开发中比较常用的几种优化手段
文件合并
网页中的每一个外部文件的下载都会发送一个HTTP请求，常见的有css、js、img等。合并文件能有效的减少HTTP的请求，比较有效的做法是把公共库文件合并到一个文件，因为这些文件基本不会变动，把不同页面独有的文件单独合并，这样修改起来方便。对于图标ICON，可以使用字体图标或雪碧图技术
资源压缩
前端构建工具可以很方便的压缩HTML、CSS、JS、图片等资源，在构建过程中，可以把无用的空格、注释、无效字符等一并删除。对于图片资源，会舍弃一些相对无关紧要的色彩信息来减少资源大小
HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术，需要WEB服务器安装这一个功能。当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来（解码过程是浏览器自动完成的）。一般对纯文本内容可压缩到原大小的40%
缓存
服务端可以设置Cache-Control或Expires强缓存，在缓存不过期的情况下，客户端不向服务器发送请求。强缓存过期时，会使用Last-Modified或Etag这类协商缓存，向服务器发送请求，如果资源没有变化，则服务器返回304响应，浏览器继续从本地缓存加载资源；如果资源更新了，则服务器将更新后的资源发送到浏览器，并返回200响应
DNS预解析
当浏览器访问一个域名的时候，需要解析一次DNS，获得对应域名的ip地址。在解析过程中，按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址
DNS Prefetch，即DNS预解析就是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度
DNS预解析的添加方法是在head 标签里面写上几个link 标签。解析的过程是并行的，不会堵塞页面渲染
<link rel="dns-prefecth" href="https://www.google.com">
<link rel="dns-prefecth" href="https://www.google-analytics.com">
优化资源加载
资源位置
为了尽可能快地展示出页面内容，资源尽量按照下面的顺序加载
1、CSS文件放在head中，先外链，后本页
2、JS文件放在body底部，先外链，后本页
3、处理页面布局的JS文件放在head中，如babel-polyfill.js文件、flexible.js文件
4、body中间尽量不写style标签和script标签
加载时机
合理利用script标签的defer和async属性
defer: 异步加载，在HTML解析完成后执行(defer的实际效果与将代码放在body底部类似)
async: 异步加载，加载完成后立即执行（如果有dom操作，这种放肆不适用）
默认情况下，dom渲染会等到script和style标签资源加载完毕后执行（同步过程）。
如果js资源很大，并且使用了defer属性，会出现页面已渲染但是不可交互的情况，但这也比一直白屏要好很多。
按需加载
对于SPA应用，可以借助webpack实现按需加载，即根据路由来加载当前页面需要的业务模块。这种方式实际上是先把代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后（比如监控到路由变化后），立即引用新的代码块
预加载（preload）和懒加载（lazyload）
preload让浏览器提前加载指定资源，需要执行时再执行。lazyload刚好相反，它是需要资源时再加载。资源懒加载和资源预加载都是一种错峰操作，在浏览器忙碌的时候不做操作，浏览器空间时，再加载资源，优化了网络性能
DOM优化
缓存DOM
由于查询DOM比较耗时，在同一个节点无需多次查询的情况下，可以缓存DOM
var box = document.getElementById('box')
DOM元素离线更新
对DOM进行相关操作时，例innerHTML、appendChild等都可以使用Document Fragment对象进行离线操作，待元素“组装”完成后再一次插入页面，或者使用display:none 对元素隐藏，在元素“消失”后进行相关操作
事件代理
事件代理是指将事件监听器注册在父级元素上，由于子元素的事件会通过事件冒泡的方式向上传播到父节点，因此，可以由父节点的监听函数统一处理多个子元素的事件
防抖和节流
使用函数节流（throttle）或函数去抖（debounce），限制某一个方法的频繁触发
webpack优化
打包公共代码
使用CommonsChunkPlugin插件，将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这会带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时再去加载一次这个文件
webpack 4 将移除 CommonsChunkPlugin, 取而代之的是两个新的配置项 optimization.splitChunks 和 optimization.runtimeChunk
通过设置 optimization.splitChunks.chunks: "all" 来启动默认的代码分割配置项
动态导入和按需加载
webpack提供了两种技术通过模块的内联函数调用来分离代码，优先选择的方式是，使用符合 ECMAScript 的 import() 语法。第二种，则是使用 webpack 特定的 require.ensure
