前端性能优化分析

Posted 2021-11-08 weixin_49203377

一、长列表性能优化
1.（只渲染少部分区域的内容，减少重新渲染组件和dom节点的时间）可使用vue-virtual-scroll-list 或者vue-virtual-scroller 或者自己实现一个虚拟的滚动列表，主要用到的技术是DOM内存回收、滚动锚定
二、图片懒加载
2.当加载一些密集型的图片的网页中，只加载可视区域内的图片 避免一次性加载过多的图片导致请求阻塞原理是 页面中的img标签的src属性 指向一个默认的小的图片或者为空，然后自定义属性指向真实的图片 当载入页面时 把可视区域的img的自定义真实图片的值赋值给src 然后监听滚动事件，根据可见区域高度 把用户即将看到的图片再加载
三、事件委托或者事件代理机制
3.把原本绑定在子元素上的响应事件到父元素上 例如一个列表需要绑定点击事件 每一个item都需要点击事件 传统的方法 会用for循环遍历整个列表为每一个item都绑定点击事件，列表中的元素数量过大的话，需要绑定大量的点击事件，这种情况下 可以使用事件委托
四、防抖和节流
4.比如input输入框模糊搜索 输入框输入值的时候，只要按下按键,就会发送请求，其实是应该用户输入完整的字符后再去请求接口，可以设置延迟，，当你在频繁的输入时，并不会发送请求，只有当你在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。节流指的是我们在不断输入时，ajax会按照我们设定的时间，一定事件间隔内执行一次，就算按下键盘 也不会重新执行，也是在规定的时间间隔内只执行一次 防抖和节流都是防止某一时间内频繁触发的操作 但是原理不同：防抖是某一段时间内只执行一次，而函数节流是间隔时间执行
4.1使用场景：Search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
4.2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。
节流：1.鼠标不断点击触发，mousedown(单位时间内只触发一次)。2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle（节流）来判断。

五、Dom优化以及gzip压缩
删除不必要的代码和注释包括空格等，尽量做到最小化文件 ，线上环境把js，css，图片等压缩，尽量减少文件的大小，前端压缩方式有很多种 比如前端打包压缩的有grunt，gulp，webpack，后台实现文件压缩的话：开启gzip压缩的请求头字段，Response Headers里的 content-encoding: gzip，前端进行压缩的话可以使用compress-webpack-plugin插件，先修改修改config目录下的index.js，开启gzip

如果没有默认安装compress-webpack-plugin插件，请先安装。然后在在build目录下的webpack.prod.conf.js添加代码

if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

然后就可以npm run build打包了，打包后会生成类似 ***.js.gz的文件。

但这时候服务器还是不支持gzip的。因此，我们要来简单的配置一下。
可以使用nginx来进行配置 ，打开conf/ngxin.conf，在http、server、location下加以下代码，详情点击> nginx文档。

gzip_static on;
gzip_http_version   1.1;
gzip_proxied        expired no-cache no-store private auth;
gzip_disable        "MSIE [1-6]\\.";
gzip_vary           on;

最后 nginx -s reload 重启。
六、css的优化
1.尽量避免使用table布局
2.避免设置多层内联样式
3.避免使用 CSS 表达式（例如：calc()）
4.将动画效果应用到 position 属性为 absolute 或 fixed 的元素上。
5.提取组件的 CSS 到单独到文件
6.图片编码优化，尽量使用svg和字体图标
七、Vue UI组件库的按需加载
为了快速开发前端项目，经常会引入现成的UI组件库如ElementUI、iView等，但是他们的体积和他们所提供的功能一样，是很庞大的。 而通常情况下，我们仅仅需要少量的几个组件就足够了，但是我们却将庞大的组件库打包到我们的源码中，造成了不必要的开销。

不过很多组件库已经提供了现成的解决方案，如Element出品的babel-plugin-component和AntDesign出品的babel-plugin-import 安装以上插件后，在.babelrc配置中或babel-loader的参数中进行设置，即可实现组件按需加载了。
{
“presets”: [[“es2015”, { “modules”: false }]],
“plugins”: [
[
“component”,
{
“libraryName”: “element-ui”,
“styleLibraryName”: “theme-chalk”
}
]
]
}
八、单页应用的按需加载（为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。）
可以采用.vue-router 路由懒加载（懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载），常见的懒加载方式有两种：即使用vue异步组件 和 ES中的import
未使用懒加载的路由代码如下：

 import Vue from 'vue'
                import Router from 'vue-router'
                import HelloWorld from '@/components/HelloWorld'

                Vue.use(Router)

                export default new Router({
                  routes: [
                    {
                      path: '/',
                      name: 'HelloWorld',
                      component:HelloWorld
                    }
                  ]
                })

1.vue异步组件实现懒加载， 它主要是使用了resolve的异步机制，用require代替了import,实现按需加载，下面是代码示例，　方法如下：component：resolve=>(require([‘需要加载的路由的地址’])，resolve)

import Vue from 'vue'
import Router from 'vue-router'
　　/* 此处省去之前导入的HelloWorld模块 */
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve=>(require(["@/components/HelloWorld"],resolve))
    }
  ]
})

方法2：es6提出的import方法（-----最常用-------）
　方法如下：const HelloWorld = （）=>import(‘需要加载的模块地址’)

（不加 { } ，表示直接return）

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

通过懒加载后打包的js文件会很多，而非懒加载的打包后一般只有一个js文件。