如何减少浏览器的repaint和reflow?

文本内容主要包括以下几点：

  1. 什么是repaint/reflow?
  2. 什么情况下会触发浏览器的repaint/reflow?
  3. 浏览器自身所作的优化
  4. 如何优化你的脚本来减少repaint/reflow?

 

一、什么是repaint/reflow?

页面在加载的过程中，需要对文档结构进行解析，同时需要结合各种各样的样式来计算这个页面长什么样子，最后再经过浏览器的渲染页面就出现了。这整个 过程细说起来还是比较复杂，其中充满了repaint和reflow。对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式 （浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；当各种盒子的位置、大小以及其他属性，例如 颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

以上提到的只是在页面加载时必然会出现的repaint和reflow，除此之外，在页面加载完成后，用户的一些操作、脚本的一些操作都会导致浏览器发生这种行为，具体在后文阐述。

另外，关于浏览器渲染的更为详细的资料可以参考以下，涵盖了IE以及Firefox：

Understanding Internet Explorer Rendering Behaviour

Notes on HTML Reflow

二、什么情况下会触发浏览器的repaint/reflow?

除了页面在首次加载时必然要经历该过程之外，还有以下行为会触发这个行为：

  • DOM元素的添加、修改（内容）、删除( Reflow + Repaint)
  • 仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）
  • 应用新的样式或者修改任何影响元素外观的属性
  • Resize浏览器窗口、滚动页面
  • 读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))

在继续下面的文章之前，先介绍一款强大的性能分析工具-dynaTrace，借助该功能能够清晰的得到页面中的资源消耗情况，从而对症下药。另外，更细节的方面是它可以跟踪每个函数调用所造成的CPU消耗、Repaint/Reflow。接下来就借助该工具来测试一下以上描述的几点情况。

DOM元素的增删改

先看代码

view plain copy to clipboard print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">  
  2. <html>  
  3.     <body>  
  4.         <div id="test1" onclick="addNode()">这里是第1个节点</div>  
  5.         <div id="test2" onclick="modNode()">这里是第2个节点</div>  
  6.         <div id="test3" onclick="delNode()">这里是第3个节点</div>  
  7.     </body>  
  8.     <script type="text/javascript">  
  9.         function $(id){  
  10.             return document.getElementById(id);  
  11.         }  
  12.         function addNode(){  
  13.             var n = document.createElement('div');  
  14.             n.innerHTML = 'New Node';  
  15.             $('test1').appendChild(n);  
  16.         }  
  17.         function modNode(){  
  18.             $('test2').innerHTML = 'hello';  
  19.         }  
  20.         function delNode(){  
  21.             $('test3').parentNode.removeChild($('test3'));  
  22.         }  
  23.     </script>  
  24. </html>  

在依次点击完每一个按钮后，我们来看看dynaTrace的情况，首先是一目了然的点击事件分布

放大之后来看一下每个事件的repaint/reflow情况：

增加节点：

修改节点：

删除节点：

图中的绿色部分表示的是reflow和repaint过程，其中比较短的绿条标示的reflow过程，后面长条部分表示 的是repaint过程。从图中可以看出，对DOM节点的增删改都会造成reflow和repaint，由于改动小所以reflow消耗的时间很短，但是 由于repaint是全局的，因此消耗的时间都比较长。

修改DOM元素前景色
view plain copy to clipboard print ?
  1. var n = $('colorNode');  
  2. n.style.color = 'red';  

从上图中可以看到修改字体颜色后，浏览器只有repaint而没有reflow。接下来试试修改背景色：

view plain copy to clipboard print ?
  1. var n = $('colorNode');  
  2. n.style.backgroundColor = 'red';  

由图中可以看出，修改背景色也会造成reflow和repaint。另外，经过测试发现，只要是修改元素的cssText属性，不论它的值是什么，都会导致浏览器reflow和repaint，因此在某些时候选择特定的样式属性赋值会有更好的效果。

Resize浏览器窗口以及拖动滚动条

测试中的操作如下：缩小浏览器窗口->放大浏览器窗口->拖动页面滚动条至页面底部。从图中可以看到Resize浏览器窗口以及拖动滚动条都会造成浏览器的repaint，而且CPU的消耗也比较大，尤其是拖动滚动条的时候。

读取Layout属性

根据各种参考资料中的描述，在用Javascript读取DOM节点的Layout属性（offsetLeft、offsetTop、 offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left /Width/Height、getComputedStyle()、currentStyle(in IE)) 的时候也会触发repaint，不过在以下的测试例子中并没有发现这一点。

