企业官网建设流程全解析

p2p网站建设费用,网站页面描述怎么写,源码下载网站源码,网站开发进度设计本文已收录在Github#xff0c;关注我#xff0c;紧跟本系列专栏文章#xff0c;咱们下篇再续#xff01; #x1f680; 魔都架构师 | 全网30W技术追随者#x1f527; 大厂分布式系统/数据中台实战专家#x1f3c6; 主导交易系统百万级流量调优 车联网平台架构关注我紧跟本系列专栏文章咱们下篇再续 魔都架构师 | 全网30W技术追随者 大厂分布式系统/数据中台实战专家 主导交易系统百万级流量调优 车联网平台架构 AIGC应用开发先行者 | 区块链落地实践者 以技术驱动创新我们的征途是改变世界 实战干货编程严选网0 前言熟悉历史方可明白 Vue 在前端框架地位。对 Vue 更精准定位知道为啥选择 Vue 框架以及优势和真正价值。前端网页在设计模式、渲染等变化而变化背后都可放到前端框架的演变历史来解释。1 石器时代前端发展史1990 年第一个 Web 浏览器诞生了。这是前端这个技术的起点代表这一年它出生了1994 年网景公司发布第一个商业浏览器 Navigator1995 年网景工程师 Brendan Eich 用 10 天时间蹭Java热度设计js同年微软发布了 IE 浏览器掀起浏览器大战2002年IE在浏览器大战胜IE6占有率超96%前端发展史直观显示在前端网页的演变史。90年代受限网速网页都是静态显示单一前端工作大部分只是让美工切图和写HTMLCSS。因此1990s的前端处萌发期前端工程师工种未明确出现。后来后端越来越复杂开始分层。就像小公司大家啥都干但公司规模大要分部门职责明确代码也从揉在一起发展到MVC负责不同功能。这就是后端MVC模式的盛行让我们可以在模板里写上要展现的数据。以前的代码都是所有内容写在一起现在就会用Model负责数据。后端渲染页面之前会把数据库的数据显示在前端。这个时候除了写前端代码必备的HTML、CSS和简单的JavaScript动效我们也开始用到了JSP和Smarty我们会写出如下这种代码!DOCTYPEhtmlhtmlheadmetacharsetutf-8titlesmarty test1/title/headbody它的名字叫{$name}/body/html上述代码写出来的页面就可以直接显示后端数据库里的数据了这也就是所谓的动态网页。动态页面使得前端本身的丰富程度大大提升。这一下子迎来了整个互联网开发的繁荣时期但这种模式下的任何数据更新都需要刷新整个页面并且在带宽不足的年代这样做会耗费不少加载网页的时间。所以这个时代的网页主要还是以显示数据和简单的特效为主比如当时众多的门户网站也都没有太多的用户交互主要就是显示后端存储的新闻。直到2004年Google发布了Gmail用户可以在不刷新页面的情况下进行复杂的交互之后Ajax逐渐成为网页开发的技术标准也不断地被应用于各种网站。Ajax这个技术让我们可以异步的获取数据并且刷新页面从此前端不再受限于后端的模板这也宣告了Web2.0时代正式到来。至此前端工程师也正式作为一个独立工种出现。2 铁器时代在Gmail诞生后虽然依然有浏览器的混战和兼容性问题如绑定事件不同浏览器就要写不同代码但大家意识到前端也可以做出复杂应用。而jQuery的出现迅速风靡全球一个$走天下学会jQuery就等同于学会了前端算是前端车同轴的时代。在这之后前端的具体开发不再被JavaScript的兼容性问题所困扰。那个时候 jQueryBootstrap一把梭成为了前端开发领域的主流技术前端代码内嵌在后端的项目中写完直接发布通篇都是如下的代码$(#alert-btn).on(click,function(){$(#app .input).val(hi)})那个时候写代码就是找到某个元素进行DOM操作特别像铁器时代的拼刺刀随着前端项目规模的逐渐提升前端也需要规模化的时候在2009年AngularJS和Node.js的诞生也宣告前端工业革命的到来。3 工业时代AngularJS的诞生引领了前端MVVM模式的潮流Node.js的诞生让前端有了入侵后端的能力也加速了前端工程化的诞生。现在前端三大框架Angular、React、Vue 的发展主线也就是从这里开始的。MVVM就是前端场景下把Controller变成View-Model层作为Model和View的桥梁Model数据层和View视图层交给View-Model来同步。前端三大框架前端MVVM模式下不同框架的目标都是一致的就是利用数据驱动页面但是怎么处理数据的变化各个框架走出了不同的路线。页面模块数据模块驱动页面数据页面这些框架要回答的核心问题数据发生变化后咋通知页面更新。各大框架在该步骤Angular 1最老套的脏检查对数据变化的检查上遵循每次用户交互时都检查一次数据是否变化有变化就更新DOM。简单粗暴算是数据驱动页面早期实现一经推出迅速占领MVVM市场后面Angular团队完全抛弃Angular 1搞个全新框架还叫Angular引入TS、RxJS等新内容虽然这些设计很优秀但不支持向前兼容抛弃老用户。这也是Angular这优秀框架在国内没大面积推广原因Vue 1解决方案是响应式初始化时Watcher监听数据的每个属性这样数据变化时精确知道数据的哪个key变去针对性修改对应DOM。过程解构左侧是实际网页内容我们在网页用{{}}渲染一个变量Vue 1就在内容里保存一个监听器监控该变量即Watcher数据有变化watcher会收到通知去更新网页。通俗来说若将网页数据看成你管理的员工普通数据就是那种每次你都需要找到他告诉他要咋做的人响应式数据就是他本身有任何变化都会主动给你发日报告诉你的积极员工。React团队提出不同于Angular、Vue的解决方案页面初始化时在浏览器DOM之上搞了个虚拟DOM用一个js对象描述整个DOM树。方便通过虚拟DOM计算变化的数据去进行精确修改。React中的一段代码dividapppclassitemItem1/pdivclassitemItem2/div/divReact中这一段HTML被映射成一个js对象。这个对象就像数据和实际DOM的一个缓存层通过管理这个对象的变化来减少对实际DOM的操作。这种形式不仅让性能有很好保障还多了用JSON描述网页的工具并让虚拟DOM技术脱离Web的限制。因为积累这么多优势虚拟DOM在小程序客户端等跨端领域大放异彩。虚拟DOM在运行时就是这么一个对象{tag:div,attrs:{id:app},children:[{tag:p,attrs:{className:item},children:[Item1]},{tag:div,attrs:{className:item},children:[Item2]}]}这个对象完整地描述了DOM的树形结构这样数据有变化的时候我们生成一份新的虚拟DOM数据然后再对之前的虚拟DOM进行计算算出需要修改的DOM再去页面进行操作。浏览器操作DOM一直都是性能杀手而虚拟DOM的Diff的逻辑又能确保尽可能少操作DOM这也是虚拟DOM驱动框架性能一直优秀的原因之一。Vue V.S React 框架数据变化后通知页面更新的方式Vue主动告诉你修改哪些数据React只能通过新老数据计算Diff得知数据变化俩方案都迅速获得高占有率但都有性能瓶颈Vue核心是“响应式”即数据变化后主动通知我们。响应式数据新建Watcher监听本身较损耗性能项目大了每个数据都有个watcher会影响性能React的虚拟DOM的Diff计算逻辑如虚拟DOM树过于庞大使计算时间大于16.6ms可能造成性能卡顿为解决性能瓶颈 走了不同道路React为突破性能瓶颈借鉴os时间分片概念引入Fiber架构。把整个虚拟DOM树微观化变成链表然后利用浏览器的空闲时间计算Diff。一旦浏览器有需求可将没计算完的任务放在一旁把主进程控制权还给浏览器等待浏览器下次空闲。这种架构虽未减少运算量但巧妙利用空闲实现计算解决卡顿左侧是树形结构树形结构Diff很难中断右侧把树形结构改造成链表遍历严格按子元素-兄弟元素-父元素随时可中断和恢复Diff的计算过程。为方便理解计算Diff两个虚线之间是浏览器的一帧高性能动画要求60fps每帧就是16.6ms在这16.6毫秒浏览器自己的渲染更新任务执行后会有一部分空闲时间这段时间就计算Diff。等下一帧任务来就把控制权还给浏览器让它继续去更新和渲染等待空闲时间再继续计算这就不会导致卡顿。Vue 1问题在于响应式数据过多导致内存占用过多。所以 Vue 2 大胆引入虚拟DOM解决响应式数据过多。该解决方案用虚拟DOM解决响应式数据过多的内存占用问题良好规避React中虚拟DOM的问题给 Vue 带来跨端能力响应式数据是主动推送变化虚拟DOM是被动计算数据的Diff一个推一个拉被 Vue 2 很好融合在一起采用方式就是组件级划分。对于Vue 2组件之间变化可通过响应式来通知更新。组件内部的数据变化则通过虚拟DOM去更新页面。这就把响应式的监听器控制在组件级而虚拟DOM的量级也控制在了组件的大小。左侧是一个个组件组件内部没有Watcher监听器而是通过虚拟DOM来更新每个组件对应一个监听器大大减小监听器的数量除了响应式和虚拟DOM维度Vue和React还有一些理念和路线的不同模板书写也走出template、JSX两个路线React只有JSX最终JSX都在Compiler层即工程化那里编译成JS执行所以React最终拥有全部JS的动态性也导致React API一直很少仅state、hooks、Component几个概念主要都是js本身的语法和特性Vue默认是template语法限死如v-if、v-for。有了这些写法规矩可在上线前做很多优化。Vue 3优在虚拟DOM的静态标记做到极致让静态部分越过虚拟DOM的计算真正做到按需更新很好提高性能模板的书写除了Vue、React的template、JSX路线还出现Svelte框架没有虚拟DOM的库直接把模板编译成原生DOM几乎没有Runtime所有逻辑都在Compiler层优化算是另外一个极致。4 Vue需要Fiber吗Vue的更新机制性能已非常高效尤其Vue 3通过编译器优化进一步减少不必要的虚拟DOM更新。但Vue没有直接采用类似React Fiber架构因为Vue设计哲学倾向在组件级进行优化而Fiber更适用于大规模、长耗时的异步更新。Vue不需要像React那样处理复杂的任务调度问题因此在当前的架构下Vue并不急需引入Fiber。5 总结了解了前端MVVM框架发展的历史和方向后相信你脑海里已经建立起了一个前端框架发展的地图每个框架都在探索自己的路线。后面还会涌现出更多优秀的框架我们到时候只需要把那个框架纳入到这个地图中去理解这样你很快就明白这个框架做了什么而这也是很多前端大神能够快速学习一个新框架的主要原因。浏览器方便显示文本和图片的内容和样式JavaScript让网页动了Gmail宣告前端也可用Ajax异步加载技术来进行复杂网页的开发前端工程师正式出现。随着浏览器厂商的混战各个浏览器都有自己的特色jQuery框架的出现统一了写法解决了那个时代最棘手的前端问题兼容性极大提高了开发者的效率。Angular 1的诞生多了一套开发模式数据驱动页面。不再需要使用jQuery去寻找DOM而是只关注数据的来源和修改这也就是现在的前端时代。Vue、React、Angular和Svelte等框架都是在数据驱动页面这个场景下涌现的框架。明白前端的这些框架的风格和特点以及 Vue 在这些框架中的地位Vue 3 在Vue 2 的基础之上做了全面的升级在性能、扩展性和包的大小上Vue3都有质的飞跃。