在Javascript中,每当对DOM执行一次操作(插入元素,删除元素等)会出发浏览器的重新解析和渲染,当我们需要一次过进行多次DOM插入操作的时候,可以借助DocumentFragment这个节点类型帮助减少浏览器的重新解析。
假设我们要在下面的<ul/>中插入10个<li/>
<ul id="ul"></ul>
一般做法:
var ul = document.getElementById("ul"); var li = null; //循环往<ul/>插入<li/>,每次插入会出发浏览器重新渲染 for (var i=0; i < 10; i++){ li = document.createElement("li"); li.appendChild(document.createTextNode("li " + (i+1))); ul.appendChild(li); }
使用fragment:
var ul = document.getElementById("ul"); var li = null; //使用DocumentFragment作为临时节点存放所有<li/> var fragment = document.createDocumentFragment(); for (var i=0; i < 10; i++){ li = document.createElement("li"); li.appendChild(document.createTextNode("li " + (i+1))); fragment.appendChild(li); } //一次性把所有<li/>插入<ul/>,只出发一次浏览器重新渲染 ul.appendChild(fragment);
相关推荐
useful-JavaScript-Fragment本项目包含如下内容(还会陆续更新):注意,目前项目还处于初期阶段,还未进行完整的兼容性测试,欢迎指导和反馈!如果本项目对您有用或者有疑问的地方,请一定告诉我,非常之欢迎!本...
Fragment和Activity交互 Interface 接口方式
sublime-js-snippets, 在 sublime text 2 & 3中,javascript/js编程的Fragment sublime-text 编辑器 2/3 - JavaScript代码段sublime text 2/3 Fu的javascript/js Fragment 。安装 sublime-text 2/3 --包控制通过...
javascript-idiosyncrasies, 对初学者的一组Javascript特性 JavaScript特性这是一个 Collection 中的事物...免责声明:其中一些代码Fragment只是演示了 JavaScript 奇怪的部分,并不鼓励最佳实践,在生产代码中绝不应该
一组用于在React中实现Micro Frontend的hoc和hook工具。 安装 # via yarn $ yarn add react-ui-fragment # via npm $ npm install react-ui-fragment 用法 片段应用 import React from 'react' ; import ReactDOM ...
分段Fragment是一个用于构建用户界面JavaScript库。 片段类似于React,但是无需编译即可使用。 用作静态文件的普通JavaScript项目可以使用Fragment来受益,因为它可以通过构造新树(例如React)来更新UI,但无需捆绑...
分段 一个小型 Javascript 库,用于开发基于 DOM 的游戏。
Create and animate stunning 3D graphics using the open ...Interact directly with WebGL by creating custom vertex and fragment shaders Apply physics to your 3D objects using the Physijs JavaScript library
实际上,document 和 window 这两个对象的区别已经包含了...当你ctrl + F5 一个链接 http://yourhost.com/#fragment 打印 alert(document.URL ); 和 alert([removed].href); 发现,这两个的值不一样,
主要介绍了浅谈JavaScript的Polymer框架中的事件绑定,Polymer是由Google开发的针对Web UI的框架,需要的朋友可以参考下
该组件称为Fragment因此当Vue3本机片段到达时,您无需更改太多代码。 就是说,我不是Vue.js的核心开发人员,并且我对Vue.js的实现没有任何看法。 我只知道碎片是什么,以及碎片应该如何工作,并竭尽所能复制碎片。 ...
合并页面中引用文件到当前页面 用法 首先,安装gulp-merge-fragment作为开发依赖: npm install --save-dev gulp-fragment-merge 然后,将它添加到你的gulpfile.js : var merge - fragment = require ( "gulp-...
转义片段 Chrome 扩展此扩展程序旨在像搜索引擎机器人一样轻松抓取您的 Web 应用程序。 此扩展名将替换 #!... escaped_fragment并为您拒绝 Javascript。 使您能够看到搜索引擎机器人将看到的内容。
jsbench.github.io, JavaScript基准游乐场 http://jsbench.github.io/JavaScript基准游乐场。特性直观和用户友好界面( 全部在一个屏幕上: Fragment,测试结果和图形带代码突出显示的编辑器共享测试结果FacebookTwit
react-native-android-fragment 用本地回收者视图增强列表! 尝试使用以下示例: $ yarn / npm install $ react-native link
Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.
一个非常健全的 Javascript 链接(URL)解析类,他用了正则表达式可以准确获取一个完整的 URL 中每个部分的内容,包括协议、URL中包含的用户名和密码、主机名、端口、路径名、参数、锚点(Fragment Anchor)等信息
不幸的是,即使nashorn.jar在系统类路径中,您也无法-OSGi容器中的捆绑包无法使用它。 该项目解决了该问题。 要求 AEM 6.1(或带有Service Pack 2的6.0,请参阅以获取安装说明) Java 8(用于构建此项目的版本...
使用JavaScript驱动的单页应用程序(SPA),默认情况下当前浏览器不会滚动。 该帮助程序为单页应用程序提供了经典的滚动行为。 它会在加载时更新滚动位置,并检查点击次数和浏览器历史记录更改是否更新。 为了使...