大鲤余
大鲤余

懒加载、预加载IntersectionObserver和监听滚动

使用场景

移动端下拉滚动加载图片的时候，通常是使用监听scroll或者使用setInterval来判断，元素是否进入视图，其中scroll由于其特别大的计算量，会有性能问题，而setInterval由于其有间歇期，也会出现体验问题。

IntersectionObserver

允许你追踪目标元素与其祖先元素或视窗的交叉状态。IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。 即只有线程空闲下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。

代码演示

<body>
    <div style="height: 1800px;width:100%; text-align: center;">
        <h3>监听目标元素与祖先或视口交叉状态的手段</h3>
        <p>./image/preview.jpg</p>
    </div>
  
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">
    <img class="imageLoad" alt="图片懒加载">

    <script type="module">
        import { Intersection } from './IntersectionOberver.js'
        import { watchScroll } from './监听滚动实现懒加载.js'
        // watchScroll('.imageLoad')
        Intersection('.imageLoad')
    </script>
</body>
export const Intersection = (name) => {
    const img = document.querySelectorAll(name)
    let index = 0
    const options = {
        threshold: [0],//threshold：属性决定相交比例为多少时，触发回调函数。取值为 0 ~ 1，或者 0 ~ 1的数组。
        rootMargin: "300px",//rootMargin： 类似于 CSS 的 margin 属性。用来缩小或扩大 rootBounds，从而影响相交的触发 
        root: null,//root：设置监视器的根节点，不传则默认为视口。
    }
    /*
        entries的属性
        time：发生相交到相应的时间，毫秒。
        rootBounds：根元素矩形区域的信息，如果没有设置根元素则返回null，图中蓝色部分区域。
        boundingClientRect：目标元素的矩形区域的信息，图中黑色边框的区域。
        intersectionRect：目标元素与视口（或根元素）的交叉区域的信息，图中蓝色方块和粉红色方块相交的区域。
        isIntersecting：目标元素与根元素是否相交
        intersectionRatio：目标元素与视口（或根元素）的相交比例。
        target：目标元素。
    */
    const iso = new IntersectionObserver(entries => {

        entries.forEach(v => {
            if (v.isIntersecting) {
                if (index >= 2) index = 0
                index++
                v.target.setAttribute('src', `./image/image${index}.jpg`)
                iso.unobserve(v.target)
            }
        })

    }, options)

    // 开启观察
    img.forEach(element => {
        iso.observe(element)
    });
}

效果展示

懒加载、预加载IntersectionObserver和监听滚动_第1张图片
可以看到当元素与视口rootBounds=300px时，触发回调
懒加载、预加载IntersectionObserver和监听滚动_第2张图片

scroll方式


const thorttle = (callback,wait=500) => {
    let timer = null 
    let licence = true
    const _this = this
    return (...args) => {
        if (licence) {
            timer = setTimeout(() => {
                callback.call(_this, args)
                licence = true
                clearTimeout(timer)
            },wait)
        }
        licence = false
    }
}
//getBoundingClientRect 方法会使浏览器发生回流和重绘，性能消耗稍大，但兼容性比 Intersection Observer 要好。
export const watchScroll = (name) => {
    const img = document.querySelectorAll(name)
    //document.documentElement.clientHeight可视窗口高度
    const vHeight = window.innerHeight || document.documentElement.clientHeight

    document.addEventListener('scroll', thorttle(() => {
        let index = 0
        img.forEach(v => {
            // Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口顶部的位置。
            let {top,height } = v.getBoundingClientRect()
            if (top <= vHeight+100) {
                if (index >= 2) index = 0
                index++
                v.setAttribute('src', `./image/image${index}.jpg`)
            }
        })
    }))
}

