懒加载

vue Router——进阶篇

放肆的年华 提交于 2019-12-03 13:21:48
转载自:https://www.cnblogs.com/loveyt/p/10905662.html vue Router——基础篇 1.导航守卫 正如其名, vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。 记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫 全局前置守卫 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中 每个守卫方法接收三个参数: to: Route : 即将要进入的目标 路由对象 from: Route : 当前导航正要离开的路由 next: Function : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 next() : 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的) next(false) : 中断当前的导航

首屏优化系列(一)

感情迁移 提交于 2019-12-03 12:07:25
title: 首屏优化系列(一) date: 2018-6-23 13:53:30 tags: Promise 图片懒加载 路由懒加载 categories: 前端 需求描述:优化首屏加载速度,减少白屏时间。 八一八本次项目中使用的优化手段,以及自己从中获得的知识。 由于本次项目较为复杂,模块较多,(当然不比大型电商网站),首页的请求就有8个,并且是精简之后的,稍有不慎,白屏现象就会很严重。体验极差。 ## 首页模块划分 1. 分类 2. 轮播图 3. 推荐 4. 收藏数 5. 购买数 6. 案例展示 7. 主内容展示 8. 合作机构展示 其中位于首屏的是1、2、3、4、5,对于6在大屏幕上也会展示。 优化手段 Skeleton Screen (骨架屏) 简单来说,骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉。体验的效果就是,在页面完全渲染完成之前,用户会看到一个样式简单,描绘了当前页面的大致框架,能够感知到页面正在逐步加载,最终骨架屏中各个占位部分被完全替换。显示效果如下: 此处没有单独为整个页面写一个组件,而是为每个模块引入组件,如推荐课程这里显示5个课程,则在这部分数据的长度为0时,显示5个占位背景,当此模块数据请求完成,这部分就消失,显示真实数据。这种手段只用在了课程首页,因为只有这个页面内请求较多。此外这种写法也不易维护

图片懒加载踩坑

北城余情 提交于 2019-12-03 09:28:53
本文转载于: 猿2048 网站▷ https://www.mk2048.com/blog/blog.php?id=hkc211b2ib 原文地址: 图片懒加载踩坑 原理 对网页加载速度影响最大的就是图片,一张普通的图片可能会有好几 M 的大小,当图片很多时,网页的加载速度变得很缓慢。 为了优化网页性能以及用户体验,我们对图片进行 懒加载 。 懒加载是一种对网页性能优化的方式,它的原理是优先加载在可视区域内的图片,而不一次性加载所以图片。当浏览器滚动,图片进入可视区时再去加载图片。通过设置图片的 src 属性来让浏览器发起图片的请求。当这个属性为空或者没有时,就不会发送请求。 实现 此文所涉及的懒加载皆是在垂直方向上的滚动加载,横向滚动暂不考虑。 懒加载的实现主要是判断当前图片是否到了可视区域这一核心逻辑。我们先来整理一下实现思路: 拿到所有的图片 img dom 。 遍历每个图片判断当前图片是否到了可视区范围内。 如果到了就设置图片的 src 属性。 绑定 window 的 scroll 事件,对其进行事件监听。 HTML 结构 <div class="container"> <div class="img-area"> <img id="first" data-src="./img/ceng.png" alt=""> </div> <div class="img-area">

hibernate中lazy的使用

给你一囗甜甜゛ 提交于 2019-12-03 08:07:43
lazy ,延迟加载 Lazy 的有效期:只有在 session 打开的时候才有效; session 关闭后 lazy 就没效了。 lazy 策略可以用在: * <class>标签上:可以取值true/false * <property>标签上,可以取值true/false,这个特性需要类增强 * <set>/<list>等集合上,可以取值为true/false/extra * <one-to-one>/<many-to-one>等标签上,可以取值false/proxy/no-proxy 6.1 get 和 load 的区别: * get不支持延迟加载,而load支持。 * 当查询特定的数据库中不存在的数据时,get会返回null,而load则抛出异常。 6.2 类 (Class) 的延迟加载 : * 设置<class>标签中的lazy="true",或是保持默认(即不配置lazy属性) * 如果lazy的属性值为true,那么在使用load方法加载数据时,只有确实用到数据的时候才会发出sql语句;这样有可能减少系统的开销。 * //不会发出查询sql System.out.println("group id=" + group.getId()); 这里有一个问题,为什么加载主键的时候不需要发出sql语句。 6.3 集合 (collection) 的延迟加载:可以取值 true ,

懒加载

人走茶凉 提交于 2019-12-03 07:01:26
1. 懒加载 懒加载英文为lazy-loading或load-on-demand,顾名思义,就是按需延迟加载。典型的适用场景: 1) 随着页面滚动,延迟加载资源。 2) 实现资源随页面滚动无限生成。 2. 资源延迟加载(Pure Javascript) 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <script type="text/javascript" src="/index.js"></script> 7 <style type="text/css"> 8 .gallery { width: 80%; margin: auto; } 9 .lazy-image { display: inline-block; width: 30%; height: 50vh; } 10 </style> 11 </head> 12 <body> 13 <div class="gallery"> 14 <img class="lazy-image"> <img

