前端性能优化的方法!!!!!!

俗话说：项目应该缺少不了前端的美化 哈哈哈哈哈哈

来给大家普及一下前端性能优化的方法吧
不要偷偷的收藏哦 可以放到你们的导航栏里 哈哈哈哈哈

• content方面

1. 减少HTTP请求：合并文件、CSS精灵、inline Image
   注意：
   　如果不进行文件合并的话，文件与文件之间有插入的上行请求，增加了N-1个网络延迟，受丢包问题影响更严重，经过代理服务器时可能会被断开，可以进行一个公共库合并，不同页面单独合并
2. 减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
   使用cach-control或expires这类强缓存时，缓存不过期的情况下，不向服务器发送请求。强缓存过期时，会使用last-modified或etag这类协商缓存，向服务器发送请求，如果资源没有变化，则服务器返回304响应，浏览器继续从本地缓存加载资源；如果资源更新了，则服务器将更新后的资源发送到浏览器，并返回200响应
3. 减少DOM元素数量

• Server方面

1. 使用CDN
   当浏览器访问一个域名的时候，需要解析一次DNS，获得对应域名的ip地址。在解析过程中，按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址
   　　DNS Prefetch，即DNS预解析就是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度
2. 配置ETag
3. 对组件使用Gzip压缩
   HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。一般对纯文本内容可压缩到原大小的40%

• Cookie方面

1. 减小cookie大小

• css方面

1. 将样式表放到页面顶部
2. 不使用CSS表达式
3. 使用不使用@import
   CSS的@import会造成额外的请求
4. body中间尽量不写style标签和script标签
5. 避免使用空的src和href
   a标签设置空的href，会重定向到当前的页面地址
   form设置空的method，会提交表单到当前的页面地址

• Javascript方面

1. 将脚本放到页面底部
2. 将javascript和css从外部引入
3. 压缩javascript和css
4. 删除不需要的脚本
5. 减少DOM访问

• 图片方面

• 优化图片：根据实际颜色需要选择色深、压缩
• 优化css精灵
  　CSS雪碧图是以前非常流行的技术，把网站上的一些图片整合到一张单独的图片中，可以减少网站的HTTP请求数量，但是当整合图片比较大时，一次加载比较慢。随着字体图片、SVG图片的流行，该技术渐渐退出了历史舞台
• 不要在HTML中拉伸图片

• webpack优化

• 打包公共代码
  使用CommonsChunkPlugin插件，将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这会带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件
  webpack 4 将移除 CommonsChunkPlugin, 取而代之的是两个新的配置项 optimization.splitChunks 和 optimization.runtimeChunk
  通过设置 optimization.splitChunks.chunks: “all” 来启动默认的代码分割配置项
• 动态导入和按需加载
  webpack提供了两种技术通过模块的内联函数调用来分离代码，优先选择的方式是，使用符合 ECMAScript 提案 的 import() 语法。第二种，则是使用 webpack 特定的 require.ensure
• 剔除无用代码
  tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup
  JS的tree shaking主要通过uglifyjs插件来完成，CSS的tree shaking主要通过purify CSS来实现的

出了以上小编说到的可能还会更多 后续多多给大家更新！