GEAs
GEAs

彻底弄懂图片懒加载及底层实现原理

我们都知道图片懒加载是前端性能优化比较常见的一个手段，那么，你真的了解图片懒加载吗，本文将带你从简单到复杂一步一步彻底弄懂其底层实现原理。

试想一下，假设用户在访问我们的某个页面时，一开始就加载页面的全部图片，如果我们的网站中有大量的图片，那么整个加载过程是非常耗时的，如果这个时候用户的网络正好又是非常差的情况下，那么我们的网站就会卡在某个地方，一直加载。整个过程用户的体验效果是非常差的，这时候就需要利用图片懒加载技术。

简单实现图片懒加载
思路：给图片一个src属性存储一个加载动画的图片，data-src存储真实的图片，在图片每一进入可视区域的时候先加载加载动画的图片，等真正进入可视区域再加载真实图片。
1.获取屏幕可视区域的高度
document.documentElement.clientHeight
彻底弄懂图片懒加载及底层实现原理_第1张图片
2.获取元素相对于文档顶部的高度
element.offsetTop
彻底弄懂图片懒加载及底层实现原理_第2张图片
3.获取滚动条的高度
document.documentElement.scrollTop
彻底弄懂图片懒加载及底层实现原理_第3张图片
当元素相对于文档顶部的高度<屏幕可视区域的高度+滚动条的高度
说明图片已经在视野范围内了，可以加载图片，下面是具体的代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <img src="./img/loading.gif" data-src="./img/1.png" alt="">
  <img src="./img/loading.gif" data-src="./img/2.png" alt="">
  <img src="./img/loading.gif" data-src="./img/3.png" alt="">
  <img src="./img/loading.gif" data-src="./img/4.png" alt="">
  <img src="./img/loading.gif" data-src="./img/5.png" alt="">
  <img src="./img/loading.gif" data-src="./img/6.png" alt="">
</body>

<script>
    let num = document.getElementsByTagName("img").length
    let imgs = document.getElementsByTagName("img")

    let n = 0
    function lazyload(imgs){
      //获取可视区域的高度
      let visibleHeight = document.documentElement.clientHeight
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop

      for (let i = n; i < num; i++){
        if (imgs[i].offsetTop < visibleHeight + scrollTop) {
          if (imgs[i].getAttribute("src") === "./img/loading.gif") {
            imgs[i].src = img[i].getAttribute("data-src")
          }
          n = i + 1 // 加载过的图片防止二次加载
        }
      }
    }
    window.onload = window.onscroll = function () { 
      //onscroll()在滚动条滚动的时候触发
      lazyLoad(imgs);
    }
</script>
</html>

使用getBoundingClientRect()实现图片懒加载
getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。 是DOM元素到浏览器可视范围的距离。

思路：只需要获取img元素相对于视口的顶点位置rectObject.top，只要这个值小于浏览器的高度window.innerHeight就说明进入可视区域。
实现方法

function isInVisible(el){
  const bound = el.getBoundingClientRect();
  const clientHeight = window.innerHeight;
  return bound.top <= clientHeight;
}
只需把上面代码的
//imgs[i].offsetTop < visibleHeight + scrollTop替换成isInVisible(imgs[i])就可以了

使用IntersectionObserver实现图片懒加载
IntersectionObserver可以观察一个元素是否在视窗可见。
使用方法

let io = new IntersectionObserver(callback, option);
/ 开始观察
io.observe(document.getElementById('container'));

// 停止观察
io.unobserve(element);

// 关闭观察器
io.disconnect();

具体实现代码

    const imgs =  document.querySelectorAll('img')
    function lazyLoad(target) {
      const io = new IntersectionObserver((entries, observer) => {
        entries.forEach(entrie => {
          if (entrie.isIntersecting) {
            const img = entrie.target;
            const src = img.getAttribute('data-src');
            img.setAttribute('src', src)
            observer.unobserve(img); // 停止监听已开始加载的图片
          }

        })
      }, {});
      io.observe(target)
    }

    imgs.forEach(img => {
      lazyLoad(img);
    })

