懒加载

单例模式 ，就是只有一个实例对象存在，保证了多线程情况下的线程安全问题。保证一个类仅有一个实例，并提供一个访问它的全局访问点。 创建单例对象的三要素： 单例类只能有一个实例。 单例类必须自己创建自己的唯一实例。 单例类必须给所有其他对象提供这一实例。 主要应用场景： Windows 是多进程多线程的，在操作一个文件的时候，就不可避免地出现多个进程或线程同时操作一个文件的现象，所以所有文件的处理必须通过唯一的实例来进行。 一些设备管理器常常设计为单例模式，比如一个电脑有两台打印机，在输出的时候就要处理不能两台打印机打印同一个文件。 要求生产唯一序列号。 WEB 中的计数器，不用每次刷新都在数据库里加一次，用单例先缓存起来。 创建的一个对象需要消耗的资源过多，比如 I/O 与数据库的连接等。 实现单列模式的关键 ： 私有构造方法 单例模式的七种实现方式： 单例模式 主要分为 饿汉式 和 懒汉式 两种 单列模式主要考虑 实例对象唯一 懒加载 性能问题 1、饿汉式 这是饿汉式的简单实现保证了线程安全，但是浪费内存的开销，没有实现懒加载。 package com . multi . thread . two . design . pattern ; /** * 饿汉式：实现步骤 * 1、私有构造方法 * 2、新建实例对象 * 3、对外提供获取对象的全局访问点 * 保证线程安全， *

最近，我们在项目中实践了webp图片，并且抽离出了工具模块，整合到了项目的基础模板中。传闻IOS10也将要支持webp，那么使用webp带来的性能提升将更加明显。估计在不久的将来，webp会成为标配。 本文主要分享一下我们在webp图片使用上的实践之路。 我们会从三部分来聊聊webp这个话题。 什么是webp，它有什么用? 使用webp的常规方法以及优劣。 我们是如何用上webp的。 PS：如果是对webp有一定了解的朋友，建议直接看第三部分。因为是讲我们的实践之路，所以第三部分会多讲一些。 一、什么是webp，它有什么用？ webp是谷歌推出的一种图片格式，它的优点就是同等画面质量下，体积比jpg、png这些少了25%以上。 大家都知道移动互联网时代，页面大小和用户留存息息相关，更快的加载页面才能让更多用户关注到你的内容，而图片一直都是页面体积的大头，拿我们的活动页面来说，图片占据了80%以上的页面大小。所以使用webp的话，可以瞬间让页面大小下降1/4，不得不说是一个极具性价比的优化点。 当然，它也不是没有缺点，浏览器对于webp的解码速度相对于jpg来说会慢一些，不过这和体积减小带来的性能提升，可以忽略不计了。 那么既然webp这么好，为什么没有大范围使用呢？归根结底还是webp是谷歌推出的，目前主流浏览器只有chrome和安卓支持。不过IOS也快支持了，期待ing^ ^。在

什么是预加载什么是懒加载 预加载：顾名思义就是提前加载，比如提前加载图片。当用户需要查看时，可直接从本地缓存中取。 预加载的优点在于如果一张图片过大，那么请求加载图片一定会慢，页面会出现空白的现象，用户体验感就变差了，为了提高用户体验，先提前加载图片到本地缓存，当用户一打开页面时就会看到图片。 实现方式： 1、虚拟代理实现图片预加载 关键在于new 一个image对象，当图片对象的onload事件被触发时设置真实的图片路径。这是最常用的方式 2、在CSS background中加载：会增加页面的整体加载时间 应用场景：某个效果切换按钮需要临时切换一张图片，如果图片不预先加载，页面会出现短暂的空白影响用户体验。 懒加载：懒加载就是需要用到的时候才去加载，也称是延迟加载。 懒加载的优点在于如果在页面一加载的时候就加载全部图片，这样会影响网站加载速度和加大服务器负担，而且用户体验也必然不好，那么这时候可以采用懒加载。懒加载会减轻服务器的压力，减少一次性请求的压力和延迟请求，是服务器前端的优化。 实现方式 1、将img的src属性先使用一张本地占位符，或者为空。然后真实的图片路径再定义一个data-img属性存起来，待达到一定条件的时将data-img的属性值赋给src。 来源： CSDN 作者： Miss_hhl 链接： https://blog.csdn.net/Miss_hhl

一、什么是图片懒加载 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。 通俗一点： 1、就是创建一个自定义属性data-src存放 真正需要显示的图片路径 ，而img自带的src放一张大小为 1 * 1px的图片路径 。 2、当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的 值赋 给src。 ps：自定义属性可以取任何名字 HTML: html.png CSS: <style> .container { max-width: 800px; margin: 0 auto; } .container:after{ content: ''; display: block; clear: both; } .container img { float: left; width: 50%; } h1{ clear: both; } </style> 二、需要了解的问题 1、如何加载图片？ 2、如何判断一个元素出现在视野中？ 如何加载图片 只需要把data-src中的地址放到src的里面就好了 代码： function loadImg($img){ //.attr(值) //.attr(属性名称,值)

1. 性能优化原则 多使用内存、缓存或其他方法 减少CPU计算量，减少网络加载耗时 （适用于所有编程的性能优化——空间换时间） 2. 从何入手 （1）让加载更快 减少资源体积，压缩代码 减少访问次数：合并代码，SSR服务器端渲染，缓存 使用更快的网络：CDN （2）让渲染更快 CSS放在head，JS放在body最下面 尽早开始执行JS，用DOMContentLoaded触发 懒加载（图片懒加载，上滑加载更多） 对DOM查询进行缓存 频繁DOM操作，合并到一起插入DOM结构 节流throttle，防抖debounce（体验性优化，让渲染更加流畅） 3. 缓存 静态资源加hash后缀，根据文件内容计算hash 文件内容不变，则hash不变，则url不变 url和文件不变，则会自动触发http缓存机制，返回304 4. SSR（Server Side Render） 服务器端渲染：将网页和数据一起加载，一起渲染 非SSR（前后端分离）：先加载网页，再加载数据，再渲染数据 早先的JSP、ASP、PHP都是SSR，现在的Vue、React用node做SSR 5. 懒加载 < img id = " img1 " src = " preview.png " data-realsrc = " abc.png " /> < script type = " text/javascript " >

对某个类只能存在一个对象实例，并且该类只提供一个获得其对象实例的方法(静态方法) 单例模式的八种方式: 1.饿汉式(静态变量) 2.饿汉式(静态代码块) 3.懒汉式(线程不安全) 4.懒汉式(线程安全，同步方法) 5.懒汉式(线程安全，同步代码块) 6.双重检查 7.静态内部类 8.枚举 饿汉式(静态变量) public class Singleton1 { public static void main(String[] args) { //测试 Singleton instance1=Singleton.getInstance(); Singleton instance2=Singleton.getInstance(); System.out.println(instance1==instance2);//true } } //饿汉式(静态常量) class Singleton{ //1.构造器私有化,外部不能new private Singleton(){ } //2.本类内部创建对象实例 private final static Singleton instance=new Singleton(); //3.提供一个公有的静态方法，返回实例对象 public static Singleton getInstance(){ return instance; } } 优缺点：

vue-router路由懒加载 懒加载：也叫延迟加载。即在需要的时候进行加载，随用随载。 为什么需要懒加载？ 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时. 简单的说就是：进入首页不用一次加载过多资源造成用时过长！！！ 如何实现？ 懒加载写法： 在vue中目前使用import()来代替require.ensure() 这三种方法的作用：都是懒加载的用法，只是现在更多都是使用import 转自：https://www.cnblogs.com/psxiao/p/11612978.html 来源： CSDN 作者： weixin_40661982 链接： https://blog.csdn.net/weixin_40661982/article/details/103866789

KVC 字典转模型构造函数 /// `重写`构造函数 /// /// - parameter dict: 字典 /// /// - returns: Person 对象 init(dict: [String: AnyObject]) { setValuesForKeysWithDictionary(dict) } 以上代码编译就会报错！ 原因： KVC 是 OC 特有的，KVC 本质上是在 运行时 ，动态向对象发送 setValue:ForKey: 方法，为对象的属性设置数值 因此，在使用 KVC 方法之前，需要确保对象已经被正确 实例化 添加 super.init() 同样会报错 原因： 必选属性 必须在调用父类构造函数之前完成初始化分配工作 将必选参数修改为可选参数，调整后的代码如下： /// 个人模型 class Person: NSObject { /// 姓名 var name: String? /// 年龄 var age: Int? /// `重写`构造函数 /// /// - parameter dict: 字典 /// /// - returns: Person 对象 init(dict: [String: AnyObject]) { super.init() setValuesForKeysWithDictionary(dict) } } 运行测试，仍然会报错

只实现 getter 方法的属性被称为计算型属性，等同于 OC 中的 ReadOnly 属性 计算型属性本身不占用内存空间 不可以给计算型属性设置数值 计算型属性可以使用以下代码简写 var title: String { return "Mr " + (name ?? "") } 计算型属性与懒加载的对比 计算型属性 不分配独立的存储空间保存计算结果 每次调用时都会被执行 更像一个函数，不过不能接收参数，同时必须有返回值 var title2: String { return "Mr" + (name ?? "") } 懒加载属性 在第一次调用时，执行闭包并且分配空间存储闭包返回的数值 会分配独立的存储空间 与 OC 不同的是，lazy 属性即使被设置为 nil 也不会被再次调用 lazy var title: String = { return "Mr " + (self.name ?? "") }() 来源： https://www.cnblogs.com/feng9exe/p/9648520.html

当我们用到的时候才加载，不用的时候不加载。其本质是重写getter方法。 懒加载的好处是：使代码的可读性更强，代码之间的独立性更强，松耦合，并且节省了内存资源。 什么是懒加载 懒加载是延时加载，即在使用到该对象的时候才将其加载到内存中。 为什么要用懒加载 主要目的是为了提升效率 在iOS开发中，加载数据的操作一般放在viewDidLoad中，而如果此时展示的界面不需要数据，那我们可能会因为人为的加载了数据而影响了系统的性能。还不如让系统利用这段时间做它认为更加重要的事情。 在iOS开发中，如果某个APP占用内存过大，系统会给这个APP发送内存警告，一般当APP接收到内存警告时，即在 didReceiveMemoryWarning 方法中程序员会做一些清理内存的操作，此时我们的数据或者其他控件占用的内存可能会被清理掉，这时如果再去访问这块内存就会出现野指针的问题。 综合以上两点，我们采用懒加载的方式对数据以及控件进行加载，这样可以保证在使用的时候去加载，而且能保证使用时肯定有。 怎么用懒加载 懒加载的实现，就是重写对象的getter方法。即在系统调用某个对象之前先进行判断，如果有这个对象（即对象不为空）就直接返回这个对象，如果对象为空就创建它并且返回它。一般而言需要懒加载的是数据类型和UI控件，以下将对这两点分开阐述。 数据类型的懒加载 数据类型的懒加载一般包括字典，数组