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. MongoDB的基础命令

    MongoDB的介绍 MongoDB: 是一个基于bson(二进制json)的NoSQL数据库 MongoDB的三要素: 数据库: 类似于MYSQL的数据库 集合: 类似于MYSQL的表 文档: 类似 ...

  2. windows下如何安装Python虚拟环境

    1.前言 由于Python的版本众多,还有Python2和Python3的争论,因此有些软件包或第三方库就容易出现版本不兼容的问题. 通过 virtualenv 这个工具,就可以构建一系列虚拟的Pyt ...

  3. Python3安装目录介绍

    目录组织方式 关于如何组织一个较好的Python工程目录结构,已经有一些得到了共识的目录结构. 假设你的项目名为foo, 我比较建议的最方便快捷目录结构这样就足够了: Foo/ |-- bin/ | ...

  4. 羞,Java 字符串拼接竟然有这么多姿势

    二哥,我今年大二,看你分享的<阿里巴巴 Java 开发手册>上有一段内容说:"循环体内,拼接字符串最好使用 StringBuilder 的 append 方法,而不是 + 号操作 ...

  5. Chrome DevTools调试微信X5内核页面

    起因:公司最近在做一个双十一的H5宣传页面,大概需求就是模拟微信视频来电,接通视频后弹出某某明星的视频巴拉巴拉@#%!!!~.看到需求我的第一反应是So easy,正当我码代码码的开心的时候,难题他来 ...

  6. inux下vi命令大全

    分类: LINUX 进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文 ...

  7. 开发板,pc,虚拟机三者如何互相ping通

    1 安装虚拟机时,主机和虚拟机必须是桥接网卡,保证了ip 同一:192,168,1,xx 2 打开虚拟机之前,先把pc机的无线网卡禁用掉只能使用本地连接,pc通过网线连接上网,打开虚拟机,命令行输入: ...

  8. python——namedtuple

    namedtuple()概念理解分享 我们都知道元组tuple的概念,tuple是一个定义之后就不能够更改的可迭代对象,namedtuple作为tuple的兄弟具有同样的属性,一旦定义就不可以更改.但 ...

  9. 使用vue-cli搭建项目开发环境

    一.前言 本篇文章主要是使用vue-cli搭建一个简单的vue项目,这个项目在其他文章中作为代码演示的环境会一直使用. 注意:默认大家的电脑已经安装nodejs,所以这里不总结nodejs的安装. 二 ...

  10. SpringBoot系列之@Conditional注解用法简介

    SpringBoot系列之@Conditional注解用法简介 引用Spring官方文档的说法介绍一下@Conditional注解:Spring5.0.15版本@Conditional注解官方文档 @ ...