Bullshit

本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变)。

事实上近期总在想。自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改。昨天把自己的电脑重装了,确实非常多软件的存放要改地方了,之前不知道怎么去管理软件安装,所以放得乱七八糟的。

说好一大堆废话之后。我最后再说一遍。管好自己的时间、数据真的比你学习东西重要。

Method

本文代码约定

  • 1 el: 指的是添加直接点的DOM节点
  • 2 totalNum: 为100000(值越大越能体现差距)指的是循环创建的DOM节点
  • 3 for(var i=0;i<totalNum;i++){}: 我们用for来表示就好了,简写代码

假设叫你用javascript动态添加DOM节点,你有哪几种思路呢?

1 .使用innerHTML和字符串拼接
console.time("time1");
var str = "";
for{ 
str += "<div>123<div>"; 
}
el.innerHTML = str;
console.timeEnd("time1");
2 .使用innerHTML和数组
console.time("time2");
var arr = [];
for{
arr.push("<div>123<div>");
}
el.innerHTML = arr.join("");
console.timeEnd("time2");
3 .使用DOM API
console.time("time3");
var str = "";
for{
var div = document.createElement("div");
div.textContent = "123";
el.appendChild(div);
}
console.timeEnd("time3");

result

在这里有必要知道console.time命令的作用,请看链接

hl=zh-CN#consoletimelabel">console.time(label)。我简介下吧,就是在console.time函数中传入一个參数,这个參数就是一个标记。当chrome执行到这里就開始计时,那什么时候结束计时呢,这个就有关另外一个函数console.timeEnd。參数就是刚才那个标记。这样子我们就知道中间那段javascript代码到底跑了多久了。记住它是以毫秒为单位的。

那好我们如今推測下到底哪段代码跑的时间最短呢?

不卖关子了,时间长短逐渐上升各自是:time2<time3<time1(我仅仅是在chrome上面測试,可能在其它浏览器不一样)

Summary

为什么会出现上面的情况呢?

  • 一 首先我们要知道我们用的chrome是webkit内核。他们对操作DOM节点已经优化得非常好了,所以DOM API与innerHTML两着在性能上是没多大差别的(引用于《高性能javascript》)
  • 二 就是既然DOM API与innerHTML性能上没多大差别的话,为什么time3<time1呢?这个就是有关字符串连接的性能问题了。

    就上面的样例 str += "<div>123</div>"那js解析器怎样解析呢?
    1 新建一个暂时字符串
    2 把str和后面的字符串拼接赋给新的暂时字符串
    3 销毁原始字符串并赋值给str
    这样子的效率是低下的。
  • 三 而作为第一个数组原生的方法为什么会最快呢?。这个由于javascript的原生部分是在你写代码的时候它们已经在浏览器中了,它们是用底层的语言写的,比方C++,这个就意味着这些方法会被编译成机器码(《高性能javascript》)

console.time 简单分析javascript动态加入Dom节点的性能的更多相关文章

  1. 简单分析JavaScript中的面向对象

    初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...

  2. Javascript动态创建 style 节点

    有很多提供动态创建 style 节点的方法,但是大多数都仅限于外部的 css 文件.如何能使用程序生成的字符串动态创建 style 节点,我搞了2个小时. 静态外部 css 文件语法: @import ...

  3. Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

    插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...

  4. Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理

    节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...

  5. JavaScript获取HTML DOM节点元素详解(转)

    在Web运用程序特别是Web 2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要处理的疑问. 51CTO推荐阅读:JavaScript DOM文档 ...

  6. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理

    浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...

  7. jquery动态添加DOM节点

    1.append()方法:向每个匹配的元素内部添加元素 appendTo()方法:将所有匹配的元素追加的指定的元素中 <html> <head> <meta http-e ...

  8. vue,在模块中动态添加dom节点,并监听

    在这里,onclick事件没有作用,因为它指向的是window,如果写为this.click页面显示为undefined, 我采用的是通过class绑定事件,但是会有一个问题,那就是当你渲染多个事件时 ...

  9. jQuery动态创建DOM节点

    var SKU=$("#SKU"); // 通过ID查找到指定表格 var oTable=SKU[0]; // 获取第一个表格 // 获取正文tbody元素 var tBodies ...

随机推荐

  1. Material Designer的低版本兼容实现(七)—— Rectange Button

    矩形按钮是我们很常用的控件,让其拥有5.0动效必须自定义控件.本文讲解的控件是参考: https://github.com/shark0017/MaterialDesignLibrary 一.放入布局 ...

  2. Spring Boot中application.yml与bootstrap.yml的区别(转载)

    说明:其实yml和properties文件是一样的原理,主要是说明application和bootstrap的加载顺序.且一个项目上要么yml或者properties,二选一的存在. Bootstra ...

  3. [Android Pro] 开发一流的 Android SDK:Fabric SDK 的创建经验

    cp from : https://academy.realm.io/cn/posts/oredev-ty-smith-building-android-sdks-fabric/ Ty Smith T ...

  4. .NET零基础入门05:委托与事件

    一:前言 本小节,我们需要停一停我们的小游戏开发,虽然它现在还不完美,还很简单,甚至还有BUG.但是,为了更好的理解C#,现在到了该深入了解一些基础知识的时候了. 当然,实际上,本小节内容对于零基础入 ...

  5. LaTeX技巧205:使用split输入多行公式技巧

    我们在输入多行公式的时候,split,array,multiline,align,aligned等等都是我们可以选用的环境,这里介绍split的使用方法.演示效果图: 演示代码:\documentcl ...

  6. MongoDB单机, 主从, 分布式部署

    MongoDB是最易用的NoSQL,比较适合取代MySQL做一些存储,不过不是强一致性的.本文介绍一下MongoDB各种部署方式,并分享一些感受.前两部分“单机部署”和“主从部署”是“分片部署”的基础 ...

  7. spring data jpa 查询No property ... found for...Did you mean '...'?

    原文地址:https://blog.csdn.net/earthhour/article/details/79271816 实体类字段定义: private String sku_no; dao中接口 ...

  8. 第二章 TypeScript 开发环境搭建

    Mac OS X 下 TypeScript 开发环境搭建 一.集成开发环境 WebStrom VSCode 二.安装 TypeScript Homebrew(macOS 缺失的软件包管理器) ruby ...

  9. DOM之通俗易懂讲解

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  10. JavaScript学习笔记——错误处理

    说明:参见<JavaScript高级程序设计>第14章. 一.             错误分类 1. 语法错误 也称为解析错误,发生在传统编程语言的编译时,在JavaScript中发生在 ...