艺龙网前端开发自述：前端渲染优化经验

对于不断发展的web应用，性能的优化，用户的体验从来都没有间断过，如何逆水行舟，不进则退。随着通讯技术的高速发展，web应用在近几年快速增加及普及，已经成为人们必不可少的工具，充斥着生活的方方面面，商务，娱乐，旅游，工作。

随着用户规模的日益增大，web应用的内容和功能也变得越来越丰富，各大应用对于用户的体验，流量，内存，性能优化也越来越高，人们不仅仅要看到自己需要的内容，还对响应速度，动画的流畅性，浏览网页的等待时间都提出了非常大的要求。

在网页首屏优化上，我们尽量采用异步加载页面数据的方式来提升用户的流畅性，也增加了一些离线模板的技术规划，而在代码的底层组件，我们引入了一下新的方向，去减少用户点击事件之后对页面DOM节点的操作，从而提升用户体验。

我们希望slarkjs是一个简单的，通用的，易了解和使用的框架，而我们的组员也保持着平常心的心态去丰富我们的框架，我们希望slarkjs是很多初级的h5开发希望去了解的，去熟悉的，以下我会用很多非常白话文的概念思路去解析我们的框架组件，给一些对h5有兴趣，对slarkjs有兴趣的前端开发童靴去了解组件化的开发思路与框架的理念。

回到dom优化上，最开始我们打算是引用domdiff的理念，来进行数据对比，而这些数据对比完全是在js中去实现，然后精简之后来进行dom的操作。举个简单的例子，一个dom节点可能是这样的：

1. <ul>
2. <li>1</li>
3. <li>2</li>
4. <li>3</li>
5. <li>4</li>
6. </ul>
   

而我们想把它变成这样

1. <ul>
2. <li>1</li>
3. <li>2</li>
4. <li>3</li>
5. <li>5</li>
6. <li>6</li>
7. </ul>
   

正常情况我们只有两种方式，第一种，替换整个ul节点，第二种，将你想要变成的数据循环inner进去，这样我们就有了4次的删除和5次的添加，但是我们觉得这些dom操作太多了。

其实真实的情况，我们最需要把第四个li中的数据替换，并且在后面添加一个<li>6/li>就能达到我们需要的结果，我们需要一个组件来帮助我们对dom节点的操作进行分析。一般的domdiff应用都存在于大多数的聊天室，评论区，一些频繁的dom替换的场所，我们希望他是一个小型的，方便应用的，适合框架的一个小应用。

在开发期间，我们还花费了将近两周的时间对现在非常流行的react及react-native进行了详细的技术调研，我不得不说，react的开发效率是我目前所见最快速的框架，他的模块化开发思路，虚拟dom的理念都是我非常喜欢的一种方式，并且我们尝试了将它合并进slarkjs框架，开始我们只希望让它来负责view层的重绘工作，但是在实践中我们其实更希望它能负责更多的内容，可惜的是，react来web层面的使用，还有一定局限性，并且需要大量的开发时间来修改一些组件，很遗憾我们暂时停滞了这个项目的开发进度，但react-native在app上的开发，却是一个潜能无限的壮举，在之后的文章中，我们会持续的给大家带来slarkjs框架是如何吸收react-native并融入到app的开发。现在我们先回到domdiff的思路逻辑中。首先，我们在构建domdiff中，想法是很简单的，

1. 我们需要它来接收2个参数，1.现在页面上的节点，2.我们需要让它变成什么样子。

vardomdiff=function(oldid,newid){

vara1=document.getElementById(oldid);

vara2=document.getElementById(newid);

vardd=newdiffDOM();

dd.apply(a2,dd.diff(a2,a1));

};

vartdomdiff=function(oldid,newid){

&nbs

123下一页

文章题目：艺龙网前端开发自述：前端渲染优化经验
标题来源：https://www.cdcxhl.com/news27/85477.html

成都网站建设公司_创新互联，为您提供商城网站、定制网站、网站收录、App开发、外贸网站建设、移动网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联