加速Javascript:DOM操作优化
原文:《Speeding up JavaScript: Working with the DOM》
作者: KeeKim Heng, Google Web Developer
在我们开发互联网富应用(RIA)时,我们经常写一些javascript脚本来修改或者增加页面元素,这些工作最终是DOM——或者说文档对象模型——来完成的,而我们的实现方式会影响到应用的响应速度。
DOM操作会导致浏览器重解析(reflow),这是浏览器的一个决定页面元素如何展现的计算过程。直接修改DOM,修改元素的CSS样式,修改浏览器的窗口大小,都会触发重解析。读取元素的布局属性比如offsetHeithe或者offsetWidth也会触发重解析。重解析需要花费计算时间,因此重解析触发的越少,应用就会越快。
DOM操作通常要不就是修改已经存在的页面上的元素,要不就是创建新的页面元素。下面的4种优化方案覆盖了修改和创建DOM节点两种方式,帮助你减少触发浏览器重解析的次数。
方案一:通过CSS类名切换来修改DOM
这个方案让我们可以一次性修改一个元素和它的子元素的多个样式属性而只触发一次重解析。
需求:
(emu注:原文作者写到这里的时候脑子显然短路了一下,把后面的Out-of-the-flow DOM Manipulation模式要解决的问题给摆到这里来了,不过从示范代码中很容易明白作者真正想描述的问题,因此emu就不照翻原文了)
我们现在需要写一个函数来修改一个超链接的几个样式规则。要实现很简单,把这几个规则对应的属性逐一改了就好了。但是带来的问题是,每修改一个样式属性,都会导致一次页面的重解析。
function selectAnchor(element) {
element.style.fontWeight = 'bold';
element.style.textDecoration = 'none';
element.style.color = '#000';
}
function selectAnchor(element) {
element.style.fontWeight = 'bold';
element.style.textDecoration = 'none';
element.style.color = '#000';
}
解决方案
要解决这个问题,我们可以先创建一个样式名,并且把要修改的样式规则都放到这个类名上,然后我们给超链接添加上这个新类名,就可以实现添加几个样式规则而只触发一次重解析了。这个模式还有个好处是也实现了表现和逻辑相分离。
.selectedAnchor {
font-weight: bold;
text-decoration: none;
color: #000;
}
相关文档:
Evaluates an expression after a specified number of milliseconds has elapsed.
(在指定时间过后执行指定的表达式)
Syntax:
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
Parameters
vCode
Required. Variant that specifies the function pointer or string that indicates the code to be ......
首先是我们熟悉的extend函数
/**
* 扩展函数
* @param target 扩展对象
* @param params 扩展参数
*/
function extend(target, params) {
if (!target) {
target = {};
}
for (var prop in params) {
target[prop] = params[prop];
}
r ......
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onbeforecopy="return false" onmouseup=document.selection.empty() oncopy=document.selection.empty() onselect=document.selection.empty()></body>
讲上面红色显示的插入到网页中就可以实现鼠标右击无效
......
一、建立网页
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<script language="javascript" type="text/javascript">
<!-- 提供给C#程序调用的方法 -->
function messageBox(message)
{
alert(message);
}
</script>
</head>
& ......
在上传操作中,经常会遇到要求指定上传文件的格式,下面的实例是在客户端通过JavaScript验证上传图片格式为jpg/gif/png
<html>
<head>
<mce:script language="JavaScript" type="text/JavaScript"><!--
var img=null;
function checkPic(picForm){
var location=picForm.pic.v ......