探索vue2框架的世界：关于vue2.x的性能优化和常见的白屏原因

2024-03-08 05:12
文章标签 javascript 常见 世界 优化 性能 vue 白屏 框架 vue2 探索 frontend 原因

本文主要是介绍探索vue2框架的世界：关于vue2.x的性能优化和常见的白屏原因，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在本篇文章中，博主总结了一些常见的vue2框架性能优化方法和项目启动出现白屏的原因，还望走过路过的同行和大神们点赞关注,多多指教，用你们发财的小手给予博主大大的鼓励👍👍👍。

vue2x 性能优化

👉1.路由懒加载，有效拆分应用大小，访问时才异步加载
  • vue是单页面应用，可能会有很多的路由引入，这样使用webpack打包后的文件会很大
  • 当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验
  • 如果我们能把不同的路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更高效了。这样会大大提高首屏显示的速度，但是可能其他页面的速度就会降下来
const  Foo=()=>import('./foo.vue')
const router=new VueRouter({routes:[{path:'/foo',component:Foo}]
})
👉2. keep-alive 缓存页面，

避免重复创建组件实列，且能保留缓存组件状态。

👉3. v-for和v-if避免同时使用
  • v-for遍历必须为item添加key
在列表数据进行遍历渲染时，需要为每一项item设置唯一的key值，方便vue.js内部精准找到该条列表数据。当state更新时，新的状态值和旧的状态值相比，较快的定位到diff
  • v-for遍历避免同时使用v-if
v-for比v-if优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必须情况下应该替换为computed属性。
👉4. 长列表性能优化，可采用虚拟列表

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

export default{data(){return{users:{}}},async created(){const users=await axios.get("/api/users");this.users=Object.freeze(users)}
}
👉5. v-once

不再变化的数据可以使用v-once

👉6. 事件销毁，组件销毁后把全局变量和定时器销毁

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

created(){addEventListener('click',this.click,false)
}
beforeDestory(){removeEventListener('click',this.click,false)
}
👉7. 图片懒加载

对于图片加载过多的页面，过了提高页面的加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载，这样对于页面的加载性能上会有很大的提升，也提高了用户体验，我们在项目中使用vue-lazyload插件

1.安装

npm install vue-lazyload --save -dev

2.在入口文件main.js引入并使用

import VuelazyLoad from  'vue-lazy-load'

然后在vue中直接使用

Vue.use(VueLazyLoad)

或者添加自定义选项

Vue.use(VueLazyLoad,{preload:1.3,error:'dist/error.png',loading:'dist/loading.gif',attempt:1
})

3.在vue文件中将img标签的src属性直接改为v-lazy，从而将图片显示方式更改为懒加载显示

<img v-lazy="/static/img/1.png">
8. 第三方插件按需引入

我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的整个体积太大，我们可以借助babel-plugin-component，然后只引入需要的组件，以达到减小项目体积的目的，以下为项目中引入elementui组件库

  • 首先，安装babel-plugin-component
npm install babel-plugin-component -D
  • 然后将.babelrc修改为
{"presets":[["es2015",{"modules":false}]]	,"plugins":[["component",{"libraryName":"element-ui","styleLibraryName":"theme-chalk"}]]
}
  • 在main.js中引入部分组件
import Vue from 'vue'
import {Button,Select} from 'element-ui'
Vue.use(Button)
Vue.use(Select)
👉9. 服务器渲染SSR or 预渲染

服务器渲染是指Vue在客户端将标签渲染成的整个html片段的工作在服务端完成，服务端形成的html片段直接返回给客户端的这个过程就叫做服务器渲染

  • 服务器渲染的优点
    更好的SEO： 因为SPA的内容是通过Ajax获取，而搜索引擎爬取工具并不会等待Ajax异步完成后再抓取页面内容，所以在SPA中是抓取不到页面痛过Ajax获取到的内容，而SSR是直接由服务端返回已经渲染好的页面(数据已经含在页面中)，所以搜索引擎爬取工具可以抓取渲染好的页面。
    更快的内容到达时间（首屏加载更快）： SPA会等待所有的Vue编译后的js文件都下载完成后，才进行页面的渲染，文件下载等需要一定的时间等，所以首屏的渲染需要一定的时间；SSR直接由服务器端渲染好的页面直接返回显示，无需等待下载js文件以及再求渲染等，所以SSR有更快的内容到达时间。
  • 服务器渲染的缺点
    更多的开发条件限制： 例如服务器渲染只支持beforeCreate和created两个钩子函数，这会导致一些外部扩展库需要特殊处理，才能在服务器渲染应用程序中运行，并且可以部署在任何静态文件服务器上的完全静态单页面应用程序SPA不同,服务器渲染应用程序，需要处于Node.js server运行环境
    更多的服务器负载： 在Node.js中渲染完整的应用程序，显然要比仅仅提供静态文件的server更加占用cpu资源，因此，如果你料想在高流量环境下使用，请准备响应的服务器负载，并明智的采用缓存策略。
