框架操作DOM和原生js操作DOM比较
问题引出
对于Angular和React操作DOM的速度，和原生js操作DOM的速度进行了一个比较：
代码如下：
<!DOCTYPE html> <html ng-app="test">
<head>
<title>Performance Comparison for Knockout, Angular and React</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
* { box-sizing:border-box; }
body { padding:30px 0; }
h2 { margin:0; margin-bottom:25px; }
h3 { margin:0; padding:0; margin-bottom:12px; }
.test-data { margin-bottom:3px; }
.test-data span { padding:3px 10px; background:#EEE; width:100%; float:left; cursor:pointer; }
.test-data span:hover { background:#DDD; }
.test-data span.selected { background:#3F7AD9; color:white; } .time { font-weight:bold; height:26px; line-height:26px; vertical-align:middle; display:inline-block; cursor:pointer; text-decoration:underline; }
</style> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/0.12.1/react.js"></script>
<script type="text/javascript">
console.timeEnd("build"); document.addEventListener("DOMContentLoaded", function() {
_knockout();
_react();
_raw();
}); _angular(); function _buildData(count) {
count = count || 1000; var adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
var data = [];
for (var i = 0; i < count; i++)
data.push({id: i+1, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] });
return data;
} function _random(max) {
return Math.round(Math.random()*1000)%max;
} function _knockout() {
ko.applyBindings({
selected: ko.observable(),
data: ko.observableArray(), select: function(item) {
this.selected(item.id);
}, run: function() {
var data = _buildData(),
date = new Date(); this.selected(null);
this.data(data);
document.getElementById("run-knockout").innerHTML = (new Date() - date) + " ms";
}
}, document.getElementById("knockout")); } function _angular(data) {
angular.module("test", []).controller("controller", function($scope) {
$scope.run = function() {
var data = _buildData(),
date = new Date(); $scope.selected = null;
$scope.$$postDigest(function() {
document.getElementById("run-angular").innerHTML = (new Date() - date) + " ms";
}); $scope.data = data;
}; $scope.select = function(item) {
$scope.selected = item.id;
};
});
} function _react() {
var Class = React.createClass({
select: function(data) {
this.props.selected = data.id;
this.forceUpdate();
}, render: function() {
var items = [];
for (var i = 0; i < this.props.data.length; i++) {
items.push(React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-md-12 test-data" },
React.createElement("span", { className: this.props.selected === this.props.data[i].id ? "selected" : "", onClick: this.select.bind(null, this.props.data[i]) }, this.props.data[i].label)
)
));
} return React.createElement("div", null, items);
}
}); var runReact = document.getElementById("run-react");
runReact.addEventListener("click", function() {
var data = _buildData(),
date = new Date(); React.render(new Class({ data: data, selected: null }), document.getElementById("react"));
runReact.innerHTML = (new Date() - date) + " ms";
});
} function _raw() {
var container = document.getElementById("raw"),
template = document.getElementById("raw-template").innerHTML;
document.getElementById("run-raw").addEventListener("click", function() {
var data = _buildData(),
date = new Date(),
html = ""; for (var i = 0; i < data.length; i++) {
var render = template;
render = render.replace("{{className}}", "");
render = render.replace("{{label}}", data[i].label);
html += render;
} container.innerHTML = html; var spans = container.querySelectorAll(".test-data span");
for (var i = 0; i < spans.length; i++)
spans[i].addEventListener("click", function() {
var selected = container.querySelector(".selected");
if (selected)
selected.className = "";
this.className = "selected";
}); document.getElementById("run-raw").innerHTML = (new Date() - date) + " ms";
});
} ko.observableArray.fn.reset = function(values) {
var array = this();
this.valueWillMutate();
ko.utils.arrayPushAll(array, values);
this.valueHasMutated();
};
</script>
</head>
<body ng-controller="controller">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Performance Comparison for React, Angular and Knockout</h2>
</div>
</div> <div class="col-md-3">
<div class="row">
<div class="col-md-7">
<h3>React</h3>
</div>
<div class="col-md-5 text-right time" id="run-react">Run</div>
</div>
<div id="react"></div>
</div> <div class="col-md-3">
<div class="row">
<div class="col-md-7">
<h3>Angular</h3>
</div>
<div class="col-md-5 text-right time" id="run-angular" ng-click="run()">Run</div>
</div>
<div>
<div class="row" ng-repeat="item in data">
<div class="col-md-12 test-data">
<span ng-class="{ selected: item.id === $parent.selected }" ng-click="select(item)">{{item.label}}</span>
</div>
</div>
</div>
</div> <div id="knockout" class="col-md-3">
<div class="row">
<div class="col-md-7">
<h3>Knockout</h3>
</div>
<div class="col-md-5 text-right time" id="run-knockout" data-bind="click: run">Run</div>
</div>
<div data-bind="foreach: data">
<div class="row">
<div class="col-md-12 test-data">
<span data-bind="click: $root.select.bind($root, $data), text: $data.label, css: { selected: $data.id === $root.selected() }"></span>
</div>
</div>
</div>
</div> <div class="col-md-3">
<div class="row">
<div class="col-md-7">
<h3>Raw</h3>
</div>
<div class="col-md-5 text-right time" id="run-raw">Run</div>
</div>
<div id="raw"></div>
</div>
</div> <script type="text/html" id="raw-template">
<div class="row">
<div class="col-md-12 test-data">
<span class="{{className}}">{{label}}</span>
</div>
</div>
</script>
</body>
</html>
DOM Render
运行结果：
原生最快，为什么还要用框架？
问题分析
框架封装了很多操作，为了提升可维护性，会进行分层，只提供出API。很多应用其实类似，为了提升可读性可复用性，往往会分层、封装，单一的简单应用上性能上可能并不会有明显提升。但是，对于复杂的需要很多模块的应用，框架的优势就很明显。在不用自己优化性能的同时，可维护性也较好。框架会尽最大程度保证性能。复杂的情况，比如多次更新一块DOM，或者多块DOM同时更新等等。
React的VirtualDOM
如果没有VirtualDOM的情况下，想重置DOM，需要使用innerHTML.一个大型列表的数据如果都变更了，那么重置所有DOM无可厚非，但是更多的情况是，只有几个数据变更了，这种情况下，重新渲染大片DOM，就有些浪费了。
可以比较下虚拟DOM和innerHTML的差异：
框架操作DOM和原生js操作DOM比较的更多相关文章
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- 原生js操作dom的方法
今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- 原生JS 实现 dom ready
记录一下项目技术问题: 记得:放在head标签内的脚本,第一时间执行 var baseTools = { // dom ready ready: function( f ){ var ie = !!( ...
- ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作
ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...
- 抛开jQuery，拾起原生JS的DOM操作
常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...
- 原生js封装dom操作库
var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
随机推荐
- The data is said to include information from networks
The data is said to include information from networks as well as from individual computers and smart ...
- python3读取chrome浏览器cookies
好几年前我在做一些自动化的脚本时,脑子里也闪过这样的想法:能不能直接把浏览器的cookies取出来用呢? 直到昨天看到代码<python模拟发送动弹>,想起来当年我也曾经有类似的想法没能完 ...
- SQL Server 2005 控制用户权限访问表
转自:http://www.cnblogs.com/gaizai/archive/2011/07/14/2106617.html 一.需求 在管理数据库过程中,我们经常需要控制某个用户访问数据库的权限 ...
- Html5简单存储localStorage和sessionStorage
localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 1.localStorage : localStorage 没有时间限制的 ...
- Android Sudoku应用挂掉的问题
在真机上测试数独游戏时发现,快速点击屏幕时,游戏偶尔出现挂死的情况,Log如下 04-08 15:35:00.838 7317-7356/org.elvalad.sudoku D/OpenGLRend ...
- IOS7 SDK 几宗罪
IOS7 app 默认是全屏模式,所以之前的程序窗口会上向移动到状态栏上面,所以在底边会有一条大白边 表格单元格,默认是白色背景,之前程序设置的透明效果,这里不在起作用,需要用下面的委托方法改变.- ...
- Eclipse上运行第一个Hadoop实例 - WordCount(单词统计程序)
需求 计算出文件中每个单词的频数.要求输出结果按照单词的字母顺序进行排序.每个单词和其频数占一行,单词和频数之间有间隔. 比如,输入两个文件,其一内容如下: hello world hello had ...
- 在ubuntu下安装QQ
(参考链接 :http://jingyan.baidu.com/album/47a29f24577776c01423991a.html?picindex=3) 一 .安装 wine 1.下载一个 ...
- squid安装、配置、控制
Squid 目录 [隐藏] 1 前言 2 安装 2.1 从源中安装 2.2 源码编译安装 3 基本配置 4 高级控制 5 认证 6 总结 6.1 服务器配置 6.2 用户分类 6.3 行为分类 6. ...
- Java 报表之JFreeChart(第二讲)
1.利用 JFreeChart 创建按颜色分类的水果销售报表 package com.wcy.chart.bar; import javax.servlet.http.HttpSession; imp ...