你可能感兴趣的:(JS,javascript,前端,css3)

  • Android音视频探索之旅 | Webrtc 1对1音视频通话核心流程分析 慢行的骑兵 音视频android音视频webrtc
    一.前言使用Webrtc实现1对1的音视频通话，先从Web端进行学习要比直接从Android端进行学习要轻松许多（若没有JS和Html以及Node基础，查找相关基础教程，能梳理代码的逻辑即可）。本文Android端接入Webrtc是通过引入官方的sdk来实现的。本文涉及到的Demo代码包含三部分，服务器端、Web端、Android端。服务器端使用的是Node，Web使用的是Html和JS，Andr
  • docker 常见错误 零一间
    服务启动失败#systemctlstartdocker.serviceJobfordocker.servicefailedbecausethecontrolprocessexitedwitherrorcode.See"systemctlstatusdocker.service"and"journalctl-xe"fordetails解决方法修改/etc/docker/daemon.json文件(j
  • kafka 生产消息和消费消息 kafka-console-producer.sh kafka-console-consumer.sh 锅锅来了 #Kafka运维实战kafkalinq分布式
    目录kafka-console-producer.sh基本用法常用参数说明示例用法1.简单发送消息2.发送带键的消息3.从文件读取消息4.发送批量消息5.使用自定义配置配置文件示例注意事项kafka-console-consumer.sh基本用法核心参数说明常见使用场景1.实时消费最新消息2.消费历史所有消息3.使用消费组4.消费特定分区5.格式化输出6.消费JSON格式消息7.导出消息到文件8.
  • 【学术会议投稿】Vue.js组件开发实战：从零构建高效可复用组件 小周不想卷 艾思科蓝学术会议投稿vue.js
    【IEEE出版|会后3-4个月EI检索】第三届云计算、大数据应用与软件工程国际学术会议(CBASE2024）_艾思科蓝_学术一站式服务平台更多学术会议请看：https://ais.cn/u/nuyAF3目录引言一、Vue.js组件开发基础二、构建高效可复用组件三、Vue.js组件的高级特性四、Vue.js的优点与缺点Vue.js的优点Vue.js的缺点引言在现代前端开发中，Vue.js凭借其简洁的
  • 在vue项目中使用富文本编辑器 - tinymce 橘式不妙 vue富文本编辑器vue.js前端javascript编辑器
    推荐文章tinymce常用配置摘要在vue项目中使用tinymce富文本编辑器。这款编辑器比较轻量级、界面简洁、功能丰富，主要是易扩展。使用步骤安装tinymce官方地址1.安装tinymce#pnpm命令是npm命令的增强，p是proformance的意思，高性能pnpminstall--save"@tinymce/tinymce-vue@^5"2.引入tinymce的mainjstinymce
  • 《Vue.js 核心概念：前端魔法世界的奇幻基石》 Muai木离 前端vue.jsflutter
    在当今数字化浪潮汹涌澎湃，Web应用如梦幻仙境般绚烂多彩且变幻无穷的时代，Vue.js仿若一位神秘而强大的魔法画师，其核心概念则是绘制出震撼人心的Web开发魔法画卷的神来之笔。这些概念宛如星空中最耀眼、最具魔力的星座，不仅赋予Vue.js令人心醉神迷的独特魅力与蓬勃无尽的创造力，更为构建灵动如仙、性能超凡且用户体验犹如置身奇幻梦境的Web应用勾勒出清晰可见的魔法蓝图。对于那些心怀对前端开发领域的炽
  • Pinia 实战指南：Vue 3 状态管理的高效之道 做人不能太高调 vue.js前端javascript
    1.给我来个系统学习Pinia的大纲学习Pinia作为Vue.js的状态管理库，可以按照以下大纲来系统地进行学习：1.Pinia入门Pinia简介什么是Pinia？Pinia是Vue3的官方状态管理库，是对Vuex的继承和改进。它通过提供更简洁和灵活的API，使得在Vue应用中管理全局状态变得更加容易。Pinia是专为Vue3设计的，基于CompositionAPI，允许开发者以更加模块化和简洁的
  • 【TypeScript学习笔记】TypeScript 核心知识点 Zaly. Vue学习笔记typescript学习笔记
    目录前言TypeScript核心概念基本类型与高级类型常用内置工具类型类型断言与类型守卫TypeScript在Vue3中的应用Vue3中TypeScript的作用范围Props和Emits的类型定义CompositionAPI中的类型支持前言TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编
  • error ‘vue‘ 不是内部或外部命令，也不是可运行的程序或批处理文件 [Windows/Mac/Linux 系统解决方案大全]
    error‘vue‘不是内部或外部命令，也不是可运行的程序或批处理文件[Windows/Mac/Linux系统解决方案大全]在使用Vue.js开发时，常常会遇到如下错误提示：'vue'不是内部或外部命令，也不是可运行的程序或批处理文件。这是因为系统无法识别vue命令，可能源于多种原因：未安装或未正确配置环境变量、VueCLI未安装、Node.js管理工具（如nvm）切换版本后未重新全局安装等。作者
  • 关于猫头虎，认识猫头虎，建联猫头虎，商务合作，产品评测，产品推广，个人自媒体创作，超级个体，涨粉秘籍，一起探索编程世界的无限可能！ 猫头虎 猫头虎精品博客专栏CSDN开发云人机交互交互程序人生程序员创富创业创新学习方法
    猫头虎建联猫头虎，商务合作，产品评测，产品推广，个人自媒体创作，超级个体，涨粉秘籍，一起探索编程世界的无限可能！猫头虎是谁？大家好，我是猫头虎，别名猫头虎博主，擅长的技术领域包括云原生、前端、后端、运维和AI。我的博客主要分享技术教程、bug解决思路、开发工具教程、前沿科技资讯、产品评测图文、产品使用体验图文、产品优点推广文稿、产品横测对比文稿，以及线下技术沙龙活动参会体验文稿。内容涵盖云服务产品
  • vue中实现验证码输入 结城 vue验证码vue输入框
    vue验证码input输入解决焦点切换有点晚了就不吐槽了，咱还是把代码上了，赶紧洗澡，养好精神明天努力上班！！！想学node,想学react,想精进webpack,想vue学的更好一点，了解底层代码，学算法，学计算机原理，想写自己的博客网站…这是一条学无止境的路，没办法要恰饭效果html部分js部分exportdefault{props:{inputNums:{type:Number,defaul
  • 聊聊 iframe：网页中的“窗口”是怎么回事？ 结城 前端前端html
    在网页开发中，是一个挺常见但又有点“低调”的HTML标签。你可能在浏览网页时见过它，比如嵌入的YouTube视频、地图，或者一些外部的小工具。它就像网页里开了一扇小窗口，能把另一个网页的内容嵌进来。今天就来聊聊iframe的前世今生、怎么用、包括srcdoc的妙用，它在微前端、传统后端开发、打印场景、通信机制中的应用，以及如何防止别人用iframe内嵌你的网站，尽量说得自然又接地气。iframe是
  • 微信小程序软键盘弹出的问题 结城 javascript小程序
    微信小程序软键盘弹出的问题这里记录一个微信中开发的一个小问题，1.当我开发这个页面功能的时候在缩小的状态正常情况聚焦时在手机上会有一个软键盘弹出来完全遮住了我textarea输入框2.遮住状态这个时候我们还发现页面被顶了上去，头部的导航栏没有了3.解决问题html部分/防止页面被顶我们使用adjust-position属性js部分//并且加入失去焦点，得到焦点事件，通过bindfocus事件对象我
  • 《Vue3笔记》第38节：Vue3项目集成TinyMCE富文本编辑器 Mr.小朱同学 【Vue3项目开发】笔记vue.js前端TinyMCE富文本编辑器tinymcetinymce编辑器Vue3集成tinymce
    前一个小节的内容中，已经介绍了Vue3项目中Quill如何配置highlight.js代码高亮的插件。这个小节来学一个新的富文本编辑器，叫做：TinyMCE。Vue3项目开发（微信文章集合）1.1、运行效果TinyMCE编辑器的效果，如下所示：1.2、安装TinyMCE依赖首先，需要安装tinymce依赖，执行下面命令：#安装依赖npminstalltinymce--save
  • 前端实现大文件分片下载 冒气er javaScript前端express
    第一步利用node开发服务端接口//获取文件大小app.get('/length',(req,res,next)=>{res.setHeader('Access-Control-Allow-Origin','*');res.end(''+fs.statSync(`${__dirname}/lifivcyc.gif`).size);});//下载app.get('/',(req,res,next)=
  • 入门指南：Vue.js的基本概念和用法 是小韩呀 vue.jsjavascript前端
    引言：Vue.js是一种流行的JavaScript框架，用于构建现代化的Web应用程序。它以其简洁易用的API和响应式的数据绑定而闻名，使得开发人员能够更轻松地构建交互性强大的用户界面。本文将介绍Vue.js的基本概念和用法，帮助初学者快速入门。一、Vue.js是一个轻量级、渐进式的JavaScript框架，用于构建用户界面。它的设计目标是通过尽可能简单的API，让开发者能够更高效地开发交互性强大
  • nestjs[一文学懂TypeORM在nestjs中的日常使用]
    前提第一步：需要先了解nestjs中使用typeorm的引入和使用。参考官方：TypeORM集成第二步：熟悉typeorm文档了解与熟悉相关的api内容基础。学习步骤1.了解nestjs中引入typeorm并且配置引入相关库，参考前提-第一步在真实的项目中往往数据库信息都是放在配置文件中。其中Entities代表着数据表实体集，往往好多学习文档中都会开启自动扫描autoLoadEntities或者
  • nestjs[一文学懂nestjs中对npm功能包的封装，ioredis封装示例] 墨水白云 npm前端node.js
    问题描述NPM（NodePackageManager）是Node.js的包管理工具，它允许开发者轻松地分享、安装和管理依赖包，促进了代码的复用性和项目协作。而npm插件库将是nodejs开发中不可缺失的重要组成因素。在nestjs中，官方已经给我们开发了一系列各种各样的封装功能让我们能够快速的进行开发。然而实际应用中，我们在开发的过程中任然需要引入各种各样的插件工具，因此学会封装nestjs组件功
  • nodejs关于后端服务开发的探究 墨水白云 node.js
    前提在当前的环境中关于webserver的主流开发基本上都是java、php之类的，其中javaspring系列基本上占了大头，而python之流也在奋起直追，但别忘了nodejs也是可以做这个服务的，只是位置有点尴尬，现在就来探究下nodejs做webserver的当前现状。nodejs简介Node.js是一个基于ChromeV8引擎的JavaScript运行环境。Node.js使用了一个事件驱
  • React 最新版本（hooks写法） 抬头第一眼，是天 Reactreact.jsjavascript前端
    React目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录React目录前言一、指令jsx语法：需要注意的是：react的类名class变成了className，事件从onClick，因为class是react的内部关键字动态数据useState()相当于Vue3的ref（），reactive（）条件渲染列
  • 使用位运算优化 Vue.js 应用：高效状态管理技巧 结城 vuevue.js前端javascript
    在Vue.js开发中，位运算（BitwiseOperations）是一种高效的工具，尤其适用于需要管理大量布尔状态或优化性能的场景。位运算通过操作二进制位来实现状态的存储和检查，相比传统的数组或对象操作，内存占用更低，执行速度更快。本篇博客将介绍如何在Vue.js中应用位运算技巧，结合Vue的响应式系统实现高效的状态管理。读vue3响应式源码有感https://github.com/vuejs/c
  • lvs 集群技术
    一.lvs概述LVS是LinuxVirtualServer的缩写，中文通常称为Linux虚拟服务器。它是一个开源的、高性能的、基于四层（传输层，TCP/UDP）的服务器负载均衡解决方案。简单来说，LVS的核心功能就是：将客户端的请求流量智能地、高效地分发到后端的多个真实服务器上，对外表现为一个单一的、高性能、高可用的虚拟服务器。LVS的核心组件和工作原理负载均衡器/调度器/前端服务器：通常被称为D
  • 阿里工程师教你使用 Svelte 构建阅读列表的小技巧 JAVA学习
    velte在过去两年中获得了很多赞誉，远非“只是另一个前端框架”。它在2019年JS调查中获得了“年度突破奖”，随后在2020年的满意度评分中名列前茅。它还在StackOverflow2021调查中被评为最受喜爱的Web框架。Svelte以其小包大小、非常好的性能和易用性的组合吸引了开发人员。同时，它还装满了很多好东西。已经提供了一个简单的状态管理解决方案，以及现成的过渡和动画。本介绍性教程将阐明
  • JavaWeb 文件上传和下载 dawsonenjoy
    一、文件上传步骤前端部分1.提供一个post方法的表单，并设置enctype属性（设置请求内容的MIME类型）为multpart/from-data，代表该表单支持文件上传2.提供一个文件上传框：举例：后端部分将内容通过流读取进来，举例：publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServl
  • 华为OD机试2025 B卷 - 通过软盘拷贝文件 (C++ & Python & JAVA & JS & GO) 无限码力 华为OD机试真题刷题笔记华为od华为OD机试华为OD机试2025B卷华为OD2025B卷华为OD机考2025B卷
    通过软盘拷贝文件华为OD机试真题目录点击查看:华为OD机试2025B卷真题题库目录｜机考题库+算法考点详解华为OD机试2025B卷100分题型题目描述有一名科学家想要从一台古董电脑中拷贝文件到自己的电脑中加以研究。但此电脑除了有一个3.5寸软盘驱动器以外，没有任何手段可以将文件持贝出来，而且只有一张软盘可以使用。因此这一张软盘是唯一可以用来拷贝文件的载体。科学家想要尽可能多地将计算机中的信息拷贝到
  • 业务流逻辑如何搭建？为何橙武平台选用了 LogicFlow？ 橙武科技 低代码低代码
    前言在橙武低代码平台的架构设计中，“业务逻辑编排”并不是锦上添花的功能，而是决定平台扩展能力的根基之一。对内，它承担着流程驱动、条件分支、异步节点、子流程等任务；对外，它决定了平台能否真正支持多行业、多租户的复杂业务建模需求。我们评估过包括BPMN.js、ReactFlow、AntVG6、JointJS等多种图形与流程编排引擎，最终选择了滴滴开源的LogicFlow作为橙武平台的核心业务流程引擎。
  • 华为OD机试2025C卷 - 计算三叉搜索树的高度 (C++ & Python & JAVA & JS & GO) 无限码力 华为OD机试真题刷题笔记华为od华为OD机试2025C卷华为OD2025C卷华为OD机考2025C卷
    计算三叉搜索树的高度华为OD机试真题目录点击查看:华为OD机试2025C卷真题题库目录｜机考题库+算法考点详解华为OD机试2025C卷100分题型题目描述定义构造三叉搜索树规则如下：每个节点都存有一个数，当插入一个新的数时，从根节点向下寻找，直到找到一个合适的空节点插入。查找的规则是：如果数小于节点的数减去500，则将数插入节点的左子树如果数大于节点的数加上500，则将数插入节点的右子树否则，将数
  • 华为OD面试手撕真题 - 字符串解码 (C++ & Python & JAVA & JS & GO) 无限码力 华为OD面试手撕代码真题合集华为od面试手撕真题华为OD面试手撕真题
    题目描述给定一个经过编码的字符串，返回它解码后的字符串。编码规则为:k[encoded_string]，表示其中方括号内部的encoded_string正好重复k次。注意k保证为正整数。你可以认为输入字符串总是有效的；输入字符串中没有额外的空格，且输入的方括号总是符合格式要求的。此外，你可以认为原始数据不包含数字，所有的数字只表示重复的次数k，例如不会出现像3a或2[4]的输入。示例1输入：s="
  • 12306系统架构的演进
    演进过程12306系统架构的演进是中国铁路信息化建设的重要里程碑，其核心围绕高并发处理、数据一致性保障、跨地域容灾三大挑战展开。以下是其分阶段的技术演进过程：第一阶段：单机架构与双机热备（2011年）背景2011年上线初期，12306仅支持京津城际列车购票，日均售票量不足百万。系统采用传统单体架构，依赖小型机和集中式数据库，缺乏分布式设计。架构特点技术栈：JavaServlet+JSP+Sybas
  • 前端项目利用Gitlab CI/CD流水线自动化打包、部署云服务 黑心的奥利奥 前端gitlabci/cd
    叠甲前言本文仅作为个人学习GitLab的CI/CD功能记录，不适合作为专业性指导，如有纰漏，烦请君指正。Gitlab的CI/CD做什么用的自工作以来，去过大大小小公司，有一些公司技术人员专业性欠佳，每当产品经理或测试人员需要最新或者某个版本的包时【比如安卓的apk包，IOS的ipa包，前端的打包静态资源】，开发总是要停下手中的工作，去手动给测试打包，这类手动工作包括了打开某个项目，加载项目依赖，构
  • Java 并发包之线程池和原子计数 lijingyao8206 Java计数ThreadPool并发包java线程池
    对于大数据量关联的业务处理逻辑，比较直接的想法就是用JDK提供的并发包去解决多线程情况下的业务数据处理。线程池可以提供很好的管理线程的方式，并且可以提高线程利用率，并发包中的原子计数在多线程的情况下可以让我们避免去写一些同步代码。     这里就先把jdk并发包中的线程池处理器ThreadPoolExecutor 以原子计数类AomicInteger 和倒数计时锁C
  • java编程思想 抽象类和接口 百合不是茶 java抽象类接口
    接口c++对接口和内部类只有简介的支持,但在java中有队这些类的直接支持   1 ,抽象类 :  如果一个类包含一个或多个抽象方法,该类必须限定为抽象类(否者编译器报错)   抽象方法 : 在方法中仅有声明而没有方法体    package com.wj.Interface;
  • [房地产与大数据]房地产数据挖掘系统 comsci 数据挖掘
           随着一个关键核心技术的突破,我们已经是独立自主的开发某些先进模块,但是要完全实现,还需要一定的时间...        所以,除了代码工作以外,我们还需要关心一下非技术领域的事件..比如说房地产     &nb
  • 数组队列总结 沐刃青蛟 数组队列
          数组队列是一种大小可以改变，类型没有定死的类似数组的工具。不过与数组相比，它更具有灵活性。因为它不但不用担心越界问题，而且因为泛型（类似c++中模板的东西）的存在而支持各种类型。      以下是数组队列的功能实现代码：   import List.Student; public class
  • Oracle存储过程无法编译的解决方法 IT独行者 oracle存储过程　
    今天同事修改Oracle存储过程又导致2个过程无法被编译，流程规范上的东西，Dave 这里不多说，看看怎么解决问题。   1.     查看无效对象 XEZF@xezf(qs-xezf-db1)> select object_name,object_type,status from all_objects where status='IN
  • 重装系统之后oracle恢复 文强chu oracle
    前几天正在使用电脑，没有暂停oracle的各种服务。 突然win8.1系统奔溃，无法修复，开机时系统 提示正在搜集错误信息，然后再开机，再提示的无限循环中。 无耐我拿出系统u盘 准备重装系统，没想到竟然无法从u盘引导成功。 晚上到外面早了一家修电脑店，让人家给装了个系统，并且那哥们在我没反应过来的时候， 直接把我的c盘给格式化了 并且清理了注册表，再装系统。 然后的结果就是我的oracl
  • python学习二（ 一些基础语法） 小桔子 pthon基础语法
    紧接着把！昨天没看继续看django 官方教程，学了下python的基本语法 与c类语言还是有些小差别： 1.ptyhon的源文件以UTF-8编码格式 2. /   除 结果浮点型 //  除 结果整形 %   除 取余数 *   乘 **  乘方 eg 5**2 结果是5的2次方25 _&
  • svn 常用命令 aichenglong SVN版本回退
    1 svn回退版本   1)在window中选择log,根据想要回退的内容,选择revert this version或revert chanages from this version 两者的区别:   revert this version:表示回退到当前版本(该版本后的版本全部作废)   revert chanages from this versio
  • 某小公司面试归来 alafqq 面试
    先填单子，还要写笔试题，我以时间为急，拒绝了它。。时间宝贵。 老拿这些对付毕业生的东东来吓唬我。。 面试官很刁难，问了几个问题，记录下； 1，包的范围。。。public,private,protect. --悲剧了 2，hashcode方法和equals方法的区别。谁覆盖谁.结果，他说我说反了。 3，最恶心的一道题，抽象类继承抽象类吗？（察，一般它都是被继承的啊） 4，stru
  • 动态数组的存储速度比较 集合框架 百合不是茶 集合框架
    集合框架： 自定义数据结构(增删改查等) package 数组; /** * 创建动态数组 * @author 百合 * */ public class ArrayDemo{ //定义一个数组来存放数据 String[] src = new String[0]; /** * 增加元素加入容器 * @param s要加入容器
  • 用JS实现一个JS对象，对象里有两个属性一个方法 bijian1013 js对象
    <html> <head> </head> <body> 用js代码实现一个js对象，对象里有两个属性，一个方法 </body> <script> var obj={a:'1234567',b:'bbbbbbbbbb',c:function(x){
  • 探索JUnit4扩展：使用Rule bijian1013 java单元测试JUnitRule
            在上一篇文章中，讨论了使用Runner扩展JUnit4的方式，即直接修改Test Runner的实现(BlockJUnit4ClassRunner)。但这种方法显然不便于灵活地添加或删除扩展功能。下面将使用JUnit4.7才开始引入的扩展方式——Rule来实现相同的扩展功能。 1. Rule       &n
  • [Gson一]非泛型POJO对象的反序列化 bit1129 POJO
    当要将JSON数据串反序列化自身为非泛型的POJO时，使用Gson.fromJson(String, Class)方法。自身为非泛型的POJO的包括两种： 1. POJO对象不包含任何泛型的字段 2. POJO对象包含泛型字段，例如泛型集合或者泛型类 Data类 a.不是泛型类， b.Data中的集合List和Map都是泛型的 c.Data中不包含其它的POJO    
  • 【Kakfa五】Kafka Producer和Consumer基本使用 bit1129 kafka
    0.Kafka服务器的配置 一个Broker， 一个Topic Topic中只有一个Partition（）   1. Producer： package kafka.examples.producers; import kafka.producer.KeyedMessage; import kafka.javaapi.producer.Producer; impor
  • lsyncd实时同步搭建指南——取代rsync+inotify ronin47
    1. 几大实时同步工具比较 1.1 inotify + rsync 最近一直在寻求生产服务服务器上的同步替代方案，原先使用的是 inotify + rsync，但随着文件数量的增大到100W+，目录下的文件列表就达20M，在网络状况不佳或者限速的情况下，变更的文件可能10来个才几M，却因此要发送的文件列表就达20M，严重减低的带宽的使用效率以及同步效率；更为要紧的是，加入inotify
  • java-9. 判断整数序列是不是二元查找树的后序遍历结果 bylijinnan java
    public class IsBinTreePostTraverse{ static boolean isBSTPostOrder(int[] a){ if(a==null){ return false; } /*1.只有一个结点时，肯定是查找树 *2.只有两个结点时，肯定是查找树。例如{5,6}对应的BST是 6 {6,5}对应的BST是
  • MySQL的sum函数返回的类型 bylijinnan javaspringsqlmysqljdbc
    今天项目切换数据库时，出错 访问数据库的代码大概是这样： String sql = "select sum(number) as sumNumberOfOneDay from tableName"; List<Map> rows = getJdbcTemplate().queryForList(sql); for (Map row : rows
  • java设计模式之单例模式 chicony java设计模式
    在阎宏博士的《JAVA与模式》一书中开头是这样描述单例模式的： 　　作为对象的创建模式，单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。这个类称为单例类。 单例模式的结构 　　单例模式的特点： 单例类只能有一个实例。 单例类必须自己创建自己的唯一实例。 单例类必须给所有其他对象提供这一实例。 　　饿汉式单例类   publ
  • javascript取当月最后一天 ctrain JavaScript
    <!--javascript取当月最后一天--> <script language=javascript> var current = new Date(); var year = current.getYear(); var month = current.getMonth(); showMonthLastDay(year, mont
  • linux tune2fs命令详解 daizj linuxtune2fs查看系统文件块信息
    一.简介： tune2fs是调整和查看ext2/ext3文件系统的文件系统参数，Windows下面如果出现意外断电死机情况，下次开机一般都会出现系统自检。Linux系统下面也有文件系统自检，而且是可以通过tune2fs命令，自行定义自检周期及方式。 二.用法： Usage: tune2fs [-c max_mounts_count] [-e errors_behavior] [-g grou
  • 做有中国特色的程序员 dcj3sjt126com 程序员
      从出版业说起 网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。 许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有
  • Android：TextView属性大全 dcj3sjt126com textview
    android:autoLink    设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web/email/phone/map/all)  android:autoText    如果设置，将自动执行输入值的拼写纠正。此处无效果，在显示输入法并输
  • tomcat虚拟目录安装及其配置 eksliang tomcat配置说明tomca部署web应用tomcat虚拟目录安装
    转载请出自出处：http://eksliang.iteye.com/blog/2097184 1.-------------------------------------------tomcat  目录结构 config：存放tomcat的配置文件 temp  ：存放tomcat跑起来后存放临时文件用的 work   ： 当第一次访问应用中的jsp
  • 浅谈：APP有哪些常被黑客利用的安全漏洞 gg163 APP
    首先，说到APP的安全漏洞，身为程序猿的大家应该不陌生；如果抛开安卓自身开源的问题的话，其主要产生的原因就是开发过程中疏忽或者代码不严谨引起的。但这些责任也不能怪在程序猿头上，有时会因为BOSS时间催得紧等很多可观原因。由国内移动应用安全检测团队爱内测（ineice.com）的CTO给我们浅谈关于Android 系统的开源设计以及生态环境。 1. 应用反编译漏洞：APK 包非常容易被反编译成可读
  • C#根据网址生成静态页面 hvt Web.netC#asp.nethovertree
    HoverTree开源项目中HoverTreeWeb.HVTPanel的Index.aspx文件是后台管理的首页。包含生成留言板首页，以及显示用户名，退出等功能。根据网址生成页面的方法：   bool CreateHtmlFile(string url, string path) { //http://keleyi.com/a/bjae/3d10wfax.htm stri
  • SVG 教程 （一） 天梯梦 svg
    SVG 简介 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 学习之前应具备的基础知识： 继续学习之前，你应该对以下内容有基本的了解： HTML XML 基础 如果希望首先学习这些内容，请在本站的首页选择相应的教程。 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量
  • 一个简单的java栈 luyulong java数据结构栈
    public class MyStack { private long[] arr; private int top; public MyStack() { arr = new long[10]; top = -1; } public MyStack(int maxsize) { arr = new long[maxsize]; top
  • 基础数据结构和算法八：Binary search sunwinner AlgorithmBinary search
    Binary search needs an ordered array so that it can use array indexing to dramatically reduce the number of compares required for each search, using the classic and venerable binary search algori
  • 12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 刘星宇 c面试
    12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 1.gets()函数 问：请找出下面代码里的问题： #include<stdio.h> int main(void) {     char buff[10];     memset(buff,0,sizeof(buff));
  • ITeye 7月技术图书有奖试读获奖名单公布 ITeye管理员 活动ITeye试读
    ITeye携手人民邮电出版社图灵教育共同举办的7月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 7月试读活动回顾： http://webmaster.iteye.com/blog/2092746 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 《Java性能优化权威指南》
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他