👉10. v-if和v-show区别使用场景
  • v-if 是真正的条件下渲染，因为他会确保在切换过程中条件块内的事件监听器和子组件适当地销毁和重建；也是惰性的，如果初始渲染时条件为假，则什么也不做—一直到条件第一次变为真时，才会开始渲染条件块。
  • v-show 元素总是被渲染，并且只是基于css的的display属性进行切换
  • 所以 v-if适用于在运行时很少改变条件，不需要频繁切换条件的场景，v-show则适用于需要非常频繁切换条件的场景。
👉11. computed和watch区分场景
  • computed 是计算属性，依赖于其他的属性值，并且computed值有缓存，只要它依赖的值发生改变，下一次computed才会重新计算computed的值。
  • watch 更多的时观察的作用，类似于某些值得监听回调，每当监听得数据变化时都会执行回调进行后续得操作。
  • 运用场景
    • 当我们需要进行数值计算，并且依赖于其他数据得时候，应该使用computed，因为可以利用computed得缓存特性，避免每次取值时，都重新计算。
    • 当我们需要在数据变化时执行异步或开销较大得操作时，应该使用watch，使用watch选项允许我们执行异步操作（访问一个API），限制我们执行该操作得频率，并且我们得到最终得结果前，没有中间状态，这些都是计算属性无法做到的。
👉12. 优化无限列表性能

如果你的应用存在非常长或者无效滚动的列表，那么需要采用窗口化的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建dom节点的时间，可以参考开源项目"vue-virtual-scroll-list"和vue-virtual-scroller来优化这种无限列表的场景。

👉13. 全局事件，自定义事件要在组件销毁时解除绑定
  • 内存泄露风险
  • 全局事件（如 window.resize）不解除，则会继续监听，而且组件再次创建时会重复绑定
👉14. vue2.x中，无法监听data属性的新增和删除，以及数组的部分修改—vue3不会有这个问题
  • vue2新增data属性，使用Vue.SET
  • vue2删除data属性，使用Vue.delete
  • 修改某一元素，不能arr[index]=value,要使用arr.splice API的方式
👉15. 路由切换时，页面会scroll到顶部，例如，例如在一个新闻列表下滑动到一个位置，点击进入详情，再返回列表页，此时会scroll到顶部，并重新渲染列表页，所有的spa都会有这个问题，并不仅仅是vue
  • 在列表页缓存数据和scrollTop
  • 返回列表时（用Vue-router导航守卫，判断from），使用缓存的数据渲染页面，然后scrollTo(scrollTop)

常见白屏原因优化

👉vue项目在开发过程中出现白屏的情况总结
  1. 检查浏览器控制台的报错信息。白屏通常是由Javascript报错导致的，检查浏览器控制台的报错信息，查找错误的原因。
  2. 检查路由配置。如果项目使用了VueRouter，可能是路由配置的问题导致了白屏，可以检查路由配置是否正确
  3. 检查组件的引入和使用方式。如果组件的引入和使用方式有误，也可能导致白屏，可以检查组件的引入和使用方式是否正确。
  4. 检查项目的依赖包是否安装完整。有时候项目依赖的包没有安装完整，也可能会导致白屏，可以检查项目的依赖包是否完整。
  5. 检查项目的代码是否被修改过。如果项目代码被修改过，也可能会导致白屏，可以通过版本控制工具恢复到之前的版本，查看问题是否解决。
  6. 检查网络连接是否正常。如果网络连接不正常，可能导致项目无法加载，也会出现白屏，可以检查网络连接是否正常。
  7. 检查项目的入口文件。如果项目的入口文件有误，也可能导致白屏，可以检查项目的入口文件是否正确。
  8. 检查项目的配置文件。如果项目的配置文件有误，也可能导致白屏，可以检查项目的配置文件是否正确。
  9. 检查浏览器缓存。如果浏览器缓存导致了项目加载失败，也可能会出现白屏，可以清除浏览器缓存，尝试重新加载项目。
  10. 检查服务器是否正常。如果服务器不正常，可能会导致项目无法正常加载，也会出现白屏，可以检查服务器是否正常运行。
  11. 检查开发环境是否正确。如果开发环境有误，也可能导致白屏，可以检查开发环境是否正确配置。
