搞一搞前端性能优化

最新推荐文章于 2024-01-26 15:55:01 发布

广东话的蛇皇

最新推荐文章于 2024-01-26 15:55:01 发布

阅读量142

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/110817298

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

性能优化原则

从请求方面来讲：优秀的前端需要配合减少服务器的负担，所以请求次数越少越好
从页面加载来说：页面越快被加载出来，性能越好，用户体验越好
然后就是在页面运行时，js的运行效率越高性能越高
在这一方面的优化策略，与其说是策略不如说是规范
分别有：
1. 减少dom操作
2. 放script标签到对的位置
3. 减少对作用域链的向上寻找浪费性能
4. 减少对内存资源的浪费、泄漏
5. 减少页面的重绘和回流
6. 避免类似eval的编码型字符串识别
优化SEO
把加载资源变小
cdn大法

具体优化措施

尽量减少请求（精灵图css，接口请求尽量避免同步）background-position
图片懒加载LazyLoad Images：在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片，懒加载的目的进入页面时不会全部渲染元素,这样大大的提高了渲染速度
vue路由懒加载

//路由懒加载
export default new Router({
  routes:[
    {
     path: '/my',
     name: 'my',
      //懒加载
     component: resolve => require(['../page/my/my.vue'], resolve),
    },
  ]
})
//组件懒加载
components: {
  historyTab:resolve => {
  require(['../../component/historyTab/historyTab.vue'],resolve)
  },   
},
//全局懒加载
Vue.component('mideaHeader', () => {
System.import('./component/header/header.vue')
})

CSS放在页面最上部，javascript放在页面最下面（通常放在body标签刚刚结束的位置，即紧接body标签后，因为这样就可以做到最优解：一边解析页面，一边下载JS。）：让浏览器尽快下载CSS渲染页面
js文档碎片，尽量减少dom操作导致页面回流和重绘

nodeFragment(el){
	const f = document.createDocumentFragment()
	f.appendChild(el.firstChild)
}

减少闭包的使用带来的内存泄漏的影响
浏览器对css选择器的解析是从右往左进行的，浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。所以我们要尽量避免使用标签层级
字符串拼接
在 Javascript中使用”+”号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。
减少作用域链查找，尽量访问局部变量
尽量少使用Function构造函数，因为他每次都会创建新的函数对象，然后销毁，这样很浪费内存

var test3 = new Function("a","b","return a+b;");
console.info(test3(10,20));

尽量少用with，因为他会去修改作用域链并加长他
比如，目前现在有一个这样的对象：

var obj = {
	a: 1,
	b: 2,
	c: 3
};

如果想要改变 obj 中每一项的值，一般写法可能会是这样：

// 重复写了3次的“obj”

obj.a = 2;
obj.b = 3;
obj.c = 4;

而用了 with 的写法，会有一个简单的快捷方式

with (obj) {
	a = 3;
	b = 4;
	c = 5;
}

少用eval，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释为要处理的代码，也就是说编译器无法优化上下文（JavaScript 引擎会在编译阶段进行数项的性能优化），因此只能有浏览器在运行时解释代码。这对性能影响很大。
.eval() 函数作用：可以接受一个字符串str作为参数，并把这个参数作为脚本代码来
执行。
HTML Collection（HTML收集器，返回的是一个数组内容信息）
　　在脚本中 document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，因为它有 length属性，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的“访问集合” 包括读取集合的 length属性、访问集合中的元素。
　　因此，当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。
尽量使用缓存，来减少页面组件的更新和数据的请求次数
少进行dom操作，dom操作用时是普通操作的4000倍
省去不必要的判断操作，因为直接赋值比判断要高效，原因在于编译成机器语言的时候判断需要做借位运算，赋值到中间语言的时候就是 mov，比较到中间语言的时候是 cmp，mov 就直接把 01 丢到变量里去就可以了；但是 cmp 的话就要做减法，要做借位啊这那的操作，所以是赋值会更快。赋值比判断操作快58ms/亿次运算
用服务端渲染，能提高首屏加载速度，优化SEO
使用cdn进行服务转载
使用vue时要注意
为item设置唯一key值，
在列表数据进行遍历渲染时，需要为每一项item设置唯一key值，方便vuejs内部机制精准找到该条列表数据。当state更新时，新的状态值和旧的状态值对比，较快地定位到diff。
细分vuejs组件
在项目开发过程之中，第一版本把所有的组件的布局写在一个组件中，当数据变更时，由于组件代码比较庞大，vuejs的数据驱动视图更新比较慢，造成渲染比较慢。造成比较差的体验效果。所以把组件细分，比如一个组件，可以把整个组件细分成轮播组件、列表组件、分页组件等。
减少watch的数据
当组件某个数据变更后需要对应的state进行变更，就需要对另外的组件进行state进行变更。可以使用watch监听相应的数据变更并绑定事件。当watch的数据比较小，性能消耗不明显。当数据变大，系统会出现卡顿，所以减少watch的数据。其它不同的组件的state双向绑定，可以采用事件中央总线或者vuex进行数据的变更操作。
vue.config.js打包优化
1.图片资源压缩
2.将 productionSourceMap 设为 false，map不进行生成
3.cdn配置
4.代码压缩
5.公共代码抽离

