高性能JS笔记3——DOM编程

【高性能JS笔记3——DOM编程】的更多相关文章

高性能JS笔记3——DOM编程

一.访问与修改DOM DOM和JS 相当于两个岛屿,访问操作的次数越多,要交的过路费越多,对性能产生很大影响. 减少访问DOM的次数,把运算尽量留在JS端操作. 二.innerHTML 对比 DOM 方法 1.对于原生的DOM方法和innerHTML比较,性能相差无几. 2.对于大量操作,针对不同浏览器,性能不一样,因此取决于经常用的浏览器. 3.建议从可读性.稳定性.编码习惯来决定使用哪种方式.在对字符串经过优化后,innerHTML性能可以得到大幅提升. 三.操作上的优化 1.节点克隆例如…

JS性能优化——DOM编程

浏览器中的DOM 天生就慢 DOM是个与语言无关的API,它在浏览器中的接口却是用JavaScript实现的.客户端脚本编程大多数时候是在个底层文档打交道,DOM就成为现在JavaScript编码中的重要部分. DOM访问和修改 ECMAScript 每次访问DOM 都会产生性能损耗. 修改元素则更为昂贵,因为它会导致浏览器重新计算页面的几何变换. 最坏的情况是在循环中访问或修改元素,尤其是对HTML元素集合循环操作. function innerHtmlLoop(){ for(var cou…

高性能JavaScript笔记三（编程实践）

避免双重求值有四个标准函数可以允许你传入代码的字符串,然后它才你动态执行.它们分别是:eval.Function.setTimeout.setInterval 事实上当你在javascript代码中执行另外一段javascript代码时,都会导致双重求值的性能消耗,所以在大多数情况下,没必要使得eval和Function函数,因此最好避免使用它们.至于setTimeout和setInterval,建议传入函数而不是字符串来作为第一个参数现在Safari4和chrome的javaScript引…

高性能JS笔记1——加载执行

一.脚本位置 1.Script标签尽可能放到Body底部,以减少脚本文件下载对整个页面UI渲染的影响. 2.Script标签永远不要紧跟Link标签后面. 二.组织脚本 1.合并多个文件在一个Script中加载: <script type="text/javascript" src="/scripts/jquery.min.js&/scripts/jquery.validation.js"></script> 三.无阻塞的脚本 1.无…

[js笔记整理]DOM 篇

一.节点类型 1.元素节点:HTML元素 2.文本节点:元素标签中的内容 3.属性节点:元素的属性 (检测节点类型:node.nodeType //元素=1,属性=2,文本=3) 二.使用DOM获取元素 1.通过名称类型访问节点 (1)getElementById(); (2)getElementsByTagName(); 2.利用父子关系查询节点 (1).ChildNodes //获取全部子节点数组(在Firefox chrome ie9中会包含文本节点) (2).children //只选择…

高性能WEB开发：DOM编程

我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和Javascript(这里指ECMscript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAscript每次访问DOM,都要途径这座桥,并交纳“过桥费”,访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAscript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 1.DOM访问与修改访问DOM元素是有代价的,…

高性能JS笔记4——算法和流程控制

一.循环 for.while.do while三种循环的性能都没有多大区别.foreach 的性能较其他三种差 . 既然循环没有多大区别,注意循环内的代码控制. 减少迭代次数. 减少迭代工作量. 推荐写法: , l = array.length; i < l; i++) { int v = array[i]; }; 二.条件语句 if else 和 switch语句较少时,if else较易读.分支多时,从性能或易读上都倾向于switch. 优化条件语句: 最小化到达正确分支前的条件数量: 把多…