js发展中的问题

随着前端web技术的发展,js要解决的问题也变得越来越多,越来越复杂。
解决更复杂的问题,需要更好的结构。 解决更复杂的问题,也需要更好的性能。
结构的优化在一定程度上会牺牲性能,同样的,性能的优化也有可能会破坏原有的结构。

一般化的例子

我们先来看看以前这些问题是如何(被)解决(妥协)的。

jquery vs 原生api

回到10年前,精通jquery是前端程序员的一个里程碑,没有人执着于原生api。原生api有更好的性能,jquery有更好的结构。但问题在于开发效率的提升,兼容性的提升,jquery结构化的收益大大超过了其对性能的一点点浪费。

再来看angular1 vs jquery

回到5年前,面试最喜欢问,你知道什么是脏值检测么?angular不仅带来了更复杂的结构,而且带来了更难理解的开发模式。但出乎意外的,jquery败下阵来。
angular的性能更差,兼容性也不如沉淀了多年的jquery。 可是,angular胜在了面对复杂问题时的解决能力、维护支出与开发速度。5年前,互联网正处于高速发展中,大型项目增长迅速,对开发资源的需求达到了顶峰。时间就是金钱,高效率就是时间。

react(vue) vs angular1

再来看两年前这场pk,随着MVVM的框架日渐成熟,angular1败下阵来。react借鉴了angular1的思想,vue同时借鉴了react和angular1的思想。jsx等模板语法带来了开发效率的提升。grunt,gulp,webpack等工具带来了工程化能力的提升。es6的逐步成熟也给开发者带来了更多的效率。这些都使前端的结构更加的复杂。但别忘了虚拟dom,带来了更好的性能提升。

这一路走来,前端的结构变得越来越复杂,但性能却并没有越来越差,在大型网站项目中,反而性能得到了提升。因为复杂项目中,难以维护的杂乱代码带来的性能损耗,有可能超过层级结构比较深所带来的损失。

结构化与性能的取舍,在实际开发中,如何进行呢?

实际开发中,其实是在大环境中的一个缩影。
在当前的前端开发技术背景下。结构化的问题往往交给框架来解决,项目结构化问题应按需求来构建。

  1. 如开发大型项目,则应首先对性能有所预期。性能要求低的部分可以采用通用框架,性能要求高的部分,可以采用更极端的技术方案。
  2. 如开发小型项目,则应在框架选择上有所取舍,舍弃复杂的架构往往更节约资源。

最后,如果在开发项目过程中,遇到了绕不开的性能问题,我的解决思路如下,可供借鉴:

  1. 首先,如果是代码质量问题导致的性能问题,应先优化代码质量。将问题从性能与架构的冲突,变为性能与编码能力的冲突。
  2. 如确实因架构导致的性能问题被识别出来以后,应首先考虑这样的性能需求是否应由前端来保证,是否可以由服务端辅助完成,或者业务是否设计合理。
  3. 最后,如以上两点还不能解决问题,那么在有限的范围内,可以采用其他框架或方案来解决原框架的性能瓶颈,或者可以期待下一次的项目升级与重构了。

总结

结构化与性能本身并不是完全对立冲突的两个方面。虽然他们二者互相影响,但随着个人计算机软硬件升级、v8引擎带来的性能提升,以及MVVM框架的日趋成熟,结构化代码组织如今越来越远离web开发的性能瓶颈区。
但不幸的是,性能问题还将在可预见的未来内,始终如影随形的伴随着每一位开发者。