view plain copy to clipboard print ?
  1. var n = $('colorNode');  
  2. var temp = document.documentElement.currentStyle;  
  3. temp = n.offsetTop;  
  4. temp = n.offsetLeft;  
  5. temp = n.offsetWidth;  
  6. temp = n.offsetHeight;  
  7. temp = n.scrollTop;  
  8. temp = n.scrollHeight;  
  9. alert(temp);  

 

三、浏览器优化

浏览器对于每一个渲染动作并不是立即执行，而是维护了一个渲染任务队列，浏览器会根据具体的需要分批集中执行其中的任务。除了浏览器自身维护的定期调度之外，脚本中的某些操作会导致浏览器立即执行渲染任务，例如读取元素的Layout属性。

view plain copy to clipboard print ?
  1. var bodystyle = document.body.style;  
  2. var computed;  
  3. if (document.body.currentStyle) {  
  4.   computed = document.body.currentStyle;  
  5. } else {  
  6.   computed = document.defaultView.getComputedStyle(document.body, '');  
  7. }  
  8.   
  9. //每次都读取  
  10.   
  11. bodystyle.color = 'red';  
  12. bodystyle.padding = '1px';  
  13. tmp = computed.backgroundColor;  
  14. bodystyle.color = 'white';  
  15. bodystyle.padding = '2px';  
  16. tmp = computed.backgroundImage;  
  17. bodystyle.color = 'green';  
  18. bodystyle.padding = '3px';  
  19. tmp = computed.backgroundAttachment;  
  20.   
  21. //最后再读取  
  22.   
  23. bodystyle.color = 'yellow';  
  24. bodystyle.padding = '4px';  
  25. bodystyle.color = 'pink';  
  26. bodystyle.padding = '5px';  
  27. bodystyle.color = 'blue';  
  28. bodystyle.padding = '6px';  
  29. tmp = computed.backgroundColor;  
  30. tmp = computed.backgroundImage;  
  31. tmp = computed.backgroundAttachment;  

每次读取的渲染图：

最后读取的渲染图：

四、如何优化你的脚本来减少reflow/repaint?

1. 避免在document上直接进行频繁的DOM操作，如果确实需要可以采用off-document的方式进行，具体的方法包括但不完全包括以下几种：

(1). 先将元素从document中删除，完成修改后再把元素放回原来的位置

(2). 将元素的display设置为”none”，完成修改后再把display修改为原来的值

(3). 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document

view plain copy to clipboard print ?
  1. function appendEveryTime(){  
  2.     for( var i = 5000; i--; ){  
  3.         var n = document.createElement('div');  
  4.         n.innerHTML = 'node ' + i;  
  5.         document.body.appendChild(n);/*每次创建的新节点都append到文档*/  
  6.     }  
  7. }  
  8.   
  9. function appendLast(){  
  10.      var frag = document.createDocumentFragment();  
  11.      for( var i = 5000; i--; ){  
  12.          var n = document.createElement('div');  
  13.          n.innerHTML = 'node ' + i;  
  14.          frag.appendChild(n);/*每次创建的节点先放入DocumentFragment中*/  
  15.      }  
  16.      document.body.appendChild(frag);  
  17. }  

用dynaTrace观察的结果如下，appendLast的性能无论是在Javascript的执行时间以及浏览器渲染时间方面都优于appendEveryTime。

appendEveryTime:

appendLast:

2. 集中修改样式

(1). 尽可能少的修改元素style上的属性

(2). 尽量通过修改className来修改样式

(3). 通过cssText属性来设置样式值

如下的代码中，每一次赋值都会造成浏览器重新渲染，可以采用cssText或者className的方式

view plain copy to clipboard print ?
  1. el.style.color = 'red; 
  2. el.style.height = '100px'; 
  3. el.style.fontSize = '12px'; 
  4. el.style.backgroundColor = 'white';  

3. 缓存Layout属性值

对于Layout属性中非引用类型的值（数字型），如果需要多次访问则可以在一次访问时先存储到局部变量中，之后都使用局部变量，这样可以避免每次读取属性时造成浏览器的渲染。

view plain copy to clipboard print ?
  1. var width = el.offsetWidth;  
  2. var scrollLeft = el.scrollLeft;  

4. 设置元素的position为absolute或fixed

在元素的position为static和relative时，元素处于DOM树结构当中，当对元素的某个操作需要重新渲染时，浏览器会渲染整个页 面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素 以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间，这在当今越来越多的Javascript动画方面尤其值得考虑。

