Lazy Load

1、资源(js、css)合并与压缩，减少http请求 1)在线工具压缩 2)构建工具压缩 2、图片优化 1)png8、png24、png32之间的区别 2)图片格式 jpg 图片有损压缩，不支持透明，适用于不需要透明图片的场景 webp 只适用于安卓，ios上有兼容性问题 svg 矢量图，比png小，适用于需要简单的矢量图的场景 png 支持透明，适用于需要大量透明图片的场景 3)雪碧图，将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分 www.spritecow.com 优点： 将多张图片合并到一张图片中，可以减小图片的总大小 将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗，在移动端尤为明显 显示雪碧图的条件： 需要一个设置好宽和高的容器 需要设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。 4)Image inline (一般8kb以下的图片用，根据业务场景权衡) <img alt="Embedded Image" src="data:image/png;base64,/9j/4AAQSkZ..." /> 优点: 减少http请求次数 　　 缺点: 会使总体资源变大 浏览器不会缓存内联图片资源 兼容性较差，只支持ie8以上浏览器

搬运自： https://blog.csdn.net/twodogya/article/details/80223331 vue v-lazy官方API： https://www.npmjs.com/package/vue-lazyload 1.安装插件 npm install vue-lazyload --save-dev 2.在入口文件main.js中引入并使用 import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { loading: require('img/loading.png'), //加载中图片，一定要有，不然会一直重复加载占位图 error: require('img/error.png') //加载失败图片 }); 3.修改图片显示方式为懒加载 img: <img v-lazy="'/static/img/' + item.productImage" :key="'/static/img/' + item.productImage"> //将 :src 属性直接改为v-lazy, :key是为了防止刷新页面或图片更改时图片不更新 背景图: <div style="width:100px;height:100px;" v-lazy:background-image="{src: item

懒加载可以让你不用关心变量的创建时机，等到真正使用的时候才去创建并且能保证在使用的时候已经初始化完毕，在一定程度上可以提高性能。 OC懒加载的原理： 重写变量的 getter 方法，在getter方法里判断变量 if 变量 == nil 则初始化变量 ，否则直接返回已经初始化完毕的变量，所以我们在调用懒加载的变量时 一定要使用 self.变量名（通过getter方法取值）。 话不多说先看一段OC懒加载实现： - (UICollectionViewFlowLayout *)flowLayout { if (!_flowLayout) { _flowLayout = [[UICollectionViewFlowLayout alloc] init]; _flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal; _flowLayout.minimumInteritemSpacing = 0; _flowLayout.minimumLineSpacing = 0; } return _flowLayout; } 我们在调用 self.flowLayout 的时候其实就是在调用变量的 getter 方法。 再看swift 中的懒加载实现： lazy var dataSource = Array<String

前言 今天本来想开源自己写的 CMS 应用的，但是由于五一期间笔者的 mac 电脑突然崩溃了，所有数据无法恢复，导致部分代码丢失，但庆幸的是 cms 的打包文件已上传服务器，感兴趣的朋友可以在文末链接中访问查看。 今天要写的 H5朋友圈 也是基于笔者开发的 cms 搭建的，我将仿照 微信朋友圈 ，带大家一起开发一个能发布动态（包括图片上传）的朋友圈应用。有关服务端部分笔者在本文中不会细讲，后续会在 cms2.0 中详细介绍。 你将收获 使用 umi 快速创建一个H5移动端应用 基于 react-lazy-load 实现图片/内容懒加载 使用 css3 基于图片数量动态改变布局 利用FP创建一个朋友圈form 使用 rc-viewer 查看/旋转/缩放朋友圈图片 基于 axios + formdata 实现文件上传功能 ZXCMS 介绍 应用效果预览 朋友圈列表 查看朋友圈图片 发布动态 正文 在开始文章之前，笔者想先粗略总结一下开发H5移动端应用需要考虑的点。对于任何移动端应用来说，我们都要考虑如下问题： 首屏加载时间 适配问题 页面流畅度 动画性能 交互友好 提供用户反馈 这些不仅仅是前端工程师需要考虑的问题，也是产品经理和交互设计师考虑的范畴。当然还有很多实际的考虑点需要根据自身需求去优化，以上几点大致解决方案如下： 提高首屏加载时间 可以采用 资源懒加载+gzip