const path = require('path');
// gzip压缩
const CompressionPlugin = require('compression-webpack-plugin')
//监控日志
const SentryCliPlugin = require('@sentry/webpack-plugin');
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const Version = new Date().getTime();
function resolve(dir) {
  return path.join(__dirname, dir)
}
const cdn = {
  js: [
    // vue必须在第一个
    'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
    'https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js',
    'https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js',
    'https://cdn.bootcss.com/axios/0.18.1/axios.min.js',
    'https://cdn.bootcss.com/qs/6.5.1/qs.min.js',
    'https://cdn.jsdelivr.net/npm/vant@2.5.4/lib/vant.min.js'
  ]
}
module.exports = {
  //部署应用包时的基本 URL
  publicPath: './',

  //当运行 vue-cli-service build 时生成的生产环境构建文件的目录
  outputDir: 'wx_vue',

  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: './' + Version + '/assets',

  // eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
  lintOnSave: false,

  //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
  runtimeCompiler: true,

  // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾  
  productionSourceMap: false,

  /** 去掉hash */
  filenameHashing: true,


  // pages: {
  //   index: {
  //   	entry: 'src/main.js',
  //     template: 'public/index.html',
  //     filename: 'index.html'
  //   }
  // },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production'
      config.devtool = "source-map";
    } else {
      // 为开发环境修改配置...
      config.mode = 'development'
    }
    /** 删除懒加载模块的 prefetch preload，降低带宽压力(使用在移动端) */
    config.plugins.delete("prefetch").delete("preload")
    config.optimization.minimize(true)
    // gzip压缩
    //	      config.plugin("compressionPlugin").use(CompressionPlugin).tap(() => [
    //        {
    //        	filename: '[path].gz[query]',
    //        	algorithm: 'gzip',
    //          test: /\.js$|\.html$|\.css/, //匹配文件名
    //          threshold: 10240, //超过10k进行压缩
    //          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
    //          deleteOriginalAssets: false //是否删除源文件
    //        }
    //      ])
    config.plugins.push(
      new CompressionPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.js$|\.html$|\.css/,
        threshold: 10240, // 只有大小大于该值的资源会被处理 10240
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        deleteOriginalAssets: false // 删除原文件
      })
    )
    // 公共代码抽离
    config.optimization = {
      splitChunks: {
        cacheGroups: {
          vendor: {
            chunks: 'all',
            test: /node_modules/,
            name: 'vendor',
            minChunks: 1,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 100
          },
          common: {
            chunks: 'all',
            test: /[\\/]src[\\/]js[\\/]/,
            name: 'common',
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 60
          },
          styles: {
            name: 'styles',
            test: /\.(sa|sc|c)ss$/,
            chunks: 'all',
            enforce: true
          },
          runtimeChunk: {
            name: 'manifest'
          }
        }
      }
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        '@c': path.resolve(__dirname, './src/components'),
        'assets': path.resolve(__dirname, '../src/assets')
      }
    },
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'qs': 'Qs',
      'vant': 'Vant'
      //			  'weixin-js-sdk':'weixin-js-sdk',
      //			  'clipboard':'clipboard',
      //			  'qrcodejs2':'qrcodejs2',
      //			  'js-md5':'js-md5'
    },
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            output: { // 删除注释
              comments: false
            },
            //生产环境自动删除console
            compress: {
              //warnings: false, // 若打包错误，则注释这行
              drop_debugger: true,  //清除 debugger 语句
              drop_console: true,   //清除console语句
              pure_funcs: ['console.log']
            }
          },
          sourceMap: false,
          parallel: true
        })
      ]
    }
  },

  // css相关配置
  css: {
    extract: false,
    loaderOptions: {
      stylus: {
        'resolve url': true,
        'import': []
      },
      //			less: {
      //			// `globalVars` 定义全局对象，可加入全局变量
      //				globalVars: {
      //						primary: '#333'
      //					}
      //				}
    },
    requireModuleExtension: true,
  },

  // webpack-dev-server 相关配置
  devServer: { // 设置代理
    hot: true, //热加载
    host: 'localhost', //ip地址
    port: 8085, //端口
    https: false, //false关闭https，true为开启
    open: true, //自动打开浏览器
    proxy: {	 //配置多个跨域
      '/api': { //本地 
        //target: 'http://172.168.10.150:81/ysol_wx',
        //target: 'http://yishanonline.cn/ysol_wx',
        target: 'https://yishanol.cn/ysol_wx',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },

  pluginOptions: { // 第三方插件配置
    // ...
  },
  chainWebpack: config => {
    // ============压缩图片 start============
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        //{ bypassOnDebug: true }
        mozjpeg: { progressive: true, quality: 65 },  Compress JPEG images
        optipng: { enabled: false },		// Compress PNG images
        pngquant: { quality: [0.65, 0.9], speed: 4 },   // Compress PNG images
        gifsicle: { interlaced: false },		// Compress SVG images
        //					webp: { quality: 75 }
      })
      .end()
    //				config.module.rules.push({
    //			    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    //			    use:[{
    //			        loader: 'image-webpack-loader',
    //			        options: {bypassOnDebug: true}
    //			    }]
    //				})
    // ============压缩图片 end============
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })

    /* 添加分析工具*/
    if (process.env.NODE_ENV === 'production') {
      if (process.env.npm_config_report) {
        config
          .plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
          .end();
        config.plugins.delete('prefetch')
      }
    }

    if (process.env.UMI_ENV === 'production') {//当为prod时候才进行sourcemap的上传，如果不判断，在项目运行的打包也会上传 这个为线上日志输出 不需要的可以删除掉
      config.plugin("sentry").use(SentryCliPlugin, [{
        ignore: ['node_modules'],
        include: /\.map$/, //上传dist文件的js
        configFile: 'sentry.properties', //配置文件地址，这个一定要有，踩坑在这里，忘了写导致一直无法实现上传sourcemap
        release: 'release@0.0.1', //版本号，自己定义的变量，整个版本号在项目里面一定要对应
        deleteAfterCompile: true,
        urlPrefix: '~/wx_vue/' //cdn js的代码路径前缀
      }])
    }
  }
}