- 浏览: 2608656 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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 1557前言: 首先很感谢社 ... -
《React:引领未来的用户界面开发框架》读后感
2015-06-28 17:20 3037前言: 其实我们在项 ... -
9月读书活动之《ECMAScript6入门》
2014-10-20 14:26 1984前言: 这次还是继续有一本不 ... -
《8月份读书活动之跨终端web》
2014-09-03 18:49 1642前言: 本系列还是很给力的 ... -
《7月份读书活动 - 深入浅出Node.js》
2014-07-30 13:21 1408前言: 赶在最后一天 ... -
《Nodejs实战》读后感
2014-06-21 14:45 2011前言: 其实很多人都开 ... -
【高性能HTML5】读书后感
2014-06-15 15:17 1642前言: 6月份活动又来啦 ... -
【微管理——给你一个技术团队,你该怎么管】读书后感
2014-06-15 14:20 1705前言: ... -
ITeye4月读书活动之《游戏引擎架构》
2014-04-21 20:20 1877前言: ... -
2月读书活动之《学会提问》
2014-03-14 00:07 1471前言: 其实提问这个问题我自己 ... -
2月读书活动之《如果高效学习》
2014-03-13 22:43 1837前言: 又是一个无眠夜 ... -
11月读书活动之《AngularJS有感》
2013-12-09 13:01 1987前言: ... -
ITeye5月技术图书有奖试读活动之《Javascript宝典》
2013-05-23 16:36 1405前言: ... -
自执行函数相关
2013-05-07 20:39 1388整理几种自执行函数: 在最前最后加括 ... -
一淘首页优化总结
2013-02-01 17:10 0尽量减少DOM节点 不需要初始加载就渲染 ... -
严格模式探究
2013-01-18 17:32 1448探究一下严格模式 ... -
《JavaScript高级程序设计》设备事件
2012-11-12 17:28 0本文来自《JavaScript高级程序设计》阅读笔记 ... -
《JavaScript高级程序设计》手势事件
2012-11-12 17:05 0本文来自《JavaScript高级程序设计》阅读笔记 ... -
《JavaScript高级程序设计》触摸事件
2012-11-12 16:00 3262本文来自《JavaScript高 ... -
《JavaScript高级程序设计》性能探究之最小化语句数
2012-10-20 16:18 1399本篇主要整理于《JavaScript高级程序设计》的第三版 6 ...
相关推荐
此外,对于掘金首页的信息流展示,开发者可能会采用高效的列表渲染技术,如虚拟DOM或Intersection Observer,以优化性能并提供流畅的用户体验。 其次,前端H5页面源码是构建Web应用的基础,尤其是在微信环境中,H5...
10. **性能优化**:高性能的展示类程序通常会关注页面渲染速度,因此源码中可能包括了一些性能优化技巧,如使用事件委托、减少DOM操作、缓存计算结果等。 11. **模块化和打包工具**:如果源代码是现代JavaScript...
JS代码可能涉及到DOM操作、事件监听、日期处理函数等技术,以实现用户友好且响应迅速的交互体验。 另一方面,"日历控件"这个文件可能包含了更多关于日历控件的设计和实现细节。这可能包括但不限于各种编程语言(如...
源码是软件开发的核心,包含了程序设计的全部细节,对于开发者而言,能够深入理解系统的架构和实现逻辑,有助于学习、定制和二次开发。 首先,我们要明确H+4.2源码所使用的编程语言和技术栈。通常,前端开发中常见...
对于想要深入学习或者改进这个工具的开发者,理解并熟悉JavaScript基础,尤其是DOM操作和事件处理,是非常重要的。同时,熟悉围棋的基本规则和术语也是必要的,因为这将有助于理解代码背后的逻辑。此外,了解CSS和...
3. 探究JavaScript的DOM操作和事件处理,提升交互性设计。 4. 理解响应式设计原理,掌握媒体查询的用法。 5. 研究数据库设计,了解如何创建和管理数据库表。 6. 学习服务器端语言(如PHP或Node.js)和框架,理解前后...
2. **MVVM架构**:微信小程序采用类似MVVM(Model-View-ViewModel)的设计模式,数据驱动视图,使得开发者可以专注于数据的管理和更新,而不用手动操作DOM。 3. **组件化开发**:小程序支持丰富的组件库,如view、...
HTML5是一种先进的网页开发技术,它极大地扩展了Web应用程序的功能,让开发者能够创建更富交互性和动态性的网页。在这个“HTML5紫色光圈无限延伸粒子动画特效源码”中,我们可以深入探究HTML5如何实现炫酷的视觉效果...
同时,微信小程序采用了类似Vue和React的MVVM(Model-View-ViewModel)设计模式,有自己的模板语法、数据绑定和事件系统。WXML类似于HTML,但增加了微信特有的组件和特性;WXSS则类似于CSS,用于定义样式。代码最终...
HTML5是一种先进的网页开发技术,它极大地扩展了Web应用程序的功能,使得开发者能够创建出更加丰富、交互性更强的网页内容。这款"一秒有多长"HTML5游戏源码提供了一个很好的学习和实践平台,帮助我们深入理解HTML5在...
【BuzzApp-P-68】项目是一个以JavaScript为核心的开发项目,其主要焦点在于利用JavaScript这一强大的脚本语言来构建高效、交互丰富的Web应用程序。在深入理解这个项目之前,我们需要先了解JavaScript的基础知识。 ...
Vue.js是一个轻量级的前端JavaScript框架,它的核心设计理念是通过可复用的组件来构建用户界面,以提高开发效率。Vue.js的响应式数据绑定和虚拟DOM使得开发者可以便捷地处理数据和视图之间的同步,而其易于上手的...
美国国会随机分区浏览器应用程序,即"US_Congressional_Districting_Beta-Gui",是为探究美国国会选区划分问题而设计的一款交互式工具。该程序的核心在于其初始模拟GUI,它允许用户直观地观察和分析选区划分的可能...
在IT领域,尤其是在前端开发中,JavaScript是一种不可或缺的编程语言,它在构建交互式网站和应用程序方面发挥着至关重要的作用。"portfolio"标题所指的可能是一个开发者用来展示其JavaScript技能和项目经验的在线...
源码是程序设计的基础,它揭示了软件背后的工作原理和逻辑结构。在这个项目中,我们可以深入研究如何利用编程语言构建这样的心理测试应用。 源码通常由一种或多种编程语言编写,例如JavaScript、Python、C++或者...
8. **性能优化**:为了提升用户体验,项目可能使用了延迟加载、代码分割、缓存策略等技术,减少页面加载时间和资源消耗。 9. **模块化**:JavaScript的模块化可以帮助组织代码,使得项目更易于理解和维护。可能是...
为了调试和优化代码,开发者可能会使用Chrome DevTools或Firefox Developer Tools等浏览器内置的开发工具,它们提供了查看和修改DOM、分析性能、调试JavaScript等功能。同时,代码版本控制工具如Git也会被用来管理...
《肚脐生物多样性的JavaScript交互式探索》 肚脐,这个看似微不足道的身体部位,实际上隐藏着一个丰富多彩的微生物世界。"Belly-Button Biodiversity"项目为我们揭示了这个秘密,它提供了一个交互式的仪表板,让...
JavaScript是一种广泛应用于Web开发的编程语言,它在客户端和服务器端都发挥着重要作用,用于创建交互式的网页和应用程序。在这个项目中,JavaScript可能会被用来处理用户输入、动态更新页面内容、实现动画效果、...