深圳0755-83589234 13360505664 业务部 设计部
分享:前端渲染优化经验
来源:专业网站建设 专业网站制作 专业网站设计   发布时间:2015-12-15   浏览量:1832 次

 

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

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

回到dom优化上,最开始功成网络科技打算是引用domdiff的理念,来进行数据对比,而这些数据对比完全是在js中去实现,然后精简之后来进行dom的操作。

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

一般的domdiff应用都存在于大多数的聊天室,评论区,一些频繁的dom替换的场所,我们希望他是一个小型的,方便应用的,适合框架的一个小应用。

react的开发效率是专业网站设计公司目前所见最快速的框架,他的模块化开发思路,虚拟dom的理念都是我非常喜欢的一种方式,并且功成网络尝试了将它合并进slarkjs框架,开始我们只希望让它来负责view层的重绘工作,但是在实践中我们其实更希望它能负责更多的内容,可惜的是,react来web层面的使用,还有一定局限性,并且需要大量的开发时间来修改一些组件,但react-native在app上的开发,却是一个潜能无限的壮举,首先,我们在构建domdiff中,想法是很简单的,

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

2.    我们需要它来对2个参数进行数据对比,并放回一个list,里面包含最少量级的dom操作

3.    去实现list 

从开发的角度来讲,1,3都非常好实现,而第二步,会让大多数的前端开发觉得头疼,这时候我们需要介绍两个很容易被遗忘,并且不会经常用到的属性nodeTpye和childNodes,其实JS有很多属性我们是很少会用到或者说,在我们的业务开发中和技术实现中很少去涉及的,相对来说,这也影响了我们对更深入的技术开发的方向,所以很多时候,我们提倡去看一些开发大拿的代码,其实是去看他们都用到了哪些属性,他们的开发逻辑思维,而并不是去copy他们的代码。

NodeType,它会让我们获得body元素的节点类型。说得简单一些,就是让我们知道当前节点是元素,属性,文本内容等等

ChildNodes会让我们获得body元素的子节点集合,以NodeList对象。简单解释就是返回一个list,里面是当前节点下所有的子节点,包括class,文本,select,option等等。

之后就很好去分析我们的构想了,通过NodeType去获取节点并判断节点属性,当然还要去判断当前页面的节点是否唯一,然后通过ChildNodes去对比节点下属性之间的差异,并且需要增加一些属性作为标记,比如判断当前是否应该修改,修改的顺序等等。

这样的方式,减少了页面对dom的操作次数,提升页面的加载速率和二次加载速率,但是也是有一些坑的,比如:如果页面dom修改量巨大,在循环中会浪费非常多的时间去循环判断重复项,可能会比单独替换整体dom节点花费更多的时间,所以在domdiff中,需要增加一些判断,去适应大多数的方式。

专业网站建设在类似的服务机构上使用电子邮件营销,原因同前。尽管电子杂志广告的费用相当低,但使用诸如此类的选择加入服务仍然非常昂贵。

 

文章内容纯属【深圳网站制作公司】功成网络观点,转载请注明来源:http://www.gc711.com/