👉如何在开发环境中解决出现的白屏问题
  1. 使用 Vue Devtools 调试工具。Vue Devtools 是一款基于浏览器的 Vue.js 应用程序调试工具，它可以帮助开发者调试 Vue.js 应用程序的各个方面，包括组件层次结构、状态管理、事件监听、性能分析等。通过使用 Vue Devtools，可以更方便地排查和修复白屏问题。
  2. 使用 Chrome 开发者工具。Chrome 开发者工具是一款强大的 Web 开发工具，它可以帮助开发者分析和调试 Web 应用程序的各个方面，包括 HTML、CSS、JavaScript、网络请求等。通过使用 Chrome 开发者工具，可以更深入地排查和修复白屏问题。
  3. 使用 Vue CLI 创建新项目。如果白屏问题无法解决，可以尝试使用 Vue CLI 创建一个新的项目，将原项目中的代码逐一迁移过来，查看是否能够解决问题。
👉vue项目在开生产程中出现白屏原因及解决方法

  1. 路由模式有误
    由于把路由模式mode设置成history。默认是hash
    解决方法：
    改为hash或者直接删除模式配置，如果非要用的话，在服务端加一个覆盖所有情况的候选资源

  2. dist中文件引用路径错误
    打包后的dist目录下的文件引用路径不对，因找不到文件而报错导致白屏
    解决方法：
    修改config下面index.js的模块导出路径

  3. 浏览器不支持es6
    在项目中使用了es6语法，一些浏览器不支持es6，造成编译错误不能解析而造成白屏
    解决方法：
    安装Babel ，Babel 会把这些新语法转译成较低版本的代码。

  4. 加载文件资源过大
    单页面应用的html是靠js生成，因为首屏需要加载很大的js文件(app.js和vendor.js)，所以当网速差的时候会产生一定程度的白屏
    路由懒加载，

//1. vue异步组件技术
{path:"/home",name:'Home',component:resolve=>require(['../views/home.vue'],resolve)}//2. es6提案的import()
{path:'/',name:'home',component:()=>import('../views/home.vue')
}//3. webpack提供的require.ensure()
{path:'/home',name:'Home',component:r=>require.ensure([],()=>r(require('../views/home.vue')),'home')
}

组件懒加载

//import方式
components：{"dailyModal":()=>import("./dailyModal.vue")
}
// require 方式
components:{"dailyModal":resolve=>require(['./dailyModal.vue'],resolve)
},
  1. CDN资源优化
    CDN 的全称是 Content Delivery Network，即内容分发网络。CDN 是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。
    随着项目越做越大，依赖的第三方 npm 包越来越多，构建之后的文件也会越来越大。再加上又是单页应用，这就会导致在网速较慢或者服务器带宽有限的情况出现长时间的白屏。此时我们可以使用 CDN 的方法，优化网络加载速度。

解决方案
1.将 vue、vue-router、vuex、axios 这些 vue 全家桶的资源，全部改为通过 CDN 链接获取，在 index.html 里插入相应链接

<body><div id="app"></div><script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script><script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script><script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script><script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script><script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script></body>

2.在 vue.config.js 配置 externals 属性

module.exports = {···externals: {'vue': 'Vue','vuex': 'Vuex','vue-router': 'VueRouter','axios':'axios'}}

3.卸载相关依赖的 npm 包

npm uninstall  vue vue-router vuex axios
  1. gZip 加速优化
    解决方案
    所有现代浏览器都支持 gzip 压缩，启用 gzip 压缩可大幅缩减传输资源大小，从而缩短资源下载时间，减少首次白屏时间，提升用户体验。
    gzip 对基于文本格式文件的压缩效果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率，对已经压缩过的资源（如：图片）进行 gzip 压缩处理，效果很不好。
