Vue_项目优化

乖女子@@@

已于 2022-10-18 18:06:21 修改

阅读量240

点赞数

分类专栏： # vue2 文章标签： vue

于 2021-03-22 20:05:06 首次发布

本文链接：https://blog.csdn.net/qq_43260366/article/details/115095205

版权

vue2 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

[2]区分使用 v-if 和 v-show的使用场景

01-减少接口请求

[1]keep-alive

当某个页面的数据不经常发生变化时，可以使用keep-alive进行页面缓存，减少http请求，提高用户体验性；

[2]节流与防抖

可以使用防抖与节流减少接口请求

防抖：在规定时间内没有重复执行，便会执行对应的操作；

举例说明

// 当屏幕滚动举例大于300px时，显示返回顶部按钮，否则不显示

 <body>
    <div id="box">回到顶部</div>
    <script>
      function changTop (e) {
        // 1.获取屏幕的滚动距离(兼容性)
        let _scrollTop =
          window.pageYOffset ||
          document.body.scrollTop ||
          document.documentElement.scrollTop
        console.log(e)
        //2.当屏幕滚动举例大于300px时，显示box
        if (_scrollTop > 300) {
          document.querySelector('#box').style.display = 'block'
        } else {
          document.querySelector('#box').style.display = 'none'
        }
      }
 
      function utils (fn, time) {
        var timeId = null
        let _arg = arguments
        let _this = this
        // 使用闭包的原因，使得timeId不会被清除，也不会被重新赋值(因为闭包函数一直在使用timeId)
        return function () {
          if (timeId) {
            clearTimeout(timeId)
          }
          timeId = setTimeout(() => {
            fn.apply(_this, arguments)
          }, time)
        }
      }
      // 因为执行函数与时间并不固定采用传参的方式设置
      window.addEventListener('scroll', utils(changTop, 500), false)
    </script>
  </body>

节流：过一段时间执行代码，在这段时间内即使，重复操作也不会执行；

[3]精灵图的使用

因为在网页中我们可能会使用功多个小的背景图片进性修改，这就需要服务端频繁接收和发送请求图片，造成服务器压力过大，降低页面的加载速度；
精灵图可以将多个小的背景图片整合到一张大的背景图片上，这样服务端仅仅需要发送一次请求就可以了，减小了服务器压力，提高了页面的加载速度；
使用：css-精灵图_乖女子@@@的博客-CSDN博客

02-懒加载技术

[1]路由懒加载技术

若是我们使用普通的路由加载

import 组件名 from '路经'

在打包构建的过程中，会将所有组件的代码打包到一个js文件中，会使得js包变得非常大，影响页面的 首屏加载速度。

而路由懒加载技术是将不同路由对应的组件分割成不同的代码块打包到单独的js文件中，当该路由被访问到时才加载相应的组件，这样可以有效的分担首页所承担的加载压力，减少首页加载时间

const 组件名= ()=>import('路经')

[2]异步组件加载

若是普通组件

import 组件名 from 路经

components{
 组件名
}

若是异步组件---什么时候需要什么时候加载!

组件名: ()=>{ return import(路经)}

03-指令优化

[1]v-for指令注意事项

在使用v-for时要结合key一起使用，否则在添加或删除元素时会造成过多的dom元素更新；
避免v-for与v-if在同一标签使用，因为v-for的优先级高于v-if，这样会先将所有元素渲染再进行判断；

[2]区分使用 v-if 和 v-show的使用场景

　v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

　v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。

　所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景

04-图片优化

[1]对图片进行压缩；
[2]图片懒加载；
- 原理：我们需要将页面内未出现的可视区域内的图片先不加载，等到滚动到可视区的时候录再去加载；
- 作用：提高页面的加载性能，提高用户体验度；
- 执行过程：
  - (1)将页面中的img标签src指向一张小图片;
  - (2)然后定义data-src属性（这个属性可以自定义命名，我才用data-src）属性指向真实的图片;
  - (3)当载入页面时，先把可视区区域内的img标签的data-src属性值赋值给src;
  - (4)然后监听滚动事件，加载用户即将看到的图片（利用图片出现时距离顶部的高度 < 滚动条距离顶部的高度 + 可视区的高度）。---此处使用防抖；
[3]根据http协议设置合理缓存；
[4]小的图片->使用精灵图；

05-响应式数据

[1]响应式数据

我们知道将数据存在data里面，那该数据会被绑定get与set方法，为响应式数据；

但是并不是所有数据都需要是响应式的，若是不需要响应式，则可以在created生命周期函数等中声明或使用Object.freeze方法冻结；

[2]长列表性能优化

Vue会通过Object.defineProperty对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要Vue来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止Vue劫持我们的数据呢？可以通过Object.freeze方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

export default {
  data: () => ({
    users: {}
  }),

  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};

但是直接不将其放入data中是更好的选择；

06-事件销毁

Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。如果在 js 内使用 addEventListener 等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露。

07-gzip压缩

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。(需要后端支持)

-------陆续写入；

乖女子@@@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue_项目优化

1.路由懒加载技术若是我们使用普通的路由加载技术import 组件名 from '路经'在打包构建的过程中，会将所有组件的代码打包到一个js文件中，会使得js包变得非常大，影响页面的首屏加载速度。而路由懒加载技术是将不同路由对应的组件分割成不同的代码块，当该路由被访问到时才加载相应的组件，这样就比较高效了!const 组件名= ()=>import('路经')-------陆续写入；...
复制链接

扫一扫