JS中文档碎片的理解和使用
1、我们要明白当js操作dom时发生了什么?
每次对dom的操作都会触发"重排"(重新渲染界面,发生重绘或回流),这严重影响到能耗,一般通常采取的做法是尽可能的减少 dom操作来减少"重排"
2、什么是文档碎片? document.createDocumentFragment() 一个容器,用于暂时存放创建的dom元素
3、文档碎片有什么用? 将需要添加的大量元素 先添加到文档碎片中,再将文档碎片添加到需要插入的位置,大大 减少dom操作,提高性能(IE和火狐比较明显)
比如需要往页面上放100个元素:
普通方式:(操作了100次dom)
for(var i=100; i>0; i--){
var elem = document.createElement('div');
document.body.appendChild(elem);//放到body中 }
文档碎片:(操作1次dom)
var df = document.createDocumentFragment();
for(var i=100; i>0; i--){
var elem = document.createElement('div');
df.appendChild(elem); }
//最后放入到页面上
document.body.appendChild(df);
JS中文档碎片的理解和使用的更多相关文章
- js文档碎片
//文档碎片:类似一个临时的文档,要所有要加的dom元素先放在这里,达到不要每次操作dom元素提高页面效率 var d1 = new Date(); //创建十个段落,常规的方式 ; i < ; ...
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- JS性能优化之创建文档碎片(document.createDocumentFragment)
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...
- JS JavaScript中的文档碎片 DocumentFragement JS性能优化
文档碎片是什么: 如果我们要在一个ul中添加100个li,如果不使用文档碎片,那么我们就需要使用append经常100次的追加,这会导致浏览器一直不停的渲染,是非常消耗资源的.但是如果我们使用文档碎片 ...
- 【js基础修炼之路】--创建文档碎片document.createDocumentFragment()
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于 ...
- node.js中文资料导航 Mark
Node.js HomePage Infoq深入浅出Node.js系列(进阶必读) Node.js中文文档 被误解的 Node.js Node.js C++ addon编写实战系列 热门node.js ...
- Node.js文档和教程
七天学会NodeJS:https://nqdeng.github.io/7-days-nodejs/ Node入门:http://www.nodebeginner.org/index-zh-cn.ht ...
- 【干货分享】Node.js 中文学习资料和教程导航
这篇文章来自 Github 上的一位开发者收集整理的 Node.js 中文学习资料和教程导航.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念,它的目标是帮助程 ...
- 【干货分享】Node.js 中文资料导航
这篇文章与大家分享一批高质量的的 Node.js 中文资料.Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的, 易于扩展的网络应用 Node ...
随机推荐
- SpringMvc 启动原理源码分析
了解一个项目启动如何实现是了解一个框架底层实现的一个必不可少的环节.从使用步骤来看,我们一般是引入包之后,配置web.xml文件.官方文档示例的配置如下: <web-app> <se ...
- 微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)
最近在学小程序,在把当前画布指定区域的内容导出并生成图片保存到本地这个知识点上踩坑了. 这里用到的方法是: wx.canvasToTempFilePath(),该方法作用是把当前画布指定区域的内容导出 ...
- 在没有任何投票节点情况下将从节点转换为Primary节点脚本
cfg={ "_id": "rs01", "version": 2, "protocolVersion": Number ...
- (转)OpenSSL CVE-2016-0800 和 CVE-2016-0703 漏洞修复细节拾趣
原文:https://www.freebuf.com/vuls/97727.html 1. 引子 本来最近和360 Nirvan Team的DQ430愉快的参加某加密厂商的年度大会,结果openssl ...
- MySQL笔记(4)---表
1.前言 上一章记录了MySQL中的一些文件组成,以及相关作用和参数配置,本章开始记录深层次的存储结构,以便更好理解MySQL的设计. 2.索引组织表 InnoDB中,表都是根据主键顺序组织存放的,这 ...
- java信任所有证书
package com.eeepay.cashOut.util; import java.io.BufferedReader; import java.io.DataOutputStream; imp ...
- JavaScript --Window-对话框
-----038-Window-对话框.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&q ...
- hibernate对连接池的支持和HQL查询
hibernate对连接池的支持 连接池, 作用: 管理连接:提升连接的利用效率! 常用的连接池: C3P0连接池 Hibernate 自带的也有一个连接池,且对C3P0连接池也有支持! 只维护一个连 ...
- Pro * c Oracle 12c
#include<stdio.h> #include<string.h> #include<stdlib.h> #include<sqlca.h> vo ...
- SQL-结构化查询语言(2)
使用explain查询select查询语句的执行计划 mysql> explain select * from student where Sname='金克斯'\G ************* ...