懒加载

一.分析 1.url分析 url可能为http://sc.chinaz.com/tupian/gudianmeinvtupian_{}.html 尝试第一页，http://sc.chinaz.com/tupian/gudianmeinvtupian_1.html，结果不成功，说明第一页和其他页不同 2.查看编码 3.xpath匹配 第一页全部图片浏览完后可以用xpath匹配到： //div[@id="container"]/div/div/a/img/@src 第二页没有全部浏览完 二.图片懒加载技术 1.1什么是懒加载? 懒加载又称延迟加载。当访问一个页面的时候，需要先把img元素或者其他元素的背景图先用一张默认的图片代替（占位图），这样子 浏览器渲染页面的时候就只需请求一次。当图片出现在浏览器可视区域的时候，才设置图片的真实路径，把图片显示出来。 1.2为什么要使用图片懒加载？ 当页面中图片的数量多到一定数量的时候，并且图片大小比较大，比如各种商场网站，图片素材网等等。如果在页面一加载的时候就 加载全部图片，显然会影响网站加载速度和加大服务器负担，而且用户体验也必然不好，那么这时候可以采用懒加载。 1.3 懒加载具体实现原理 页面中的img元素之所以会发送http请求的原因是设置了src属性，否则浏览器就不会发送请求去下载这个图片。首先在页面中把所有 的图片用一张占位图进行占位

图片的可以为页面带来更好的展示效果，同时也能向用户传达更丰富的信息。在页面上展示图片时有两类典型问题： 图片最初是隐藏的，但在需要显示时应能立即显示出来（如轮播图、相册展示、幻灯片） 网页很长，而且网页上有大量的图片（如电商网站中的商品列表），但这些图片未必用户都会看到，如果用户根本就不滚动页面来查看这些图片，那这些图片的加载就会成为一种浪费。 解决这两类问题就需要使用图片预加载和懒加载技术。 图片预加载是在图片显示之前就让浏览器加载这个图片，这样当浏览器真正需要显示这个图片时就能瞬间将它显示出来，不需要再去下载和解码。图片预加载通常使用 Image对象将图片载入内存。Image对象实际上就是一个<img>标签，只不过没有append到页面上而已。 图片懒加载则是让网页下部分的图片都先显示同一个 loading 图片，当页面向下滚动，这些图片露出来时，才将 img标签的src改为正确的图片地址，这时浏览器才去下载图片并解码显示到页面上。图片懒加载的关键是监视页面的滚动及窗口大小变量并计算图片是否处于窗口工作区内（即用户能看到）。有很多图片懒加载插件或独立脚本，如： jQuery.lazyload.js echo.js 来源： https://www.cnblogs.com/liubingboke/p/8899554.html

图片预加载是为了提高用户在浏览很多图片时的体验效果，比如我们在做图片翻转显示等待特效的时候，为了让图片在转换的时候不出现等待，我们最好是先让图片下载到本地，然后在继续执行后续的操作。与图片懒加载相反，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。 理解： 一般浏览器加载图片是按需加载，就是当你请求图片时才给你加载你需要的图片； 　　 预加载就是在你请求之前将图片加载下来，当你请求时直接从浏览器缓存中响应给你； 　　　 懒加载就是在你请求图片时不给你加载，当你到了指定位置时再给你加载。 方法： 现有的预加载方法是一次加载全部图片和一次加载部分图片，视项目而定。（待补充......） js预加载图片使用new Image()基本够用了 new Image().src = 'http://img02.taobaocdn.com/tps/i2/T1iQhUXnxpXXXXXXXX-171-48.png'; //淘宝 new Image().src = 'http://static.paipaiimg.com/module/logo/logo_2011_02_22.png'; //拍拍 new Image().src = 'http://co.youa.baidu.com/picture/services/images/logo

