前端js,如何在结构化与性能中做取舍。
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,带来了更好的性能提升。
这一路走来,前端的结构变得越来越复杂,但性能却并没有越来越差,在大型网站项目中,反而性能得到了提升。因为复杂项目中,难以维护的杂乱代码带来的性能损耗,有可能超过层级结构比较深所带来的损失。
结构化与性能的取舍,在实际开发中,如何进行呢?
实际开发中,其实是在大环境中的一个缩影。
在当前的前端开发技术背景下。结构化的问题往往交给框架来解决,项目结构化问题应按需求来构建。
- 如开发大型项目,则应首先对性能有所预期。性能要求低的部分可以采用通用框架,性能要求高的部分,可以采用更极端的技术方案。
- 如开发小型项目,则应在框架选择上有所取舍,舍弃复杂的架构往往更节约资源。
最后,如果在开发项目过程中,遇到了绕不开的性能问题,我的解决思路如下,可供借鉴:
- 首先,如果是代码质量问题导致的性能问题,应先优化代码质量。将问题从性能与架构的冲突,变为性能与编码能力的冲突。
- 如确实因架构导致的性能问题被识别出来以后,应首先考虑这样的性能需求是否应由前端来保证,是否可以由服务端辅助完成,或者业务是否设计合理。
- 最后,如以上两点还不能解决问题,那么在有限的范围内,可以采用其他框架或方案来解决原框架的性能瓶颈,或者可以期待下一次的项目升级与重构了。
总结
结构化与性能本身并不是完全对立冲突的两个方面。虽然他们二者互相影响,但随着个人计算机软硬件升级、v8引擎带来的性能提升,以及MVVM框架的日趋成熟,结构化代码组织如今越来越远离web开发的性能瓶颈区。
但不幸的是,性能问题还将在可预见的未来内,始终如影随形的伴随着每一位开发者。
前端js,如何在结构化与性能中做取舍。的更多相关文章
- 软工+C(5): 工具和结构化(重构中, part 1...)
// 上一篇:Alpha/Beta换人 // 下一篇:最近发展区/脚手架 目录: ** 0x01 讨论:工具/轮子 ** 0x02 讨论:结构/演进 ** 0x03 讨论:行为/活动 ** 0x04 ...
- [AI开发]零代码分析视频结构化类应用结构设计
视频结构化类应用涉及到的技术栈比较多,而且每种技术入门门槛都较高,比如视频接入存储.编解码.深度学习推理.rtmp流媒体等等.每个环节的水都非常深,单独拿出来可以写好几篇文章,如果没有个几年经验基本很 ...
- 自己DIY出来一个JSON结构化展示器
说来也巧,这个玩意,一直都想亲手写一个,因为一直用着各种网上提供的工具,觉得这个还是有些用途,毕竟,后面的实现思路和原理不是太复杂,就是对json的遍历,然后给予不同节点类型以不同的展现风格. 我这次 ...
- ElasticStack学习(九):深入ElasticSearch搜索之词项、全文本、结构化搜索及相关性算分
一.基于词项与全文的搜索 1.词项 Term(词项)是表达语意的最小单位,搜索和利用统计语言模型进行自然语言处理都需要处理Term. Term的使用说明: 1)Term Level Query:Ter ...
- 【ML】Predict and Constrain: Modeling Cardinality in Deep Structured Prediction -预测和约束:在深度结构化预测中建模基数
[论文标题]Predict and Constrain: Modeling Cardinality in Deep Structured Prediction (35th-ICML,PMLR) [ ...
- 工作中的Buff加成-结构化思考力:第一章:认识结构化思维及其作用
一:引言 为了更好的说明结构思考力,我们先来做几个小测试. PS:如果你能做到,请留言,因为我要和你交好友,因为你是人才啊,可以挖一挖,挖到我的公司中. 第一个测试:请在三秒内记住下列数字.数字顺序不 ...
- p2p gossip 结构化 非结构化
p2p P2P中文名字叫对等网络,网络中节点地位一致. QQ其实不算P2P,因为QQ利用了中央服务器. Hbase这样的分布式系统,因为有Hmaster节点,也不算是P2P网络: cas ...
- 只能用于文本与图像数据?No!看TabTransformer对结构化业务数据精准建模
作者:韩信子@ShowMeAI 深度学习实战系列:https://www.showmeai.tech/tutorials/42 TensorFlow 实战系列:https://www.showmeai ...
- 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 ...
随机推荐
- 发布兼容TS的JS库到nexus和npmjs
一. 前言 由于node以及绝大多数前端库都是用JavaScript(以下简称JS)语言实现,而Angular是用TypeScript(以下简称TS)实现,虽然TS是JS的超集,但是由于TS和JS对于 ...
- CSPS模拟 42
T3数位$dp$还没改完啊 哭了 T1 对$DAG$里所有点求他能到达的点的数量 考试时算了$bitset$内存扛不住,yy了个线段树合并上去 没有A不是因为被卡了,而是数组又开小了.. 我以为不能卡 ...
- 安全路径——最短路径树+dsu缩边
题目描述 思路 首先想到$dijkstra$跑完之后$build$一棵最短路径树.要找到每个节点i到根的满足要求的最短路,考虑把一些非树边加进去. 对于非树边$(u,v)$,因为节点i上方的边被占领, ...
- 护网杯web
首先进入网页后,观察到有sign up 点击sign up 进行注册 再点击sign in 进行登录 进入一个买辣条的界面,可以知道,5元可以买一包大辣条,多包大辣条可以换一包辣条之王,多包辣条之王可 ...
- mysql导入sql出错,无脑解决办法
找到my.cnf文件在[mysqld]的下面添加 sql-mode="STRICT_TRANS_TABLES,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTI ...
- ios遇到的坑
总结体会:很多ios兼容性问题都是由于body设置了height:100% ios中input输入不了 在ios中margin属性不起作用 设置html body的高度为百分比时,margin-bot ...
- 学习Java第一步:安装Intellij IDEA和JDK
注:其实真正学习一门新语言的第一步并不是安装开发工具,我是C#转JAVA,有一点编程经验了,所以可以直接跳过前面几步,直接上IDE. 1.下载IntelliJ IDEA [官网] http://www ...
- pat 1149 Dangerous Goods Packaging(25 分)
1149 Dangerous Goods Packaging(25 分) When shipping goods with containers, we have to be careful not ...
- Github相关知识
github的提交流程 mkdir 目录名 :创建一个空文件夹 mkdir webs webs代表创建的新文件名称 cd 目录名 :切换到文件夹 cd webs 切换到当前新建的目录下 ...
- 正则表达式 第五篇:C# 正则元字符
本文整理C#正则表达式的元字符,正则表达式是由字符构成的表达式,每个字符代表一个规则,表达式中的字符分为两种类型:普通字符和元字符.普通字符是指字面含义不变的字符,按照完全匹配的方式匹配文本,而元字符 ...