无论您是运行个人博客、企业网站、还是Joomla电子商务网站，您最关心的都是网站可以吸引更多的流量，提高流量的转化率，对吗？那么我们今天来了解影响流量转化率的因素之一 ——网站运行速度。 提升您的网站运行速度，专业网站内容需要涉及很多技术方面。在这里，就不去过多描述它们，而是分享一些行之有效的策略来加速和优化Joomla网站。网站速度被认为是影响流量转化率的最重要的因素之一。为什么速度很重要？ 多项研究表明，快速加载的网站可以显着提高转化率并促进销售。几年前，沃尔玛宣布，网站加载时间在2秒内，他们的转化次数达到了顶峰，随着页面加载时间的增加，转化次数逐渐下降。在下面的图表中，您可以注意到，当网站速度从0-1秒降低到3-4秒时，总体转化和销售量是如何波动的。 一项调查表明，有40％的人选择离开网站，因为网站的加载时间超过3秒。那么您希望您的Joomla网站应该更快速的加载。在这里，我将分享一些有关Joomla速度优化的有用技巧。 选择可靠的虚拟主机 选择最佳的Joomla托管时做出正确的决定被认为是加快Joomla网站速度的关键。想为什么？您网站的文件实际上托管在远程服务器上。 当最终用户在浏览器地址栏中点击您的站点URL，并且如果需要花费一些时间从服务器检索数据到最终客户端时，肯定会增加站点加载时间，并且将损失大量的交通。那么什么是最好的解决方案？为了解决这个问题

前端框架 前端框架解决的问题 在我们介绍主流前端框架之前我们先搞清楚，前端框架解决的核心问题是什么： 前端框架解决的核心问题在于数据和视图同步 ， 以一个功能实现为例：更新输入框值 Jquery 是怎么实现的 步骤： 定义修改的值 找到需要修改的元素 修改元素的值为我们给定的值 那么我们有很多元素都要修改呢？ 如果我们需要多次操作，一个简单的方法就是 多次重复这段代码 ， 当然我们更加clever一点， 更优雅些， 使用函数优化 但是这样还不够优雅， 因为我们把这个username写死了， 我们只有当修改username的值时候才会调用这个函数， 我们进一步的思考： 我们关注的点在于 目标元素、数据 ，这两者可以在编译时确定， 只要我们更新这个数据，系统就更新对应引用这个数据的元素，从而将我们从指定元素、修改元素的重复劳动中脱离出来 ，这是一个基本的思路。 框架 目前实现 Vue 绑定数据和节点在一起，在数据更新时，更新对应的元素 React 直接对整个组件diff，找到前后不同的地方，内部根本不需要知道数据和节点的对应关系 Angular 脏检查和proxy结合 （感兴趣可自行了解） 当然前端还有很多不同的地方例如 数据驱动方案，组件化设计 ，这些大家可以慢慢比较思考 Vue框架介绍 Vue是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view

树酱希望将前端的乐趣带给大家 本文已收录 github.com/littleTreem… 喜欢就star✨ 前沿：按需加载是性能优化其中的一个环节，可以是图片的按需加载，也就是lazyload来实现按需加载的场景,也可以是组件库的引入，只需部分组件的使用而无需全局引入整个组件库的场景，又可以是路由的按需加载，当路由被访问的时候才加载对应组件的场景，以此来实现更高效率的使用等等，本文把“懒加载”也划分为按需加载 1.图片按需加载 场景：当一个页面存在需要多个图片加载的场景时，可以通过我们经常看到的所谓“懒加载”，当滑动到图片相应的位置时再加载图片的信息，以此来实现按需加载，举个最简单的例子，你去逛淘宝的时候，电商网站图片信息是很多的，这个时候如果把当前页面下的图片都将资源请求过来，是很消耗资源的，对网站的体验也是极其不好，只需要加载你当前“视线”下的图片即可，vue技术栈中 vue-lazyload 即可实现，下面聊聊它的使用和原理 1.1 vue-lazyload是什么 本质上懒加载就是，在适当的时候加载用户需要看的资源（可视区域），当页面开发时将src路径先预先设置好属性，这样页面加载时图片就不会马上向服务器请求资源，而是当图片滚动到可视区内时，再给src赋值并加载资源，而 vue-lazyload 就是基于这个概念实现的一个vue的工具库，官方介绍：A Vue.js

