大鲤余
大鲤余

懒加载、预加载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)

  • axios在前后端分离的仓储管理系统中的作用 PLJJ685 前后端分离的仓库管理系统前端vue.js
    在前后端分离的仓储管理系统中，axios是一个非常重要的工具，用于在前端（通常是Vue.js、React等框架）和后端（通常是SpringBoot、Node.js、Django等框架）之间进行HTTP通信。以下是axios在仓储管理系统中的作用和具体应用场景：1.前后端分离架构在前后端分离的架构中：前端：负责页面的渲染和用户交互。后端：负责数据处理、业务逻辑和数据库操作。通信方式：前后端通过HTT
  • 构建AngularJS动态Web应用的示例教程 你这人真狗
    本文还有配套的精品资源，点击获取简介：AngularJS是一个由Google支持的前端JavaScript框架，用于创建动态Web应用程序。本文将通过一个名为“angular-sample-app”的示例应用程序，详细介绍AngularJS的核心特性，包括双向数据绑定、控制器、指令系统、服务与依赖注入、表单处理、路由与导航、模板和局部存储以及其他高级特性。通过这个示例应用的深入剖析，开发者可以学习
  • 深入理解 Node.js 事件循环（Event Loop）与异步机制 全栈探索者chen nodenode.jsvim编辑器开发语言程序人生异步性能优化
    深入理解Node.js事件循环（EventLoop）与异步机制前言Node.js以其单线程、异步非阻塞I/O的特性在高并发场景中广泛应用。然而，许多开发者对其事件循环（EventLoop）机制不够熟悉，导致在编写异步代码时遇到回调地狱、Promise处理不当、性能瓶颈等问题。本文将详细解析Node.js事件循环的运行原理，结合代码示例，帮助你深入理解其核心机制。一、什么是事件循环（EventLoo
  • 基于 Vue.js 和 Element UI 实现九宫格按钮拖拽排序功能 | 详细教程与代码实现 小杰~ vue.jsjavascriptvuedraggableCSSGrid
    在Vue.js项目中使用vue-element-template（基于ElementUI）实现按钮的九宫格拖拽排序功能，可以通过以下步骤实现。我们将使用vuedraggable库来实现拖拽排序功能。1.安装依赖首先，确保你已经安装了vuedraggable库：npminstallvuedraggable2.创建组件接下来，创建一个Vue组件来实现九宫格拖拽排序功能。{{button.label}}
  • CSS语言的数论算法 宇瞳月 包罗万象golang开发语言后端
    CSS语言的数论算法引言数论作为数学的一个重要分支，主要研究整数及其性质。数论的基本问题包括素数的性质、最大公约数、最小公倍数、同余等，同时数论在密码学、计算机科学等领域具有广泛的应用。而CSS（层叠样式表）本身是一种样式表语言，用于控制HTML文档的样式和布局，虽然CSS本身并不能直接进行复杂的数论运算，但它可以和JavaScript等编程语言结合使用，实现数论算法的可视化与交互。本文将探讨数论
  • 使用 WebP 优化 GPU 纹理占用 泫凝 javascript前端
    WebP格式相比JPEG/PNG文件更小，可以减少GPU纹理内存占用，提高WebGL/Three.js/3D渲染的性能。为什么WebP能减少GPU内存占用？文件更小→WebP比JPG/PNG压缩率更高，减少纹理上传带宽，提高渲染速度。支持透明度（RGBA）→比PNG更小，适用于UI贴图/透明纹理。减少Mipmaps体积→WebP生成的mipmap纹理占用的GPU内存更少。⚠️但WebP仍然是8-b
  • 轻量级模块化前端框架：快速构建强大的Web界面 小杰~ 前端框架前端
    轻量级模块化前端框架：快速构建强大的Web界面在当今快节奏的Web开发环境中，选择一个高效且灵活的前端框架至关重要。UIkit是一个轻量级的模块化前端框架，旨在帮助开发者快速构建功能强大且响应迅速的Web界面。UIkit提供了丰富的组件和工具，使开发者能够轻松实现现代化的设计效果。无论是构建复杂的用户界面还是简单的网页布局，UIkit都能提供出色的支持。其模块化设计使得开发者可以根据项目需求灵活选
  • 解决MybatisPlus updateById更新数据时将没传的数据也更新成了null 善我 后端java
    首先，MybatisPlus在调用自带的更新接口updateById时，如果没加任何配置，默认是不会将前端没传的数据也更新成null的。即MyBatisPlus不会更新传入实体中为null的字段，只会更新设置了不为null的值。如果发现没传的也更新成null了的话，可以看看问题是否出在以下几个方面。可能原因1、后端定义的字段类型是否为包装类型？比如应该定义成Integer，结果你定义的是int，那
  • GTP生成UI代码 酒江 ui人工智能深度学习
    使用GPT生成UI代码，通常是指利用GPT模型生成前端界面的代码，例如HTML、CSS、JavaScript等。GPT可以帮助开发人员快速创建界面元素的代码，减少手动编写的工作量。下面是一些关键步骤，详细说明如何用GPT生成UI代码：1.明确UI需求和设计界面元素：首先明确需要哪些UI元素。例如：按钮、输入框、表单、表格等。布局：确定页面的布局结构，例如：一栏布局、两栏布局、响应式设计等。交互功能
  • let const var 底层区域别，es6还有AO 对象和GO对象吗 新茶十九 #学习javascriptes6前端ecmascript
    在JavaScript中，var、let、const的底层行为差异与作用域规则和变量存储机制密切相关。ES6引入了块级作用域和词法环境（LexicalEnvironment），改变了原有的AO和GO的实现方式，但核心逻辑仍然保留。以下是详细解释：一、var、let、const`的底层区别特性varletconst作用域函数作用域或全局作用域块级作用域块级作用域变量提升提升并初始化为undefine
  • 云贝餐饮独立连锁版v3源码 扫码点餐毕业设计参考好选择 可二开 DeepinThinks 源码分享课程设计php小程序
    云贝V3最新版，采用PHP语言和Laravel9框架，前端使用VUE3和小程序uniapp开发。️云贝V3特点：全开源：提供完整的源代码，无版权纠纷。免授权：无需支付额外授权费用。可二开：支持二次开发，满足个性化需求。技术支持：提供开发者技术支持，确保项目顺利进行。最新版本号：V1.7.9新增会员价显示会员价开关(设置-订单设置-商品设置)新增异地外卖下单开关(门店-业务设置-外送设置)新增套餐固
  • ES6-01-01day CodeDoge javascript开发语言ecmascript
    ECMAScript和javascript的关系是，前者是后者的规格，后者是前者的一种实现。ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。不存在变量提升var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。为了纠正这种现象，
  • Tomcat 新手入门指南：从零开始掌握安装与配置 超级小狗 tomcatjava
    Tomcat新手入门指南：从零开始掌握安装与配置一、Tomcat是什么？ApacheTomcat是一个开源的轻量级Web应用服务器，专为运行JavaServlet和JSP设计。它是初学JavaWeb开发的必备工具，也是企业级应用的常见选择。核心功能：处理HTTP请求、管理Servlet生命周期、支持动态网页渲染。适用场景：开发测试环境、中小型Web应用部署、微服务架构中的容器化组件。二、快速安装T
  • Apache Tomcat 新手入门指南：从安装到部署的全流程解析 小志开发 服务apachetomcatjava
    ApacheTomcat作为一款轻量级的JavaServlet容器，被广泛应用于开发和运行基于Java的Web应用程序（如Servlet和JSP）。对于刚接触Tomcat的开发者来说，快速掌握其基本操作至关重要。本文将从零开始，详细介绍Tomcat的安装、配置、部署及常见问题的解决方法，助你轻松入门。第一部分：环境准备与安装1.确认JDK环境Tomcat依赖Java运行环境，因此需提前安装JDK8
  • Tomcat新手入门指南：从零开始搭建Web服务器 xiaoyu❅ javatomcat前端服务器
    目录一、Tomcat是什么？二、快速安装指南1.环境准备2.下载安装3.验证安装三、目录结构解析四、第一个Web应用部署1.创建标准目录结构2.编写测试JSP3.部署方式对比五、核心配置详解1.修改端口号2.配置虚拟主机3.JVM参数优化六、常用操作命令七、常见问题排查1.端口冲突2.应用热更新失败3.内存溢出八、最佳实践建议九、学习资源推荐一、Tomcat是什么？ApacheTomcat是一个开
  • 博客搭建之路：hexo使用next主题博客侧边栏标题点击不跳转 程序员
    hexo使用next主题博客侧边栏标题点击不跳转hexo版本5.0.2npm版本6.14.7next版本7.8.0本着我肯定不是第一个出这个问题的人，去github上找了找，果然我不是第一个好吧，也跟着改吧(修改themes/next/source/js/utils.js)，找到registerSidebarTOC函数registerSidebarTOC:function(){constnavIt
  • 下载 CSS 文件阻塞，会阻塞构建 DOM 树吗？会阻塞页面的显示吗？ liangshanbo1215 前端性能css前端
    下载CSS文件会对页面的渲染过程产生影响，具体是否阻塞DOM树的构建和页面的显示，取决于浏览器的渲染机制。1.CSS文件下载是否会阻塞DOM树的构建？一般情况下，CSS文件下载不会阻塞DOM树的构建：DOM树的构建是由HTML解析器完成的，解析器会逐行解析HTML并构建DOM树。即使CSS文件正在下载，HTML解析器仍然会继续工作，构建DOM树。但如果JavaScript访问了样式，CSS文件下载
  • 《突破性能瓶颈，用 Rust + WASM 实现浏览器端FFT加速300%实战》 煜bart 人工智能机器人
    引言：当JavaScript遇上硬核计算**“为什么我的音频分析页面卡到崩溃？”这是前端工程师在实现实时频谱可视化时最常见的噩梦。传统JavaScript的FFT计算在万级数据点时就会引发严重卡顿，但今天我们将用**Rust+WebAssembly**的组合拳，在浏览器中实现**零依赖、300%加速的傅里叶变换**。无需WebGL黑魔法，直接上硬核代码！---###**一、血腥现场：JS的Type
  • 【React】使用reduxjs/toolkit进行状态管理 编码七号 react.jsjavascript前端
    在我们的项目中通常需要维护一个状态管理器来支持我们进行跨组件的数据通讯，react生态提供了reduxjs/toolkit来进行状态管理首先我们安装一下必要的依赖npminstallreact-redux@reduxjs/toolkit接下来在我们的工程项目的src同级目录里面新建文件夹store文件夹内新建index.js和userStore.js文件userStore文件：import{cre
  • json-rpc 传递对象的python示例代码 weixin_45081353 jsonrpcpython
    1.json文档IntroducingJSONcJSONjson的c解析库janssonjson的c解析库jsonpathjanssonapidocs2.json-rpc协议文档JSON-RPC1.0Specification(2005)JSON-RPC2.0Specification2个版本可同时存在下面的代码示例，实现的json-rpc2.0协议3.客户端代码操作对象json-rpc2.0#i
  • Go语言JSON-RPC 实战： `net/rpc/jsonrpc` 包的高效使用指南 walkskyer golang标准库golangjsonrpc
    Go语言JSON-RPC实战：`net/rpc/jsonrpc`包的高效使用指南简介`jsonrpc`包的基础客户端（Client）创建客户端调用方法服务器（Server）配置服务器数据类型和错误处理搭建基础的JSON-RPC服务服务端的实现客户端的实现进阶应用示例实现异步调用处理并发请求使用中间件增强功能问题解决和调试技巧常见错误及其解决方法连接失败方法调用返回错误性能优化异步处理连接复用安全性
  • 最新计算机专业毕设论文选题大全基于BeautifulSoup的毕业设计详细题目100套优质毕设项目分享(源码+论文)✅ 会写代码的羊 毕设选题课程设计beautifulsoup毕业设计毕业设计题目毕设题目python网络爬虫
    文章目录前言最新毕设选题（建议收藏起来）基于BeautifulSoup的毕业设计选题毕设作品推荐前言2025全新毕业设计项目博主介绍：✌全网粉丝10W+,CSDN全栈领域优质创作者，博客之星、掘金/华为云/阿里云等平台优质作者。技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、大数据、机器学习等设计与开发。主要内容：免费
  • gis地图开发-openlayer2热力图显示 粮忆雨 GIS地图开发gis地图开发热力图标注
    openlayers2还没将heatmap类加入，到openlayers3采用。但是考虑到浏览器的兼容性兼容到更低本版的IE，所以这里采用openlayers2版本开发gis。想要进行热力图开发就必须先对其扩展（heatmap-openlayers.js）。直接上代码//地图基础配置varoptions={controls:[newOpenLayers.Control.PanZoomBar(),n
  • 鸿蒙（HarmonyOS）性能优化—Web开发常见问题 码牛程序猿 HarmonyOS鸿蒙工程师鸿蒙harmonyos华为HarmonyOS鸿蒙应用开发鸿蒙系统鸿蒙鸿蒙开发
    H5页面如何与ArkTS交互(API10)问题现象目前javaScriptProxy仅支持同步调用，异步调用无法获取执行结果。解决措施对javaScriptProxy和runJavaScript封装，实现JSBridge通信方案。适用于H5调用原生侧函数。使用Web组件javaScriptProxy将原生侧接口注入到H5的window对象上，通过runJavaScript接口执行JS脚本到H5中，
  • Flexbox 布局详细笔记 .毅晨. html5cssvue.jshtmles6npm笔记
    Flexbox布局详细笔记Flexbox（弹性盒子布局）是CSS3中用于实现高效、灵活的页面布局的模块，特别适合处理一维布局（行或列）。以下是核心知识点和常见用法：一、Flexbox基础概念容器（FlexContainer）通过display:flex;或display:inline-flex;将一个元素定义为Flex容器。其直接子元素自动成为Flex项目（FlexItems）。主轴（MainAx
  • 【JSON-RPC】 python+JSON-RPC示例与入门 魔都吴所谓 jsonrpcpython
    JSON-RPC是一种无状态的、轻量级的远程过程调用（RPC）协议。它定义了几种数据结构及其处理规则。它使用JSON（JavaScriptObjectNotation）作为数据格式，允许实现相同功能的程序以松散耦合的方式跨网络通信。以下是一个简单的JSON-RPC使用Python的示例。我们将使用jsonrpclib这个库来创建一个JSON-RPC服务端和一个客户端。首先，你需要安装jsonrpc
  • turfijs合并相邻或者相交多边形 库库的写代码 arcgis
    文章目录前言合并多边形一、安装turf二、加载高德三、绘制图形四、计算交点六、绘制图像七、效果前言合并多边形一、安装turfnpmi@turf/turf二、加载高德AMapLoader.load({key:"你的key",//申请好的Web端开发者Key，首次调用load时必填version:"2.0",//指定要加载的JSAPI的版本，缺省时默认为1.4.15plugins:["AMap.Pol
  • 芯片制造、汽车制造行业网站，如何用插件增强富文本编辑器的WORD粘贴功能？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 金融行业网页编辑器对WORD图文混排有哪些特殊需求？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • HTML编辑器CKEDITOR支持哪些格式的WORD内容导入？ 2501_90699640 html编辑器wordckeditor粘贴wordckeditor导入wordckeditor导入pdfckeditor导入ppt
    要求：开源，免费，技术支持编辑器：ckeditor前端：vue2,vue3.vue-cli后端：asp,java,jsp,springboot,php,asp.net,.netcore功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,Ubuntu,CentO
  • 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其他