vue性能优化

巧了我就是萌 提交于 2019-12-03 02:37:33
一、webpack层面优化 CDN加载方式替换import方式 原理: 浏览器从服务器上下载 CSS、js 和图片等文件时都要和服务器连接,而大部分服务器的带宽有限,如果超过限制,网页就半天反应不过来。而 CDN 可以通过不同的域名来加载文件,从而使下载文件的并发连接数大大增加,且CDN 具有更好的可用性,更低的网络延迟和丢包率 。 操作: // 文件:./src/index.html <script src="https://cdn.bootcss.com/vue/2.5.3/vue.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.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script> 图片base64转码 目的

vue打包体积优化之旅

匿名 (未验证) 提交于 2019-12-03 00:40:02
在使用vue开发时,遇到打包后单个文件太大,因而需要分包,不然加载时间太久。虽然尽可能减少请求次数,但是单个包太大也不是好事 ˼· 组件按需加载 vue-router 的懒加载 第三方包分离 代码分割时, 现在ui库大多都是以组件的形式进行处理,因而不用将整个库都导入,只需导入想要的即可 根据对应库的文档进行操作即可,现在每个库都有对应的使用流程,及相关配置,并不是很难 只是在导入 css 样式时依旧需要全部导入(目前只能如此) 利用 promise 异步功能,进行相关配置后,页面点击时,会根据相应的进行页面加载,而不是一次性加载完,毕竟有些页面也许根本就不会进入 语法: componet: () => import(‘**/*‘) 如果是大量的,最后提取进行封装成函数,这样调用就好了 经常会引入第三方库,但是这些感觉没有必要也混入到一个文件中 CommonsChunkPlugin 通过将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存到缓存中供后续使用 entry: { // 分离第三方包 vendor: ["jquery", "other-lib"], app: "./entry" }, 使用 promise 作为分割点 需要使用相应的插件 LimitChunkCountPlugin ==== 会注意到有一些很小的 chunk - 这产生了大量 HTTP 请求开销

Hibernate -- lazy加载

匿名 (未验证) 提交于 2019-12-03 00:30:01
类级别懒加载: //类级别懒加载 //load方法 //class lazy属性 //默认值:true load获得时,会返回代理对象,不查询数据库,使用时才查询 public void fun1() { Session session = HibernateUtils.openSession(); session.beginTransaction(); //-------------------------------------- Customer load = (Customer) session.load(Customer.class, 17); System.out.println("----------------sql语句未发送"); System.out.println(load.getName()); //-------------------------------------- session.getTransaction().commit(); session.close(); } lazy :false //类级别懒加载 //load方法 //class lazy属性 //默认值:false load方法执行就会发送sql语句,和get方法一致 public void fun2() { Session session = HibernateUtils

mint-ui 图片懒加载方法

匿名 (未验证) 提交于 2019-12-03 00:18:01
图片懒加载: 引入需要的文件 < script src= "https://unpkg.com/vue-lazyload/vue-lazyload.js" ></ script > <!-- 引入样式 --> < link rel = "stylesheet" href = "https://unpkg.com/mint-ui/lib/style.css" > <!-- 引入组件库 --> < script src = "https://unpkg.com/mint-ui/lib/index.js" > </ script > <!-- 引入 Vue --> < script src = "https://unpkg.com/vue/dist/vue.js" > </ script > 写法 请求数据加载中提示 this . $indicator . open ( ' ...' ) ; // this.$indicator.close(); //数据加载到直接隐藏 文章来源: mint-ui 图片懒加载方法

如何判断元素是否在可视区域ViewPort

匿名 (未验证) 提交于 2019-12-03 00:17:01
个性签名: 生如夏花,逝如冬雪;人生如此,何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个关键字的出现更是家常便饭,每次碰到都需要事先实验一番。为了下次开发提高效率。在这里一次性做个总结, 以用来判断元素是否在可视区域以及用原生js简单实现懒加载 。文末有个简单的懒加载实现的demo,有需要的可以看一下。 Ŀ¼ 工欲善其事,必先利其器。在判断元素是否在可视区域实现简单的原生懒加载前,我们先简单回顾下以下几个关键的概念。 ps: 如果你对这些概念已经比较熟悉了,可以直接跳到第五点查看关键代码示例。 1. 偏移量 偏移量(offset dimension),元素的可见大小由其高度、宽度决定,包括所有内边距、滚动条和边框大小( 注意,不包括外边距 )。通过下列4个属性可以取得元素的偏移量。 偏移量 概念 公式 offsetHeight 元素在垂直方向上占用的空间大小,以像素计。包括元素的高度、(可见的) 水平滚动条的高度、上边框高度和下边框高度。 offsetHeght = content + padding + border + scrollX offsetWidth 元素在水平方向上占用的空间大小,以像素计。包括元素的宽度、(可见的)垂 直滚动条的宽度、左边框宽度和右边框宽度