前端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,带来了更好的性能提升。

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

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

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

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

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

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

总结

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

原文地址:https://www.cnblogs.com/yinzhida/p/10702220.html

时间: 2024-10-07 16:40:08

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

实验7 寻址方式在结构化数据访问中的应用

题目让我们按下图要求的格式: 直接上代码. 1 ;实验7 殉职方式在结构话数据访问中的应用 2 3 ;编程,将data段中的数据按题中给出图的格式写入到table段中,并计算21年中的人均收入(取整) 4 ;结果也按照题中图给出的格式保存在table段中. 5 ;程序如下 6 7 assume cs:codesg 8 9 data segment 10 db '1975','1976','1977','1978','1979','1980','1981','1982','1983' 11 db

汇编试验七:寻址方式在结构化数据访问中的应用

预备知识: (1)寻址方式 <汇编语言>P169 (2)div指令 被除数 dx + ax,除数 bx ,商 ax,dx 余数: (3)dd :双字数据 (4)dup :重复赋值指令

汇编语言: 实验七 寻址方式在结构化数据访问中的应用

assume cs:code,ds:data,ss:stackdata segmentdb '1975','1976','1977','1978','1979','1980','1981','1982','1983'db '1984','1985','1986','1987','1988','1989','1990','1991','1992'db '1993','1994','1995'dd 16,22,382,1356,2390,8000,16000,24486,50065,97479,14

文本结构化(信息抽取)技术调研与综述

文本结构化技术调研 1. 引言 文本数据一般由有序的段落.句子.单词文本流组成,而这种形式的文本通常是非结构化的,并不是结构化的表格数据,文本的特征也与噪声混杂在一起,很难直接提取出特征,也就没有办法将机器学习方法应用在原始的非结构化文本数据中.因此,我们需要一种文本结构化技术,能够自动化处理非结构化文本,并且在不损失重要信息的情况下,用结构化数据提取出该文本的主要信息. 出于不同的目的,一般采用信息抽取与特征工程的方式实现文本结构化技术,但是这两种方法在本质上属于不同类型的方法,信息抽取一般是

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

说来也巧,这个玩意,一直都想亲手写一个,因为一直用着各种网上提供的工具,觉得这个还是有些用途,毕竟,后面的实现思路和原理不是太复杂,就是对json的遍历,然后给予不同节点类型以不同的展现风格. 我这次,是出于将一个专利写清楚,自己构思了一个实现方案,且还能显示出当前的路径,具体的显示风格,依据自己的喜好,随便DIY吧. 写这个JSON展示器,其实有很多用处,不仅仅就是为了看一个json的结构化展示. 1. 更重要的是可以辅助用户和json数据进行交互,能够知道用户感兴趣的json字段是什么,可以

如何用 AI 实现视频结构化管理?

继图片之后,视频结构化成为了深度学习领域又一个热点.相比图片,视频内容无疑具有更大的复杂性.面对不同场景的视频结构化需求,需要采用什么策略才能取得最大化的效果? AI 视频结构化对于互联网.广电等行业的变革又有什么样的价值? 在 4 月 20 日 QCon 全球软件开发大会上,七牛云人工智能实验室首席架构师姚唐仁分享了在深度学习视频结构化的实践经验. 1. 人工视频摘要与 AI 视频结构化的优势 根据哈佛商学院的研究,视觉是人获取信息最主要的方式,占全部感官的 83%.因为通过图片和视频的载体,

前端Js框架汇总

一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto.关于Zepto认知我也是通过与一位腾讯朋友聊天的时候知道的,只作了些基础的了解. 2.SUI Mobile 地址:http://m.sui.taobao.org 描述:SUI Mobile 是一套基于 Framework7 开

Vue 浅谈前端js框架vue

Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vue1.0悄悄 的问世了,它的优雅,轻便也吸引了一部分用户,开始收到关注,16年中旬,VUE2.0问世,这个时候vue不管从性能上,还是从成本上都隐隐超过了react,火的一塌糊涂,这个时候,angular 开发团队也开发了angular2.0版本,并且更名为angular,吸收了react.vue的

前端Js框架汇总【转】

概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net core 1,mono,xamarin等等,但大多都还在狂吼的阶段.其实一直以来对技术的理解是技术服务于业务和产品,产品又在不同程度的推进着技术的演进. Web.无线.物联网.VR.PC从不同方向推进着技术的融合与微创新.程序员在不同业务场景下的角色互换.而随着node.js的出现语言的角色也在发生着转