前端项目常见性能优化方案

CDN

概念:

通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器更快更可靠的将高性能、可扩展性及低成本的资源发送给用户。

作用：

CDN一般用来托管Web资源，可供下载的资源，应用程序。使用CDN来加速这些资源的访问。

使用场景：

使用第三方CDN服务
使用CDN进行静态资源的缓存
直播传送

懒加载

概念：
也叫 延时加载、按需加载，在较长的网页中应用的一种性能优化的方法。

特点：
减少无用资源的加载
提示用户体验
防止加载过多图片影响其他资源文件的加载

图片懒加载原理：
图片的加载是由src引起的，给src赋值，浏览器请求图片资源。
使用HTML5的data-xxx属性存储图片路径，需要时赋值给src。
图片加载条件：
imgs.offsetTop(元素到顶部距离） < window.innerHeight(浏览器可视区高度) 
+ document.body.scrollTop(滚动距离)

预加载的区别：
预加载指的是将所需的资源提前请求加载到本地，后面需要用到的时候直接从缓存取资源。懒加载是需要的时候再请求资源。

回流和重绘

概念 :
1）回流：在渲染树中,浏览器会重新渲染那些，尺寸、结构或者属性发生改变的元素，。
2）重绘：元素样式发生改变但不影响位置时，浏览器会对元素进行重绘。
回流一定重绘，重绘不一定回流。

解决方法 ：
在低层级的DOM节点操作DOM
使用absolute或fixed定位，元素脱离文档流
设置display:none,操作完再显示出来
基于浏览器的渲染队列，将多个读操作放在一起，变成一次回流重绘

防抖和节流

概念：
防抖：事件被触发n秒后再执行回调，n秒内再出触发事件，重新计时，最后一次事件n秒后再执行回调。
节流：单位时间内多次触发事件，只有一次生效。

应用场景：
防抖：
按钮提交，多次提交按钮，只执行最后提交的一次。
服务端验证：表单校验 连续输入，搜索联想词功能 lodash.debounce

节流：
拖拽：固定时间只执行一次，防止超高频次触发位置变动。
缩放：监控浏览器resize，resize事件是在窗口或框架的大小被调整时发生。
动画场景：

函数实现:

     

    /* 防抖 */
    var ipt=document.querySelector('#ipt')

    ipt.addEventListener('input',()=>{
      // console.log(ipt.value,222222);
      dbounce()
    })

    /* 防抖 连续触发走最后一次 */
    var  timeId=null
    function  dbounce(){
      clearTimeout(timeId)
      timeId= setTimeout(()=>{
        console.log(1111);
       },500)
    }

    /* 节流 */
    var ipt2=document.querySelector('#ipt2') 
    /* 节流=====单位时间只走第一次 */
    var flag=true
    var  timeId2=null
    ipt2.addEventListener('click',()=>{
      if(!flag){
        return 
      }
      flag=false
      var n=5
      timeId2= setInterval(() => {
        n-=1

        if(n<1){
          /* 表示时间走完 */
          ipt2.value='获取验证码'
          flag=true
          n=5
          clearInterval(timeId2)
        }else{
          /* 时间还没有走完 */
          ipt2.value=n+'s之后在获取验证码'
        }
      }, 1000);
    })

图片优化

用CSS代替部分图片
用CDN加载
小图使用base64格式
雪碧图
选择正确

webpack优化

用webpack来优化前端性能

压缩代码：删除多余的代码、注释、简化代码的写法等。
利用CDN加速：构建过程中将引用的静态资源路径修改为CDN上对应的路径。
Tree Shaking：将代码中永远走不到的片段删除。
Code Splitting：将代码按路由维度或者组件分块，做到按需加载，充分利用浏览器缓存。
提取公共第三方库：SplitChunksPlugin插件来进行公共模块抽取，利用浏览器缓存可以长期缓存的这些无需频繁变动的公共代码。

webpack的五大模块
entry：
入口提示 webpack以哪个文件为入口七点开始打包，分析构建内部依赖图。
output: 
输出提示 webpack打包后的资源输出到哪里去，以及如何命名。
（loader）module：
让Webpack 能够去处理那些非js文件
plugins：
插件可以用于执行范围更广的任务。插件的范围包括，从打包优化到压缩，一直到重新定义环境中的变量等
mode：
开发模式：本地调试
生产模式：优化上线

loading加载器  从右往左执行
file-loader ：把文件输入到一个文件夹中，在代码中通过相对URL去引用输出的文件
url-loader ：和file-loader类似,
source-map-loader  ： 加载额外的Source Map文件，方便断点调试
image-loader ：加载并压缩图片文件
babel-loader ：把ES6转换成ES5
css-loader ：加载css，支持模块化，压缩，文件导入等特性
style-loader ：把CSS代码注入到JavaScript中，通过DOM操作去加载CSS
eslint-loader ：通过ESLint检查JavaScript代码

常见Plugin  
define-plugin ：定义环境变量
html-webpack-plugin ：简化html文件创建
uglifyjs-webpack-plugin ：通过UglifyES压缩ES6代码
webpack-parallel-uglify-plugin ：多核压缩，提高压缩速度
webpack-bundle-analyzer ：可视化webpack输出文件的体积
mini-css-extract-plugin ：CSS提取到单独的文件中，支持按需加载