用DocumentFragments或innerHTML取代复杂的元素注入
我们的浏览器执行越来越多的特性,并且网络逐渐向移动设备转移,使我们的前端代码更加紧凑,如何优化,就变得越来越重要了。前端给力的地方是可以有 许多种简单的策略和代码习惯让我们可以保证最理想的前端性能。我们这个系列的主题就是要告诉你9种代码小技巧,只需要一分钟,就可以优化你现有的代码。
使用DocumentFragments或者innerHTML代替复杂的元素注入
DOM操作在浏览器上是要付税的。尽管性能提升是在浏览器,DOM很慢,如果你没有注意到,你可能会察觉浏览器运行非常的慢。这就是为什么减少创建集中的DOM节点以及快速注入是那么的重要了。
现在假设我们页面中有一个元素,调用AJAX获取JSON列表,然后使用JavaScript更新元素内容。通常,程序员会这么写:
var list = document.querySelector('ul'); ajaxResult.items.forEach(function(item) { // 创建
- 元素
var li = document.createElement('li');
li.innerHTML = item.text;//
- 元素常规操作,例如添加class,更改属性attribute,添加事件监听等
// 迅速将
- 元素注入父级
- 中
- list.apppendChild(li);
- });
上 面的代码其实是一个错误的写法,将元素带着对每一个列表的DOM操作一起移植是非常慢的。如果你真的想要 使用document.createElement,并且将对象当做节点来处理,那么考虑到性能问题,你应该使用DocumentFragement。
DocumentFragement 是一组子节点的“虚拟存储”,并且它没有父标签。在我们的例子中,将DocumentFragement想象成看不见的元素,在 DOM外,一直保管着你的子节点,直到他们被注入DOM中。那么,原来的代码就可以用DocumentFragment优化一下:
var frag = document.createDocumentFragment();ajaxResult.items.forEach(function(item) { // 创建
- 元素
var li = document.createElement('li');
li.innerHTML = item.text;//
- 元素常规操作
// 例如添加class,更改属性attribute,添加事件监听,添加子节点等// 将
- 元素添加到碎片中
frag.appendChild(li);
});// 最后将所有的列表对象通过DocumentFragment集中注入DOM
document.querySelector('ul').appendChild(frag);
为DocumentFragment追加子元素,然后再将这个DocumentFragment加到父列表中,这一系列操作仅仅是一个DOM操作,因此它比起集中注入要快很多。
如果你不需要将列表对象当做节点来操作,更好的方法是用字符串构建HTML内容:
var htmlStr = '';ajaxResult.items.forEach(function(item) {// 构建包含HTML页面内容的字符串 htmlStr += '
- ' + item.text + '
'; });// 通过innerHTML设定ul内容 document.querySelector('ul').innerHTML = htmlStr;
这当中也只有一个DOM操作,并且比起DocumentFragment代码量更少。在任何情况下,这两种方法都比在每一次迭代中将元素注入DOM更高效。
用DocumentFragments或innerHTML取代复杂的元素注入相关推荐
- 前端性能优化最佳实践(转)
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...
- 前端性能优化:使用媒体查询加载指定大小的背景图片
日期:2013-7-8 来源:GBin1.com 直到CSS @supports被广泛支持,CSS媒体查询的使用接近于CSS中写逻辑控制.我们经常用CSS媒体查询来根据设备调整CSS属性(通常根据屏 ...
- 移动端python开发_python前端之移动端库、框架及自动化和优化
目的:学习移动端场景下的js事件:制作移动端特效常用的js库:介绍移动端常用开发框架Bootstrap:介绍动态样式语言less.sass.stylus的基本使用. 移动端js事件 移动端的操作方式和 ...
- web前端技术笔记(十六)bootstrap、表单正则和前端优化
bootstrap bootstrap bootstrap 容器 bootstrap 栅格系统 栅格响应式布局案例 列偏移 bootstrap 隐藏类 bootstrap 按钮 bootstrap 表 ...
- 前端(四)移动端js事件、bootstrap-学习笔记整理
移动端js事件 移动端的操作方式和PC端是不同的,移动端主要用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件: touchstart: //手指放到屏幕上时触发 touchmov ...
- 17DOM之操作元素
技术交流QQ群:1027579432,欢迎你的加入! 1.操作元素 JavaScript的DOM操作可以改变网页内容.样式和结构,可以利用DOM操作元素来改变元素里面的内容.属性等,注意以下都是属性. ...
- h5页面笔按下默认是拖动,H5中在拖动的元素或选择的文本进入到有效的放置目标时触发的事件ondragenter...
实例 在拖动的元素进入到放置目标时执行 JavaScript : 定义和用法 ondragenter 事件在拖动的元素或选择的文本进入到有效的放置目标时触发. ondragenter 和 ondrag ...
- DOM修改元素的方法总结
今天我们要谈谈DOM元素的修改(包括修改内容,属性,样式). 修改内容的方法----3种: elem.innerHTML:获取或设置元素开始标签到结束标签之间的原始HTML代码片段: elem.tex ...
- 趣解面试高频算法难题:数组中的第K个最大元素
第二天,在另一家公司-- 小灰是吧?请简单介绍一下你自己. 好的,blah blah blah-- 下面考你一道算法题: 给你一个无序数组,要求你找出数组中的第k大元素. 题目是什么意思呢?比如给定的 ...
最新文章
- Linux系统如何安装AutoFs挂载服务
- 项目管理经验谈——来自项目管理群的讨论
- python fieldnames_csvreader.fieldnames在python中未被识别为csv reader对象的属性
- 新年彩蛋:Spring Boot自定义Banner
- ssh重装ubuntu_Ubuntu环境下SSH的安装及使用详解
- java 自定义map_自定义写实现java中map中的功能(简易)
- Spark: history Server
- java jtextfield 事件_java – 处理JTextField中的编辑事件
- IOS开发-关于自定义TabBar条
- 带你认识不一样的Stream,Java8就该这么玩!
- oracle ADF 代码标准
- mysql的架构及查询sql的执行流程(一)
- 7寸显示器 树莓派4b_树莓派7寸触摸屏安装指南
- 桐桐的数学难题(质因数分解)
- linux xorg占用显存过大
- python程序代码
- 通过图纸和数字建筑表现来叙述古罗马遗产
- ocp跟oce的区别 oracle_六种角度看OCA与OCP、OCM区别
- Hello GitLab
- FET-Pro430烧录失败
热门文章
- 【node】------mongoose的基本使用------【巷子】
- spring websocket Converters must not be empty
- Windows Mobile访问SQL Server CE 3.5(2)
- Android 系统自动重启Bug(高通平台)
- mongodb数据库扩展名_MongoDB学习笔记:MongoDB 数据库的命名、设计规范
- linux/unix编程手册-56_60
- SVG(网页加载显示的加载进度动态图)
- 思科:四分之三的物联网项目将以失败告终
- Bootstrap中模态框多层嵌套时滚动条问题
- php-mysql管理利器 adminer