view plain copy to clipboard print ?
  1. <body style="position:relative">  
  2.     <div id="test" style="background-color:red;width:100px;position:relative;">Animation Here</div>  
  3. </body>  
  4. <script type="text/javascript">  
  5.     function $(id){  
  6.         return document.getElementById(id);  
  7.     }  
  8.     window.onload = function(){  
  9.         var t = $('test');  
  10.   
  11.         ~function(){  
  12.             tt.style.left = t.offsetLeft + 5 + 'px';  
  13.             tt.style.height = t.offsetHeight + 5 + 'px';  
  14.             setTimeout(arguments.callee,500);  
  15.         }();  
  16.     }  
  17. </script>  

通过修改#test元素的postion为relative和postion分别得到如下两个测试结果

position: relative

position: absolute

在postion:relative的测试当中，浏览器在重新渲染时做的工作比position:absolute多了不少。

参考资料

Understanding Internet Explorer Rendering Behaviour

Notes on HTML Reflow

EFFICIENT JAVASCRIPT

在南京出差，看到那篇那时转载的浏览器的原理的文章，遂找了这篇，自己学习，转载，作为后续

2012-10-31

原文地址 http://varnow.org/?p=232

你可能感兴趣的:(paint)

  • [Unity 3d] VertexPaint （Mesh 顶点画手） - GitHub 雨落随风
    一个Mesh顶点动画绘制工具。GitHub上的工程多如繁星，有些好的仓库，但凡不经意间错过了就很难找回，故稍作采撷，希望能帮助到有心人。简介：笔者今天推荐的仓库叫VertexPaint。-顶点画手ThispackageallowsyoutopaintinformationontotheverticesofameshintheUnityeditoraswellasmodifyanyattribute
  • Qt触发paintEvent事件 quaer QTqt开发语言
    常见情况下，paintEvent会在以下几种情况下被触发：窗口初始化和显示：当窗口首次被创建、显示或者窗口被覆盖、最小化后再恢复时，paintEvent会被触发以绘制窗口的内容。部件大小或位置变化：如果窗口或部件的大小或位置发生变化，需要重新绘制内容以适应新的尺寸或位置，此时也会触发paintEvent。强制重绘：当调用部件的update()或repaint()函数时，会触发对应部件的paintE
  • Flutter 自绘组件 （CustomPaint与Canvas）绘制虚线、区域、直线（一） goodhighting 程序员flutter前端javascript
    有人也许会疑惑，方案1和方案二不都是采用的绘制吗，那可不一定。有的时候解决问题，我们不遵循常规也可以解决问题，满足一时之需了。1、解决问题奇葩方式一：为什么奇葩呢？我们采用多个Container进行竖直或者水平排列完成了效果，至于性能上我们后面慢慢验证了。_lineContainer(){returnContainer(margin:EdgeInsets.only(top:2.0),color:C
  • 突发奇想，玩家用《我的世界》重现美术大师画作，还原度很高 爱游戏的萌博士
    如果你喜欢绘画，在其中又特别钟情风景画的话，你可能听说过鲍伯·鲁斯（BobRoss）。这其实是罗伯特·诺曼·鲁斯（RobertNormanRoss）的艺名，他是位美国画家，同时也是一位艺术指导与电视节目主持人。鲁斯以他温柔且和乐的语气为特色，在他著名的电视节目“欢乐画室（TheJoyofPainting）”中担任即席教学画家兼主持人，这个节目活跃于上世纪八九十年代。博士为什么要提上面这位顶着爆炸头
  • Windows和浏览器的命令与快捷键 伍嘉源 Windowswindows
    Windows和浏览器的命令与快捷键一、运行常用命令二、cmd常用命令（cmd的命令是运行的命令的超集）三、Windows快捷键1、Win键2、Ctrl键3、Alt键4、F键四、浏览器快捷键五、关闭Windows防火墙、安全中心和自动更新一、运行常用命令1.基本命令cmd打开命令提示符（cmd命令行控制台）control打开控制面板regedit打开注册表编辑器2.打开系统自带工具mspaint打
  • 2023-07-12 大法师的输出
    模型：xxmix9realistic_v30LoRA：,,,室内、起居室、咖啡杯等构建环境氛围效果图1(SFW:2),HDR,UHD,8K,bestquality,masterpiece,Highlydetailed,Studiolighting,ultra-finepainting,sharpfocus,physically-basedrendering,extremedetaildescrip
  • 春节集市见闻 C18078黄俊豪阅读
    图片发自App春节是中国最富有特色的传统节日，由虞舜时期兴起。春节指华夏传统历法夏历的元旦（与中国现行的公历元旦不同），农历正月初一，又称农历新年、大年、岁首、正旦、正月朔日，又叫阴历年，俗称过年、度岁、庆新岁。在中国民间，传统意义上的春节是指从腊月初八的腊祭或腊月二十三或二十四的祭灶，一直到正月十五，其中以除夕和正月初一为高潮。图片发自App年画（newyearpaintings）是中国画的一种
  • HarmonyOS Next 使用绘制组件实现自定义进度动画 2401_84181731 2024年程序员学习harmonyos信息可视化人工智能
    加载完成后初始显示进度为0%，颜色为红色，且有充电、放电两个按钮。点击充电按钮，进度会持续增长，直到100%时绿色填充满整个圆形，当到达20%以上和80%以上时，颜色动态变化。点击耗电按钮，进度会持续下降，直到0%恢复1中的初始效果，当到达20%以下和80%以下时，颜色动态变化。实现思路使用Circle组件绘制外层的圆环。源码参考PaintComponent.ets。//外框圆环Circle({w
  • python：实现声音采集判断声音分贝值 Demons_皮 python开发语言
    一、依赖库importwavefrommathimportlogimportnumpyasnpimportpyaudio二、代码defsavewavfile(count):CHUNK=1024FORMAT=pyaudio.paInt16CHANNELS=1RATE=44100RECORD_SECONDS=5WAVE_OUTPUT_FILENAME="output"+str(count)+".wav
  • Android使用Paint 和 Canvas 的相关知识，自定义 View 实现一系列效果动画 Android高级 Android经验分享面试android
    **setSrokeJoin(Paint.Joinjoin);*设置绘制时各图形的结合方式，如平滑效果等**setStrokeWidth(floatwidth);*当画笔样式为STROKE或FILL_OR_STROKE时，设置笔刷的粗细度**setXfermode(Xfermodexfermode);*设置图形重叠时的处理方式，如合并，取交集或并集，经常用来制作橡皮的擦除效果**2.文本绘制*se
  • 录井实时监控曲线组件 悟空也会写代码 c#集成测试个人开发软件工程.net
    使用GID+原生代码编写实时动态曲线组件privatevoidDrawAsync(PaintEventArgse){if((points!=null&&points.Count()>0)||(points1!=null&&points1.Count()>0)){PointF[]pointsNew=points.ToList().Where(c=>c.Y!=StartHight).ToArray()
  • QT如何在控件上绘图（例如QLabel,Button,QWidget等） 重生之我在四川卖苕皮 QTqtui开发语言
    方法一:使用事件过滤机制事件过滤器:由两个函数组成的一种操作,用来完成一个部件对其他部件的事件监视，这两个函数分别是installEventFilter();eventFilter(QObject*obj,QEvent*ev)皆为QObject类中的函数。如何使用：一，ui->paint_widget（子控件名）->installEventFilter(this);//安装事件过滤器二,在.h中加
  • 8月29日wpf 西鲶鱼 wpfjavascript开发语言ecmascript
    小语折磨我们的往往是想象，而不是真实。学wpf7.071.vs如何创建新项目？退出，创建新项目，点c#，windows，进入界面2.app.config在哪里？好像只有这个。。。试一下，不是我为啥没有config？视频里的F5没用，我自己点了运行，结果差不多20min课程学了俩小时，最后写了一个ui，以下为代码PaintedNotPaintedRubberNotRubber
  • Qt：玩转QPainter后转之太极图 血不热了 qt开发语言
    前言简单了解了QPainter之后还是要做两个小例子练一练，不实际去做，只看看函数是没啥太大提升的，这里就简单画一个太极图。正文我们都知道太极分为阴阳鱼两部分，阴鱼(黑色)有个白色鱼眼，阳鱼(白色)有个黑色鱼眼；所以我们在画图的时候也可以分成阴阳两部分来画单看阳鱼不算鱼眼的话可以分成三部分，我们可以先画一个大半圆，用大半圆减去上面一个小半圆，再加上下面一个小半圆即可阴鱼正好相反先画一个大半圆，用大
  • 新年计划：Kiki's new year resolution 月婵娟
    图片发自AppKiki'snewyearresolution:1.Practicedrawingorpaintingatleasttwiceaweek.每周至少练习两次画画。2.Read15minutesperday.每天读书15分钟。3.Teachmom5Englishwordseveryday.每天教妈妈认五个英语单词。
  • android自定义view之画圆随着手指移动 ✎ℳ๓Eternity✾ 进阶View画圆可以跟随手指移动
    publicclassMyViewextendsView{privatePaintmFanPaint,mTextPaint;//扇形画笔和文字画笔publicfloatAxisX=100;publicfloatAxisY=100;publicMyView(Contextcontext){super(context);init();}publicMyView(Contextcontext,Attri
  • View画矩形统计图(可动态添加) ✎ℳ๓Eternity✾ 进阶
    布局画矩形统计图publicclassMyViewextendsView{privatePaintmLinePaint,mTextPaint,mRectPaint;ArrayListlist;publicMyView(Contextcontext){super(context);init();}publicMyView(Contextcontext,AttributeSetattrs){super
  • 2023-07-02 大法师的输出
    大模型：breakdomainrealistic_R2333LoRA：,效果图(SFW:2),HDR,UHD,8K,bestquality,masterpiece,Highlydetailed,Studiolighting,ultra-finepainting,sharpfocus,physically-basedrendering,extremedetaildescription,Profess
  • Qt：设置Qwidget类背景方法总结 面条有点辣 Qtqtui开发语言
    目录1、引言2、使用样式表（setStyleSheet）3、QPalette4、paintEvent事件5、简洁方式6、总结1、引言  在实现一个页面跳转功能时，选择PushButton或QWidget可以有效当作按钮，而Qwidget可以添加label或者其它控件，自定义程度更高，因此本文给出几种给Qwidget绘制背景图片方法。2、使用样式表（setStyleSheet）ui->widget-
  • 100-days-Coding - day12 亨利何
    day12-0827html-刮刮奖startpainting刮刮奖的整体思路，就是canvas的动态绘制「事件驱动」使用两个canvas，下层为最终展示层「刮完后的涂层」，上层为「刮层，银色层」每次移动手指时，绘制图形「原型，三角形，等」，特点是透明，可以使得下层显现重点：透明涂层绘画this.ctx.globalCompositeOperation="destination-out";//设置
  • 棉花糖的Scalers Talk第四轮新概念英语持续力训练Day 2018116 春晓菲华
    练习材料Lesson26ThebestartcriticsWhoisthestudent'sbestcritic?IamanartstudentandIpaintalotofpictures.Manypeoplepretendthattheyunderstandmodernart.Theyalwaystellyouwhatapictureis'about'.Ofcourse,manypicture
  • 2023-09-10 大法师的输出
    pikasAnimatedMix_10Pruned(SFW:2),HDR,UHD,8K,bestquality,masterpiece,Highlydetailed,Studiolighting,ultra-finepainting,sharpfocus,physically-basedrendering,extremedetaildescription,Professional,VividCol
  • C++开源界面库duilib的使用细节与实战技巧总结（实战经验分享） dvlinker C/C++实战专栏C/C++软件开发从入门到实战C++开源库duilib使用细节实战技巧控件Layout布局字符串格式化
    目录1、使用CEditUI编辑框2、使用CLabelUI或CTextUI的Html文本效果3、使用CTextUI控件对文字宽度自适应的特性4、CRichEditUI富文本控件使用注意点4.1、指定CRichEditUI加在2.0版本的Riched20.dll库4.2、解决向CRichEditUI中插入文字后显示空白的问题5、设置窗口透明度的接口CPaintManagerUI::SetTranspa
  • 提升前端性能的JavaScript技巧 丁爸 linuxjavascript
    1.前端JavaScript性能问题前端JavaScript的性能问题可以显著影响Web应用的用户体验和整体性能。以下是一些常见的前端JavaScript性能问题：1.1.频繁的DOM操作问题描述：JavaScript经常需要与DOM（文档对象模型）交互来更新页面内容。然而，每次DOM操作都可能触发浏览器的重绘（repaint）或重排（reflow/reflow），这些操作是资源密集型的，会导致页
  • 古希腊陶器之03绘有四对象葡萄串的大水罐 iCloudEnd
    图片[email protected]介绍Largejugwithfourgrape-clusterssymmetricallypaintedaroundthebodygrapesareacharacteristicdecorativemotifinTheranpottery.绘有四对象葡萄串的大水罐。公元前16世纪AkroterionThera16thcent.BC.年代：公
  • 2021-07-19 rosalind
    ThedisguiseofPortraitofanArtistDavidHockney,PortraitofanArtistPortraitofanartistisoneofthemostbelovedpaintingsofHockney,regardlessofthestruggleintheprocessofcreation.However,theexcellenceofthepainting
  • c++窗口立即刷新重绘 beibaoke910 windows客户端windowsc++
    UI界面没有及时刷新时，添加如下代码强制重绘：InvalidateRect(m_hWnd,NULL,TRUE);UpdateWindow(m_hWnd);当窗体需要更新内容或是重绘外观背景的时候，应用程序通常会发送一条WM_PAINT消息，通知窗体进行重新绘制。1、InvalidateRectInvalidateRect(m_hWnd,lpRect,bErase)强制使客户区中的一个矩形失效，而在
  • Qt中对主窗口的一些基本操作 徐kun按门铃 Qt学习cssc++
    一，给主窗口添加背景我们在做Qt项目的时候，难免需要在主场口上面添加背景图片，一般有两种方法来实现这一功能，可以在主窗口上面粘贴一个很大的QLabel然后在QLabel上面绘制图片，一般不会这样做，另外一种放法我们就需要重写绘制事件函数。paintEvent事件是在窗口状态改变之后处罚的，窗口的状态改变，可以是大小改变，也可以是别的。如下：头文件：protected://只要窗口状态改变自动调用此
  • QTableWidget表头添加复选框实现全选功能 hss2799 Qt
    QTableWidget表头添加复选框实现全选功能主要是CheckBoxHeaderView继承QHeaderView，重写paintSection函数voidcheckStatusChange(bool);是复选框是否选中的信号。详细代码如下：#ifndefCHECKBOXHEADERVIEW_H#defineCHECKBOXHEADERVIEW_H#include#include#includ
  • JfreeChart做折线图 Loren_云淡风轻 java基础特定功能
    packageorg.com.testJfreechart;importjava.awt.BasicStroke;importjava.awt.Color;importjava.awt.Font;importjava.awt.GradientPaint;importjava.io.File;importjava.io.IOException;importjava.util.HashMap;impo
  • jvm调优总结（从基本概念 到 深度优化） oloz javajvmjdk虚拟机应用服务器
    JVM参数详解：http://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html   Java虚拟机中，数据类型可以分为两类：基本类型和引用类型。基本类型的变量保存原始值，即：他代表的值就是数值本身；而引用类型的变量保存引用值。“引用值”代表了某个对象的引用，而不是对象本身，对象本身存放在这个引用值所表示的地址的位置。
  • 【Scala十六】Scala核心十：柯里化函数 bit1129 scala
    本篇文章重点说明什么是函数柯里化，这个语法现象的背后动机是什么，有什么样的应用场景，以及与部分应用函数(Partial Applied Function)之间的联系   1. 什么是柯里化函数 A way to write functions with multiple parameter lists. For instance def f(x: Int)(y: Int) is a
  • HashMap dalan_123 java
    HashMap在java中对很多人来说都是熟的；基于hash表的map接口的非同步实现。允许使用null和null键；同时不能保证元素的顺序；也就是从来都不保证其中的元素的顺序恒久不变。 1、数据结构     在java中，最基本的数据结构无外乎：数组 和 引用（指针），所有的数据结构都可以用这两个来构造，HashMap也不例外，归根到底HashMap就是一个链表散列的数据
  • Java Swing如何实时刷新JTextArea，以显示刚才加append的内容 周凡杨 java更新swingJTextArea
    在代码中执行完textArea.append("message")后，如果你想让这个更新立刻显示在界面上而不是等swing的主线程返回后刷新，我们一般会在该语句后调用textArea.invalidate()和textArea.repaint()。 问题是这个方法并不能有任何效果，textArea的内容没有任何变化，这或许是swing的一个bug，有一个笨拙的办法可以实现
  • servlet或struts的Action处理ajax请求 g21121 servlet
    其实处理ajax的请求非常简单，直接看代码就行了： //如果用的是struts //HttpServletResponse response = ServletActionContext.getResponse(); // 设置输出为文字流 response.setContentType("text/plain"); // 设置字符集 res
  • FineReport的公式编辑框的语法简介 老A不折腾 finereport公式总结
    FINEREPORT用到公式的地方非常多，单元格（以=开头的便被解析为公式），条件显示，数据字典，报表填报属性值定义，图表标题，轴定义，页眉页脚，甚至单元格的其他属性中的鼠标悬浮提示内容都可以写公式。 简单的说下自己感觉的公式要注意的几个地方：   1.if语句语法刚接触感觉比较奇怪，if(条件式子,值1,值2)，if可以嵌套，if(条件式子1，值1，if(条件式子2，值2，值3)
  • linux mysql 数据库乱码的解决办法 墙头上一根草 linuxmysql数据库乱码
    linux 上mysql数据库区分大小写的配置 lower_case_table_names=1 1-不区分大小写 0-区分大小写   修改/etc/my.cnf 具体的修改内容如下:   [client] default-character-set=utf8   [mysqld] datadir=/var/lib/mysql socket=/va
  • 我的spring学习笔记6-ApplicationContext实例化的参数兼容思想 aijuans Spring 3
    ApplicationContext能读取多个Bean定义文件，方法是： ApplicationContext appContext = new ClassPathXmlApplicationContext（ new String[]｛“bean-config1.xml”，“bean-config2.xml”，“bean-config3.xml”，“bean-config4.xml
  • mysql 基准测试之sysbench annan211 基准测试mysql基准测试MySQL测试sysbench
    1 执行如下命令，安装sysbench-0.5： tar xzvf sysbench-0.5.tar.gz  cd sysbench-0.5  chmod +x autogen.sh  ./autogen.sh  ./configure --with-mysql --with-mysql-includes=/usr/local/mysql
  • sql的复杂查询使用案列与技巧 百合不是茶 oraclesql函数数据分页合并查询
      本片博客使用的数据库表是oracle中的scott用户表;          -------------------  自然连接查询           查询 smith 的上司(两种方法) &
  • 深入学习Thread类 bijian1013 javathread多线程java多线程
    一．             线程的名字 下面来看一下Thread类的name属性，它的类型是String。它其实就是线程的名字。在Thread类中，有String getName()和void setName(String)两个方法用来设置和获取这个属性的值。 同时，Thr
  • JSON串转换成Map以及如何转换到对应的数据类型 bijian1013 javafastjsonnet.sf.json
            在实际开发中，难免会碰到JSON串转换成Map的情况，下面来看看这方面的实例。另外，由于fastjson只支持JDK1.5及以上版本，因此在JDK1.4的项目中可以采用net.sf.json来处理。 一.fastjson实例 JsonUtil.java package com.study; impor
  • 【RPC框架HttpInvoker一】HttpInvoker：Spring自带RPC框架 bit1129 spring
    HttpInvoker是Spring原生的RPC调用框架，HttpInvoker同Burlap和Hessian一样，提供了一致的服务Exporter以及客户端的服务代理工厂Bean，这篇文章主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成   在 【RPC框架Hessian二】Hessian 对象序列化和反序列化一文中
  • 【Mahout二】基于Mahout CBayes算法的20newsgroup的脚本分析 bit1129 Mahout
    #!/bin/bash # # Licensed to the Apache Software Foundation (ASF) under one or more # contributor license agreements. See the NOTICE file distributed with # this work for additional information re
  • nginx三种获取用户真实ip的方法 ronin47
    随着nginx的迅速崛起，越来越多公司将apache更换成nginx. 同时也越来越多人使用nginx作为负载均衡, 并且代理前面可能还加上了CDN加速，但是随之也遇到一个问题：nginx如何获取用户的真实IP地址,如果后端是apache,请跳转到<apache获取用户真实IP地址>，如果是后端真实服务器是nginx，那么继续往下看。 实例环境： 用户IP 120.22.11.11
  • java-判断二叉树是不是平衡 bylijinnan java
    参考了 http://zhedahht.blog.163.com/blog/static/25411174201142733927831/ 但是用java来实现有一个问题。 由于Java无法像C那样“传递参数的地址，函数返回时能得到参数的值”，唯有新建一个辅助类：AuxClass import ljn.help.*; public class BalancedBTree {
  • BeanUtils.copyProperties VS PropertyUtils.copyProperties 诸葛不亮 PropertyUtilsBeanUtils
     BeanUtils.copyProperties VS  PropertyUtils.copyProperties  作为两个bean属性copy的工具类，他们被广泛使用，同时也很容易误用，给人造成困然；比如：昨天发现同事在使用BeanUtils.copyProperties copy有integer类型属性的bean时，没有考虑到会将null转换为0，而后面的业
  • [金融与信息安全]最简单的数据结构最安全 comsci 数据结构
          现在最流行的数据库的数据存储文件都具有复杂的文件头格式，用操作系统的记事本软件是无法正常浏览的，这样的情况会有什么问题呢？        从信息安全的角度来看，如果我们数据库系统仅仅把这种格式的数据文件做异地备份，如果相同版本的所有数据库管理系统都同时被攻击，那么
  • vi区段删除 Cwind linuxvi区段删除
    区段删除是编辑和分析一些冗长的配置文件或日志文件时比较常用的操作。简记下vi区段删除要点备忘。   vi概述    引文中并未将末行模式单独列为一种模式。单不单列并不重要，能区分命令模式与末行模式即可。   vi区段删除步骤： 1. 在末行模式下使用:set nu显示行号 非必须，随光标移动vi右下角也会显示行号，能够正确找到并记录删除开始行
  • 清除tomcat缓存的方法总结 dashuaifu tomcat缓存
    用tomcat容器，大家可能会发现这样的问题，修改jsp文件后，但用IE打开 依然是以前的Jsp的页面。 出现这种现象的原因主要是tomcat缓存的原因。 解决办法如下: 在jsp文件头加上 <meta http-equiv="Expires" content="0"> <meta http-equiv="kiben&qu
  • 不要盲目的在项目中使用LESS CSS dcj3sjt126com Webless
    　如果你还不知道LESS CSS是什么东西，可以看一下这篇文章，是我一朋友写给新人看的《CSS——LESS》 　　不可否认，LESS CSS是个强大的工具，它弥补了css没有变量、无法运算等一些“先天缺陷”，但它似乎给我一种错觉，就是为了功能而实现功能。 　　比如它的引用功能 ? .rounded_corners{     
  • [入门]更上一层楼 dcj3sjt126com PHPyii2
    更上一层楼 通篇阅读完整个“入门”部分，你就完成了一个完整 Yii 应用的创建。在此过程中你学到了如何实现一些常用功能，例如通过 HTML 表单从用户那获取数据，从数据库中获取数据并以分页形式显示。你还学到了如何通过 Gii 去自动生成代码。使用 Gii 生成代码把 Web 开发中多数繁杂的过程转化为仅仅填写几个表单就行。 本章将介绍一些有助于更好使用 Yii 的资源：
  • Apache HttpClient使用详解 eksliang httpclienthttp协议
    Http协议的重要性相信不用我多说了，HttpClient相比传统JDK自带的URLConnection，增加了易用性和灵活性（具体区别，日后我们再讨论），它不仅是客户端发送Http请求变得容易，而且也方便了开发人员测试接口（基于Http协议的），即提高了开发的效率，也方便提高代码的健壮性。因此熟练掌握HttpClient是很重要的必修内容，掌握HttpClient后，相信对于Http协议的了解会
  • zxing二维码扫描功能 gundumw100 androidzxing
    经常要用到二维码扫描功能 现给出示例代码 import com.google.zxing.WriterException; import com.zxing.activity.CaptureActivity; import com.zxing.encoding.EncodingHandler; import android.app.Activity; import an
  • 纯HTML+CSS带说明的黄色导航菜单 ini htmlWebhtml5csshovertree
    HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航   在线体验效果：http://hovertree.com/texiao/css/1.htm代码如下,保存到HTML文件可以看到效果：   <!DOCTYPE html > <html > <head> <title>HoverTree
  • fastjson初始化对性能的影响 kane_xie fastjson序列化
    之前在项目中序列化是用thrift，性能一般，而且需要用编译器生成新的类，在序列化和反序列化的时候感觉很繁琐，因此想转到json阵营。对比了jackson，gson等框架之后，决定用fastjson，为什么呢，因为看名字感觉很快。。。   网上的说法：   fastjson 是一个性能很好的 Java 语言实现的 JSON 解析器和生成器，来自阿里巴巴的工程师开发。
  • 基于Mybatis封装的增删改查实现通用自动化sql mengqingyu DAO
    1.基于map或javaBean的增删改查可实现不写dao接口和实现类以及xml，有效的提高开发速度。 2.支持自定义注解包括主键生成、列重复验证、列名、表名等 3.支持批量插入、批量更新、批量删除 <bean id="dynamicSqlSessionTemplate" class="com.mqy.mybatis.support.Dynamic
  • js控制input输入框的方法封装(数字，中文，字母，浮点数等) qifeifei javascript js
    在项目开发的时候，经常有一些输入框，控制输入的格式，而不是等输入好了再去检查格式，格式错了就报错，体验不好。 /** 数字，中文，字母,浮点数(+/-/.) 类型输入限制，只要在input标签上加上 jInput="number,chinese,alphabet,floating" 备注：floating属性只能单独用*/     funct
  • java 计时器应用 tangqi609567707 javatimer
    mport java.util.TimerTask;   import java.util.Calendar;   public class MyTask extends TimerTask {        private static final int
  • erlang输出调用栈信息 wudixiaotie erlang
    在erlang otp的开发中，如果调用第三方的应用，会有有些错误会不打印栈信息，因为有可能第三方应用会catch然后输出自己的错误信息，所以对排查bug有很大的阻碍，这样就要求我们自己打印调用的栈信息。用这个函数：erlang:process_display (self (), backtrace).需要注意这个函数只会输出到标准错误输出。 也可以用这个函数：erlang:get_s
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他