weixin_42936434
weixin_42936434

使用v-lazy实现VUE3图片懒加载技术

项目场景：

图片懒加载是常见的性能优化方法，在图片很多或加载图片出现网络延迟的情况下，使用懒加载可以减少网络请求、提高用户体验感。

实现原理：在图片没进入可视区域前，使用默认的图片；在进入可视区域并加载好之后，再替换图片的默认src路径，展示真实图片。

vue3已经封装好了v-lazy自定义指令，直接安装使用即可

使用方法：

1、vue3 安装 vue-lazy

npm install vue3-lazy -S

也可以用yarn安装

2、在main.js里面全局注册

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(lazyPlugin, {
  loading: require('@/assets/images/default.png'), // 图片加载时默认图片
  error: require('@/assets/default.png') // 图片加载失败时默认图片
  // 还可以有其他配置
})

3、template中使用

<div id="app">
    <img v-lazy="../xxx.png">
</div>

原作者github地址（源码）：https://github.com/ustbhuangyi/vue3-lazy

实现原理

Vue.js虽然是数据驱动+组件化，但还是避免不了手动操作DOM的情况，于是设计了自定义指令，允许用户做一些底层的DOM操作。v-lazy就是使用自定义指令实现的。

自定义指令官网：https://cn.vuejs.org/guide/reusability/custom-directives.html#directive-hooks

为了自定义指令方便的给多个项目使用，可以把它做成插件：

const lazyPlugin = {
  install (app, options) {
    app.directive('lazy', {
      // 指令对象
    })
  }
}

export default lazyPlugin

然后在项目中使用：

import { createApp } from 'vue'
import App from './App.vue'
import lazyPlugin from 'vue3-lazy'

createApp(App).use(lazyPlugin, {
  // 添加一些配置参数
})

通常vue3的插件会暴露install函数，当app实例use该插件时，就会执行函数。在install函数内部，通过app.directive去注册一个全局指令，这样就可以在组件中使用了。

v-lazy的实现原理：https://zhuanlan.zhihu.com/p/439390274

判断图片是否进入可视区域

判断图片是否进入可视区域使用的是 IntersectionObserver API ，详见MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver，此时可以通过监听图片可滚动父元素的一些事件如 scroll、resize 等，然后通过一些 DOM 计算来判断图片元素是否进入可视区。
使用例子：

<!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>IntersectionObserver</title>
</head>
<body>
    <div id="root" style="width: 700px; height: 1900px;">
        <div class="label topLeft" style="background-color: red; width: 200px; height: 200px;"></div>
    </div>
</body>
<script>
    debugger
    const intersectionObserver = new IntersectionObserver((entries) => {
        // 如果 intersectionRatio 为 0，则目标在视野外，
        // 我们不需要做任何事情。
        if (entries[0].intersectionRatio <= 0) return;
        console.log('Loaded new items');
    });
    // 开始监听
    intersectionObserver.observe(document.querySelector(".topLeft"));
</script>
</html>

