Virtual DOM

为什么需要虚拟DOM？ 　　如果对前端工作进行抽象的话，主要就是 维护状态和更新视图 ，而更新视图和维护状态都需要DOM操作。其实近年来，前端的框架主要发展方向就是解放DOM操作的复杂性。 　　运行js的速度是很快的，大量的操作DOM就会很慢，时常在更新数据后会重新渲染页面，这样造成在没有改变数据的地方也重新渲染了DOM 节点，这样就造成了很大程度上的资源浪费。 　　在jQuery出现以前，我们直接操作DOM结构，这种方法复杂度高，兼容性也较差。有了jQuery强大的选择器以及高度封装的API，我们可以更方便的操作DOM，jQuery帮我们处理兼容性问题，同时也使DOM操作变得简单。 　　但是聪明的程序员不可能满足于此，各种MVVM框架应运而生，有angularJS、avalon、vue.js等，MVVM使用数据双向绑定，使得我们完全不需要操作DOM了，更新了状态，视图会自动更新。更新了视图数据状态也会自动更新，可以说MVVM使得前端的开发效率大幅提升。但是其大量的事件绑定使得其在复杂场景下的执行性能堪忧，有没有一种兼顾开发效率和执行效率的方案呢？由此引入 Virtual DOM(虚拟DOM） 。 　　 利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为 虚拟DOM 。 　　 当数据发生变化时，能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上 。

① React严格上只针对MVC的view层,Vue则是MVVM模式 ② virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制 ③ 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,j 写在同一个文件; ④ 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的 ⑤ state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理 来源： oschina 链接： https://my.oschina.net/u/560237/blog/3189818

breforeCreate（）：实例创建前，这个阶段实例的 data 和 methods 是读不到的。 created（）：实例创建后，这个阶段已经完成数据观测，属性和方法的运算，watch/event 事件回调，mount 挂载阶段还没有开始。$el 属性目前不可见，数据并没有在 DOM 元素上进行渲染。 created 完成之后， 进行 template 编译等操作，将 template 编译为 render 函数， 有了 render 函数后才会执行 beforeMount（） beforeMount（）：在挂载开始之前被调用：相关的 render 函数首次被调用 mounted（）：挂载之后调用，el 选项的 DOM 节点被新创建的 vm.$el 替换，并挂载到实例上去之后调用此生命周期函数，此时实例的数据在 DOM 节点上进行渲染 后续的钩子函数执行的过程都是需要外部的触发才会执行 有数据的变化，会调用 beforeUpdate，然后经过 Virtual Dom，最后 updated 更新完毕，当组件被销毁的时候，会调用 beforeDestory，以及 destoryed掉， 来源： oschina 链接： https://my.oschina.net/u/560237/blog/3189488

在Web开发中，需要将数据的变化实时反映到UI上，这时就需要对DOM进行操作，但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因，为此，React引入了虚拟DOM（Virtual DOM）的机制。 一、什么是虚拟DOM？ 在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。 虚拟DOM是React的一大亮点，具有batching(批处理)和高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面，由虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作。在实际开发中基本无需关心虚拟DOM是如何运作的，但是理解其运行机制不仅有助于更好的理解React组件的生命周期，而且对于进一步优化 React程序也会有很大帮助。 二、虚拟DOM VS 直接操作原生DOM？ 如果没有 Virtual DOM，简单来说就是直接重置 innerHTML。这样操作，在一个大型列表所有数据都变了的情况下，还算是合理，但是，当只有一行数据发生变化时，它也需要重置整个 innerHTML，这时候显然就造成了大量浪费。 比较innerHTML 和Virtual DOM 的重绘过程如下： innerHTML: render html string + 重新创建所有 DOM 元素

React在前端界一直很流行，而且学起来也不是很难，只需要学会JSX、理解 State 和 Props ，然后就可以愉快的玩耍了，但想要成为React的专家你还需要对React有一些更深入的理解，希望本文对你有用。 这是Choerodon的一个前端页面 在复杂的前端项目中一个页面可能包含上百个状态，对React框架理解得更精细一些对前端优化很重要。曾经这个页面点击一条记录展示详情会卡顿数秒，而这仅仅是前端渲染造成的。 为了能够解决这些问题，开发者需要了解React组件从定义到在页面上呈现（然后更新）的整个过程。 React在编写组件时使用混合 HTML 和 JavaScript 的一种语法（称为JSX）。 但是，浏览器对JSX及其语法一无所知，浏览器只能理解纯 JavaScript ，因此必须将JSX转换为 HTML 。 这是一个div的JSX代码，它有一个类和一些内容： <div className='cn'> 文本 </div> 在React中将这段jsx变成普通的js之后它就是一个带有许多参数的函数调用： React.createElement( 'div', { className: 'cn' }, '文本' ); 它的第一个参数是一个字符串，对应html中的标签名，第二个参数是它的所有属性所构成的对象，当然，它也有可能是个空对象，剩下的参数都是这个元素下的子元素

一.MVX框架模式了解 MVX框架模式：MVC+MVP+MVVM 1.MVC：Model(模型)+View(视图)+controller(控制器)，主要是基于分层的目的，让彼此的职责分开。 View通过Controller来和Model联系，Controller是View和Model的协调者，View和Model不直接联系，基本联系都是单向的。 用户User通过控制器Controller来操作模板Model从而达到视图View的变化。 2.MVP：是从MVC模式演变而来的，都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。 在MVP中，Presenter完全把View和Model进行了分离，主要的程序逻辑在Presenter里实现。 并且，Presenter和View是没有直接关联的，是通过定义好的接口进行交互，从而使得在变更View的时候可以保持Presenter不变。 MVP模式的框架：Riot,js。 3.MVVM：MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。 View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。 这种自动同步是因为ViewModel中的属性实现了Observer

摘要： 很有意思的操作... 原文： web页面录屏实现 译者：frontdog Fundebug 经授权转载，版权归原作者所有。 写在前面的话 在看到评论后，突然意识到自己没有提前说明，本文可以说是一篇调研学习文，是我自己感觉可行的一套方案，后续会去读读已经开源的一些类似的代码库，补足自己遗漏的一些细节，所以大家可以当作学习文，生产环境慎用。 录屏重现错误场景 如果你的应用有接入到web apm系统中，那么你可能就知道apm系统能帮你捕获到页面发生的未捕获错误，给出错误栈，帮助你定位到BUG。但是，有些时候，当你不知道用户的具体操作时，是没有办法重现这个错误的，这时候，如果有操作录屏，你就可以清楚地了解到用户的操作路径，从而复现这个BUG并且修复。 实现思路 思路一：利用Canvas截图 这个思路比较简单，就是利用canvas去画网页内容，比较有名的库有： html2canvas ，这个库的简单原理是： 收集所有的DOM，存入一个queue中； 根据zIndex按照顺序将DOM一个个通过一定规则，把DOM和其CSS样式一起画到Canvas上。 这个实现是比较复杂的，但是我们可以直接使用，所以我们可以获取到我们想要的网页截图。 为了使得生成的视频较为流畅，我们一秒中需要生成大约25帧，也就是需要25张截图，思路流程图如下： 但是，这个思路有个最致命的不足：为了视频流畅

本文转载于: 猿2048 网站⇒ 关于模板引擎一 前端模板引擎需要有开发时的透明性 透明性即指我在搭建好开发环境后，随手写代码随手刷新浏览器就能看到最新的效果，而不需要额外地执行任何命令或有任何的等待过程。 所以一切依赖编译过程的模板引擎并不适合前端使用，编译只能是模板引擎的一个特性，而不能是使用的前提 更严格地说，使用FileWatch等手段进行文件变更检测并自动编译也不在我的考虑范围之内，因为这会造成额外的等待， 由此可以推出，前端的模板引擎应该是具备 可在纯前端环境中解析使用 的能力的。 前端模板引擎要有良好的运行时调试能力 由于用户行为的不确定性、执行环境的不确定性、各种第三方脚本的影响等，前端很难做到完全的错误处理和跟踪，这也导致前端必然存在需要直接在线上排查问题的情况 而当问题出现在模板引擎这一层时，就需要模板引擎提供良好的调试能力 一般来说，编译后生成的函数的调试能力是弱于原先手动编写的模板片断的，因为自动生成的函数基本不具备可读性和可断点跟踪性 因此在这一点上，一个供前端使用的模板引擎应该具备在特定情况下从“执行编译后函数获取HTML”换回“解析原模板再执行函数获取HTML”的模式，即应该支持在两种模式间切换 或者更好地，一个强大的前端模板引擎编译生成的函数，可以使用Source Map或其它自定义的手段直接映射回原模板片段，不过现在并没有什么模板引擎实现了这一功能