| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
82112714
6年前发布

Nerv - 京东高性能前端框架

   <p>Nerv 是一款由京东凹凸实验室打造的类 React 前端框架。目前已广泛运用在 <a href="/misc/goto?guid=4959757516091851729" rel="nofollow,noindex">京东商城</a> (JD.COM)核心业务及 <a href="/misc/goto?guid=4959757516180491426" rel="nofollow,noindex">TOPLIFE</a> 全站。Nerv 基于React标准,使用 Virtual Dom 技术,拥有和 React 一致的 API 与生命周期,如果你已经对 React 使用非常熟悉,那么使用 Nerv 开发对你来说绝对是零学习成本。</p>    <p>与此同时,相比于 React 以及市面其他同类型框架,Nerv 更具体积轻量,性能高效的特点。并且,它符合当下国情,可以完美兼容 IE8 及以上浏览器。</p>    <ul>     <li>官网: <a href="/misc/goto?guid=4959757516273958203" rel="nofollow,noindex">https://nerv.aotu.io/</a></li>     <li>文档: <a href="/misc/goto?guid=4959757516363148354" rel="nofollow,noindex">https://nervjs.github.io/docs/</a></li>     <li>GitHub: <a href="/misc/goto?guid=4959757516448002377" rel="nofollow,noindex">https://github.com/NervJS/nerv</a></li>    </ul>    <h2>特性</h2>    <ul>     <li> <p>更小的体积:</p> <p>Gzip 后仅有9k,不到 React 三分之一的体积,低性能设备也能高速地加载并解析执行。</p> </li>     <li> <p>更高的性能:</p> <p>高效、同步的 diff 算法和诸多优化策略使得 Nerv 成为性能最高的前端框架之一。</p> </li>     <li> <p>完备的生态:</p> <p>无需 nerv-compat,只需要在稍稍设置就能享受整个 React 生态的共同成果。</p> </li>     <li> <p>更一致的渲染:</p> <p>不仅在浏览器上能高效地渲染,在服务器上 Nerv 同样能高效地运行。</p> </li>     <li> <p>更优的兼容:</p> <p>和大多数现代框架不同,Nerv 将继续保持对 IE8 的兼容。</p> </li>     <li> <p>更具说服力的案例:</p> <p>不管是京东首页的高流量,还是 Toplife 的复杂业务,Nerv 都经受住了来自于真实业务的考验。</p> </li>    </ul>    <h2>性能</h2>    <p>在 Nerv 开发过程中,我们针对虚拟 Dom 算法做了一次升级,将并行的虚拟 Dom diff 过程替换成同步的,边 diff 边 patch ,这样大幅度提升了虚拟 Dom 更新的速度。同时我们还对diff算法进行了探索升级,参照目前市面上最快的虚拟 Dom 算法对我们的代码进行了改造。</p>    <p>经过重构升级后,我们的框架性能大幅提升,如下可见。</p>    <p><img src="https://simg.open-open.com/show/cf58b4522086465604fa1576914856de.jpg"></p>    <p>更多性能数据详见官网。</p>    <h2>项目背景</h2>    <p>是的,我们又造了一个轮子,也是一次抛离传统开发模式的技术革新。同行们或许有疑问,目前市面上已经有非常多的同类型技术框架,为什么我们还要不厌其烦地打造一个呢?这当然不是在做无用功。</p>    <p>日常开发中,相对于 Vue ,我们更倾向于选择 React 模式作为我们的开发标准,因为 React 天生组件化且函数式编程的方式,更加灵活且便于维护。</p>    <p>然而,React 仍然有一些不能满足我们需求的地方:</p>    <ul>     <li>IE8 浏览器兼容性:当前环境所限,即便很不情愿,我们仍然要支持 IE8。</li>     <li>体积:React 大概 130kb 的体积。在低网速 / 低版本浏览器 / 低配置设备的加载速度和解析速度都不能让我们满意。</li>     <li>性能:React 的 Virtual Dom 算法(React 自己叫 Reconciler)并没有做太多的优化。</li>    </ul>    <p>而我们的新轮子 —— Nerv,它完全能提供上述 React 的所有优点,并且它也能完全满足我们自己的需求:更好的兼容性、更小的体积、更高的性能。</p>    <h2>安装</h2>    <p>推荐使用 npm 的方式进行开发,享受 Node 生态圈和 Webpack 工具链带来的便利。</p>    <pre>  <code class="language-javascript">npm install nervjs --save  </code></pre>    <h2>简单示例</h2>    <p>下面是一个计时器的例子。</p>    <pre>  <code class="language-javascript">import Nerv from 'nervjs'    class Counter extends Nerv.Component {    setTime = () => {      const date = new Date()      const year = date.getFullYear()      const month = date.getMonth() + 1      const day = date.getDay()      const hour = date.getHours()      const minute = date.getMinutes()      const sec = date.getSeconds()      this.setState({        year,        month,        day,        hour,        minute,        sec      })    }      componentWillMount () {      this.setTime()    }      componentWillUnmount () {      clearInterval(this.interval)    }      componentDidMount () {      this.interval = setInterval(this.setTime, 1000)    }      componentWillReceiveProps () {      this.setTime()    }      render () {      const { year, month, day, hour, minute, sec } = this.state      return (        <div className='counter'>          <span>The time is</span>{year}-{month}-{day} {hour}:{minute}:{sec}        </div>      )    }  }    export default Counter  </code></pre>    <p>更多详细例子可阅读文档 <a href="/misc/goto?guid=4959757516363148354" rel="nofollow,noindex">NervJs</a> 了解。</p>    <p> </p>    <p>来自:https://aotu.io/notes/2018/03/22/nerv/</p>    <p> </p>    
 本文由用户 82112714 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1521775269147.html
高性能