你可能感兴趣的:(javascript,vue.js,前端)

  • 玩转Gin框架：Golang使用Gin完成登录流程 至尊丨楷君 gingolang开发语言
    文章目录背景基于Token认证机制简介常见的Token类型Token的生成和验证在项目工程里创建jwt.go文件根目录新建.env文件创建登录接口/loginToken认证机制的优点背景登录流程，相信大家都很熟悉的。传统网站采用session后端验证登录状态，大致流程如下：用户输入用户名和密码/手机号和验证码点击登录按钮提交表单。后端校验前端传递过来的信息，验证通过在缓存中存储用户信息。后续每次请
  • JavaScript 构造函数及内置构造函数的详解 小白菜学前端 JavaScriptjavascript开发语言前端
    在JavaScript中，构造函数是一种特殊的函数，用于初始化对象。当使用new关键字调用构造函数时，它会创建一个新的对象实例，并将构造函数内部的this关键字绑定到这个新对象上。构造函数通常用于定义对象的属性和方法，以及创建对象的实例。1.构造函数的定义和调用构造函数通常以大写字母开头，以便与普通函数区分。它们可以包含属性和方法，这些属性和方法通过this关键字添加到新创建的对象上。调用构造函数
  • JavaScript 对象object this 构造函数 澄清石灰水t JavaScript#JS基础javascript
    一、基本数据类型的不足：基本数据类型都是单一的值"hello"123true,值与值之间没有任何联系。exp：用基本数据类型创建一个人的信息（namegenderage）varname="邹邹";vargender="女";varage=18;虽然用基本数据类型创建出了人的相关信息，但是所创建的所有变量都是独立的，不能成为一个整体。二、什么是对象对象是一种复合数据类型，在对象中可以保存多个不同数据
  • Nginx 运维开发高频面试题详解 千夜啊 nginx运维开发运维
    一、基础核心问题原文链接：https://blog.csdn.net/weixin_51146329/article/details/1429638531、什么是Nginx？Nginx是一个高性能的HTTP和反向代理服务器，它以轻量级和高并发处理能力而闻名。Nginx的反向代理功能允许它作为前端服务器，接收客户端的请求并将它们转发到后端服务器，这样可以隐藏后端服务器的细节，提高安全性Nginx也能
  • JavaScript数组操作：多种方法移除特定元素 友人.227 前端javascript开发语言
    在JavaScript开发中，数组操作是常见的任务之一，尤其是移除数组中特定的元素。不同的场景可能需要不同的方法来实现这一目标。本文将详细介绍几种常见的方法，帮助你在实际开发中根据需求选择最合适的方式。1.使用filter方法filter方法是JavaScript中最常用的数组操作方法之一。它会创建一个新数组，包含所有满足条件的元素。如果你希望移除特定的元素，可以通过filter方法返回一个不包含
  • 鸿蒙开发在onPageShow中数据加载不完整的问题分析与解决 taopi2024 Harmonyharmonyos
    APIVersion121、onPageShow()作什么的首先说明下几个前端接口的区别：ArkUI-X的aboutToAppear()接口是一个生命周期接口，用于在页面即将显示之前调用。在ArkUI-X中，aboutToAppear()接口是一个重要的生命周期接口，它会在页面即将显示之前被调用。这个接口通常用于在页面显示之前进行一些准备工作，比如加载数据、初始化状态等。通过在aboutToApp
  • Web3 黑客松组队报名 — 30000 美金奖池，需要前后端，设计，产品，合约工程师 web3
    MantleAPACHackathon基本信息ℹ️项目提交截至12月15日30,000美金奖池三大赛道：DeFi、Infra&AI、Gaming&Meme需要前端，后端，设计，产品，合约工程师黑客松要求✍️本次黑客松由MantleFoundation联合Hackguest和OpenBuild共同打造，面向亚太地区开发者和区块链爱好者的线上黑客马拉松不限制主题部署在Mantle测试网上谁适合参加UI
  • NPDP第三章 新产品流程 钱包不紧张女士 产品运营
    什么是流程？流程描述多个人或团体经过一段时间的协作执行工作，流程所涉及的一些活动是由一连串的序列所连接，它具有可重复和可多个路径来完成。成功的新产品决策（决策的基本框架）（决策来源：知识、信息、数据具体来源：内部、外部）1.识别问题和机会2.收集信息3.分析情况4.提出备选解决方案5.评估备选解决方案6.优选解决方案7.基于决策而行动新产品开发成功的关键1.重视前端2.正确决策信息来源：内部、外部
  • Vue和Vue-Element-Admin（十）：HTML和CSS快速学习笔记 A叶子叶 #Vue与Web开发vue.jshtmlcss
    目录html标签分类网页布局盒子模型浮动定位css标签选择flex布局transform转换Vue开发tipsless和scssVScode常用插件后端语言框架很多，Java适合企业级应用（规范且稳定），Go适合高并发场景（比如云上产品），Python框架（bottle，tornado，django）简单且快速，也天然适合数据分析场景，PHP适合快速建站，前端变化小，所见即所得，因此抽空记录下学习
  • Vue.js组件开发-实现全屏手风琴幻灯片切换特效 LCG元 前端vue.js前端javascript
    使用Vue实现全屏手风琴幻灯片切换特效步骤概述创建Vue项目：使用VueCLI创建一个新的Vue项目。设计组件结构：创建一个手风琴幻灯片组件，包含幻灯片项和切换逻辑。实现样式：使用CSS实现全屏和手风琴效果。添加交互逻辑：通过Vue的事件处理实现幻灯片的切换。详细代码1.创建Vue项目安装VueCLI，使用以下命令进行安装：npminstall-g@vue/cli然后创建一个新的Vue项目：vue
  • JavaScript系列（54）--性能优化技术详解 ᅟᅠ        ‌‍‎‏ 一进制 JavaScriptjavascript性能优化开发语言
    JavaScript性能优化技术详解⚡今天，让我们继续深入研究JavaScript的性能优化技术。掌握这些技术对于构建高性能的JavaScript应用至关重要。性能优化基础概念小知识：JavaScript性能优化涉及多个方面，包括代码执行效率、内存使用、DOM操作、网络请求等。通过合理的优化策略，可以显著提升应用的响应速度和用户体验。性能分析工具实现//1.性能计时器classPerformanc
  • Javascript基础 2301_79306982 javascript开发语言ecmascript
    1.ID的限制：ID必须唯一：在同一个HTML文档中，每个id属性的值必须是唯一的。id的设计初衷就是为页面上的每个元素提供一个独特的标识符，便于JavaScript精确操作。如果ID重复会发生什么？当有多个元素使用相同的id时，document.getElementById()只会返回第一个匹配的元素，后面的会被忽略。示例：DuplicateIDJavaScript:varduplicateEl
  • Vue.js组件开发-实现图片浮动效果 LCG元 前端vue.js前端javascript
    使用Vue实现图片浮动效果实现思路将使用Vue的单文件组件（.vue）来实现图片浮动效果。主要思路是通过CSS的transform属性结合JavaScript的定时器来改变图片的位置，从而实现浮动效果。代码实现exportdefault{data(){return{//初始化图片在x轴上的偏移量xOffset:0,//初始化图片在y轴上的偏移量yOffset:0,//定时器ID，用于后续清除定时器
  • go语言与node.js的点滴思考 棕生 go语言node.js
    node.js基于V8引擎和JavaScript语言通过非阻塞I/O和事件驱动实现了一个非常纯正的异步平台，在处理I/O密集型任务时表现出了优秀的性能。但node.js具有两个非常明显的缺陷：一是单线程运行，不能很好的利用多核；二是异步编程，对业务逻辑的表现非常不自然。go语言通过封装的协程的概念很好的解决了node.js的上述两个问题：首先go语言中的协程通过系统线程的方式并行运行在多个核上；每
  • nodejs：js-mdict 的下载、安装、测试、build belldeep nodejsnodejsnvmyarnJest
    js-mdict项目的目录结构：js-mdict项目教程js-mdict下载地址:js-mdict-master.zip先解压到D:\Source\js-mdict6.0.2用了ts(TypeScript)和Jest，增加了应用开发的难度，因为先要了解ts和Jest。参阅：测试与开发：Jest测试框架介绍Jest是最流行的JavaScript测试框架之一。测试人员广泛使用Jest对JavaScri
  • 敲黑板！如果使用lighthouse 遇到NO_FCP错误可能是前端安全策略导致的！ 测试开发Kevin 性能测试接口测试测试工具性能优化前端
    lighthouseNO_FCP使用lighthouse进行前端性能测试时发现一个问题：Thepagedidnotpaintanycontent.Pleaseensureyoukeepthebrowserwindowintheforegroundduringtheloadandtryagain.(NO_FCP)页面截图如下：刚开始以为是自己的lighthouse出了问题，然后找一个其他网页进行性能
  • Vue3 表单：全面解析与最佳实践 lly202406 开发语言
    Vue3表单：全面解析与最佳实践引言随着前端技术的发展，Vue.js已经成为最受欢迎的前端框架之一。Vue3作为Vue.js的最新版本，带来了许多改进和新的特性。其中，表单处理是Vue应用中不可或缺的一部分。本文将全面解析Vue3中的表单处理，包括基础用法、表单验证、双向绑定等，并提供一些最佳实践。Vue3表单基础1.1创建表单在Vue3中，创建表单非常简单。首先，我们需要定义一个元素，并为其绑定
  • 深入理解 ES 模块与 CommonJS 模块 阿贾克斯的黎明 游戏开发elasticsearch大数据搜索引擎
    目录《深入理解ES模块与CommonJS模块》引言一、CommonJS模块1.起源与背景2.基本语法导出模块导入模块3.特点二、ES模块1.起源与背景2.基本语法导出模块导入模块3.特点三、ES模块与CommonJS模块的区别1.语法差异2.加载方式3.静态vs动态4.适用场景四、实际开发中的应用1.在Node.js中使用ES模块2.在浏览器中使用ES模块五、总结引言在JavaScript的发展历
  • 第28节课：前端项目实战—从需求分析到开发流程的全方位指南 学问小小谢 HTML学习笔记前端需求分析安全web安全网络性能优化html5
    目录项目需求分析与设计项目背景与目标项目背景项目目标需求收集与分析用户需求业务需求项目设计技术栈选择系统架构设计数据库设计项目开发流程环境搭建安装Node.js和npm初始化项目编码实践组件化开发状态管理测试与调试单元测试集成测试部署与维护部署维护结语在前端开发领域，将理论知识应用于实际项目是提升技能的关键。本节课将通过一个完整的前端项目实战案例，详细介绍项目需求分析与设计，以及项目开发流程，帮助
  • 前端——JS 逆风局？ 前端javascript开发语言
    目录什么是JS？JS引入方式JS基础语法输出语句变量常量数据类型函数自定义对象什么是JS？JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript:规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对
  • 基于Python的图书馆借阅记录管理系统设计与实现 IT实战课堂@白老师 Python项目python开发语言毕设指导推荐毕设选题推荐智能家居爬虫
    基于Python的图书馆借阅记录管理系统设计与实现|计算机毕业设计|毕设选题|选题推荐|答辩指导|课程设计|毕设答疑l论文降重该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功以及课程答疑与微信售后交流群、送查重系统不限次数免费查重等福利！技术路线：软件开发环境及开发工具：开发语言：python使用框架：Django前端技术：JavaScript、VUE.js（2.
  • HarmonyOS 开发实践——常见预置应用的跳转方式 六号嘉宾 HarmonyOS移动开发鸿蒙开发harmonyos鸿蒙开发ArkUI前端移动开发界面布局组件化
    往期学习笔录：鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……场景描述三方应用实际使用过程中，可能需要跳转到
  • Python+Django框架图书馆图书借阅管理系统网站设计与实现作品截图和开题报告参考 黄菊华老师 计算机系统成品图书馆图书借阅管理系统
    博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育、辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩，提供核心代码讲解，答辩指导。项目配有对应开发文档、开题报告、任务书、PPT等，提供毕业设计论文辅导。项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包
  • 【项目实战】Electron最佳实践 本本本添哥 007-大前端技术electronjavascript前端
    一、Electron的入门介绍1.1Electron是什么？Electron由GitHub开发团队创建，最初是为了构建GitHub客户端而设计的。Electron是一个开源的框架，用于构建跨平台桌面应用程序。Electron是一个强大的框架，它可以帮助您使用Web技术构建跨平台桌面应用程序。Electron是一个流行的跨平台框架，可以使用HTML、CSS和JavaScript构建桌面应用程序。1.
  • 第一章 什么是JavaScript Sheldon一蓑烟雨任平生 开发语言JavaScriptJavaScript基础ECMAScript什么是JavaScript
    第一章什么是JavaScript1.历史梗概2.JavaScript的实现（ECMAScript、DOM、BOM）2.1ECMAScript2.2DOM（文档对象模型）2.3BOM（浏览器对象模型，在第12章会有详细介绍）3.支持（所有浏览器基本都支持ES5）1.历史梗概（1）初始目的：代替服务器语言，作为脚本语言，在客户端处理输入验证，判断输入值是否填写及其有效性；（2）开发时间：1995年；（
  • AI智慧社区--百度地图 Y在努力学编程 项目vuespringbootjava百度地图
    数据库：前端实现页面代码import{getCommunityMap}from'@/api/sys/community'exportdefault{name:'Map',data(){return{listQuery:{gradeId:''},center:{lng:116.3755,lat:39.80896},zoom:12,mapData:[]}},mounted(){},methods:{i
  • javascrip基础语法 大道戏 前端前端javascript开发语言
    为什么学习JavaScript?JavaScript是web开发人员必须学习的3门语言中的一门：HTML定义了网页的内容CSS描述了网页的布局JavaScript控制了网页的行为1.JavaScript输出1.1console.log()：用于将信息输出到浏览器控制台，例如console.log("Hello,World!");，可以输出字符串、变量、表达式等。1.2console.error()
  • JavaScript常见事件和修饰符 山禾女鬼001 javascript开发语言ecmascript
    JavaScript作为Web开发的重要语言，处理事件的机制是其中最常见且最重要的部分之一。通过事件，我们可以让用户与页面进行交互，创造出更丰富、更动态的用户体验。在JavaScript中，事件不仅有种类繁多，还可以通过修饰符来进一步控制它们的行为。1.常见的JavaScript事件JavaScript中的事件主要是指浏览器对用户行为的响应。常见的事件包括但不限于以下几类：1.1鼠标事件click
  • 大学生HTML期末大作业——HTML+CSS+JavaScript美食网站（西餐） 无·糖 Web前端期末大作业html课程设计css大学生javascript美食大作业
    HTML+CSS+JS【美食网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目美食网站（西餐）精美响应式含JQuery7页二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单
  • 大学生期末大作业|HTML+CSS+JavaScript 登录页面实例：超实用、新手友好、完整源码分享 从零开始：用原生 HTML、CSS 和 JS 打造简洁美观的登录页面（附完整代码） 新手必看：一 南北极之间 前端进阶练手实战htmlcss大学生期末大作业前端html5javascript
    效果图：目录一、新建一个HTML项目二、创建基本结构三、使用CSS美化页面四、添加交互功能五、完整代码六、结语步骤在Web开发中，登录页面是常见且重要的组件。一个设计良好的登录页面可以提升用户体验，并为网站留下良好的第一印象。今天，我们将一起学习如何使用HTML、CSS和JavaScript（不使用任何框架）来构建一个响应式的登录页面，实现基本的前端验证功能。一、新建一个HTML项目首先，创建一个
  • java线程的无限循环和退出 3213213333332132 java
    最近想写一个游戏，然后碰到有关线程的问题，网上查了好多资料都没满足。 突然想起了前段时间看的有关线程的视频，于是信手拈来写了一个线程的代码片段。 希望帮助刚学java线程的童鞋 package thread; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date
  • tomcat 容器 BlueSkator tomcatWebservlet
    Tomcat的组成部分 1、server A Server element represents the entire Catalina servlet container. (Singleton) 2、service service包括多个connector以及一个engine，其职责为处理由connector获得的客户请求。   3、connector 一个connector
  • php递归,静态变量,匿名函数使用 dcj3sjt126com PHP递归函数匿名函数静态变量引用传参
      <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Current To-Do List</title> </head> <body>
  • 属性颜色字体变化 周华华 JavaScript
    function changSize(className){ var diva=byId("fot") diva.className=className; } </script> <style type="text/css"> .max{ background: #900; color:#039;
  • 将properties内容放置到map中 g21121 properties
    代码比较简单： private static Map<Object, Object> map; private static Properties p; static { //读取properties文件 InputStream is = XXX.class.getClassLoader().getResourceAsStream("xxx.properti
  • [简单]拼接字符串 53873039oycg 字符串
             工作中遇到需要从Map里面取值拼接字符串的情况，自己写了个，不是很好，欢迎提出更优雅的写法，代码如下：           import java.util.HashMap; import java.uti
  • Struts2学习 云端月影
    最近开始关注struts2的新特性，从这个版本开始，Struts开始使用convention-plugin代替codebehind-plugin来实现struts的零配置。 配置文件精简了，的确是简便了开发过程，但是，我们熟悉的配置突然disappear了，真是一下很不适应。跟着潮流走吧，看看该怎样来搞定convention-plugin。 使用Convention插件，你需要将其JAR文件放
  • Java新手入门的30个基本概念二 aijuans java新手java 入门
    基本概念:　　1.OOP中唯一关系的是对象的接口是什么,就像计算机的销售商她不管电源内部结构是怎样的,他只关系能否给你提供电就行了,也就是只要知道can or not而不是how and why.所有的程序是由一定的属性和行为对象组成的,不同的对象的访问通过函数调用来完成,对象间所有的交流都是通过方法调用,通过对封装对象数据,很大限度上提高复用率。　　2.OOP中最重要的思想是类,类是模板是蓝图,
  • jedis 简单使用 antlove javarediscachecommandjedis
    jedis.RedisOperationCollection.java package jedis; import org.apache.log4j.Logger; import redis.clients.jedis.Jedis; import java.util.List; import java.util.Map; import java.util.Set; pub
  • PL/SQL的函数和包体的基础 百合不是茶 PL/SQL编程函数包体显示包的具体数据包
    由于明天举要上课,所以刚刚将代码敲了一遍PL/SQL的函数和包体的实现(单例模式过几天好好的总结下再发出来);以便明天能更好的学习PL/SQL的循环,今天太累了,所以早点睡觉,明天继续PL/SQL总有一天我会将你永远的记载在心里,,,   函数; 函数:PL/SQL中的函数相当于java中的方法;函数有返回值 定义函数的 --输入姓名找到该姓名的年薪 create or re
  • Mockito(二)--实例篇 bijian1013 持续集成mockito单元测试
            学习了基本知识后，就可以实战了，Mockito的实际使用还是比较麻烦的。因为在实际使用中，最常遇到的就是需要模拟第三方类库的行为。         比如现在有一个类FTPFileTransfer，实现了向FTP传输文件的功能。这个类中使用了a
  • 精通Oracle10编程SQL(7)编写控制结构 bijian1013 oracle数据库plsql
    /* *编写控制结构 */ --条件分支语句 --简单条件判断 DECLARE v_sal NUMBER(6,2); BEGIN select sal into v_sal from emp where lower(ename)=lower('&name'); if v_sal<2000 then update emp set
  • 【Log4j二】Log4j属性文件配置详解 bit1129 log4j
    如下是一个log4j.properties的配置   log4j.rootCategory=INFO, stdout , R log4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.appender.stdout.layout=org.apache.log4j.PatternLayout log4j.appe
  • java集合排序笔记 白糖_ java
    public class CollectionDemo implements Serializable,Comparable<CollectionDemo>{ private static final long serialVersionUID = -2958090810811192128L; private int id; private String nam
  • java导致linux负载过高的定位方法 ronin47
    定位java进程ID 可以使用top或ps -ef |grep java ![图片描述][1] 根据进程ID找到最消耗资源的java pid 比如第一步找到的进程ID为5431 执行 top -p 5431 -H ![图片描述][2] 打印java栈信息 $ jstack -l 5431 > 5431.log 在栈信息中定位具体问题 将消耗资源的Java PID转
  • 给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数 bylijinnan 函数
    import java.util.ArrayList; import java.util.List; import java.util.Random; public class RandNFromRand5 { /** 题目：给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数。 解法1： f(k) = (x0-1)*5^0+(x1-
  • PL/SQL Developer保存布局 Kai_Ge
          近日由于项目需要，数据库从DB2迁移到ORCAL，因此数据库连接客户端选择了PL/SQL Developer。由于软件运用不熟悉，造成了很多麻烦，最主要的就是进入后，左边列表有很多选项，自己删除了一些选项卡，布局很满意了，下次进入后又恢复了以前的布局，很是苦恼。在众多PL/SQL Developer使用技巧中找到如下这段：   &n
  • [未来战士计划]超能查派[剧透,慎入] comsci 计划
           非常好看,超能查派,这部电影......为我们这些热爱人工智能的工程技术人员提供一些参考意见和思想........        虽然电影里面的人物形象不是非常的可爱....但是非常的贴近现实生活....    &nbs
  • Google Map API V2 dai_lm google map
    以后如果要开发包含google map的程序就更麻烦咯 http://www.cnblogs.com/mengdd/archive/2013/01/01/2841390.html 找到篇不错的文章，大家可以参考一下 http://blog.sina.com.cn/s/blog_c2839d410101jahv.html 1. 创建Android工程 由于v2的key需要G
  • java数据计算层的几种解决方法2 datamachine javasql集算器
    2、SQL     SQL/SP/JDBC在这里属于一类，这是老牌的数据计算层，性能和灵活性是它的优势。但随着新情况的不断出现，单纯用SQL已经难以满足需求，比如： JAVA开发规模的扩大，数据量的剧增，复杂计算问题的涌现。虽然SQL得高分的指标不多，但都是权重最高的。     成熟度：5星。最成熟的。   
  • Linux下Telnet的安装与运行 dcj3sjt126com linuxtelnet
    Linux下Telnet的安装与运行   linux默认是使用SSH服务的 而不安装telnet服务  如果要使用telnet 就必须先安装相应的软件包  即使安装了软件包 默认的设置telnet 服务也是不运行的 需要手工进行设置 如果是redhat9，则在第三张光盘中找到 telnet-server-0.17-25.i386.rpm
  • PHP中钩子函数的实现与认识 dcj3sjt126com PHP
    假如有这么一段程序： function fun(){ fun1(); fun2(); }   首先程序执行完fun1()之后执行fun2()然后fun()结束。   但是，假如我们想对函数做一些变化。比如说，fun是一个解析函数，我们希望后期可以提供丰富的解析函数，而究竟用哪个函数解析，我们希望在配置文件中配置。这个时候就可以发挥钩子的力量了。   我们可以在fu
  • EOS中的WorkSpace密码修改 蕃薯耀 修改WorkSpace密码
    EOS中BPS的WorkSpace密码修改 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 201
  • SpringMVC4零配置--SpringSecurity相关配置【SpringSecurityConfig】 hanqunfeng SpringSecurity
     SpringSecurity的配置相对来说有些复杂，如果是完整的bean配置，则需要配置大量的bean，所以xml配置时使用了命名空间来简化配置，同样，spring为我们提供了一个抽象类WebSecurityConfigurerAdapter和一个注解@EnableWebMvcSecurity，达到同样减少bean配置的目的，如下：   applicationContex
  • ie 9 kendo ui中ajax跨域的问题 jackyrong AJAX跨域
    这两天遇到个问题，kendo ui的datagrid，根据json去读取数据，然后前端通过kendo ui的datagrid去渲染，但很奇怪的是，在ie 10,ie 11,chrome,firefox等浏览器中，同样的程序， 浏览起来是没问题的，但把应用放到公网上的一台服务器， 却发现如下情况： 1） ie 9下，不能出现任何数据，但用IE 9浏览器浏览本机的应用，却没任何问题
  • 不要让别人笑你不能成为程序员 lampcy 编程程序员
    在经历六个月的编程集训之后，我刚刚完成了我的第一次一对一的编码评估。但是事情并没有如我所想的那般顺利。 说实话，我感觉我的脑细胞像被轰炸过一样。 手慢慢地离开键盘，心里很压抑。不禁默默祈祷：一切都会进展顺利的，对吧？至少有些地方我的回答应该是没有遗漏的，是不是？ 难道我选择编程真的是一个巨大的错误吗——我真的永远也成不了程序员吗？ 我需要一点点安慰。在自我怀疑，不安全感和脆弱等等像龙卷风一
  • 马皇后的贤德 nannan408
       马皇后不怕朱元璋的坏脾气，并敢理直气壮地吹耳边风。众所周知，朱元璋不喜欢女人干政，他认为“后妃虽母仪天下，然不可使干政事”，因为“宠之太过，则骄恣犯分，上下失序”，因此还特地命人纂述《女诫》，以示警诫。但马皇后是个例外。 　　有一次，马皇后问朱元璋道：“如今天下老百姓安居乐业了吗？”朱元璋不高兴地回答：“这不是你应该问的。”马皇后振振有词地回敬道：“陛下是天下之父，
  • 选择某个属性值最大的那条记录（不仅仅包含指定属性，而是想要什么属性都可以） Rainbow702 sqlgroup by最大值max最大的那条记录
    好久好久不写SQL了，技能退化严重啊！！！   直入主题： 比如我有一张表，file_info， 它有两个属性（但实际不只，我这里只是作说明用）： file_code, file_version 同一个code可能对应多个version 现在，我想针对每一个code，取得它相关的记录中，version 值 最大的那条记录， SQL如下： select *
  • VBScript脚本语言 tntxia VBScript
      VBScript 是基于VB的脚本语言。主要用于Asp和Excel的编程。   VB家族语言简介   Visual Basic 6.0           源于BASIC语言。           由微软公司开发的包含协助开发环境的事
  • java中枚举类型的使用 xiao1zhao2 javaenum枚举1.5新特性
    枚举类型是j2se在1.5引入的新的类型,通过关键字enum来定义,常用来存储一些常量.   1.定义一个简单的枚举类型 public enum Sex { MAN, WOMAN }   枚举类型本质是类,编译此段代码会生成.class文件.通过Sex.MAN来访问Sex中的成员,其返回值是Sex类型.   2.常用方法 静态的values()方
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他