文源网络，仅供学习之用，如有侵权请联系删除。 缓存的使用，是一个逐渐演进的过程。 问一下你自己，最直接的使用缓存的原因是什么？ 无它，唯快而已！ 追溯一下自己最开始使用缓存的场景，一些数据库里存储的不变的配置信息，服务启动时，直接加载到本地公共模块，方便其它功能模块共享使用。这便是最基本，最简单的本地缓存应用。 一、服务与缓存 所谓的服务，简而言之，一层应用 + 一层数据，应用从数据层获取数据然后加工输出。 数据层，通常我们指的是持久化介质上的持久化存储。它有多种形式的，可以是文件，或者数据库。 数据存储在持久化介质上，而应用运行与内存中。内存和持久化介质是两个有着量级速度差别的不同介质，由此，应用和数据之间便有了“矛盾”。 有了这“矛盾”的引子，便有了对缓存的迫切需求。 我们说的缓存，必然要是存放于内存中的，这样它便能距离应用更近，更快的给出应用所需要的数据，以获得更快的服务响应。 当然，并不是缓存完全隔绝持久层数据。缓存，伴随而生的一个词叫做命中率。 当我们查询的数据存在于缓存中的时候，我们称之为“命中”，此时，所需数据可以直接由缓存提供。 而对于未“命中”的数据，则需要穿过缓存层，进一步去持久化数据层获取。此种情景，我们称之为缓存穿透。 数据获取之后，在返回给应用之前，我们需要重新填充缓存，以供下一次“命中”查询。 当然，上述我们所述只是指“读”查询情景。

Mybatis 所有的力量来自 SqlSession 接口，DefaultSqlSession 是它的一个实现类。 DefaultSqlSession 中包括了 Configuration 和 Executor 。 Configuration 在 SqlSessionFactory 的初始化中通过 XMLMapperBuilder 来生成 MappedStatement ，并放入 Configuraion 中。 执行任何 SQL 语句，都是从 SqlSession 进入，从 Configuration 获取 MappedStatement ，然后放入 Executor。 sqlSource 在 MappedStatement 中会变成 boundSql。 在 Executor 中 MappedStatement 和其他一些条件会生成 StatementHandler 。 在 StatementHandler 中实际执行 JDBC 的操作，然后通过 ResultSetHandler 包装好结果回传。 Configuration ---> MappedStatement ---> Executor ---> StatementHandler ---> ResultSetHandler * JDBC 中没有 Transaction 接口，只是通过 Connection 体现了这个概念

随着Jquery知识点的结束，我也开始接触到框架来了。 开始的时候，总是听到插件和框架等词，我疑惑框架和插件是啥有啥区别？？ 插件可以说有无数种，在网页中任何一种功能都可以被叫做插件，单独提取出来，可以供别人使用，而框架是一个超大号的的插件，它将各种方法融合成一体，使用者可以使用它来构造不同的功能。插件则专注于一种，往往只有一种功能 。 打个比方比如前面学习的jquery， jquery 就是一个框架，在jquery插件库里 http://www.jq22.com/ 有数不胜数的插件，这些插件绝大部分基于jq框架来编写。 理解完插件和框架的区别，下面来写一写这几天初步学习的插件库 1. jquery 对于我而言肯定是一个熟悉的框架了 官网网址： https://jquery.com/ 插件库： http://www.jq22.com/ 这里简单的介绍一下jquery ：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（ 或JavaScript框架 ）。 2. Select2 官网网址： https://select2.org/ 3. Fullpage 官网网址： https://alvarotrigo.com/fullPage/#page1 4. lazyload 官网网址： https:/