前端js,如何在结构化与性能中做取舍。的更多相关文章

  1. 软工+C(5): 工具和结构化(重构中, part 1...)

    // 上一篇:Alpha/Beta换人 // 下一篇:最近发展区/脚手架 目录: ** 0x01 讨论:工具/轮子 ** 0x02 讨论:结构/演进 ** 0x03 讨论:行为/活动 ** 0x04 ...

  2. [AI开发]零代码分析视频结构化类应用结构设计

    视频结构化类应用涉及到的技术栈比较多,而且每种技术入门门槛都较高,比如视频接入存储.编解码.深度学习推理.rtmp流媒体等等.每个环节的水都非常深,单独拿出来可以写好几篇文章,如果没有个几年经验基本很 ...

  3. 自己DIY出来一个JSON结构化展示器

    说来也巧,这个玩意,一直都想亲手写一个,因为一直用着各种网上提供的工具,觉得这个还是有些用途,毕竟,后面的实现思路和原理不是太复杂,就是对json的遍历,然后给予不同节点类型以不同的展现风格. 我这次 ...

  4. ElasticStack学习(九):深入ElasticSearch搜索之词项、全文本、结构化搜索及相关性算分

    一.基于词项与全文的搜索 1.词项 Term(词项)是表达语意的最小单位,搜索和利用统计语言模型进行自然语言处理都需要处理Term. Term的使用说明: 1)Term Level Query:Ter ...

  5. 【ML】Predict and Constrain: Modeling Cardinality in Deep Structured Prediction -预测和约束:在深度结构化预测中建模基数

    [论文标题]Predict and Constrain: Modeling Cardinality in Deep Structured Prediction   (35th-ICML,PMLR) [ ...

  6. 工作中的Buff加成-结构化思考力:第一章:认识结构化思维及其作用

    一:引言 为了更好的说明结构思考力,我们先来做几个小测试. PS:如果你能做到,请留言,因为我要和你交好友,因为你是人才啊,可以挖一挖,挖到我的公司中. 第一个测试:请在三秒内记住下列数字.数字顺序不 ...

  7. p2p gossip 结构化 非结构化

    p2p P2P中文名字叫对等网络,网络中节点地位一致.    QQ其实不算P2P,因为QQ利用了中央服务器.   Hbase这样的分布式系统,因为有Hmaster节点,也不算是P2P网络:   cas ...

  8. 只能用于文本与图像数据?No!看TabTransformer对结构化业务数据精准建模

    作者:韩信子@ShowMeAI 深度学习实战系列:https://www.showmeai.tech/tutorials/42 TensorFlow 实战系列:https://www.showmeai ...

  9. XHTML 结构化:使用 XHTML 重构网站 分类: C1_HTML/JS/JQUERY 2014-07-31 15:58 249人阅读 评论(0) 收藏

    http://www.w3school.com.cn/xhtml/xhtml_structural_01.asp 我们曾经为本节撰写的标题是:"XHTML : 简单的规则,容易的方针.&qu ...

随机推荐

  1. python实现清屏

    往常都是用os.system("cls")清屏,但是发现每次执行完这个命令后都会出现一个空白字符 尝试了一下午,网上也没解决的办法 最后: os.system("cls& ...

  2. nginx篇高级用法之基于TCP/UDP的四层调度

    nginx 从1.9版本开始支持基于TCP/UDP的四层调度,在编译nginx时使用--with-stream开启该模块 支持TCP/UDP调度时,支持给所有的软件做调度器,例如:nfs smb ft ...

  3. 赤壁情:dp

    首先这道题用到的3个新关键字大概讲一下: (我刚学会仅仅会瞎搞做题,欢迎大神补充) static:声明一个变量并清空.(不知道用不用时间,求解答) 具体用法:static 变量类型 变量名.如:sta ...

  4. PHP压缩文件夹的方法

    PHP压缩文件夹的方法<pre> public function addFileToZip($path, $zip) { $handler = opendir($path); //打开当前 ...

  5. cocos creator 3D | 蚂蚁庄园运动会星星球

    上一篇文章写了一个简易版的蚂蚁庄园登山赛,有小伙伴留言说想要看星星球的,那么就写起来吧! 效果预览 配置环境 cocos creator 3d 1.0.0 小球点击 3d里节点无法用 cc.Node. ...

  6. java property 配置文件管理工具框架,避免写入 property 乱序

    property property 是 java 实现的 property 框架. 特点 优雅地进行属性文件的读取和更新 写入属性文件后属性不乱序 灵活定义编码信息 使用 OO 的方式操作 prope ...

  7. paper sharing :学习特征演化的数据流

    特征演化的数据流 数据流学习是近年来机器学习与数据挖掘领域的一个热门的研究方向,数据流的场景和静态数据集的场景最大的一个特点就是数据会发生演化,关于演化数据流的研究大多集中于概念漂移检测(有监督学习) ...

  8. Flex调用本地文件分析

    最近在用Flex做一个相册的功能,因为图片数据很多,所以想调用本地文件的方式做. 但是B/S的缘故,很多安全上的限制给我造成了不小的麻烦,把我这个小菜鸟弄的晕头转向. 第一,刚开始,查了很多资料发现都 ...

  9. 2019-9-10:渗透测试,基础学习,nmap扫描命令,php基本语法学习,笔记

    nmap参数-sT,使用tcp全连接的方式 ,扫描过程需要三次握手,建立链接,则说明端口开放,扫描速度慢-sS,使用syn的数据包去检测,接收到ACK说明端口开放-sN,null扫描,发出去的数据包不 ...

  10. Java大神带你领略queue的风采

    作为数据结构中比较常见的类型,你足够了解队列(queue)吗?从今天开始,我将为你讲解关于队列(queue)的一切,包括概念.类型和具体使用方法,如果你对此足够感兴趣,赶快来加入我们,我将同你一起探索 ...