const CompressionPlugin = require('compression-webpack-plugin')configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {config.plugins.push(new CompressionPlugin({// gzip压缩配置test: /\.js$|\.html$|\.css/, // 匹配文件名threshold: 10240, // 对超过10kb的数据进行压缩deleteOriginalAssets: false, // 是否删除原文件}))}}
  1. vue.config.js中关闭productionSourceMap
    productionSourceMap是用来报错时定位到代码位置。
    如果不想让别人看到源码可以设置为false，并且可以减少打包后包的体积，加密源码。
productionSourceMap: false,

  1. SSR，服务端渲染，在服务端事先拼装好首页所需的 html

  2. 首页加 loading或 骨架屏（优化体验）
    随着 SPA 在前端界的逐渐流行，单页面应用不可避免地给首页加载带来压力，此时良好的首页用户体验至关重要。很多 APP 采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的体验。
    所谓的骨架屏，就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。在这个过程中用户会感知到内容正在逐渐加载并即将呈现，降低了“白屏”的不良体验。

这篇关于探索vue2框架的世界：关于vue2.x的性能优化和常见的白屏原因的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/786120。

相关文章

C++对象布局及多态实现探索之内存布局（整理的很多链接）

C++对象布局及多态实现探索之内存布局（整理的很多链接）

本文通过观察对象的内存布局，跟踪函数调用的汇编代码。分析了C++对象内存的布局情况，虚函数的执行方式，以及虚继承，等等 文章链接：http://dev.yesky.com/254/2191254.shtml      论C/C++函数间动态内存的传递 (2005-07-30)   当你涉及到C/C++的核心编程的时候，你会无止境地与内存管理打交道。 文章链接：http://dev.yesky
阅读更多...
嵌入式软件常见的笔试题(c)

嵌入式软件常见的笔试题(c)

找工作的事情告一段落，现在把一些公司常见的笔试题型整理一下，本人主要是找嵌入式软件方面的工作，笔试的也主要是C语言、数据结构，大体上都比较基础，但是得早作准备，才会占得先机。   1：整型数求反 2：字符串求反，字符串加密，越界问题 3：字符串逆序，两端对调；字符串逆序，指针法 4：递归求n！ 5：不用库函数，比较两个字符串的大小 6：求0-3000中含有9和2的全部数之和 7
阅读更多...
uniapp接入微信小程序原生代码配置方案（优化版）

uniapp接入微信小程序原生代码配置方案（优化版）

uniapp项目需要把微信小程序原生语法的功能代码嵌套过来，无需把原生代码转换为uniapp，可以配置拷贝的方式集成过来 1、拷贝代码包到src目录 2、vue.config.js中配置原生代码包直接拷贝到编译目录中 3、pages.json中配置分包目录，原生入口组件的路径 4、manifest.json中配置分包，使用原生组件 5、需要把原生代码包里的页面修改成组件的方
阅读更多...
vue, 左右布局宽，可拖动改变

vue, 左右布局宽，可拖动改变

1：建立一个draggableMixin.js  混入的方式使用 2：代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr
阅读更多...
vue项目集成CanvasEditor实现Word在线编辑器

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档：https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址：https://github.com/Hufe921/canvas-editor 前提声明： 由于CanvasEditor目前不支持vue、react 等框架开箱即用版，所以需要我们去Git下载源码，拿到其中两个主
阅读更多...
React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

React+TS前台项目实战（十七）-- 全局常用组件Dropdown封装

文章目录 前言Dropdown组件1. 功能分析2. 代码+详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲全局Dropdown组件封装，可根据UI设计师要求自定义修改。 Dropdown组件 1. 功能分析 （1）通过position属性,可以控制下拉选项的位置 （2）通过传入width属性, 可以自定义下拉选项的宽度 （3）通过传入classN
阅读更多...
js+css二级导航

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con
阅读更多...
基于Springboot + vue 的抗疫物质管理系统的设计与实现

基于Springboot + vue 的抗疫物质管理系统的设计与实现

目录 📚 前言 📑摘要 📑系统流程 📚 系统架构设计 📚 数据库设计 📚 系统功能的具体实现    💬 系统登录注册 系统登录 登录界面   用户添加  💬 抗疫列表展示模块     区域信息管理 添加物资详情 抗疫物资列表展示 抗疫物资申请 抗疫物资审核 ✒️ 源码实现 💖 源码获取 😁 联系方式 📚 前言 📑博客主页：
阅读更多...
探索蓝牙协议的奥秘：用ESP32实现高质量蓝牙音频传输

探索蓝牙协议的奥秘：用ESP32实现高质量蓝牙音频传输

蓝牙（Bluetooth）是一种短距离无线通信技术，广泛应用于各种电子设备之间的数据传输。自1994年由爱立信公司首次提出以来，蓝牙技术已经经历了多个版本的更新和改进。本文将详细介绍蓝牙协议，并通过一个具体的项目——使用ESP32实现蓝牙音频传输，来展示蓝牙协议的实际应用及其优点。 蓝牙协议概述 蓝牙协议栈 蓝牙协议栈是蓝牙技术的核心，定义了蓝牙设备之间如何进行通信。蓝牙协议
阅读更多...
vue+el国际化-东抄西鉴组合拳

vue+el国际化-东抄西鉴组合拳

vue-i18n 国际化参考 https://blog.csdn.net/zuorishu/article/details/81708585 说得比较详细。 另外做点补充，比如这里cn下的可以以项目模块加公共模块来细分。 import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包const cn = {mess
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2