- 浏览: 2561462 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (1286)
- js-oop (2)
- js-window (10)
- js-event (19)
- js-string (37)
- js-array (27)
- js-page (4)
- js-dom (62)
- js-lang (8)
- js-number (7)
- js-platform (3)
- js-object (15)
- js-element (3)
- js-browser (7)
- js-url (6)
- js-date (10)
- css基础 (48)
- css优化 (15)
- html基础 (17)
- html标签 (19)
- js基础 (117)
- js-兼容性差异 (33)
- js引擎 (3)
- js性能 (14)
- json (6)
- jQuery源码浅析 (43)
- web mobile开发资料 (78)
- js跨域 (2)
- html5 (74)
- html5-canvas (7)
- css3 (53)
- 浏览器 (5)
- api设计学 (3)
- js-加载 (3)
- linux (37)
- 架构师 (1)
- php (2)
- self开发的脚本库--凤凰 (2)
- web应用名词 (6)
- javascript新特性翻译 (8)
- ajax (6)
- jQuery动画效果 (7)
- prototype的解读 (13)
- 优秀插件翻译 (1)
- css解决方案 (26)
- 数据库 (2)
- english daily (59)
- 浏览器内核探究 (1)
- jQuery插件介绍 (9)
- jquery基础篇 (26)
- chrome浏览器问题整理 (14)
- js选择器那些事 (3)
- 前端框架 (26)
- Firefox私有属性 (11)
- webkit私有属性集合 (17)
- 书籍推荐 (21)
- 数据结构 (1)
- 网站建设相关 (7)
- 好文翻译 (2)
- 个人作品 (3)
- kissy的解读 (4)
- css-layout(布局研究) (5)
- less研究 (1)
- YUI探究 (1)
- hash探究 (1)
- js动画 (7)
- 前端面试题 (37)
- css书写规范 (1)
- js模板引擎 (6)
- js模块化 (19)
- 编写高质量代码 (3)
- 性能探究--应用协议 (2)
- 前端图像处理 (19)
- Mac OS相关 (21)
- 正则表达式 (11)
- 离线应用相关 (0)
- 前端工具 (65)
- nodeJS (55)
- jquery优化篇 (2)
- 设计模式探究系列 (3)
- windows7 (2)
- IE10 (10)
- 微博开放平台探究 (2)
- 常用web服务接口 (1)
- 数据存储相关 (8)
- 零时文件 (2)
- jQuery Mobile (16)
- backbone (15)
- underscore (22)
- sass (11)
- android (3)
- phonegap (10)
- IE私有 (11)
- qwrap (8)
- git (14)
- chrome extensions (5)
- freemarker (11)
- angularJS (3)
- seo (2)
- markdown (3)
- css动画 (4)
- 安卓开发 (2)
- React (7)
- 活动页技术 (1)
- 网络安全 (3)
- grunt (7)
- Lo-Dash (3)
- 前端国际化 (4)
- 版本控制 (2)
- 盒模型 (4)
- 微信开发 (1)
- Mock数据工具 (1)
- sails (1)
- vim (1)
- js-color (1)
- iOS 基础 (43)
最新评论
-
jertom:
<div id="showInfo" ...
addEventListener等事件监听的参数细谈 -
乌托邦国王:
引用[u][/u]
css3动画属性系列之transform细讲移动translate -
hvang1988:
能提供附件下载吗,找不到js库,google封了访问不了
Syntaxhighlighter---代码高亮插件介绍 -
sscsacdsadcsd:
我的天 那到底是为什么function是object我看und ...
typeof func ==='function'的疑惑 -
wkjiangwk:
试了,没用,你们从不去测试。
介绍一下x-webkit-speech -------实现语音输入
本文来自《JavaScript高级程序设计》阅读笔记
优化DOM交互
-------- DOM操作与交互要消耗大量时间,因为它们往往需要重新渲染整个页面或者某一个部分。
- 最小化现场更新
- 现场更新:因为需要立即(现场)对页面对用户的显示进行更新。
- 现场更新越多,代码完成执行所花的时间久越长
举例:
给列表添加10个项目。
var list = document.getElementById("myList"), item, i; for(i=0;i<10;i++){ item = document.createElement("li"); list.appendChild(item); item.appendChild(document.createTextNode("Item "+i)); }
------ 这样添加一个项目,需要添加li元素,给它添加文本节点,10个项目的话,需要20次的现场更新。
比较好的方式还是创建文档碎片来创建DOM结构,接着将其添加到List元素中,为了避免现场更新和页面闪烁。
var list = document.getElementById("myList"), fragment = document.createDocumentFragment(), item, i; for(i=0;i<10;i++){ item = document.createElement("li"); fragment.appendChild(item); item.appendChild(document.createTextNode("Item "+i)); } list.appendChild(fragment);
2. 使用innerHTML
当把innerHTML设置为某一个值,后台会创建一个HTML解析器,然后使用内部的DOM调用来创建DOM结构,而非基于JavaScript的DOM调用。由于内部方法是编译好的而非解释执行的,所以执行快得多。
3. 使用事件代理
4. 注意HTMLCollection
优化HTMLCollection访问最重要的地方就是循环。
举例:
var images = document.getElementsByTagName("img"), i, len; for(i=0;len = images.length;i++){ }
发生以下情况时候回返回HTMLCollection对象
- 进行对getElementsByTagName()的调用
- 获取元素的childNodes属性
- 获取元素的attributes属性
- 访问特殊的集合,如document.forms、document.images等
发表评论
-
《Node.js项目实践:构建可扩展的Web应用》
2015-06-28 18:03 1495前言: 首先很感谢社 ... -
《React:引领未来的用户界面开发框架》读后感
2015-06-28 17:20 2973前言: 其实我们在项 ... -
9月读书活动之《ECMAScript6入门》
2014-10-20 14:26 1942前言: 这次还是继续有一本不 ... -
《8月份读书活动之跨终端web》
2014-09-03 18:49 1587前言: 本系列还是很给力的 ... -
《7月份读书活动 - 深入浅出Node.js》
2014-07-30 13:21 1371前言: 赶在最后一天 ... -
《Nodejs实战》读后感
2014-06-21 14:45 1977前言: 其实很多人都开 ... -
【高性能HTML5】读书后感
2014-06-15 15:17 1606前言: 6月份活动又来啦 ... -
【微管理——给你一个技术团队,你该怎么管】读书后感
2014-06-15 14:20 1669前言: ... -
ITeye4月读书活动之《游戏引擎架构》
2014-04-21 20:20 1819前言: ... -
2月读书活动之《学会提问》
2014-03-14 00:07 1433前言: 其实提问这个问题我自己 ... -
2月读书活动之《如果高效学习》
2014-03-13 22:43 1793前言: 又是一个无眠夜 ... -
11月读书活动之《AngularJS有感》
2013-12-09 13:01 1953前言: ... -
ITeye5月技术图书有奖试读活动之《Javascript宝典》
2013-05-23 16:36 1363前言: ... -
自执行函数相关
2013-05-07 20:39 1352整理几种自执行函数: 在最前最后加括 ... -
一淘首页优化总结
2013-02-01 17:10 0尽量减少DOM节点 不需要初始加载就渲染 ... -
严格模式探究
2013-01-18 17:32 1413探究一下严格模式 ... -
《JavaScript高级程序设计》设备事件
2012-11-12 17:28 0本文来自《JavaScript高级程序设计》阅读笔记 ... -
《JavaScript高级程序设计》手势事件
2012-11-12 17:05 0本文来自《JavaScript高级程序设计》阅读笔记 ... -
《JavaScript高级程序设计》触摸事件
2012-11-12 16:00 3234本文来自《JavaScript高 ... -
《JavaScript高级程序设计》性能探究之最小化语句数
2012-10-20 16:18 1372本篇主要整理于《JavaScript高级程序设计》的第三版 6 ...
相关推荐
资源名称:JavaScript DOM高级程序设计内容简介:本书注重理论与实践的结合,全面讲述高级的DOM 脚本编程。全书分为3 个部分:第一部分“深入理解DOM 脚本编程”,涉及W3C DOM 规范的各方面,包括非标准的浏览器支持...
JavaScript.DOM高级程序设计.pdf
本书注重理论与实践的结合,全面讲述高级的DOM脚本编程。全书分为3个部分:第一部分“深入理解DOM脚本编程”,涉及W3CDOM规范的各方面,包括非标准的浏览器支持和不支持的内容;第二部分“浏览器外部通信”,以Ajax...
《javascript DOM高级程序设计》的源码,亲测可用,内容最全。
JavaScript 高级程序设计(第3版)【附源代码】
Javascript 高级程序设计(第3版)超清中文PDF带目录完整版,个人的学习使用,共25M。
JavaScript 高级程序设计高级程序设计高清完美版
本书注重理论与实践的结合,全面讲述高级的DOM 脚本编程。全书分为3 个部分:第一部分“深入理解DOM 脚本编程”,涉及W3C DOM 规范的各方面,包括非标准的浏览器支持和不支持的内容;第二部分“浏览器外部通信”,以...
Javascript 高级程序设计第3版(完整源代码书上每个例子都有)本书从最早期Netscape浏览器中的JavaScript开始讲起,直到当前它对XML和Web服务的具体支持,内容主要涉及JavaScript的语言特点、JavaScript与浏览器的...
在吃透了前面所说的书之后,接下来两本书的顺序已经无关紧要了,《JavaScript DOM高级程序设计》(注意和《JavaScript 高级程序设计》相区别)和《JavaScript设计模式》,这两本都是重量级的书,能让你的JS技术上一...
JavaScript.DOM高级程序设计](上)
javascript DOM 高级程序设计源码(1)
javascript 高级程序设计源码 Nicholas 完美版 不含任何广告 学习javascript必备
<<JavaScript DOM 高级程序设计>> 一书的配套源代码,涵盖了书中的代码例子.
javascript程序设计适合初学者学习js,对JS进行深入了解。
javascript高级程序设计学习笔记,共100+页,记录了js的方方面面,比较适合于自学。
本书注重理论与实践的结合,全面讲述高级的DOM 脚本编程。全书分为3 个部分:第一部分“深入理解DOM 脚本编程”,涉及W3C DOM 规范的各方面,包括非标准的浏览器支持和不支持的内容;第二部分“浏览器外部通信”,以...
JavaScript DOM高级程序设计
JavaScript.DOM高级程序设计,完整的书籍资料,需要的请下载