提高Dom 访问效率
在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中,两个dll的交互是比较耗时的,优化对Dom的操作可以提高脚本的执行速度。
JS访问DOM是很慢的,尽量不要用JS来设置页面 布局
有些人在学习 ReactJS 或者 AngularJS 时,需要学习 key 、 shouldComponentUpdate 、$apply 、 $digest 等复杂概念。这些概念在 Binding.scala 中根本不存在。因为 Binding.scala 的 @dom 方法描述的是变量之间的关系。所以,Binding.scala 框架知道精确数据绑定关系,可以自动检测出需要更新的最小部分。
结论
本文比较了虚拟 DOM 、脏检查和精确数据绑定三种渲染机制
杨博,Binding.scala作者,简称杨
尤雨溪,Vue.js的作者,简称尤
贺师俊, 犀利的技术批评者,前端技术资深专家,简称贺
杨称,用Binding.scala写的程序所需代码行数不到ReactJS的三分之一,甚至比以简洁著称的Vue.js还要短。
尤还以颜色,用Vue.js重新写了一个135行的TodoMVC新版本,比Binding.scala还短。
杨随后贴出了122行的Binding.scala版TodoMVC。
尤没有跟进更短的版本,但他指出122行的Binding.scala版TodoMVC,要比Vue.js字符数多30%。
杨认为Vue.js字符数少的代价是API更臃肿。Vue.js 90%的API,在Binding.scala用一个函数就可以全部代替。
TodoMVC官方版 Vue.js • TodoMVC
TodoMVC官方版 Binding.scala • TodoMVC
135行的新版 Vue.js • TodoMVC
122行的新版 Binding.scala • TodoMVC
在前端技术大爆炸的今天,大家怎么看待这场代码PK呢
提高Dom 访问效率的更多相关文章
- java提高数据库访问效率代码优化
package com.jb.jubmis.comm; import java.sql.Connection;import java.sql.ResultSet;import java.sql.SQL ...
- ejb2.0用本地引用提高EJB访问效率
用本地引用提高EJB访问效率 EJB 1.0和1.1规范只定义了一种在EJB组件中引用另一组件的方法,即通过Bean的远程接口.如果两个Bean都在同一个容器之内,则这种网络开销是不必要的.为解决这个 ...
- Javascript高性能编程-提高Dom访问速度
在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中,两个dll的交互是比较耗时的,优化对Dom的操作可以提高脚本的执行速度.下面是对如何优化的一些总结: 将需要多次操作的节点存储在一个 ...
- for循环提高内存访问效率的做法
今天写程序的时候突然想到一点,记录一下: 计算机内存地址是线性排列组织的,而利用for循环对高维数组结构进行遍历处理的时候,要保证最内层for循环遍历的是高维数组的最低维度,这样可以最大化利用CPU的 ...
- Hosts文件实际应用 配置内部服务器提高访问效率和速度
一 hosts文件的作用和介绍 https://jingyan.baidu.com/article/335530da45485e19cb41c3d6.html https://www.cnblogs. ...
- javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率
刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...
- 提高SQL查询效率(SQL优化)
要提高SQL查询效率where语句条件的先后次序应如何写 http://blog.csdn.net/sforiz/article/details/5345359 我们要做到不但会写SQL,还要做到 ...
- 提高SQL查询效率的常用方法
提高SQL查询效率的常用方法 (1)选择最有效率的表名顺序(只在基于规则的优化器中有效): Oracle的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driv ...
- 使用Dropbox提高个人数据管理效率
Dropbox 应该大家都不陌生,其在云存储阵营中独树一帜,通俗的说它是提供多终端和云之间的数据同步服务,而就其本质来说它无非是将数据的采集.存储和分发三个关节打通,整合成统一服务对外提供.这就好比只 ...
随机推荐
- python3 实现删除数组中相同的元素
# #把数组中相同的元素去除 # #第一种方式: def del_repeatnum(s=[1,1,1,2,2,3,3,4]): s1=[] for i in s: print(i) if i not ...
- STVD、IAR两种编译器比较
1.全局查找功能: STVD:全局查找功能全局查找功能比较麻烦,有3个动作. IAR:有全局查找功能比较方便,只要一个动作,和KEIL一样. 2.编译时间 STVD:相对比较慢. IAR:相对快点. ...
- 彩票历史记录分析工具 -- 通过实例学习wpf开发
前言 虽然本人对彩票不感兴趣,仍然有不少人对此情有独钟.他们花大量时间精力去分析彩票的历史记录,企图发现规律,为下一次投注做指导,希望“赢的“”概率增大.不管研究历史记录是否有意义,我用软件实现了对彩 ...
- 定位、识别;目标检测,FasterRCNN
定位: 针对分类利用softmax损失函数,针对定位利用L2损失函数(或L1.回归损失等) 人关节点检测 针对连续变量和离散变量需要采用不同种类的损失函数. 识别: 解决方案: 1.利用滑动窗口,框的 ...
- [gitHub实践] git基础:远程仓库的使用
[gitHub实践] git基础:远程仓库的使用 版权2019.6.2更新 git 基础 远程仓库的使用 git remote # 查看远程仓库 $ git remote # 克隆的仓库服务器默认名字 ...
- 【汇编】AX内容依次倒排序
;P99,5.13,ax内容倒序 ;思路,ax左移一位最高位进cf里,bx右移一位把cf里值进bx的最高位, ;循环16次即实现ax16位内容倒序存储在bx中 DATA SEGMENT DATA EN ...
- Linux学习_菜鸟教程_2
Linux 系统目录 /bin: bin是Binary的缩写,这个目录存放着最经常使用的命令. /boot: 存放启动Linux时的一些核心文件,包括一些连接文件以及镜像文件. /dev : de ...
- react路由的跳转和传参
1.路由的跳转 一.DOM跳转 在需要跳转的页面导入import {Link} from 'react-router-dom',在需要跳转的地方使用link标签的to属性进行跳转,路由配置文件中导出的 ...
- 【GeneXus】开发移动APP时,如何使用Canvas进行布局?
当我们开发移动端APP的时候,经常遇到一种布局方式,那就是层级的布局,比如:一张照片我想在照片的上面显示它的名称,但不影响我照片展示的布局大小,也就是这个名称是浮在照片上的,如图: 如果要实现这样的布 ...
- CS0656 缺少编译器要求的成员“Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create”
问题出现原因:在net core使用动态类型dynamic,在编译的时候提示错误信息如上. 解决方案: 1.不用dynamic类型 2.在使用的地方添加一个dll,Microsoft.CSharp,或 ...