好了，今天的分享就到这里！

你可能感兴趣的:(学习总结,JS高级部分,前端,javascript,html)

  • Spring Boot入门(19)：超酷炫！Spring Boot + Thymeleaf 带你玩转 Web 页面开发！ 喵手 Springbootspringboot前端后端
    前言在Web开发中，不管是MVC框架还是前后端分离，都需要使用模板引擎来渲染生成页面。Thymeleaf是一款非常优秀的模板引擎，它以自然的方式处理模板，支持HTML5标签，同时兼容HTML4。本文将介绍如何使用SpringBoot框架，整合Thymeleaf模板引擎来开发Web页面。摘要本文将分为以下几个部分:新建SpringBoot项目配置Thymeleaf模板引擎编写HTML页面模板引擎使用
  • 如何利用Python下载酷狗音乐 傻啦嘿哟 关于python那些事儿python开发语言
    目录一、酷狗音乐下载的挑战与解决方案二、Python下载酷狗音乐的步骤选择合适的第三方库安装you-get库下载酷狗音乐三、注意事项与常见问题版权问题链接失效下载速度四、案例与代码示例五、总结与展望随着互联网的迅猛发展，音乐已经成为人们日常生活中不可或缺的一部分。酷狗音乐作为中国领先的在线音乐平台，拥有庞大的音乐库和众多用户。然而，有时我们可能希望将酷狗音乐下载到本地，以便在没有网络或希望离线欣赏
  • Android Fragment 按键监听 weixin_44128558 androidandroidandroidstudiojava
    Fragment中是没有监听按键的方法的，但是Fragment是寄托于Activity的，只要在Activity中将监听到的按键传递给Fragment就行，网络上大部分都是让Fragment获得焦点，再添加一个按键监听器，这样就能监听到了@Nullable@OverridepublicViewonCreateView(@NonNullLayoutInflaterinflater,@Nullable
  • python概述_理解Python数据类：Dataclass 的特征概述 （上） weixin_39875842 python概述
    原标题UnderstandingPythonDataclasses—Part1，作者为ShikharChauhan。这是一个包含两部分的博文：这一篇是Dataclass的特征概述下一篇是Dataclassfields的概述引言Dataclasses是一些适合于存储数据对象(dataobject)的Python类。你可能会问，什么是数据对象?下面是一个并不详尽的用于定义数据对象的特征列表：他们存储并
  • 提升短视频体验的tiktok专线加速器优势 以太坊
    在这个信息爆炸的时代，短视频已成为人们日常生活中不可或缺的一部分。尤其是tiktok，这一平台以其丰富的内容和独特的社交属性吸引了大量用户。然而，用户在使用过程中常常会遇到视频加载缓慢、卡顿等问题，影响了观看体验。为了解决这一难题，IPIPGO直播专线应运而生。作为一款专注于提升视频流畅度的工具，tiktok专线加速器能够为用户提供更优质的观看体验，让每一个精彩瞬间都不再错过。tiktok专线加速
  • 盘点ECMAScript 2024的新提案 前端
    前面我们了解了ECMAScript2024(ES15)的5个新特性，现在我们继续学习一下其他令人耳目一新的提案吧。1.模式匹配（初期阶段）JavaScript变得更智能了，有了模式匹配！想象它就像一个超强大的switch语句，可以处理复杂的数据结构。ES15允许你简单地匹配模式，而不是编写一堆嵌套的条件语句来检查对象的形状。️旧方式functioncheckAnimal(animal){if(an
  • 聊聊 Windi CSS 的替代品 UnoCSS
    WindiCSSWindiCSS是一个下一代工具优先的CSS框架，它以TailwindCSS为基础，提供了更快的加载体验和一些额外的高级功能。以下是关于WindiCSS的一些关键特点：按需供应：WindiCSS会扫描你的HTML和CSS，然后按需生成工具类（utilities），这意味着只有你实际使用的工具类才会被包含在最终的CSS文件中，从而减少了文件大小和提高了加载速度。与TailwindCS
  • Python中dataclass库 SteveKenny #Python第三方库python开发语言哈希算法
    文章目录dataclass语法一、简介二、装饰器参数三、数据属性1、参数2、使用示例3、注意事项四、其他1、常用函数2、继承3、总结dataclass语法一、简介官方文档的地址为：https://docs.python.org/3.9/library/dataclasses.htmldataclass的定义位于PEP-557，根据定义一个dataclass是指“一个带有默认值的可变的namedtu
  • 数据可视化大屏设计与实现 木觞清 3天入门Python数据可视化echartspythonflaskjavascripthtmlcss3
    本文将带你一步步了解如何使用ECharts实现一个数据可视化大屏，并且如何动态加载天气数据展示。通过整合HTML、CSS、JavaScript以及后端接口请求，我们可以构建一个响应式的数据可视化页面。1.页面结构介绍在此例中，整个页面分为几个主要部分：大屏展示区域、多个数据图表、动态加载的表格数据，以及地图展示等功能模块。我们将详细介绍每一部分的实现和交互。1.1页面整体结构以下是页面的结构，其中
  • YOLOv10-1.1部分代码阅读笔记-base.py 红色的山茶花 YOLO笔记深度学习
    base.pyultralytics\data\base.py目录base.py1.所需的库和模块2.classBaseDataset(Dataset):1.所需的库和模块#UltralyticsYOLO,AGPL-3.0licenseimportglobimportmathimportosimportrandomfromcopyimportdeepcopyfrommultiprocessing.
  • 【Python】python dataclass使用指南 菜菜2022 Python学习笔记Pythondataclass字段继承数据结构
    https://www.cnblogs.com/apocelipes/p/10284346.html定义一个dataclass深入dataclass装饰器数据类的基石——dataclasses.field一些常用函数dataclass继承参考https://docs.python.org/3.7/library/dataclasses.htmlhttps://www.python.org/dev/
  • 全新 Hopper 架构的Transformer 引擎有什么特点？ 扫地的小何尚 人工智能
    Transformer引擎是全新Hopper架构的一部分，将显著提升AI性能和功能，并助力在几天或几小时内训练大型模型。Transformer模型是当今广泛使用的语言模型（例如asBERT和GPT-3）的支柱。Transformer模型最初针对自然语言处理用例而开发，但因其通用性，现在逐步应用于计算机视觉、药物研发等领域。与此同时，模型大小不断呈指数级增长，现在已达到数万亿个参数。由于计算量巨大，
  • 数据类库 Dataclasses 深入指南 陆或愉
    数据类库Dataclasses深入指南dataclassDataclassesforTypeScript&JavaScript项目地址:https://gitcode.com/gh_mirrors/da/dataclass项目介绍数据类库（Dataclasses）是Python标准库中的一个模块，自Python3.7起被引入。它通过装饰器@dataclass简化了自定义类的创建过程，自动添加了属性
  • Hive 查看partition 以及msck 修复分区 dgsdaga3026010 大数据
    #checktable的partitionhive>showpartitionstable_name;如果是外部表，不小心把表给删除了，可以适用下命令重新关联表和数据[MSCKREPAIRTABLE]全量修复分区hive>msckrepairtabletable_name;转载于:https://www.cnblogs.com/TendToBigData/p/10501178.html
  • Python中的算术运算符 程百球 Python从基础到核心Python运算符
    1算术运算符下面以a=10,b=20为例进行计算运算符描述实例+加两个对象相加a+b输出结果30-减得到负数或是一个数减去另一个数a-b输出结果-10*乘两个数相乘或是返回一个被重复若干次的字符串a*b输出结果200/除x除以yb/a输出结果2//取整除返回商的整数部分9//2输出结果4,9.0//2.0输出结果4.0%取余返回除法的余数b%a输出结果0**幂返回x的y次幂a**b为10的20次方
  • qt/c++学习笔记之基于tcp的文件同步程序demo（第二部分） Bryce学亮 qtc++学习
    server服务器端头文件filebase.h#ifndefFILEBASE_H#defineFILEBASE_H#include#include#include#include#includeenumMsgType{MsgTypeInvaid=0,MsgTypeFile,MsgTypeDel,MsgTypeRename};classfilebase:publicQObject{Q_OBJECTp
  • 如何快速在Windows 10 + Anaconda 3 中使用Mxnet及gluon qianchess mxnet使用mxnetwin10anacondagluon人工智能
    如何快速在Windows10+Anaconda3中使用Mxnet及gluon网络上Mxnet的安装以及使用方法很多，自从其作者之一李沐推出了基于Mxnet的深度学习课程之后，我也尝试着去使用了一下Mxnet。首先第一步就是在自己的系统中安装Mxnet及其相关组建。现在的Mxnet常常会跟其虚拟环境Gluon结合在一起，所以下文就一起阐述一下，顺便记录一下自己踩的坑。注意本文的大部分内容都可以在官网
  • JavaWeb 前端基础 html + CSS 快速入门 | 018 菜鸟阿康学习编程 前端前端htmlcss
    今日推荐语指望别人的救赎，势必走向毁灭——波伏娃日期学习内容打卡编号2025年01月17日JavaWeb前端基础html+CSS018前言哈喽，我是菜鸟阿康。今天正式进入JavaWeb的学习，简单学习html+CSS这2各前端基础部分，以下是我的重点总结，希望对你有所帮助。（建议先看左侧目录，先了解文章结构）（请忽略错误的大纲编号，我直接从笔记中粘贴过来的，就没严格纠正了，重点在内容！）文末和主页
  • C#+ckeidtor5实现图片上传 假装我不帅 dotnetjsc#ckeditor5
    index.htmlCkEditor5html,body{width:100%;height:100%;}.editor-container{width:100%;height:100%;}#editor{width:100%;height:100%;}HelloWorld!ClassicEditor.create(document.querySelector('#editor'),{licens
  • 【前端】20种 Button 样式 m0_74823264 vip1024p前端
    20种Button样式在前端开发中，Button按钮的样式设计是提升用户交互体验的重要一环。以下是20种常见的Button样式，这些样式主要基于CSS实现，可以根据具体需求进行调整和组合。1.默认样式CSS样式：.button{background-color:#007bff;color:#fff;border:1pxsolid#007bff;}2.扁平样式CSS样式：.button{backgr
  • 大模型prompt提示工程案例 数研妙手 AI技术实践prompt人工智能
    一、明确目标和任务在设计Prompt之前，首先要明确你的目标是什么，是文本生成、信息提取、问答、翻译，还是其他任务。例如，如果是文本生成任务，要确定生成的文本类型，如故事、新闻报道、产品描述等。二、Prompt的基本结构指令部分：清晰明确地说明你希望大模型执行的任务。输入部分：提供必要的输入信息，以便大模型理解上下文。约束部分（可选）：为大模型的输出设定限制，如字数、格式、语言等。三、设计原则清晰
  • 使用 Node.js 处理异步编程的挑战
    Node.js是一个强大的JavaScript运行时环境，它以其非阻塞、事件驱动的特性闻名，使其在构建高并发应用程序时非常出色。然而，这种异步编程模型也带来了挑战，尤其是当我们需要处理复杂的异步操作时。本文将深入探讨Node.js中异步编程的挑战，并介绍一些常见的解决方案。异步编程的挑战在Node.js中，许多操作都是异步的，比如文件操作、网络请求、数据库查询等。虽然异步操作可以提高应用程序的性能
  • 外版抖音TikTok显示网络不稳定的解决方案 android
    在这个信息爆炸的时代，短视频平台如外版抖音TikTok已经成为了人们日常生活中不可或缺的一部分。然而，许多用户在使用过程中却常常遇到“网络不稳定”的提示，仿佛一场精彩的表演被突如其来的故障打断。这不仅影响了用户的观看体验，也给品牌推广带来了困扰。为了帮助大家更好地享受TikTok带来的乐趣，我们推荐IPIPGO直播专线，助力您轻松畅游全球网络。为何会出现网络不稳定的提示？首先，我们需要了解导致外版
  • 前端HTML-将进酒 dgw2648633809 前端html
    要求：实现：将进酒body{font-family:Arial,sans-serif;}h2{text-align:center;}p{text-indent:2em;margin:10px0;}img{float:left;margin-right:20px;}将进酒君不见黄河之水天上来君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天
  • 前端HTML-网上转账电子账单 dgw2648633809 前端html
    要求：实现：工商银行电子汇款单table{border-collapse:collapse;width:100%;}th,td{border:1pxsolidblack;padding:8px;text-align:left;}th{background-color:#f2f2f2;}工商银行电子汇款单回单类型网上转账汇款指令序号HQH00000000000000013878172收款人户名老牟付
  • Python基础03（循环与选择结构） XYX的Blog Pythonpython数据结构开发语言
    Python循环与选择结构1.条件表达式绝大部分合法的Python表达式都可以作为条件表达式。在python中除了False，0，0.0，0j，None，空列表，空元组，空集合，空字典，空字符串，空range对象，其余的都与True等价函数，生成器对象都等价于True2.选择结构Python的分支控制语句，即根据表达式的判断结果，为True还是为False，选择运行程序的其中一个分支。Python
  • DAPP开发 aalonLLLL
    DApp开发是怎么回事？如何保证安全性？DApp这其实就是用智能合约来进行交互的一种操作，比如在交易额的统计规则中，是在玩家和DAPP交易过程中所出现的交易金额。绝大部分情况下，DAPP一般都是在公有链上进行研发，但是很多人可能对此都不是特别的了解。首先就应该知道，DAPP开发到底是怎么回事？DAPP开发到底是怎么回事有许多人可能都会特别质疑这中间的一些数据真实性，比如是否存在刷量的现象，而根据目
  • 如何使用JavaScript开发AR(增强现实)移动应用 (一)
    Python中的class体内定义方法时，如果没有显式地包含self参数，有时候依然可以被调用。这是一个非常有趣的话题，因为它涉及到对Python中类与对象之间关系的更深理解。要理解为什么这种情况下方法依然能够被调用，我们需要逐步拆解Python类的构造方式以及方法绑定的原理。
  • 外版抖音TikTok显示网络不稳定的解决方案 android
    在这个信息爆炸的时代，短视频平台如外版抖音TikTok已经成为了人们日常生活中不可或缺的一部分。然而，许多用户在使用过程中却常常遇到“网络不稳定”的提示，仿佛一场精彩的表演被突如其来的故障打断。这不仅影响了用户的观看体验，也给品牌推广带来了困扰。为了帮助大家更好地享受TikTok带来的乐趣，我们推荐IPIPGO直播专线，助力您轻松畅游全球网络。为何会出现网络不稳定的提示？首先，我们需要了解导致外版
  • Python语言的数据类型 疯狂小小小码农 包罗万象golang开发语言后端
    Python中的数据类型详解Python是一种多用途的编程语言，以其简单易学的语法受到广泛欢迎。为了有效地处理和表示不同类型的数据，Python为程序员提供了多种数据类型。本文将深入探讨Python中的基本数据类型、复合数据类型、标准库中的数据类型以及各类型之间的转换。一、基本数据类型1.整数（int）整数（int）是Python中的一种基本数据类型，表示没有小数部分的整数。Python中的整数可
  • 安装数据库首次应用 Array_06 javaoraclesql
    可是为什么再一次失败之后就变成直接跳过那个要求 enter full pathname of java.exe的界面 这个java.exe是你的Oracle 11g安装目录中例如：【F:\app\chen\product\11.2.0\dbhome_1\jdk\jre\bin】下的java.exe 。不是你的电脑安装的java jdk下的java.exe！ 注意第一次，使用SQL D
  • Weblogic Server Console密码修改和遗忘解决方法 bijian1013 Welogic
            在工作中一同事将Weblogic的console的密码忘记了，通过网上查询资料解决，实践整理了一下。 一.修改Console密码         打开weblogic控制台，安全领域 --> myrealm -->&n
  • IllegalStateException: Cannot forward a response that is already committed Cwind javaServlets
    对于初学者来说，一个常见的误解是：当调用 forward() 或者 sendRedirect() 时控制流将会自动跳出原函数。标题所示错误通常是基于此误解而引起的。 示例代码： protected void doPost() { if (someCondition) { sendRedirect(); } forward(); // Thi
  • 基于流的装饰设计模式 木zi_鸣 设计模式
    当想要对已有类的对象进行功能增强时，可以定义一个类，将已有对象传入，基于已有的功能，并提供加强功能。 自定义的类成为装饰类 模仿BufferedReader，对Reader进行包装，体现装饰设计模式 装饰类通常会通过构造方法接受被装饰的对象，并基于被装饰的对象功能，提供更强的功能。 装饰模式比继承灵活，避免继承臃肿，降低了类与类之间的关系 装饰类因为增强已有对象，具备的功能该
  • Linux中的uniq命令 被触发 linux
    Linux命令uniq的作用是过滤重复部分显示文件内容，这个命令读取输入文件，并比较相邻的行。在正常情 况下，第二个及以后更多个重复行将被删去，行比较是根据所用字符集的排序序列进行的。该命令加工后的结果写到输出文件中。输入文件和输出文件必须不同。如 果输入文件用“- ”表示，则从标准输入读取。 AD： uniq [选项] 文件 说明：这个命令读取输入文件，并比较相邻的行。在正常情况下，第二个
  • 正则表达式Pattern 肆无忌惮_ Pattern
    正则表达式是符合一定规则的表达式，用来专门操作字符串，对字符创进行匹配，切割，替换，获取。   例如，我们需要对QQ号码格式进行检验 规则是长度6~12位  不能0开头  只能是数字，我们可以一位一位进行比较，利用parseLong进行判断，或者是用正则表达式来匹配[1-9][0-9]{4,14} 或者 [1-9]\d{4,14} &nbs
  • Oracle高级查询之OVER (PARTITION BY ..) 知了ing oraclesql
    一、rank()/dense_rank() over(partition by ...order by ...) 现在客户有这样一个需求，查询每个部门工资最高的雇员的信息，相信有一定oracle应用知识的同学都能写出下面的SQL语句： select e.ename, e.job, e.sal, e.deptno from scott.emp e, (se
  • Python调试 矮蛋蛋 pythonpdb
    原文地址： http://blog.csdn.net/xuyuefei1988/article/details/19399137 1、下面网上收罗的资料初学者应该够用了，但对比IBM的Python 代码调试技巧： IBM：包括 pdb 模块、利用 PyDev 和 Eclipse 集成进行调试、PyCharm 以及 Debug 日志进行调试： http://www.ibm.com/d
  • webservice传递自定义对象时函数为空，以及boolean不对应的问题 alleni123 webservice
    今天在客户端调用方法 NodeStatus status=iservice.getNodeStatus(). 结果NodeStatus的属性都是null。 进行debug之后，发现服务器端返回的确实是有值的对象。 后来发现原来是因为在客户端，NodeStatus的setter全部被我删除了。 本来是因为逻辑上不需要在客户端使用setter， 结果改了之后竟然不能获取带属性值的
  • java如何干掉指针，又如何巧妙的通过引用来操作指针————>说的就是java指针 百合不是茶
    C语言的强大在于可以直接操作指针的地址，通过改变指针的地址指向来达到更改地址的目的,又是由于c语言的指针过于强大，初学者很难掌握， java的出现解决了c，c++中指针的问题 java将指针封装在底层，开发人员是不能够去操作指针的地址，但是可以通过引用来间接的操作：   定义一个指针p来指向a的地址（&是地址符号）：        
  • Eclipse打不开，提示“An error has occurred.See the log file ***/.log” bijian1013 eclipse
    打开eclipse工作目录的\.metadata\.log文件，发现如下错误： !ENTRY org.eclipse.osgi 4 0 2012-09-10 09:28:57.139 !MESSAGE Application error !STACK 1 java.lang.NoClassDefFoundError: org/eclipse/core/resources/IContai
  • spring aop实例annotation方法实现 bijian1013 javaspringAOPannotation
            在spring aop实例中我们通过配置xml文件来实现AOP，这里学习使用annotation来实现，使用annotation其实就是指明具体的aspect,pointcut和advice。1.申明一个切面(用一个类来实现)在这个切面里,包括了advice和pointcut AdviceMethods.jav
  • [Velocity一]Velocity语法基础入门 bit1129 velocity
    用户和开发人员参考文档 http://velocity.apache.org/engine/releases/velocity-1.7/developer-guide.html   注释 1.行级注释## 2.多行注释#*  *#   变量定义 使用$开头的字符串是变量定义，例如$var1, $var2,   赋值 使用#set为变量赋值，例
  • 【Kafka十一】关于Kafka的副本管理 bit1129 kafka
    1. 关于request.required.acks   request.required.acks控制者Producer写请求的什么时候可以确认写成功，默认是0， 0表示即不进行确认即返回。 1表示Leader写成功即返回，此时还没有进行写数据同步到其它Follower Partition中 -1表示根据指定的最少Partition确认后才返回，这个在   Th
  • lua统计nginx内部变量数据 ronin47 lua nginx　 统计
    server { listen 80; server_name photo.domain.com; location /{set $str $uri; content_by_lua ' local url = ngx.var.uri local res = ngx.location.capture(
  • java-11.二叉树中节点的最大距离 bylijinnan java
    import java.util.ArrayList; import java.util.List; public class MaxLenInBinTree { /* a. 1 / \ 2 3 / \ / \ 4 5 6 7 max=4 pass "root"
  • Netty源码学习-ReadTimeoutHandler bylijinnan javanetty
    ReadTimeoutHandler的实现思路： 开启一个定时任务，如果在指定时间内没有接收到消息，则抛出ReadTimeoutException 这个异常的捕获，在开发中，交给跟在ReadTimeoutHandler后面的ChannelHandler，例如 private final ChannelHandler timeoutHandler = new ReadTim
  • jquery验证上传文件样式及大小(好用) cngolon 文件上传jquery验证
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery1.8/jquery-1.8.0.
  • 浏览器兼容【转】 cuishikuan css浏览器IE
    浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 碰到频率:100% 解决方案：CSS里    *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设
  • Shell特殊变量：Shell $0, $#, $*, $@, $?, $$和命令行参数 daizj shell$#$?特殊变量
    前面已经讲到，变量名只能包含数字、字母和下划线，因为某些包含其他字符的变量有特殊含义，这样的变量被称为特殊变量。例如，$ 表示当前Shell进程的ID，即pid，看下面的代码： $echo $$ 运行结果 29949   特殊变量列表 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数。n 是一个数字，表示第几个参数。例如，第一个
  • 程序设计KISS 原则-------KEEP IT SIMPLE, STUPID! dcj3sjt126com unix
    翻到一本书，讲到编程一般原则是kiss：Keep It Simple, Stupid.对这个原则深有体会，其实不仅编程如此，而且系统架构也是如此。 KEEP IT SIMPLE, STUPID! 编写只做一件事情，并且要做好的程序；编写可以在一起工作的程序，编写处理文本流的程序，因为这是通用的接口。这就是UNIX哲学.所有的哲学真 正的浓缩为一个铁一样的定律，高明的工程师的神圣的“KISS 原
  • android Activity间List传值 dcj3sjt126com Activity
    第一个Activity： import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import a
  • tomcat 设置java虚拟机内存 eksliang tomcat 内存设置
    转载请出自出处：http://eksliang.iteye.com/blog/2117772 http://eksliang.iteye.com/ 常见的内存溢出有以下两种: java.lang.OutOfMemoryError: PermGen space java.lang.OutOfMemoryError: Java heap space   ------------
  • Android 数据库事务处理 gqdy365 android
    使用SQLiteDatabase的beginTransaction()方法可以开启一个事务，程序执行到endTransaction() 方法时会检查事务的标志是否为成功，如果程序执行到endTransaction()之前调用了setTransactionSuccessful() 方法设置事务的标志为成功则提交事务，如果没有调用setTransactionSuccessful() 方法则回滚事务。事
  • Java 打开浏览器 hw1287789687 打开网址open浏览器open browser打开url打开浏览器
    使用java 语言如何打开浏览器呢? 我们先研究下在cmd窗口中,如何打开网址 使用IE 打开 D:\software\bin>cmd /c start iexplore http://hw1287789687.iteye.com/blog/2153709 使用火狐打开 D:\software\bin>cmd /c start firefox http://hw1287789
  • ReplaceGoogleCDN：将 Google CDN 替换为国内的 Chrome 插件 justjavac chromeGooglegoogle apichrome插件
    Chrome Web Store 安装地址： https://chrome.google.com/webstore/detail/replace-google-cdn/kpampjmfiopfpkkepbllemkibefkiice 由于众所周知的原因，只需替换一个域名就可以继续使用Google提供的前端公共库了。 同样，通过script标记引用这些资源，让网站访问速度瞬间提速吧
  • 进程VS.线程 m635674608 线程
    资料来源： http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001397567993007df355a3394da48f0bf14960f0c78753f000 1、Apache最早就是采用多进程模式 2、IIS服务器默认采用多线程模式 3、多进程优缺点 优点： 多进程模式最大
  • Linux下安装MemCached 字符串 memcached
    前提准备：1. MemCached目前最新版本为：1.4.22，可以从官网下载到。2. MemCached依赖libevent，因此在安装MemCached之前需要先安装libevent。2.1 运行下面命令，查看系统是否已安装libevent。[root@SecurityCheck ~]# rpm -qa|grep libevent libevent-headers-1.4.13-4.el6.n
  • java设计模式之--jdk动态代理（实现aop编程） Supanccy2013 javaDAO设计模式AOP
        与静态代理类对照的是动态代理类，动态代理类的字节码在程序运行时由Java反射机制动态生成，无需程序员手工编写它的源代码。动态代理类不仅简化了编程工作，而且提高了软件系统的可扩展性，因为Java 反射机制可以生成任意类型的动态代理类。java.lang.reflect 包中的Proxy类和InvocationHandler 接口提供了生成动态代理类的能力。 &
  • Spring 4.2新特性-对java8默认方法(default method)定义Bean的支持 wiselyman spring 4
    2.1 默认方法(default method) java8引入了一个default medthod; 用来扩展已有的接口,在对已有接口的使用不产生任何影响的情况下,添加扩展 使用default关键字 Spring 4.2支持加载在默认方法里声明的bean 2.2 将要被声明成bean的类 public class DemoService {
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他