- 浏览: 934793 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (383)
- JSP 自定义标签实现 (1)
- JSP (2)
- javascript (161)
- JAVA (100)
- HTML (26)
- jQuery (11)
- J2EE (1)
- Log4J (1)
- HTML5 (6)
- DB2 (2)
- Spring (14)
- 浏览器兼容 (1)
- JavaMail (1)
- JAVA(转载) (1)
- freemarker (1)
- 项目管理 (1)
- 项目架构学习 (1)
- Oracle (11)
- 开源项目 (2)
- 网络编程 (4)
- C (1)
- C++ (0)
- Xpath (1)
- 待写 (10)
- JXL (1)
- XML (1)
- JNDI (2)
- POI (8)
- Struts2 (3)
- 异常解决方法 (1)
- Sql Server (2)
- windows (2)
- SqlServer (1)
- 前端 (1)
- 正则表达式 (2)
- 浏览器兼容问题 (2)
- 转载 (25)
- css (11)
- svn (5)
- 工程构建 (1)
- 好用的网站 (1)
- sql (3)
- chrome V8 (1)
- javacript 报表 (1)
- FusionCharts (1)
- eclipse (2)
- tomcat (4)
- hibernate (2)
- 硬件 (1)
- 杂烩 (1)
- Linux (1)
- ubuntu (1)
- 设计模式 (2)
- 缓存 (1)
- 数据库 (1)
- JVM (2)
- DOM4j (1)
- 其他 (1)
- JACOB (1)
- extjs (3)
- ligerUi (1)
- 在线HTML编辑器 (1)
- API (1)
- OpenOffice (1)
- webservice (1)
- json (1)
- 百度map (1)
- NodeJs (1)
- greeplum jdbc spring (1)
- easyui (1)
- hightchart (1)
- 游戏 (1)
- HttpClient (1)
- 正则 (1)
- canvas (4)
- HTML5,javascript,canvas (0)
最新评论
-
changelo:
缺少了秦皇岛市
中国省,市,区 json数据 -
yurui829:
解析配置行那等号前后有可能有空格,改为如下比较好:String ...
java 读取.ini配置文件工具类 -
贝塔ZQ:
poi生成excel文档,感觉蛮复杂的,可以试试用pageof ...
POI生成excel带下拉 -
langke93:
我发现greenplum 通过jdbc insert性能很差, ...
jdbc 配置连接greeplum数据,spring配置连接greeplum数据(简单配置学习) -
zhutulang:
哪有收邮件???
Spring 邮件接收发送实例
documentFragment对象:无父窗口的文档对象(或者叫文档碎片)
作用:javascript在操作DOM时都会重新加载整个文档的DOM为了减少DOM操作可以在操作DOM(为其添加或删除属性时)可以将DOM放入documentFragment中,最后一次性操作文档碎片
说白了documentFragment就是缓冲区:buffer
var oui=document.getelementbyid("oitem"); for(var i=0;i<10;i++) { var oli=document.createelement("li"); oui.appendchild(oli); oli.appendchild(document.createtextnode("item"+i)); } 上面的代码在循环中调用了oui.appendchild(oli),每次执行这条语句后,浏览器都会更新页面。其次下面的oui.appendchild()添加了文本节点,也要更新页面。所以一共要更新页面20次。 为了页面的优化,我们要尽量减少dom的操作,将列表项目在添加文本节点之后再添加,并合理地使用creatdocumentfragment(),代码如下: var oui=document.getelementbyid("oitem"); var ofragment=document.createdocumentfragment(); for(var i=0;i<10;i++){ var oli=document.createelement("li"); oli.appendchild(document.createtextnode("item"+i)); ofragment.appendchild(oli); } oui.appendchild(ofragment);
发表评论
-
微信2.0分享自定义标题、图片、摘要、链接
2016-01-28 11:00 1079今天做了一个微信自 ... -
js验证正则大全
2015-06-30 13:41 862var regexEnum = { intege:& ... -
javascript判断字符串是否是回文的算法实现
2014-11-24 22:40 3787var str = "reaaer&qu ... -
HTML5学习记录-----canvas学习之动画快照
2014-11-24 21:33 1127canvas动画快照 欢迎大家有好点建议可以提。js高级 ... -
HTML5学习记录-----canvas学习之鼠标选取放大图像
2014-11-23 21:53 1336canvas鼠标选取放大 欢迎大家有好点建议可以提。js ... -
HTML5学习记录-----canvas学习之获取鼠标在canvas上的坐标位置
2014-11-22 20:44 4727canvas坐标 欢迎大家有好点建议可以提。js高级扣扣 ... -
ajax.js
2014-11-20 21:38 1041如果你是 javascript高手,请来这里吧 ... -
html5 规范中新增的api
2014-11-20 21:36 4791如果你是 javascript高手,请来这里吧,扣扣群 1 ... -
被Arguments对象坑了。
2014-11-14 20:47 821当判断一个对象是否是Arguments对象时,我们会这么写 ... -
input onpaste事件
2014-11-12 14:08 10284function afterPaste() { ... -
javascript正则表达式学习——顺序肯定环视,顺序否定环视
2014-11-02 00:43 4631//举例说明。 //经常看到有人为了给数字加千分号(,) ... -
javascript小工具之——cookie操作
2014-11-01 20:28 1175var docCookies = { getItem: ... -
javascript本地缓存之localStorage,sessionStorage等
2014-10-28 11:00 2237如果你是 javascript高手,请来这里吧,扣 ... -
javascript本地缓存之userData(ie专用)
2014-10-27 23:28 846/** *storage 对象 */ functi ... -
javascript 排序,分组小工具 - 支持JSON数组 原生数组(学习,持续更新)
2014-10-24 10:38 6012/** * @author wsf 数据分组,排序js ... -
javascript 计算两日期之间的天数
2014-10-17 10:42 972var d1 = new Date('2013-01-01' ... -
web版2048小游戏 --- 学习用
2014-09-16 15:18 856web版2048小游戏 --- 学习用 -
javascript 将HTML转为 word,pdf 等(ie)
2014-08-18 12:26 3639/** * @author wsf html转换工具 ... -
javascript实现的各种排序性能比较
2014-08-01 09:33 1108<!DOCTYPE html> <htm ... -
javascript自动补全 支持键盘上下键 可以自定义数据,处理函数
2014-07-25 10:58 1379/** * @author wsf(自动补全动补全 支 ...
相关推荐
js中的DocumentFragment1
本资源是对浏览器中的Event Loop深入理解,requestAnimationFrame性能优化,DocumentFragment性能优化,Vue.js中的固定高度虚拟列表优化,面向未来的无限列表优化方案的实践,是对vue原理的一次深入理解。
大家在开发JavaScript应用的时候,如果遇到这种大量节点的情况,不妨将DocumentFragment作为一个备选的方案。
善用DocumentFragment 之前有个打飞机的游戏。我是用如下方法添加子弹 代码如下: for(var i=0;i<5;i++){ var bullet = new Bullet(); document.body.appendChild(bullet); } 问题就来了,我的目的是希望同时能...
1. 用JavaScript检测离线/在线状态 4. 使用 jQuery 复制文字到剪贴板的技巧 5. JavaScript DocumentFragment:
JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2. Versions of JavaScript Section 1.3. Client-Side JavaScript Section 1.4. JavaScript ...
他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild. 也支持以下DOM2屬性: attributes, childNodes, firstChild, lastChild, local...
DOCTYPE>语法)的对象表现形式,它不能包含子节点。DocumentFragment--可以像Document一样来保存其他节点。Element--表示起始标签和结束标签之间的内容,例如<tag></tab>或者。这是唯一可以同时包含特性和子节点...
DOCTYPE>语法)的对象表现形式,它不能包含子节点。DocumentFragment--可以像Document一样来保存其他节点。Element--表示起始标签和结束标签之间的内容,例如<tag></tab>或者。这是唯一可以同时包含特性和子节点...
还要注意的是id属性也会被克隆,也就是克隆后会有两个相同id的元素(如果克隆对象有设置的话),这很容易会导致其他问题,程序会把克隆table的id属性设空。 ps:table请用class来绑定样式,用id的话新table就获取不...
前端开发常见问题涵盖了多个维度,从技术基础知识、编码实践、性能优化到跨平台兼容性等。以下是一些主要的前端开发常见问题及其简要说明: 基础知识不牢固 编程思维和基本算法的理解:新手开发者可能会因为对基础...
节点对象除了继承 Node 接口以外,还拥有其他接口。ParentNode接口表示当前节点是一个父节点,提供一些处理子节点的方法。ChildNode接口表示当前节点是一个子节点,提供一些相关方法。 ParentNode 接口 如果当前...
前言 本文主要介绍如何使用原生js,通过面向对象的方式实现一个文件上传预览的组件,... DocumentFragment API:主要用来优化dom操作 minix :用来实现对象混合 正则表达式:匹配文件类型 class :类组件 github地址
准备 [] .slice.call(lis):将伪整数...DocumentFragment:文档碎片(高效批量更新多个副本) obj.hasOwnProperty(prop):判断prop是否是obj自身的属性 数据代理(MVVM.js) 通过一个对象代理对另一个对象中属性
指定初始值writable: true/false value是否可以修改存取(访问)描述符get: 函数, 用来得到当前属性值set: 函数, 用来监视当前属性值的变化4.Object.keys(obj): 得到对象自身可枚举的属性名的数组5.DocumentFragment:...
指定初始值writable: true/false value是否可以修改存取(访问)描述符get: 函数, 用来得到当前属性值set: 函数, 用来监视当前属性值的变化4.Object.keys(obj): 得到对象自身可枚举的属性名的数组5.DocumentFragment:...
关于该项目是关于通过使用javascript操作... of)(forEach) DOM对象方法(document.querySelectorAll()) documentFragment提高性能IntersectionObserver接口,用于更改视图端口中当前节的活动类与用户互动的事件
指定初始值writable: true/false value是否可以修改存取(访问)描述符get: 函数, 用来得到当前属性值set: 函数, 用来监视当前属性值的变化4.Object.keys(obj): 得到对象自身可枚举的属性名的数组5.DocumentFragment:...