如何提升JavaScript的运行速度(DOM篇)
作者:Nicholas C. Zakas 来源:nczonline.net 发布时间:2010-05-17 13:32:00
在Web 开发中,JavaScript的一个很重要的作用就是对DOM进行操作,可你知道么?对DOM的操作是非常昂贵的,因为这会导致浏览器执行回流操作,而执行了过多的回流操作,你就会发现自己的网站变得越来越慢了,我们应该尽可能的减少DOM操作。本文是这个系列的最后一篇,给出了一些指导性原则,比如在什么时候应该对DOM可以进行什么样的操作等。
以下是对原文的翻译:
在过去的几周中,我为大家介绍了几种可以加快JavaScript脚本运行速度的技术。第一节介绍了如何优化循环。第二节的重点放在优化函数内部代码上,还介绍了队列(queuing)和记忆化(memoization)两种技术,来减轻函数的工作负担。第三节就如何将递归转换为迭代循环或者记忆化方式的话题,展开了讨论。第四节是这个系列的最后一篇,也就是本文,将重点阐述过多的DOM操作所带来的影响。
我们都知道,DOM操作的效率是很低的,而且不是一般的慢,而且这也是引发性能问题的常见问题之一。为什么会慢呢?因为对DOM的修改为影响网页的用户界面,重绘页面是一项昂贵的操作。太多的DOM操作会导致一系列的重绘操作,为了确保执行结果的准确性,所有的修改操作是按顺序同步执行的。我们称这个过程叫做回流(reflow),同时这也是最昂贵的浏览器操作之一。回流操作主要会发生在几种情况下:
* 当对DOM节点执行新增或者删除操作时。
* 动态设置一个样式时(比如element.style.width="10px")。
* 当获取一个必须经过计算的尺寸值时,比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值(在兼容DOM的浏览器中,可以通过getComputedStyle函数获取;在IE中,可以通过currentStyle属性获取)。
解决问题的关键,就是限制通过DOM操作所引发回流的次数。大部分浏览器都不会在JavaScript的执行过程中更新DOM。相应的,这些浏览器将对对 DOM的操作放进一个队列,并在JavaScript脚本执行完毕以后按顺序一次执行完毕。也就是说,在JavaScript执行的过程中,用户不能和浏览器进行互动,直到一个回流操作被执行。(失控脚本对话框会触发回流操作,因为他执行了一个中止JavaScript执行的操作,此时会对用户界面进行更新)
如果要减少由于DOM修改带来的回流操作,有两个基本的方法。第一个就是在对当前DOM进行操作之前,尽可能多的做一些准备工作。一个经典的例子就是向document对象中添加很多DOM节点:
/*for (var i=0; i < items.length; i++){ var item = document.createElement("li"); item.appendChild(document.createTextNode("Option " + i); list.appendChild(item);}*/
这段代码的效率是很低的,因为他在每次循环中都会修改当前DOM结构。为了提高性能,我们需要将这个次数降到最低,对于这个案例来说,最好的办法是建立一个文档碎片(document fragment),作为那些已创建元素元素的临时容器,最后一次将容器的内容直接添加到父节点中:
/*var fragment = document.createDocumentFragment();for (var i=0; i < items.length; i++){ var item = document.createElement("li"); item.appendChild(document.createTextNode("Option " + i); fragment.appendChild(item);}list.appendChild(fragment);*/
经过调整的代码,只会修改一次当前DOM的结构,就在最后一行,而在这之前,我们用文档碎片来保存那些中间结果。因为文档碎片没有任何可见内容,所以这类修改不会触发回流操作。实际上,文档碎片也不能被添加到DOM中,我们需要将它作为参数传给appendChild函数,而实际上添加的不是文档碎片本身,而是它下面的所有子元素。
猜你喜欢
- 背景:Email地址存于MSSql一用户信息表中,数量上万。公司自有服务器,集SMTP,POP3,WWW,FTP,MSSql,DNS等多种服
- 很多人在使用AJAX调用别人站点内容的时候,JS会提示"没有权限"错误,这是XMLHTTP组件的限制-安全起见禁止访问非
- 内容摘要:现在InterNet 越来越成为生活中不可或缺的一部分,制作网页的动态语言也越来越多,主要流行的有以下几种,ASP,PH
- 毫无疑问,JavaScript 是一种非常灵活的脚本语言,有时候它像一只难以驯服的野马——你受益于它的灵活性的同时,也要时刻提防它变得失去控
- 在开发Web应用时,无一例外地需要访问数据库,以完成对数据的查询、插入、更新、删除等操作。受应用逻辑的影响,有时需要将多条数据库操作指令组成
- 具体用法如下: 代码如下:-- ============================================= -- Autho
- 在ASP中,直接使用“Insert into” 语句与使用ADO中AddNew方法有什么区别?哪一种更好呢?AddNew方法的实质就是封装了
- 平时在PL/SQL中的编程中遇到一些问题,这里以问答的形式来进行把它们总结下来,以供大家分享。1、当需要向表中装载大量的数据流或者需要处理大
- 四年前写的一个内容管理系统,应用在公司内部网上,昨天DBA说其中的SQL语句未使用参数化的调用,导致服务器负担加重,资源占用大。并列出了几个
- 如何用SA-FileUp上传多个文件?表单处理: <%@&nbs
- 今天在一个QQ群中看到有人在问一个进度条的实现方式,当时因为工作时间,需求相对也比较紧,只是简单的说了一下可以通过CSS的边框属性和背景属性
- 1.视图的概述 视图其实就是一条查询sql语句,用于显示一个或多个表或其他视图中的相关数据。视图将一个查询的结果作为一个表来使用,因此视图可
- 尽管可能是个比较老的话题了,但是我还是从来没有整理过。今天在《精通HTML》一书中看到,这里整理一下。在XHTML中,<html>
- 请问,如何在ACCESS数据库和SQL SERVER数据库中查询?
- 我们都知道在9i之前,要想获得建表和索引的语句是一件很麻烦的事。我们通常的做法都是通过export with rows=no来得到,但它的输
- 在本篇文章里,我们会使用一个简单的Web表单,它会列出某个目录下的一些XML文件。然后,我们会从这个目录里选择一个文件,将它发送到另一个We
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- 英国著名学者李约瑟早在100多年前就疑惑:为什么中国的科技在唐宋时代就已领先西方,却在明清时代落后下来。对此,人们一向认为这主要是儒家思想的
- 1.在查询分析器理启动或停止SQL Agent服务启动:use mastergoxp_cmdshell 'net start SQL
- 要使数据库具备更强的抵御侵犯的能力,你要采取几步措施。有些措施只是良好的服务器管理的一部分,如拥有SQL Server最新的补丁,其他则包括