首先，查看官方手册 【此步骤不是必要的，可以直接看下面的实现步骤】 找到 Vue Router 官方手册，找到 “路由懒加载” 模块， 点击跳转 在该页面内找到 syntax-dynamic-import 插件链接 ，如下图所示： 然后开始实现 第一步，安装 syntax-dynamic-import 插件 安装方式一：npm 安装 npm install -- save - dev @babel / plugin - syntax - dynamic - import 安装方式二：可视化安装 第二步，声明 syntax-dynamic-import 插件 在项目中找到 babel.config.js ，添加代码 module . exports = { 'plugins' : [ '@babel/plugin-syntax-dynamic-import' ] } 第三步，使用路由懒加载方式加载路由 其中，group-Foo-Bar 和 group-Baz 为分组名称，分组名称相同的为一组 const Foo = ( ) => import ( /* webpackChunkName: "group-Foo-Bar" */ './Foo.vue' ) const Bar = ( ) => import ( /* webpackChunkName: "group-Foo-Bar" *

1.单例模式简介 单例模式，就是采取一定的方法保证在整个的软件系统中，对某一个类只存在一个对象实例，并且该类只提供一个取得其对象的方法。 2.单例模式的实现方法 单例模式的实现方法分为8种，主要分为: 1.饿汉式(静态常量)（√） 2.饿汉式(静态代码块)（√） 3.懒汉式(线程不安全) 4.懒汉式(线程安全,同步方法) 5.懒汉式(线程安全，同步代码块) 6.双重检查（√） 7.静态内部类（√） 8.枚举类（√） 2.1: 饿汉式（静态常量） 核心代码 : private static SingletonByStatic instance = new SingletonByStatic(); 优点 :简单，在类装载的时候已经完成了实例化，避免了线程同步 缺点 :在类装载的时候就完成实例化，没有达到 lazyloading（懒加载），如果从始至终没有使用过这个实例，则会造成内存的浪费 。导致类装载的原因可能有很多种，这时候万一初始化了instance，未使用。造成了内存的浪费 完整代码: package com.liz.GOF23.singleton.hungry_man; //饿汉式（静态变量） //优点: 简单，在类装载的时候已经完成了实例化，避免了线程同步 //缺点: 在类装载的时候就完成实例化，没有达到 lazyloading（懒加载），如果从始至终没有使用过这个实例

当打包构建应用时，javascript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 结合Vue的异步组件和webpack的code splitting feature,轻松实现路由组件的懒加载。 我们要做的就是把路由对应的组件定义成异步组件： const Foo = resolve => { // require.ensure 是webpack的特殊语法，用来设置code-split point // 代码分块 require.ensure(['./Foo.vue'], () => { resolve(require('./Foo.vue')) }) } 还有另外一种代码分块的语法，使用AMD风格的require,更为简单： const Foo = resolve => require(['./Foo.vue'], resolve) 只是引入模块的方式由原来的 import Foo from './Foo' 改变成了如上的方式，这样就可以根据不同路由来加载不同的模块了，不需要改变任何路由配置，跟之前一样使用Foo: const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })

用vue.js写单页面应用时，会出现打包后的JavaScript包非常大，影响页面加载，我们可以利用路由的懒加载去优化这个问题，当我们用到某个路由后，才去加载对应的组件，这样就会更加高效，实现代码如下： import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', component: resolve => require(['components/Hello.vue'], resolve) }, { path: '/about', component: resolve => require(['components/About.vue'], resolve) } ] }) 来源： https://www.cnblogs.com/HtmlCss3/p/6410521.html

前端开发中，随着业务和页面增加，以组件为基本单位的结构下，组件数量会增长极快，为了优化我们会很显然地想要进行一些工作： 代码分块 懒加载非必要资源文件 非必要资源，指的首次渲染出某页面所不必要的资源，如因为用户操作才出现的图片、弹窗等。 代码分块和懒加载在页面层面具有极大的优化作用，用户很可能只是浏览dashboard页面，可能根本就不会去看详情等页面，那我们就不必将详情页面的代码和dashboard页面代码混在一起，用户看某个页面时只加载那个页面对应的资源即可，可以较大地提升用户体验。本文就在Vue工程下如何在组件层面配置代码分块和懒加载进行讲解。 本文在@vue/cli 3以上版本。 懒加载组件 一般来说，Vue中使用某组件过程大致如下： <script> // Home.vue import HelloWorld from '@/components/HelloWorld.vue' export default { components: { HelloWorld, }, } </script> 这是我们最熟悉的方式了，我们在访问 Home.vue 时，Webpack为我们保证了 HelloWorld.vue 一定是存在的，这是由依赖关系决定的（ Home.vue 依赖于 HelloWorld.vue ）。这很正常对吧，但是如果 HelloWorld.vue 是非必要资源呢

简单版路由懒加载 如何简单快速的在浏览器中实现图片懒加载的功能呢？ 1.改用H5的自定义属性保存图片地址。 2.判断图片是否出现在我们的视野。 3.将自定义属性的值赋值到图片的src属性，并添加class。 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http - equiv = "X-UA-Compatible" content = "ie=edge" > < style > html , body { margin : 0 ; padding : 0 ; } h1 { text - align : center ; } . scroll - con { overflow - y : auto ; overflow - x : hidden ; } . scroll - con - img { width : 80 % ; opacity : 0 ; transform : translateX ( 50 % ) ; transition : all 1 s ; } . fade { transform :

前言 单例模式:保证一个类有且仅有一个实例. 通过定义我们可知它是创建型的一种, 也是比较简单的一种 单例模式的使用场景: 频繁的进行创建和销毁的对象、创建对象时消耗过多或者消费资源过多,但又经常用到的对象、工具类对象、频繁访问数据库或文件的对象. 下面主要分析一下单例模式的六种写法, 以及优缺点! 饿汉式(静态常量) 懒汉式(线程不安全) 懒汉式(线程安全) 双重检查 静态内部类 枚举 饿汉式(静态常量) 代码 //饿汉式(静态常量) class Singleton { // 构造器私有 外部不能实例化 private Singleton ( ) { } private final static Singleton instance = new Singleton ( ) ; public static Singleton getInstance ( ) { return instance ; } } 优点 写法简单, 在类装载的时候完成了实例化 避免了线程同步问题 缺点 导致类装载的原因有很多种, 不能达到 lazy loading(懒加载)的效果 有可能造成内存浪费 懒汉式(线程不安全) 代码 //懒汉式 class Singleton { private static Singleton instance ; private Singleton ( ) { } public