美文网首页web
项目优化

项目优化

作者: Mr_余 | 来源:发表于2022-07-15 20:48 被阅读0次

图片懒加载,数据懒加载, 路由懒加载

1.图片懒加载原理

1.1 开始时 不设置src属性

1.2 图片在可视区域内,设置src 然后加载图片

1.3 使用API,intersectionObserver 可以用监听元素是否可见

1.4 实际开发中 在vueuse 使用 useIntersectionObserver

1.5 一般封装成全局指令  <img v-lazy="xxxx" ,配合app.use做成独立的插件。

2.数据懒加载

场景:我的主页上有很多个模块,每个模块都发ajax拿数据,并且是在组件创建时发的请求。这样有一个后果:靠近底层的模块其实用户都看不到,这个发请求浪费性能。

思路:判断当前模块是否可见,可见就发请求

做法: 封装一个自定义的hooks,接收一个回调,返回一个ref。这个ref可以用在模块的外层dom上 : 当这个ref引用的dom可见是,就执行这个回调(发请求)

实操:借用vueuse, useIntersectionObserver去封装。(react生态中,有一个和vueuse类似的库: ahooks)

相关文章

  • iOS 如何优化项目

    iOS 如何优化项目 iOS 如何优化项目

  • 无标题文章

    目录 笔记大型项目优化概述大型项目优化的方向代码优化数据库优化缓存优化架构优化Memcache与MySQL比较语法...

  • 前端首屏优化指标

    由于项目项目特殊性,需要对首屏做项目优化现记录如下 1首屏优化指标 想做优化,先要有做优化的指标,不然就没有太多目...

  • webpack的性能优化

    webpack项目优化主要分为两个方面的优化,生产环境的代码优化和开发环境的项目构建优化 生产环境的代码优化 第一...

  • 2018最新 Android 面试题总结(三)

    Q:项目中如何做性能优化的? 举例说明项目注意了哪些方面的性能优化,如布局优化、绘制优化、内存泄漏优化、 响应速度...

  • 大型项目优化的介绍

    大型项目的优化介绍 大型项目优化的成果,是非常显著的,小型项目优化的成果,并不是那么明显的。大型项目:访问人数多!...

  • 「性能优化系列」APP内存优化理论与实践

    性能优化系列: 启动优化 内存优化 布局优化 卡顿优化 apk瘦身优化 电量优化项目地址: fuusy/F...

  • 你会经常遇见的android性能优化方面知识总结

    项目源码 目录 布局优化 绘制优化 内存泄漏优化 ListView和Bitmap优化 布局优化 减少布局文件的层级...

  • vue项目优化

    vue 项目优化 项目打包体积优化 通常vue项目通过webpack打包后,会出现vendor包的体积过大的情况,...

  • 前端小白说Vue性能优化

    开场白:个人认为性能优化可以从三个方面来进行:代码层面的优化项目大包的优化项目部署的优化 1. 优化循环 大多数循...

网友评论

    本文标题:项目优化

    本文链接:https://www.haomeiwen.com/subject/udyfirtx.html