本篇译文,删减了原文中一些无关紧要的内容,可以让大家花更少的阅读时间。 原文地址:https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec
这篇文章将讨论日常编程中另一个复杂且容易被忽视的问题 — 内存管理。其中还提供了一些关于如何处理 JavaScript 内存泄露的提示,来防止导致内存泄漏以及不会增加我们 WEB 程序的内存消耗。
Overview
像 C 语言这样的底层语言一般都有底层的内存管理接口,比如 malloc()
和 free()
。相反,JavaScript 是在创建变量(对象,字符串等)时自动进行了分配内存,并且在不使用它们时“自动”释放。 释放的过程称为垃圾回收。这个“自动”是混乱的根源,并让 JavaScript(和其他高级语言)开发者错误的感觉他们可以不关心内存管理。
即使使用高级开发语言,开发人员也应该了解内存管理(或至少了解其基础知识)。有时自动内存管理会存在一些问题(如垃圾回收的 bug 和实现限制等)。开发者必须了解相关内存知识才能解决(或找到合适的解决方法,并尽量减少折衷和代码债务)来处理这些问题。
Memory life cycle
无论使用何种编程语言,内存生命周期几乎都是一样的: 以下概述了周期的每个步骤:
Allocate memory — 分配你所需要的内存。程序使用的内存由操作系统分配,在底层语言中(如C语言)这是开发人员需要处理的,在高级语言中由程序自动处理。
Use memory — 使用分配到的内存(读、写)。代码中使用变量对内存进行读、写 操作。
Release memory — 不需要时将其释放/归还。和 Allocate memory 一样,在底层语言中需要开发者自行明确的处理。
What is memory?
讨论 JavaScript 内存之前,我们先简单地讨论一下内存是什么以及它是如何工作的?
在硬件级别上,计算机内存包含大量触发器(flip flops)。每个触发器包含几个晶体管并且能够存储一位(bit)。单个触发器可通过唯一标识符进行寻址,因此我们可以读取和覆盖它们。从概念上讲,我们可以将整个计算机内存视为我们可以读写的一个巨大的位(bit)数组。
因为人类,不善于做一些 bits 的运算和思考,所以将其组织成更大的组来表示数值。8 bits 为 1 byte,超出 byte的,有单词(16bits 或 32bits)
大量的东西存储在内存中,包括:
程序中使用的所有变量以及其他数据
程序代码,以及包括操作系统的代码
虽然编译器和操作系统已经为内存管理做了大量工作,但是还是建议了解一下引擎之下发生了什么。
编译代码时,编译器可以检查原始数据类型,并提前计算它们所需内存。然后将所需的数量分配给调用堆栈中的程序。这些变量分配的空间称为堆栈空间(stack space ),因为函数被调用,它们的内存被添加到现有内存(存储器)的顶部。它们终止时,它们将以LIFO(后进先出)顺序被移除。
int n;
int x[ 4 ] ;
double m;
编译器可以立即计算diam所有内存空间为: 4 + 4 × 4 + 8 = 28 b y t e s 4 + 4 × 4 + 8 = 28 bytes 4 + 4 × 4 + 8 = 2 8 b y t e s
这是现在整数和双精度的工作原理。大约 20 年前,整数通常为 2 字节,双精度为 4 字节。你的代码永远不必依赖于此时基本数据类型的大小。
编译器将插入与操作系统交互的代码,以便在堆栈中请求要存储的变量所需的字节数。
上述示例中,编译器知道每个变量的确切内存地址。实际上,每当我们写入变量时,它就会会内部转为类似”内存地址 4127963“的内容。
注意,如果尝试访问x[4]
,可能会访问到和 m 相关联的数据。这是因为我们访问的元素在数组中并不存在 — 它比数组中最后一个实际分配的元素x[3]
多4个字节,可能会读取(或重写) m 的位。这肯定会对程序产生难以理解的不良影响。 当函数调用其他函数时,每个函数在调用时都会获得自己的堆栈块。它保存所有的局部变量,还有一个程序计数器,可以记录函数的执行位置。当函数执行完成时,其内存块可以再次用于其他目的。
Dynamic allocation
不幸的是,当在编译时不知道变量需要多少内存时,事情就不那么容易了。假设我们想要做类似以下的事情:
int n = readInput ( ) ;
...
这种情况下,在编译时,编译器不知道数组需要多少内存空间,因为其由用户输入的值来确定。
因此,它无法为堆栈上的变量分配空间。相反,我们的程序需要再运行时明确询问操作系统是否有适当的空间。此内存是从堆空间(heap space) 分配的。下述为静态分配和动态分配的差异:
Static allocation
Dynamic allocation
编译时内存大小确定
编译时内存大小不确定
编译阶段执行
运行时执行
分配给栈(stack space)
分配给堆(heap stack)
FILO
没有特定的顺序
Allocation in JavaScript
现在我们将解释第一步(分配内存 — Allocate memory)如何在JavaScript中工作。 JavaScript 使开发人员免于处理内存 — 其在声明时自动完成。
var n = 374 ;
var s = 'sessionstack' ;
var o = {
a: 1 ,
b: null
} ;
var a = [ 1 , null , 'str' ] ;
function f ( a) {
return a + 3 ;
}
someElement. addEventListener ( 'click' , function ( ) {
someElement. style. backgroundColor = 'blue' ;
} , false ) ;
一些函数调用也会导致对象分配:
var d = new Date ( ) ;
var e = document. createElement ( 'div' ) ;
方法可以分配新的值或对象:
var s1 = 'sessionstack' ;
var s2 = s1. substr ( 0 , 3 ) ;
var a1 = [ 'str1' , 'str2' ] ;
var a2 = [ 'str3' , 'str4' ] ;
var a3 = a1. concat ( a2) ;
Using memory in JavaScript
通常在JavaScript中使用内存的过程实际上是对分配内存进行读取与写入的操作。读取与写入可能是写入一个变量或者一个对象的属性值,甚至传递函数的参数。
Release when the memory is not needed anymore
大多数内存管理的问题都在这个阶段。在这里最艰难的任务是找到“哪些被分配的内存确实已经不再需要了”。它往往要求开发人员来确定在程序中哪一块内存不再需要并且释放它。
高级语言解释器嵌入了“垃圾回收器”,它的主要工作是跟踪内存的分配和使用,以便当分配的内存不再使用时,自动释放它。不幸的是,这只能是一个近似的过程,因为要知道是否仍然需要某块内存是无法判定的(无法通过某种算法解决)。
大多数垃圾回收器通过判断内存是否能够被再次访问来工作的,例如:指向它的所有变量都超出了作用域。然而,这只能得到一个近似值。因为在任何一点上,内存位置可能仍然有一个在作用域内指向它的变量,但是它可能将永远不会被再次访问了。
Garbage collection
自动寻找是否一些内存“不再需要”的问题是无法判定的。因此,垃圾回收实现只能有限制的解决一般问题。本节将解释必要的概念,了解主要的垃圾回收算法和它们的局限性。
Memory references
垃圾回收算法依靠的主要概念就是引用(reference) 。 在内存管理的环境中,一个对象如果有访问另一个对象的权限(隐式或者显式),叫做一个对象引用另一个对象。例如,一个Javascript对象具有对它原型的引用(隐式引用)和对它属性的引用(显式引用)。 在这里,“对象”的概念不仅特指 JavaScript 对象,还包括函数作用域(或者全局词法作用域)。
词法作用域定义了如何在嵌套函数中解析变量名称:即使父函数已 return,内部函数也可以包含父函数的作用域。
引用计数垃圾收集 Reference-counting garbage collection
这是最初级的垃圾收集算法。此算法把“对象是否不再需要”简化定义为“对象有没有其他对象引用到它”。如果没有引用指向该对象(零引用),对象将被垃圾回收机制回收。
下述例子,使用了MDN中的例子,而并没有用原文中,因为发现了作者这部分内容完全来自 MDN o(╥﹏╥)o — https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Memory_Management
var o = {
a: {
b: 2
}
} ;
var o2 = o;
o = 1 ;
var oa = o2. a;
o2 = "yo" ;
oa = null ;
Cycles are creating problems
该算法有个限制:无法处理循环引用的事例。在下面的例子中,两个对象被创建,并互相引用,形成了一个循环。它们被调用之后会离开函数作用域,所以它们已经没有用了,可以被回收了。然而,引用计数算法考虑到它们互相都有至少一次引用,所以它们不会被回收。
function f ( ) {
var o1 = { } ;
var o2 = { } ;
o1. p = o2;
o2. p = o1;
}
f ( ) ;
标记-清楚算法 Mark-and-sweep algorithm
这个算法把“对象是否不再需要”简化定义为“对象是否可以获得”。 标记和扫描算法通过以下3个步骤:
根:一般来说,根是在代码中引用的全局变量。例如,在 JavaScript 中,可以充当根的全局变量是“window”对象。Node.js 中的相同对象称为“global”。垃圾收集器构建了所有根的完整列表。;
然后算法检查所有根和它们的孩子并将它们标记为 Active(意思是,它们不是垃圾)。root无法访问的任何内容都将被标记为垃圾。
最后,垃圾收集器释放所有未标记为 Active 的内存块,并将该内存返回给操作系统。
该算法优于“引用计数”算法,因为“一个对象具有零个引用”导致对象不能访问。这与上面循环应用相反。
截止到2012年,所有现代浏览器都提供了标记 - 清除垃圾收集器。在过去几年中,在 JavaScript 垃圾收集(生成/增量/并发/并行垃圾收集)领域所做的所有改进都是该算法的实现改进(mark-and-sweep),但不是对垃圾收集算法本身的改进,也不是决定对象是否可访问的目标。
Cycles are not a problem anymore
在上面的示例中,函数调用返回之后,两个对象从全局对象出发无法获取。因此,他们将会被垃圾回收器回收。 尽管对象之间存在引用,但它们无法从根目录(window)访问。
Counter intuitive behavior of Garbage Collectors
虽然垃圾收集器很方便,但它们还是有自己的权衡取舍。其中之一是非决定论(non-determinism)。换句话说,GC 是不可预测的,无法确定何时会执行收集。这意味着在某些情况下,程序使用的内存要比实际需要的还多。另一个场景是,在特别敏感的应用中,那么一些短暂的暂停会显得特别明显。虽然不确定性意味着回收执行的时间不能被确定,但是大多数 GC 的实现是共享模式 — 在分配内存期间执行回收遍历。如果没有分配执行,大多数 GCs 保持空闲状态。请考虑以下情形:
相当大的一组分配被执行
都被标记为无法访问(假设我们将指向我们不再需要的缓存的引用置空)
没有进一步的分配
在这种情况下,大多数GC不会再运行任何收集动作(passes)。换句话说,即使存在对于收集来说,无法访问的引用,收集器也不会声明这些引用(these are not claimed by the collector)。这些并非严格内存泄漏,但仍导致高于平常的内存使用率。
What are memory leaks?
内存泄漏是应用程序过去使用但后续不再需要,尚未返回操作系统或可用内存池的内存块。 编程语言支持不同的内存管理方式。但是,是否使用某段内存实际上是一个不可判定(undecidable problem)的问题。换句话说,只有开发人员才能明确是否可以将内存返回给操作系统。
某些编程语言提供了帮助开发人员执行此操作的功能,希望开发人员完全明确何时不再使用内存。Wikipedia has good articles on manual and automaticmemory management.
The four types of common JavaScript leaks
1. Global variables
JavaScript 以一种有趣的方式处理未声明的变量:当引用未声明的变量时,会在全局对象中创建一个新变量。在浏览器中,全局对象将是 window,这意味着
function foo ( arg) {
bar = "some text" ;
}
等价于
function foo ( arg) {
window. bar = "some text" ;
}
假设 bar
的目的是仅引用 foo
函数中的变量。但是,如果不使用 var
来声明它,则会创建一个冗余的全局变量。在上述情况下,这不会造成太大伤害。你肯定可以想象一个更具破坏性的场景。
function foo ( ) {
this . var1 = "potential accidental global" ;
}
foo ( ) ;
你可以通过添加 'use strict'
来避免这一切;在 JavaScript 文件的开头,它将打开更严格的解析 JavaScript 模式,以防止意外创建全局变量。
意外的全局变量肯定是个问题,但是,通常情况下,您的代码会被显式的全局变量所侵扰,而这些变量根据定义无法被垃圾收集器收集。需要特别注意用于临时存储和处理大量信息的全局变量。如果必须使用全局变量来存储数据,请确保使用完成后将其指定为null或重新分配它。
2. Timers or callbacks that are forgotten
我们以 setInterval
为例,因为它经常在 JavaScript 中使用.
大多数库都会提供观察者或者其它工具来处理回调函数,在他们自己的实例变为不可访问时,会让回调函数也变为不可访问。不过,下面的代码并不罕见:
var serverData = loadData ( ) ;
setInterval ( function ( ) {
var renderer = document. getElementById ( 'renderer' ) ;
if ( renderer) {
renderer. innerHTML = JSON . stringify ( serverData) ;
}
} , 5000 ) ;
这个例子阐述着 timers 可能发生的情况:计时器会引用不再需要的节点或数据。
renderer
可能在将来会被移除,使得 interval
内的整个块都不再被需要。但是,interval handler
因为 interval
的存活,所以无法被回收(需要停止 interval
,才能回收)。如果 interval handler
无法被回收,则它的依赖也不能被回收。这意味着 serverData
— 可能存储了大量数据,也不能被回收。
在观察者模式下,重要的是在他们不再被需要的时候显式地去删除它们(或者让相关对象变为不可访问)。
幸运的是,大多数现代浏览器都能为您完成这项工作:即使您忘记移除侦听器,一旦观察到的对象无法访问,它们也会自动收集观察者处理程序。在过去,一些浏览器无法处理这些情况(旧的IE6)。
尽管如此,一旦对象变得过时,它仍然符合删除观察者的最佳实践。例如:
var element = document. getElementById ( 'launch-button' ) ;
var counter = 0 ;
function onClick ( event) {
counter++ ;
element. innerHtml = 'text ' + counter;
}
element. addEventListener ( 'click' , onClick) ;
element. removeEventListener ( 'click' , onClick) ;
element. parentNode. removeChild ( element) ;
在使节点无法访问之前,您不再需要调用 removeEventListener
,因为现代浏览器支持可以检测这些循环并适当处理它们的垃圾收集器。
如果利用 jQuery API(其他库和框架也支持它),可以在节点过时之前删除侦听器。即使应用程序在较旧的浏览器版本下运行,该库也将确保没有内存泄漏。
3. Closures
JavaScript 开发的一个关键方面就是闭包:一个可以访问外部(封闭)函数变量的内部函数。由于 JavaScript 运行时的实现细节,可以通过以下方式泄漏内存:
var theThing = null ;
var replaceThing = function ( ) {
var originalThing = theThing;
var unused = function ( ) {
if ( originalThing)
console. log ( "hi" ) ;
} ;
theThing = {
longStr: new Array ( 1000000 ) . join ( '*' ) ,
someMethod: function ( ) {
console. log ( "message" ) ;
}
} ;
} ;
setInterval ( replaceThing, 1000 ) ;
这个代码片段做了一件事:每次调用 replaceThing
时,theThing
都会获得一个新对象,它包含一个大的数组和一个新的闭包(someMethod
)。同时,变量 unused
保留了一个拥有originalThing
引用的闭包(前一次调用 theThing
赋值给了 originalThing
)。已经有点混乱了吗?重要的是,一旦一个作用域被创建为闭包,那么它的父作用域将被共享。
在这个例子中,创建闭包 someMethod
的作用域是于 unused
共享的。unused
拥有 originalThing
的引用。尽管 unused
从来都没有使用,但是 someMethod
能够通过 theThing
在 replaceThing
之外的作用域使用(例如全局范围)。并且由于 someMethod
和 unused
共享闭包作用域,unused
的引用将强制保持 originalThing
处于活动状态(两个闭包之间共享整个作用域),这样防止了垃圾回收。
当这段代码重复执行时,可以观察到内存使用量的稳定增长。当 GC 运行时,也没有变小。实质上,引擎创建了一个闭包的链接列表(root
就是变量 theThing
),并且这些闭包的作用域中每一个都有对大数组的间接引用,导致了相当大的内存泄漏。
This issue was found by the Meteor team and they have a great article that describes the issue in great detail.
4. Out of DOM references
有时候,在数据结构中存储 DOM 结构是有用的。假设要快速更新表中的几行内容。将每行 DOM 的引用存储在字典或数组中可能是有意义的。当这种情况发生时,就会保留同一 DOM 元素的两份引用:一个在 DOM 树中,另一个在字典中。如果将来某个时候你决定要删除这些行,则需要让两个引用都不可达。
var elements = {
button: document. getElementById ( 'button' ) ,
image: document. getElementById ( 'image' )
} ;
function doStuff ( ) {
elements. image. src = 'http://example.com/image_name.png' ;
}
function removeImage ( ) {
document. body. removeChild ( document. getElementById ( 'image' ) ) ;
}
还有一个额外的考虑,当涉及 DOM 树内部或叶子节点的引用时,必须考虑这一点。假设你在 JavaScript 代码中保留了对 table 特定单元格()的引用。有一天,你决定从 DOM 中删除该 table,但扔保留着对该单元格的引用。直观地来看,可以假设 GC 将收集除了该单元格之外所有的内容。实际上,这不会发生的:该单元格是该 table 的子节点,并且 children 保持着对它们 parents 的引用。也就是说,在 JavaScript 代码中对单元格的引用会导致整个表都保留在内存中的。保留 DOM 元素的引用时,需要仔细考虑。
你可能感兴趣的:(JavaScript)
notepad++软件介绍(含安装包)
LQS2020
notepad++
Notepad++是一款开源的文本编辑器,主要用于编程和代码编辑。它是一个功能强大的替代品,常常被用来替代Windows系统自带的记事本。Notepad++win系统免费下载地址以下是Notepad++的一些主要特点和功能:多语言支持:Notepad++支持多种编程语言,包括Python、JavaScript、HTML、CSS、C++、Java等。它能够根据文件类型自动高亮显示语法,使代码更加易读
【LangChain】使用LangChain的提示词模板:技巧与总结
子夜时辰
LangChain的学习 langchain javascript node.js AIGC chatgpt
作者简介:前端开发爱好者,致力学习前端开发技术⭐️个人主页:夜宵饽饽的主页❔系列专栏:JavaScript小贴士学习格言:成功不是终点,失败也并非末日,最重要的是继续前进的勇气前言:这里是关于LangChain框架中的提示词模板使用的技巧,希望可以帮助到大家,欢迎大家的补充和纠正文章目录一、使用LangChain的提示词模板:技巧与总结1、格式化示例集2、示例选择器来组合提示词模板3、在聊天模型中
转码日记——Javascript笔记(8)
zzcoding_
转码日记 数据结构 javascript 前端 开发语言
数组(Array)数组也是一个对象,和普通对象功能类似。普通对象使用字符串作为属性名,而数组使用数字来作为索引操作。索引:从0开始的整数。数组的存储效率比较高,对属性名没有要求的时候可以使用。基本应用//创建数组对象vararr=newArray();//向数组中添加对象//语法:数组[索引]=值;arr[0]=10;arr[1]=33;//如果读取不存在的索引则返回undefined//获取数组
python中selenium中使用ajax_使用selenium和python捕获AJAX响应
weixin_39946534
我曾经截获了一些使用selenium向页面注入javascript的ajax调用.历史的不好的一面是,硒有时可能是,说“脆弱”.因此,无论如何我在进行注射时都会遇到硒异常.无论如何,我的想法是拦截XHR调用,并将其响应设置为我创建的一个新的dom元素,我可以从selenium操作.在拦截的条件下,你甚至可以使用发出请求的url来拦截你真正想要的那个(self._url)也许这有帮助.browser
(代码可运行)Bootstrap框架的HTML示例
程序员大侠
前端 CSS html bootstrap 前端
Bootstrap:一套流行的前端开发框架,基于HTML、CSS和JavaScript,适用于快速构建响应式Web应用。以下是一个使用Bootstrap构建的简单响应式Web应用的HTML示例:BootstrapExampleHello,Bootstrap!CardtitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthe
移动端测试
渔jy
Android系统及应用 android linux
三种移动端产品类型介绍移动端应用的测试其自身特点,和其他传统测试又有一些独特的测试方法与思路。移动端应用又可以进一步细分为三大类:WebApp指的是移动端的Web浏览器,其实和PC端的Web浏览器没有任何区别,只不过Web浏览器所依附的操作系统不再是Windows和Linux了,而是iOS和Android了。WebApp采用的技术主要是,传统的HTML、JavaScript、CSS等Web技术栈,
JavaScript 常用模块化规范
渡鸦七
JavaScript javascript 开发语言 ecmascript
JavaScript模块化规范1.模块化概述1.1什么时模块化将程序文件依据一定规则拆分成多个文件,这种编码方式就是模块化的编码方式。拆分出来每个文件就是一个模块,模块中的数据都是私有的,模块之间相互隔离。同事也能通过一些手段,可以把模块内的指定数据“交出去”,提供其他模块使用。1.2为什么使用模块化随着应用的复杂度越来越高,其代码量和文件数据都会急剧增加,会逐渐引发一些问题:全局污染问题。依赖混
深入探索从ES6到ES2023
hai40587
es6 前端 ecmascript
从ES6到ES2023,我们深入探索ECMAScript(简称ES)的演变与发展,了解这一JavaScript标准背后的技术革新和进步。ECMAScript作为JavaScript的标准化版本,每年都在不断推出新版本,为开发者带来更加丰富和强大的功能。本文将从ES6的引入开始,逐步介绍到最新的ES2023,同时探讨这些新特性对现代Web开发的影响。ECMAScript简介与JavaScript的关
我们在进行前后端联调的时候 如何避免数据丢失 拿不到返回数据 查看不了状态信息等问题?
朱道阳
底层原理 面试八股 回归 前端 npm git python
最近在进行前后端联调开发的全栈开发工作但是这时候会出现很多问题比如说前端拿不到数据获得的状态码可能是正确的传的值却是null我进行了学习总结出一下几点一、数据校验前端程序员必须对后端提供的数据进行严格的数据校验。数据校验的目的是确保接收到的数据符合预期的格式和类型。在JavaScript中,可以使用typeof操作符或Array.isArray()方法进行基本的类型检查。更复杂的数据结构,可以使用
WebKit 简介及工作流程深度解析
不知名靓仔
webkit chrome safari edge
WebKit是一个开源的浏览器引擎,最初由苹果公司为Safari浏览器开发,后来被多个浏览器和应用采纳,如早期的Chrome和众多移动平台上的浏览器。WebKit不仅仅是一个渲染引擎,它集成了HTML、CSS、JavaScript的解析与渲染能力,以及网络资源加载、图形处理、排版布局等功能,为用户提供丰富的网页浏览体验。本文将深入探讨WebKit的核心组件以及其复杂的工作流程。WebKit核心架构
JavaScript对象
yeyang111
1.varfram={framer:'小明',dogs:["小兔","小猫"],field:[2,3,4]}六角学院截图.png2.向对象里边增加varfram={framer1:'小明',dogs:["小兔","小猫"],field:[2,3,4]}fram.framer2='小蕴'可以在控制台发现增加了一个0X7M8BN7.png3.像对象里边增加函数(方法)varfram={framer1:
标题:深入理解 JavaScript 中的定时器
小刘|
javascript 前端 开发语言
目录一、定时器的基本概念1.setInterval2.setTimeout二、代码示例分析一、定时器的基本概念在JavaScript中,定时器是一种用于在特定时间间隔后执行代码或者重复执行代码的机制。主要包含两种类型的定时器:setInterval和setTimeout。1.setIntervalsetInterval()是一个周期函数,它会在指定的时间间隔后,重复执行指定的函数。例如:vari=
js函数eval()
温暖前端
javascript 前端 开发语言
1.eval()函数简介eval()是JavaScript中的一个全局函数,它可以将传入的字符串当作JavaScript代码来执行。eval()函数的基本语法如下:eval(string)其中,string是要执行的JavaScript代码字符串。eval()函数会返回最后一个表达式的结果。2.eval()的工作原理当调用eval()函数时,JavaScript解释器会执行以下步骤:a.解析传入的
JavaScript之OOP基础概念学习总结一:scopes
gaoshu883
这个系列的文章是去年在搭架完静态博客后撰写的(博客已经不再维护啦,哦还能访问)↓最近在探究JavaScript中的scopes概念。经过一番研究,我觉得要从Interpreter的角度,才能更好地理解这个概念。毕竟程序员主要是编写指令,而Interpreter则是把程序员编写的代码一行一行读下去并翻译出来(执行出来),最终结果就会直接反映在Web浏览器的页面上。不过还要注意的是,并不是所有的sco
Puppeteer Heap Snapshot: 探索JavaScript内存世界的利器
金畏战Goddard
PuppeteerHeapSnapshot:探索JavaScript内存世界的利器puppeteer-heap-snapshotadriancooney/puppeteer-heap-snapshot:puppeteer-heap-snapshot是一个Node.js包,提供了通过Puppeteer获取浏览器内存堆快照的功能,以辅助JavaScript应用的内存泄漏检测和性能优化工作。项目地址:h
Puppeteer-Sign:自动化网页签名解决方案
杭臣磊Sibley
Puppeteer-Sign:自动化网页签名解决方案项目简介是一个基于谷歌的Puppeteer库开发的工具,用于自动化处理网页表单的签名过程。它模拟了真实用户的交互行为,可以用于需要电子签名的各种场景,比如在线合同签署、文档审批等。项目以JavaScript编写,易于集成到Web应用或者CI/CD流程中。技术分析Puppeteer库Puppeteer是由GoogleChrome团队维护的一个Nod
判断PDF与图片是否可以预览
马优晨
判断PDF是否可以预览 判断图片是否可以预览 PDF是否可以预览 图片是否可以预览 js判断PDF是否可以预览
一、判断图片是否可以预览在JavaScript中,可以使用Image对象来判断一个图片URL是否可以访问。如果图片可以被加载,那么load事件会被触发;如果图片无法访问,error事件会被触发。functioncheckImageAccessibility(url,callback){varimg=newImage();img.onload=function(){callback(true);//
jswebrtc 支持 SRS 的 Webrtc 播放器
王小工
前端 webrtc js
WebRTCWebRTC(WebReal-TimeCommunication)是一项实时通讯技术,它允许网络应用或站点在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流、音频流或其他任意数据的传输。WebRTC整体架构从上到下一共分为三层:WebAPI层:暴露给开发人员的用于开发WebRTC应用的JavaScriptAPI,如RTCPeerConnecti
ECMAScript简介
老四点COM
ecmascript 前端 开发语言
前言ECMAScript(通常简称为ES)由ECMA国际标准化组织制定的一种脚本语言标准,Netscape最初开发的JavaScript演变而来。ECMAScript为JavaScript提供了基础语言结构和功能。最初设计成一种脚本语言,用来服务Web。作为脚本语言ES同时具备其他脚本语言一样的性质。一、发展历史ECMAScript的历史可以追溯到1995年12月,当时升阳与网景联合推出了Java
JS中const有没有变量提升
北原_春希
javascript 前端 开发语言
在JavaScript中,const关键字用于声明一个只读的常量,其值在初始化后不能被重新赋值。关于变量提升(Hoisting),它是JavaScript中一个重要的概念,指的是无论变量或函数声明在何处,它们都会被“提升”到其所在作用域的最顶部。但是,这个规则不完全适用于const和let声明的变量。变量提升(Hoisting)的传统理解在ES6之前,JavaScript只有var关键字用于声明变
js知识总结
软件技术NINI
js javascript vue.js 前端
JavaScript(JS)是一种广泛使用的编程语言,主要用于网页开发,但也适用于非浏览器环境(如Node.js)。它支持面向对象、命令式、声明式(如通过函数式编程)和事件驱动式编程风格。以下是对JavaScript核心知识的一个总结:1.基础语法变量:使用var、let、const声明变量。let和const具有块级作用域,而var具有函数作用域或全局作用域。数据类型:包括原始类型(如Strin
Springboot+vue.js+协同过滤推荐+余弦相似度算法实现新闻推荐系统
计算机程序优异哥
针对海量的新闻资讯数据,如何快速的根据用户的检索需要,完成符合用户阅读需求的新闻资讯推荐?本篇文章主要采用余弦相似度及基于用户协同过滤算法实现新闻推荐,通过余弦相似度算法完成针对不同新闻数据之间的相似性计算,实现分类标签。通过协同过滤算法发现具备相似阅读习惯的用户,展开个性化推荐。本次新闻推荐系统:主要包含技术:springboot,mybatis,mysql,javascript,vue.js,
Dojo-CodeLab: JavaScript与Dojo框架学习与实践指南
陈马登Morden
本文还有配套的精品资源,点击获取简介:Dojo-CodeLab是一个提供学习和实践JavaScript及其Dojo框架的项目,专注于为初学者提供无需特定环境限制的编程平台。通过开发一个简单的计算器应用,学习者将掌握JavaScript基础语法和Dojo工具集的使用,涵盖变量、数据类型、控制结构、函数、对象、数学运算、事件处理和DOM操作等关键概念。本项目通过实际编码练习帮助学习者加深对前端开发的理
Qt Creator
morcake
qt 开发语言
QtCreator是一个跨平台的C++、JavaScript和QML集成开发环境,它简化了GUI应用的开发。支持用户在Linux、Mac以及Windows系统上使用,它是QtGUI应用开发框架的SDK的一部分。该编辑器具有语法高亮和自动补全等功能。Qt(/ˈkjuːt/,发音同“cute”[4][5][6])是一个跨平台的C++应用程序开发框架。广泛用于开发GUI程序,这种情况下又被称为部件工具箱
Yarn:一个快速、可靠且安全的JavaScript包管理工具
小周不想卷
# 前端node.js入门 yarn
(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,还请三连支持一波哇ヾ(@^∇^@)ノ)目录一、Yarn简介二、Yarn的安装1.使用npm安装Yarn2.在macOS上使用Homebrew安装Yarn3.在Windows上使用Chocolatey安装Yarn4.在Linux上使用包管理器安装Yarn三、Yarn的配置1.全局配置2.项目配置四、Yarn的基本用法1.初始化
JSON:轻量级的数据交换格式
Tsingfeng.
基础释疑 json
JSON(JavaScriptObjectNotation,JS对象简谱)是一种轻量级的数据交换格式。它基于ECMAScript(EuropeanComputerManufacturersAssociation,欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生
【华为OD统一考试B卷 | 100分】 快递运输(C++ Java JavaScript Python)
她与残局皆遗憾..
图灵学院 java 架构 开发语言
华为OD统一考试A卷+B卷新题库说明2023年5月份,华为官方已经将的2022/0223Q(1/2/3/4)统一修改为OD统一考试(A卷)和OD统一考试(B卷)。你收到的链接上面会标注A卷还是B卷。请注意:根据反馈,目前大部分收到的都是B卷。但是仍有概率抽到A卷。A卷对应2023的新题库(2022Q420223Q1)B卷对应20022部分考题以及新出的题目专栏:2023华为OD机试(A卷+B卷)(
JavaScript Promise
我是一个粉刷酱
浏览器支持推荐使用Chrome以及Firefox浏览器开局放图,忍不住吐槽一下----垃圾IE!!。什么是PromiseThePromiseobjectrepresentstheeventualcompletion(orfailure)ofanasynchronousoperation,anditsresultingvalue.Promise对象表示异步操作的最终完成(或失败)及其结果值。也就是说
探索 PubSubJS:高效的消息发布/订阅库
甄如冰Lea
探索PubSubJS:高效的消息发布/订阅库PubSubJSDependencyfreepublish/subscribeforJavaScript项目地址:https://gitcode.com/gh_mirrors/pu/PubSubJS在现代前端开发中,组件间的通信是一个常见且重要的问题。PubSubJS是一个基于JavaScript的轻量级、高效的消息发布/订阅库,它通过主题(topic)
JavaScript设计模式(装饰器模式)
Wsr_ecc6
1.装饰器模式的定义在不改变其原有的结构和功能为对象添加新功能。classCoffee{make(water){return`${water}+咖啡`;}cost(){return10;}}classMilkCoffee{constructor(parent){this.parent=parent;}make(water){return`${this.parent.make(water)}+牛奶`
关于旗正规则引擎中的MD5加密问题
何必如此
jsp MD5 规则 加密
一般情况下,为了防止个人隐私的泄露,我们都会对用户登录密码进行加密,使数据库相应字段保存的是加密后的字符串,而非原始密码。
在旗正规则引擎中,通过外部调用,可以实现MD5的加密,具体步骤如下:
1.在对象库中选择外部调用,选择“com.flagleader.util.MD5”,在子选项中选择“com.flagleader.util.MD5.getMD5ofStr({arg1})”;
2.在规
【Spark101】Scala Promise/Future在Spark中的应用
bit1129
Promise
Promise和Future是Scala用于异步调用并实现结果汇集的并发原语,Scala的Future同JUC里面的Future接口含义相同,Promise理解起来就有些绕。等有时间了再仔细的研究下Promise和Future的语义以及应用场景,具体参见Scala在线文档:http://docs.scala-lang.org/sips/completed/futures-promises.html
spark sql 访问hive数据的配置详解
daizj
spark sql hive thriftserver
spark sql 能够通过thriftserver 访问hive数据,默认spark编译的版本是不支持访问hive,因为hive依赖比较多,因此打的包中不包含hive和thriftserver,因此需要自己下载源码进行编译,将hive,thriftserver打包进去才能够访问,详细配置步骤如下:
1、下载源码
2、下载Maven,并配置
此配置简单,就略过
HTTP 协议通信
周凡杨
java httpclient http 通信
一:简介
HTTPCLIENT,通过JAVA基于HTTP协议进行点与点间的通信!
二: 代码举例
测试类:
import java
java unix时间戳转换
g21121
java
把java时间戳转换成unix时间戳:
Timestamp appointTime=Timestamp.valueOf(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()))
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd hh:m
web报表工具FineReport常用函数的用法总结(报表函数)
老A不折腾
web报表 finereport 总结
说明:本次总结中,凡是以tableName或viewName作为参数因子的。函数在调用的时候均按照先从私有数据源中查找,然后再从公有数据源中查找的顺序。
CLASS
CLASS(object):返回object对象的所属的类。
CNMONEY
CNMONEY(number,unit)返回人民币大写。
number:需要转换的数值型的数。
unit:单位,
java jni调用c++ 代码 报错
墙头上一根草
java C++ jni
#
# A fatal error has been detected by the Java Runtime Environment:
#
# EXCEPTION_ACCESS_VIOLATION (0xc0000005) at pc=0x00000000777c3290, pid=5632, tid=6656
#
# JRE version: Java(TM) SE Ru
Spring中事件处理de小技巧
aijuans
spring Spring 教程 Spring 实例 Spring 入门 Spring3
Spring 中提供一些Aware相关de接口,BeanFactoryAware、 ApplicationContextAware、ResourceLoaderAware、ServletContextAware等等,其中最常用到de匙ApplicationContextAware.实现ApplicationContextAwaredeBean,在Bean被初始后,将会被注入 Applicati
linux shell ls脚本样例
annan211
linux linux ls源码 linux 源码
#! /bin/sh -
#查找输入文件的路径
#在查找路径下寻找一个或多个原始文件或文件模式
# 查找路径由特定的环境变量所定义
#标准输出所产生的结果 通常是查找路径下找到的每个文件的第一个实体的完整路径
# 或是filename :not found 的标准错误输出。
#如果文件没有找到 则退出码为0
#否则 即为找不到的文件个数
#语法 pathfind [--
List,Set,Map遍历方式 (收集的资源,值得看一下)
百合不是茶
list set Map遍历方式
List特点:元素有放入顺序,元素可重复
Map特点:元素按键值对存储,无放入顺序
Set特点:元素无放入顺序,元素不可重复(注意:元素虽然无放入顺序,但是元素在set中的位置是有该元素的HashCode决定的,其位置其实是固定的)
List接口有三个实现类:LinkedList,ArrayList,Vector
LinkedList:底层基于链表实现,链表内存是散乱的,每一个元素存储本身
解决SimpleDateFormat的线程不安全问题的方法
bijian1013
java thread 线程安全
在Java项目中,我们通常会自己写一个DateUtil类,处理日期和字符串的转换,如下所示:
public class DateUtil01 {
private SimpleDateFormat dateformat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
public void format(Date d
http请求测试实例(采用fastjson解析)
bijian1013
http 测试
在实际开发中,我们经常会去做http请求的开发,下面则是如何请求的单元测试小实例,仅供参考。
import java.util.HashMap;
import java.util.Map;
import org.apache.commons.httpclient.HttpClient;
import
【RPC框架Hessian三】Hessian 异常处理
bit1129
hessian
RPC异常处理概述
RPC异常处理指是,当客户端调用远端的服务,如果服务执行过程中发生异常,这个异常能否序列到客户端?
如果服务在执行过程中可能发生异常,那么在服务接口的声明中,就该声明该接口可能抛出的异常。
在Hessian中,服务器端发生异常,可以将异常信息从服务器端序列化到客户端,因为Exception本身是实现了Serializable的
【日志分析】日志分析工具
bit1129
日志分析
1. 网站日志实时分析工具 GoAccess
http://www.vpsee.com/2014/02/a-real-time-web-log-analyzer-goaccess/
2. 通过日志监控并收集 Java 应用程序性能数据(Perf4J)
http://www.ibm.com/developerworks/cn/java/j-lo-logforperf/
3.log.io
和
nginx优化加强战斗力及遇到的坑解决
ronin47
nginx 优化
先说遇到个坑,第一个是负载问题,这个问题与架构有关,由于我设计架构多了两层,结果导致会话负载只转向一个。解决这样的问题思路有两个:一是改变负载策略,二是更改架构设计。
由于采用动静分离部署,而nginx又设计了静态,结果客户端去读nginx静态,访问量上来,页面加载很慢。解决:二者留其一。最好是保留apache服务器。
来以下优化:
java-50-输入两棵二叉树A和B,判断树B是不是A的子结构
bylijinnan
java
思路来自:
http://zhedahht.blog.163.com/blog/static/25411174201011445550396/
import ljn.help.*;
public class HasSubtree {
/**Q50.
* 输入两棵二叉树A和B,判断树B是不是A的子结构。
例如,下图中的两棵树A和B,由于A中有一部分子树的结构和B是一
mongoDB 备份与恢复
开窍的石头
mongDB备份与恢复
Mongodb导出与导入
1: 导入/导出可以操作的是本地的mongodb服务器,也可以是远程的.
所以,都有如下通用选项:
-h host 主机
--port port 端口
-u username 用户名
-p passwd 密码
2: mongoexport 导出json格式的文件
[网络与通讯]椭圆轨道计算的一些问题
comsci
网络
如果按照中国古代农历的历法,现在应该是某个季节的开始,但是由于农历历法是3000年前的天文观测数据,如果按照现在的天文学记录来进行修正的话,这个季节已经过去一段时间了。。。。。
也就是说,还要再等3000年。才有机会了,太阳系的行星的椭圆轨道受到外来天体的干扰,轨道次序发生了变
软件专利如何申请
cuiyadll
软件专利 申请
软件技术可以申请软件著作权以保护软件源代码,也可以申请发明专利以保护软件流程中的步骤执行方式。专利保护的是软件解决问题的思想,而软件著作权保护的是软件代码(即软件思想的表达形式)。例如,离线传送文件,那发明专利保护是如何实现离线传送文件。基于相同的软件思想,但实现离线传送的程序代码有千千万万种,每种代码都可以享有各自的软件著作权。申请一个软件发明专利的代理费大概需要5000-8000申请发明专利可
Android学习笔记
darrenzhu
android
1.启动一个AVD
2.命令行运行adb shell可连接到AVD,这也就是命令行客户端
3.如何启动一个程序
am start -n package name/.activityName
am start -n com.example.helloworld/.MainActivity
启动Android设置工具的命令如下所示:
# am start -
apache虚拟机配置,本地多域名访问本地网站
dcj3sjt126com
apache
现在假定你有两个目录,一个存在于 /htdocs/a,另一个存在于 /htdocs/b 。
现在你想要在本地测试的时候访问 www.freeman.com 对应的目录是 /xampp/htdocs/freeman ,访问 www.duchengjiu.com 对应的目录是 /htdocs/duchengjiu。
1、首先修改C盘WINDOWS\system32\drivers\etc目录下的
yii2 restful web服务[速率限制]
dcj3sjt126com
PHP yii2
速率限制
为防止滥用,你应该考虑增加速率限制到您的API。 例如,您可以限制每个用户的API的使用是在10分钟内最多100次的API调用。 如果一个用户同一个时间段内太多的请求被接收, 将返回响应状态代码 429 (这意味着过多的请求)。
要启用速率限制, [[yii\web\User::identityClass|user identity class]] 应该实现 [[yii\filter
Hadoop2.5.2安装——单机模式
eksliang
hadoop hadoop单机部署
转载请出自出处:http://eksliang.iteye.com/blog/2185414 一、概述
Hadoop有三种模式 单机模式、伪分布模式和完全分布模式,这里先简单介绍单机模式 ,默认情况下,Hadoop被配置成一个非分布式模式,独立运行JAVA进程,适合开始做调试工作。
二、下载地址
Hadoop 网址http:
LoadMoreListView+SwipeRefreshLayout(分页下拉)基本结构
gundumw100
android
一切为了快速迭代
import java.util.ArrayList;
import org.json.JSONObject;
import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.support.v4.widget.SwipeRefreshLayo
三道简单的前端HTML/CSS题目
ini
html Web 前端 css 题目
使用CSS为多个网页进行相同风格的布局和外观设置时,为了方便对这些网页进行修改,最好使用( )。http://hovertree.com/shortanswer/bjae/7bd72acca3206862.htm
在HTML中加入<table style=”color:red; font-size:10pt”>,此为( )。http://hovertree.com/s
overrided方法编译错误
kane_xie
override
问题描述:
在实现类中的某一或某几个Override方法发生编译错误如下:
Name clash: The method put(String) of type XXXServiceImpl has the same erasure as put(String) of type XXXService but does not override it
当去掉@Over
Java中使用代理IP获取网址内容(防IP被封,做数据爬虫)
mcj8089
免费代理IP 代理IP 数据爬虫 JAVA设置代理IP 爬虫封IP
推荐两个代理IP网站:
1. 全网代理IP:http://proxy.goubanjia.com/
2. 敲代码免费IP:http://ip.qiaodm.com/
Java语言有两种方式使用代理IP访问网址并获取内容,
方式一,设置System系统属性
// 设置代理IP
System.getProper
Nodejs Express 报错之 listen EADDRINUSE
qiaolevip
每天进步一点点 学习永无止境 nodejs 纵观千象
当你启动 nodejs服务报错:
>node app
Express server listening on port 80
events.js:85
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE
at exports._errnoException (
C++中三种new的用法
_荆棘鸟_
C++ new
转载自:http://news.ccidnet.com/art/32855/20100713/2114025_1.html
作者: mt
其一是new operator,也叫new表达式;其二是operator new,也叫new操作符。这两个英文名称起的也太绝了,很容易搞混,那就记中文名称吧。new表达式比较常见,也最常用,例如:
string* ps = new string("
Ruby深入研究笔记1
wudixiaotie
Ruby
module是可以定义private方法的
module MTest
def aaa
puts "aaa"
private_method
end
private
def private_method
puts "this is private_method"
end
end