每天学一点---document.createDocumentFragment
document.createDocumentFragment 用于创建文档对象,创建好的对象存在于内存中(不会引起回流,对元素位置和几何上的运算),不是附着在DOM树上,所以有更好的性能 可将该文档片段插入DOM树中,
例子:
var element = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera',
'Safari', 'Internet Explorer'];
browsers.forEach(function(browser) {
var li = document.createElement('li');
li.textContent = browser;
fragment.appendChild(li);
});
element.appendChild(fragment);
每天学一点---document.createDocumentFragment的更多相关文章
- 关于javascript document.createDocumentFragment() 替代insertCell、insertRow这种每次都使用大量的资源导致浏览器崩溃
documentFragment 是一個無父對象的document對象他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes ...
- 浅析document.createDocumentFragment()与js效率
对于循环批量操作页面的DOM有很大帮助!利用文档碎片处理,然后一次性append,并且使用原生的javascript语句操作 document.createDocumentFragment()说白了就 ...
- document.createDocumentFragment 方法
基本概念 document.createDocumentFragment 方法会创建一个 DocumentFragment 对象,该对象是一个存在于 DOM 树之外的 DOM 节点.它有一个非常有用的 ...
- document.createDocumentFragment()运行效率
createDocumentFragment作用是什么? 快速响应,提高效率,提升用户体验. 调用document.body.append(),每调用一次都要刷新页面 一次.效率就低了. 用docum ...
- document.createDocumentFragment 以及创建节点速度比较
document.createDocumentFragment document.createDocumentFragment()方法创建一个新空白的DocumentFragment对象. Docum ...
- 学一点 MYSQL 双机异地热备份—-MYSQL主从,主主备份原理及实践
简单介绍mysql双机,多机异地热备简单原理实战. 双机热备的概念简单说一下,就是要保持两个数据库的状态自动同步.对任何一个数据库的操作都自动应用到另外一个数据库,始终保持两个数据库数据一致. 这样做 ...
- 关于document.createDocumentFragment()(转)
documentFragment 是一个无父对象的document对象. 他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNod ...
- JS性能优化之创建文档碎片(document.createDocumentFragment)
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...
- 【js基础修炼之路】--创建文档碎片document.createDocumentFragment()
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于 ...
随机推荐
- SQL server权限管理和备份实例
权限设置: 1.创建用户zhangsan,并赋予zhangsan有dbcreator的服务器权限. 2.使用zhangsan登录,测试能否创建数据库. 3.使用sa用户附加myschool数据库,设置 ...
- [技术] OIer的C++标准库 : STL入门
注: 本文主要摘取STL在OI中的常用技巧应用, 所以可能会重点说明容器部分和算法部分, 且不会讨论所有支持的函数/操作并主要讨论 C++11 前支持的特性. 如果需要详细完整的介绍请自行查阅标准文档 ...
- Windows10下python3.5的sklearn库安装
具体安装方法参考https://blog.csdn.net/HYDMonster/article/details/79766086 但是注意的是,http://www.lfd.uci.edu/~goh ...
- laravel的Eloquent中的get()和Query/Builder中的get()
Eloquent 中的get实际上是Eloquent/Builder中的get,得到的结果是个Collection对象,再调用Collection的first才得到collection中的一项,即一个 ...
- [python] 列表解析式的高效与简洁
方法一(列表解析式): list1 = ["abc","efg","hij"] list2 = [i[0] for i in list1] ...
- 7、Django的模型层(1)
第1节:ORM简介 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极 ...
- MyBatis的javaType和ofType的区别
javaType和ofType都是用来指定对象类型,保证了类型安全.反向用select是必须要用ofType.javaType是指POJO类中的属性类型,比如下面的id,text,url,parent ...
- 同一域环境下SQLServer DB Failover故障转移配置详解
前 言: 很多情况下,虽然我们的站点.APIService.Redis等已经做成了分布式架构,但是SQLServer依然还是单体结构,当出现网络异常.服务器宕机时便存在极大的风险,这时候我们需要 ...
- A. Pride
You have an array a with length n, you can perform operations. Each operation is like this: choose t ...
- jquery jqzoom插件练习
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...