精华内容
下载资源
问答
  • 互联网前端技术架构
    万次阅读 多人点赞
    2020-06-14 15:17:55

    《前端技术架构与工程》之性能

    前言:

    《前端技术架构与工程》这本书真的越看越有味。目前写了部分这本书的笔记,共分为三部分做笔记,已写了两篇如下。

    《前端技术架构与工程》初次笔记

    《前端技术架构与工程》之编程语言

    今天准备写技术架构部分(编程语言、技术规范、组件化、前后端分离、性能)中的性能部分。

    初次笔记让我从架构师的角度认识前端技术栈,编程语言笔记让我对前端三大件有了新的理解。

    虽然技术规范、组件化、前后端分离里面的知识也重要,但是我这三部分都要了初步了解,勉强够用。唯一性能这一块没有去深入了解,而性能这一块又挺重要的。于是今天特意先做一下性能这一块的笔记。结合《前端技术架构与工程》的第六章以及前端学习梳理 的性能优化部分进行展开。

    我的笔记只是二手资料,详情请自行找资源。

    性能

    性能是衡量软件架构最基本也是最核心的直播之一。在前端领域,HTML5新增的web worker可实现多线程和并行计算以提高运算性能;CSS3的transform 3D借助GPU加速提高动画流畅度;Node.js得益于V8引擎优异的性能表现而普及。互联网产品,尤其是TOC产品,性能是影响用户体验的核心因素之一。了解性能的优化是有必要的。

    在以用户为中心的互联网时代,优秀的用户体验的web应用抢占市场的重要武器,而性能的决定用户体验的核心。加载速度快能够给用户良好的第一印象,流畅的交互是支持功能最具象的要素。

    • 在加载性能上,网络架构层是优化宗旨是减少延迟以提高数据获取的速度,异步script能够减少JavaScript代码对渲染的阻塞从而令HTML文档尽快渲染;
    • 在应用执行期间,熟知浏览器GC策略有助于编写对内存友好的代码,可避免因内存泄漏导致的应用程序交互卡顿甚至死机的现象。

    在《前端技术架构与工程》的性能部分主要从性能评估模型、从URL到图形、内存管理、极限运算性能这四部分进行讲述。

    • 在性能评估模型中:讲性能指标;
    • 从URL到图形:讲如何在加载阶段和可交互阶段优化性能,方法是获取数据和渲染HTML文档;
    • 内存管理:讲在浏览器有限的内存配额下如何优化代码以防止内存泄漏;
    • 极限运算性能:将在大数据处理的项目如何发挥浏览器的极限运算性能;

    性能评估模型

    制定性能评估模板最基本的原则是:对客户端场景参数(设备、浏览器、网络)赋予固定的值,使得应用限定在一致的客户端场景中,然后再进行对比。

    web应用程序的生命周期分两个阶段:一是加载阶段(从输入URL到显示网页的阶段),二是可交互阶段。

    性能评估(贯穿这本书的基本原则,技术服务于业务)分为:加载性能、动态性能、业务性能;

    加载阶段

    加载阶段的性能被称为加载性能。优化加载性能可细分为两个方向:一是从视觉角度提高网站内容的渲染速度,对应白屏时间和首屏时间两项指标;二是从交互角度缩短打开网站到可交互之间的时间间隔,对应可交互节点指标;在这本书第二章将预渲染的时候就有白屏的优化方案。

    可交互阶段

    加载结束,网站进入可交互阶段,由于可交互是动态的,故此阶段的性能定义为动态性能。优化动态性能也有两个方向:一是反馈速度,如新加载内容的加载;二是动画帧率,不过这个不做深入了解,目前占个坑;

    业务性能

    业务性能单独挑出来讲,因为技术服务于商业,商业的优先级远高于技术。在加载阶段,业务性能指标有两个:首次有效绘制和广告可视节点;在可交互阶段,业务性能指标有关键路径渲染。

    从URL到图形

    谈到网页性能优化就不可避免需要了解从URL到页面的具体过程。这个过程不仅和加载相关也和交互相关。学习前端不仅需要学习HTML、CSS、JavaScript,还需要对浏览器的实现过程熟悉,虽然它不能直接提高代码的质量和开发的效率,但是能为方案设计提高坚实的理论基础。

    浏览器的大致架构分为三层:操作系统层、内核层、应用层;

    • 应用层:包含一些可视化的交互模块,如书签管理、窗口管理等;以及一些不可见的数据管理模块,如历史记录等;
    • 操作系统层:提供浏览器所需的系统API,如多线程、文件I/O等;
    • 内核层:浏览器的核心,包括两个部分,一是渲染引擎,包括HTML、CSS、SVG的解释器和JavaScript引擎,以及布局、绘制相关的模块;二是相对底层的功能模块集合,如网络模块、图形库、存储、多媒体解码器;

    其中内核层是优化web应用性能的主要突破点,无论加载性能还是动态性能,其中的关键点就在于网络方面、渲染方面、运算方面;

    浏览器打开URL的完整流程依次是:当前文档卸载、重定向处理、缓存判断、DNS查询、建立TCP连接、HTTP请求/响应处理、HTML文档解析。在这过程中,截止至开始渲染前,浏览器的所有操作实质上就是尝试获取URL对应的信息,这一部分可以定义为Fetch阶段;接收到HTML文档的HTTP响应后,浏览器开始解析和渲染工作,这一阶段可以定义为Render阶段。在Fetch阶段的时间消耗主要取决于网络环境,不受前端代码的影响;在Render阶段的时间消耗受网络环境和前端逻辑代码的双重影响。

    网络

    Fetch阶段。流程为当前文档卸载、重定向处理、缓存判断、DNS查询、建立TCP连接、HTTP请求/响应处理。

    • 当前文档卸载:如果当前为空白页则无此操作;
    • 重定向处理:浏览器在处理重定向上的时间消耗非常大,现实中应当尽量避免。
    • 缓存判断:fetch start。如果有缓存就直接返回缓存数据,没有就继续请求。
    • DNS:DNS server。绝大多数浏览器都有DNS缓存管理功能,可以节省一部分时间。
    • TCP、HTTP请求/响应:web server。获得域名对应的IP后,浏览器便尝试与Web服务器建立TCP连接,成功后随即发生HTTP请求,收到响应数据后便进入Render阶段。

    在上述流程中不难看出,影响耗时的几个重要因素。

    • 缓存,应用缓存和DNS缓存;
    • DNS查询耗时。DNS查询请求优先使用UDP协议,时间消耗非常小;
    • 建立TCP连接的三次握手和慢启动好事。TCP慢启动是一种为了防止阻塞崩溃的安全机制,但是很耗时。
    • 浏览器发出HTTP请求和服务器处理响应数据的耗时。
    • 浏览器下载HTTP响应数据的耗时。这一项取决于网络带宽和URL对应资源的大小。

    为了优化这些耗时。有两个思路。一个是减少RTT的总数量。一个是缩短RTT的时长。减少RTT的总数量的方法有持久连接、并行请求、HTTP combo;缩短RTT的时长的方法是CDN技术。

    此外还有HTTP2.0,但是难以普及,一方面浏览器的兼容性不理想,另一方面是服务器迁移成本太高。所以针对网络的优化策略仍然面向HTTP1.1。其优化策略是

    • 整体架构上:使用持久连接、使用CDN、控制域名数目、无法合并的小体积文件使用HTTP combo;
    • 前端上:压缩文件体积、合并小体积文件(使用字体图标)、合理使用缓存、按需加载、避免不必要的下载。

    渲染

    浏览器在渲染过程在有三种基础数据,及定义网页结构的HTML、描述视觉样式的CSS和承担交互行为的JavaScript,每种数据类型均有对应的解释模块。

    HTML解释器将HTML文档解析为DOM树。CSS解释器将CSS解析为CSSOM,渲染引擎按照CSS选择器规则将DOM与CSSOM关联之后对每个DOM应用样式和布局,最终绘制为可视的UI。

    浏览器在渲染HTML文档期间,每逢遇到非异步的scrip标签则暂停文档后续内容的解析和渲染,待JavaScript文件加载和执行完后才恢复解析。之所以对scrip标签应用阻塞式的解析策略,是英文JavaScript拥有改变HTML文档结构的权限,它会改变DOM树的具体形态,进而影响最终的视觉效果。

    内存管理

    JavaScript是一种拥有GC机制(全GC)的编程语言,GC机制能够使开发者从繁琐的内存管理工作中解脱出来,很大程度上提升开发效率和代码的容错性。但是由于GC属于解释层模块,所以业务开发者几乎没有干预空间,一旦出现内存泄漏便只能靠解释器的GC策略进行调整。

    GC算法

    JavaScript引擎最常见的两种GC算法:标记清除算法、引用计数算法。

    标记清除算法是目前应用较广泛的GC算法之一,绝大多数JavaScript引擎的GC算法都是在标记清除算法基础上的变中,比如V8的标记压缩算法。标记清除算法分为两个阶段:标记阶段和清除阶段。在标记阶段以根节点为起点,使用深度优先搜索算法向下遍历所有对象,随后清除阶段把没标记的对象删除,并且把已标记的对象的标记信息也清除以便下次GC流程正常进行。(补充逻辑部分略)

    引用计数算法是IE6和IE7引擎采用的GC算法,但是目前已经绝迹。虽然这个已经成为了历史产物,但作为对比,有助于理解标记清除算法。略。

    标记清除算法是目前实行JavaScriptGC策略的最佳选择。

    内存泄漏

    在运行应用程序时,计算机管理内存的一般流程是 分配-使用-释放,如此循环。

    内存泄漏指的是一些分配出去的内存空间在使用完后没有释放。这些残留的冗余对象毫无用处却占据内存空间。大量的内存泄漏会造成因内存不足而导致应用程序崩溃甚至宕机。

    造成JavaScript内存泄漏的根本原因是不合理的引用。由于JavaScript引擎的GC操作在语言层面是完全封闭的,开发者没有任何干预的权限,只能通过编写合理的代码以避免发生内存泄漏。

    内存泄漏的处理方法

    避免全局变量。

    在全局作用域内创建对象非常容易引发内存泄漏。并且还有命名冲突、破坏封装性、存在安全隐患等弊端;

    谨慎处理闭包。

    闭包可以在函数内部引用外层作用域的变量,是JavaScript的核心特点之一,但是使用不当很容易造成内存泄漏。

    使用编译工具。

    前两种方法是尽力写出好的代码。第三种方法就是通过前端自动化工具帮助检测,令code smell自动暴露出来。

    极限运算性能

    网络体验最差的地方就是:加载缓慢和操作卡顿。加载缓慢的情况仍然存在,操作卡顿的情况慢慢减少,出了代码质量这种不可控的因素外,造成加载缓慢和操作卡顿的原因分别是网络延迟和浏览器的运算能力。造成网络延迟的因素是多方面的,需要从多方面同时切入优化。造成操作卡顿的原因非常单一,浏览器非常有限的运算能力是唯一的瓶颈。不过现代浏览器的运算能力越来越强了,vue等框架使得最消耗性能的DOM操作实现了轻量化和精细化。

    不过开发者不能毫无顾忌,业务需求的增长速度远超技术的发展,web应用的体量终有一天会增长至如今的几十倍。并且目前复制图形类web应用(如游戏、VR等)已经非常接近浏览器运算能力的瓶颈。

    web worker与并行计算

    单线程的JavaScript无法实现并行计算,当浏览器处理计算量庞大的逻辑时会使用户的任何操作均得不到反馈。web worker是HTML5规范的一部分,借助它可以在浏览器后台创建独立的worker线程运行JavaScript代码,实现多线程并行计算。

    webAssembly

    意思为适合web的汇编语言,是运行与浏览器环境的二进制代码。其定位是应对要求高性能的业务场景,如3D游戏、webVR/AR、音视频等。

    WebGPU

    对于核心聚焦在交互逻辑和UI的前端来说,设计高性能计算的项目计划没有纯粹的数据计算,绝大多数是复杂的图形类应用。基于此,便可以把图形编程领域的诸多优化策略带入前端领域。

    最典型的就是将计算交付给比CPU性能更高的GPU来执行。随着Flash的淘汰,WebGL基本通知复杂图形类web应用的开放市场。webGL的着色器逻辑在GPU中执行,计算性能远高于JavaScript。

    题外话

    《高性能网站建设指南》的借鉴

    其中的14条规则挺有用的,可以借鉴。之后这本书的作者2010年还出版了《高性能网站建设进阶指南》。

    别人的笔记可以借鉴一下:《高性能网站建设指南》笔记

    最好是看原书。

    规则1:尽量减少HTTP请求

    规则2:使用CDN

    规则3:添加Expires头

    规则4:采用Gzip压缩组件

    规则5:将样式表放在顶部(使用link标签将样式表放在文档head中)

    规则6:将脚本放在底部

    规则7:避免CSS表达式

    规则8:使用外部JavaScript和CSS

    规则9:减少DNS查找

    规则10:精简JavaScript

    规则11:避免重定向

    规则12: 删除重复脚本

    规则13:配置ETag(配置或移除ETag)

    规则14:使Ajax可缓存

    有些内容我还看不太懂。不过其中有不少可以借鉴,如

    • 减少HTTP请求数量
    • 将CSS放到head中
    • 将外部脚本置底
    • 资源合并和压缩
    • 避免重复的资源请求
    • 懒加载
    • 代码优化。

    把CSS放在头部的原因是,在加载HTML生成DOM树的时候,就可以同时对DOM树进行渲染。这样可以防止闪跳、白屏或者布局混乱;

    把JavaScript放在后面的原因是,JavaScript可能会改变DOM树的结构,所以需要一个稳定的DOM树。并且JavaScript加载后会立即执行,同时阻塞后面资源的加载。

    最后,本来是想写自己的理解,却没想到这里许多内容都感觉有必要写出来。大家如果感兴趣的话,亲自看书体验更佳。

    更新地址:GitHub

    更多内容请关注:CSDNGitHub

    更多相关内容
  • 前端技术架构 目录结构 Public //单页面渲染页面 Src //源码文件 -components //项目公用组件 -HealthyHome //健康之家分包 -Index //首页分包 -Message //我的详细分包 -My //个人中心分包 s //页面文件 -sdk //第...
  • 工业互联网平台架构与关键技术

    千次阅读 2021-08-20 01:02:29
    “智能云+工业互联网平台+敏捷智能应用”整体架构工业互联网平台以数据为驱动,一方面以解决企业在生产、经营管理等业务环节遇到的具体问题为根本出发点,通过价值导向,吸引企业上云上平台,解决纵向...

    “智能云+工业互联网平台+敏捷智能应用”整体架构

    工业互联网平台以数据为驱动,一方面以解决企业在生产、经营管理等业务环节遇到的具体问题为根本出发点,通过价值导向,吸引企业上云上平台,解决纵向集成的问题;另一方面通过企业间的横向集成,集聚工业资源要素,实现行业产业链或区域产业集群的数字化升级,加速生产方式和产业形态创新变革。平台的技术核心为工业大脑。工业大脑是数字“孪生”再发展的产物,它是超越人类的全局管理、调度与智能决策的中枢。工业大脑借助百度人工智能、大数据、云计算、IoT、地图等全面的技术和产品能力,以及丰富的数据资源积累,加速实现需求牵引的柔性、智能、绿色生产。利用智能技术与工业知识的有机融合,帮助企业预见成本投入,推进数字化改造和智能化升级。基于平台,可以快速开发部署面向不同行业的敏捷智能应用。工业领域的应用场景多,应用开发品类多,以智能云为基础的工业互联网平台,可以实现场景应用的敏捷开发。实现一个智能化应用的创造效率从30天提升到1周,开发门槛大幅度降低。利用零代码开发等技术,制造业企业可以基于自身业务,快速构建专属于自己的智能应用,加速转型升级。

    (二)平台关键技术

    (1)工业视觉智能 

    工业视觉智能通过工业相机采集图像信息,由计算机对信息进行处理和判断,可提供工 业质检、安全巡检、单据识别等服务。

    工业视觉智能平台默认支持PaddlePaddle、TensorFlow、Pytorch、Caffe等主流深度学习框架,提供FasterR-CNN、MaskR-CNN等主流深度学习网络模型,针对工业场景综合深度学习、机器学习、图像处理、无监督数据算法等构建了Multi-vision的工业视觉算法体系。平台具有推理模型准召率高、模型自主优化闭环、支持模型一键式部署、支撑端云一体化服务等特点。

    (2)工业数据智能

    工业数据智能是一种基于工业数据并融合工艺机理与专家经验的人工智能技术,具有自感知、自学习、自执行、自适应的特性。工业数据智能贯穿于制造业全生命周期管理,是实现智能制造的核心环节,能够深度挖掘工业数据背后的隐含价值,助力企业降本增效和精益管理。

    工业数据智能平台基于CFD仿真与人工智能算法的数据机理建模能力,既解决了人工智能建模鲁棒性差、可解释性差、数据量要求高等问题,又解决了仿真速度慢、脱离实际等问题。基于运筹与人工智能的优化算法能力,针对不同目标函数综合运用各种优化求解工具,该平台能够突破单一算法局限,提供描述类、诊断类、预测类、决策类模型生产能力,帮助企业降本增效。工业数据智能平台主要应用于工艺参数优化、计划调度、设备预测性维护、智能预测预警等场景。

    (3)工业交互智能

    工业交互智能涉及到的一项关键技术为增强现实AR技术,AR促使真实世界信息和虚拟世界信息内容融合,包括感知跟踪、融合渲染、人机智能交互等。

    百度智能云整合百度大脑AR及人工智能核心技术能力,打造工业空间智能及AR应用平台,为工业企业带来知识智能、空间智能、交互智能三大智能升级。智能空间引擎是百度智能云面向工业量身首创的工业企业专属的空间化知识网,可将复杂工业知识库与工厂、设备等虚实物理空间结合起来。采用可视化展现形态与实时交互方式,该引擎使知识在空间场所内以前所未有的效率自由流动,让知识随需而生、随需可见。依托智能空间引擎研发的工业场景解决方案,包括AR培训考核、AR远程协助和AR智慧巡检等,可帮助企业实现知识可沉淀、数据追溯、经验传承,助力工业企业提升智能化水平与生产运营效率。

    (4)知识中台

    知识图谱是一种高度结构化、语义化的知识组织形式,目的是让机器能够更好的理解和处理知识。知识中台基于知识图谱、自然语言处理、搜索与推荐等核心技术,提供面向企业知识应用全生命周期的一站式解决方案,助力企业全面提升运行效率和决策智能化水平。

    知识中台具有全链路知识管理能力,覆盖知识的高效生产、灵活组织和智能应用。同时,基于复杂知识表示和快速构建技术,知识中台可实现对结构类、文档类、图片、音频、视频等多模态数据的有效处理,以提升数据知识化效率。在应用方面,知识中台包括各类业务场景的知识深度应用,从搜索、问答、推荐升级到辅助决策、预测、推理等,可满足企业产品与服务的自动化定制需求,驱动产业智能化升级。

    (5)IoT与边缘智能

    IoT是工业互联网平台建设的基础,通过数据接入、协议转换、边缘数据处理等构建精准、实时、高效的数据采集体系。

    IoT平台实现可扩展的并发设备以开放协议接入,海量物联网数据采集,以及设备全生命周期管理。其规则引擎模块负责数据过滤和转发。时序时空数据库负责时序数据的写入、查询、压缩、管理和存储,为IoT平台提供高性能数据库服务,同时支撑上层基于时序及空间的AIoT行业应用。

    边缘智能可将云计算能力延伸至边缘,提供离线自治、低延时计算服务和海量边缘节点管理。边云融合机制通过IoT云端管控套件及边缘运行框架,实现云上训练AI模型,端上执行AI模型,以及提供稳定的边缘应用编辑和分发能力。

    (6)ABC技术栈 

    ABC Stack全面整合了百度在AI(人工智能)、Big Data(大数据)和Cloud Comput - ing(云计算)三个领域的核心技术能力,以及配套的平台化产品与开发工具。截至当前, ABC技术栈涵盖数百款产品,可为各行业提供专有云整体解决方案。

    专有云ABCStack和百度智能公有云技术同栈,经过百度公有云全面运营检验,支持百万级节点规模。其中,基础云主要包含IaaS产品(弹性计算、容器、存储、网络)、基本的安全产品和管理运维产品,属于专有云必备的基础组成。

    大数据平台涵盖数据采集、数据传输、数据湖存储、数据治理、数据处理、查询分析和数据服务的数据库处理全过程。BML是一款面向全行业的企业级基础AI开发平台,提供一站式人工智能建模与推理预测服务,实现从数据源管理、数据集、数据预处理、模型训练,及模型上线的AI工作周期管理,赋能企业实现AI时代的业务转型。

    (7)地理信息系统

    地理信息系统(GIS)是对地理空间信息进行采集、存储、管理、处理、显示、分析与模拟,并基于地理空间信息对业务数据以及各种信息进行管理、分析和辅助决策的计算机信息系统。地理数据与其他数据不同,不仅包含拓扑、距离、方向等空间信息,还具有空间自相关性;一旦与其他大数据集成,可以揭示出许多隐含价值信息。

    百度专网地图是面向专网环境的地理信息GIS平台,基于百度地图互联网大数据应用,提供服务端WebAPI、JavaScriptAPI等不同形式的服务调用。本平台可实现海量点、线、面大数据的可视化效果展示,并基于浏览器做渲染。其中,时空数据托管平台对空间大数据进行存储、索引、管理、分析,降低大数据空间分析难度,构建多源异构数据服务中台,实现客户在空间数据存储、处理、发布等核心场景的应用。

    (8)信息安全防护

    工业互联网安全防护应包括数据接入安全、平台安全和访问安全三方面。数据接入安全即防止数据泄露、被侦听或篡改,保障数据在源头和传输过程中安全;平台安全即确保工业互联网平台的代码安全、应用安全、数据安全、网站安全;访问安全即通过建立统一的访问机制,限制用户的访问权限和所能使用的计算资源和网络资源实现对工业互联网平台重要资源的访问控制和管理,防止非法访问。

    安全、合规是百度智能云服务客户的基础。工业互联网平台专有云建设遵循等级保护2.0,建设安全管理中心,以保证通信网络安全、区域边界安全、计算环境安全。依托百度业务风控的最佳实践,围绕业务场景,平台可快速构建业务风控决策引擎,辅助客户决策,保障业务安全,免受黑产攻击;重点加强积极防御体系建设,以AI技术和威胁情报赋能,构建业务白模型,实现未知威胁检测和攻击溯源。

    互联互通社区


    互联互通社区专注于IT互联网交流与学习,旨在打造最具价值的IT互联网智库中心,关注公众号:互联互通社区,每日获取最新报告并附带专题内容辅助学习。

    方案咨询、架构设计、数字化转型、中台建设、前沿技术培训与交流,合作请+微信:hulianhutongshequ

    展开全文
  • 给java后端开发亲们分享技术架构图,涉及前端,后端,数据库; 涉及框架:spring cloud,spring boot,mybatis 等, 面试可用(本人面试时就用了,顺利拿到理想的offer)。
  • 云时代的前端架构前端架构体系介绍 微前端它是什么从哪来到哪去怎么做 大前端前端 独立开发 模板 App App 业务域 业务域 TEAM 独立发布 (SPA) (SPA) 微应用 微应用 1 被集成 不限技术前端 前端 前端 自主...
  • 前端架构体系技术 一框架与组件 bootstrap 等 UI 框架设计与实现 伸缩布局grid 网格布局 基础 UI 样式元素 reset按钮图片菜单表单 组件 UI 样式按钮组字体图标下拉菜单输入框组 导航组面包屑分页标签轮播弹出框列表...
  • 前端架构

    2022.02.08 今天读了一篇关于前端整洁架构的设计,因此对其中的内容进行了一些整理以及我自己的思考,后续阅读《领域驱动设计》后可以加入更多的内容。

    References:

    前端领域的 “干净架构”

    架构方面学习笔记(3)–前端架构设计

    整洁架构

    以一个🌰来介绍整洁架构:

    商店会出售不同种类的饼干,用户可以自己选择要购买的饼干,并通过三方支付服务进行付款。

    用户可以在首页看到所有饼干,但是只有登录后才能购买,点击登录按钮可以跳转到登录页。

    把饼干加进购物车后,用户就可以付款了。付款后,购物车会清空,并产生一个新的订单。

    在这里插入图片描述
    上图明确出了整洁架构的三个部分,但它还是有一些抽象,在实际开发和设计中我们如何遵循这个架构进行设计呢?

    1. 明确实体,比如例子中的:商品、用户、购物车、订单。明确数据转换函数(必须仅依赖本层的各种实体和规则)如计算总价的方法
    2. 应用层:
      - 列 use case:①找出参与者②找出动作③明确结果
      - 写数据转换或者说描述 use case:side effect(从适配层与服务端的交互中拿数据) --> pure function(纯函数处理数据)–> side effect(存储处理结果)
      - 列 Interfaces
    3. 适配层:
      • 用户界面
      • API 请求
      • 存储或状态管理

    最后:整洁架构让每个 use case 独立起来,同时适配层让第三方服务随时可替换,这会让整个架构扩展性极强,但不可避免的会带来一些如代码量的增大这种劣势。

    我个人看法是整洁架构最关键的一点是希望逻辑和 UI、第三方服务 能够分离,而如今的 react vue 都提倡使用 hooks,核心也正是如此。在现实开发中实现理想状态下的整洁架构当然是具有一定的难度和不可预测性,比如你真的可以做到逻辑和状态管理的真正分离吗,你的项目可以随意从 react 和 vue 中切换吗,诸如此类的问题。但梳理整洁架构的过程仍然给了我们不少启发:

    • 通过列实体、列 use case 对于我们设计 store 结构具有很大的帮助
    • 将逻辑从状态管理、第三方服务中剥离出来,尽量做到各司其职和不依赖框架的测试
    // 整洁架构下的商品购买代码树
    src/
    |_domain/
      |_user.ts
      |_product.ts
      |_order.ts
      |_cart.ts
    |_application/
      |_addToCart.ts
      |_authenticate.ts
      |_orderProducts.ts
      |_ports.ts
    |_services/
      |_authAdapter.ts
      |_notificationAdapter.ts
      |_paymentAdapter.ts
      |_storageAdapter.ts
      |_api.ts
      |_store.tsx
    |_lib/
    |_ui/
    
    

    DDD(Design Driven Design) 领域驱动设计

    Reference:

    领域驱动设计在互联网业务开发中的实践

    《领域驱动设计》

    特点: 从开发到测试整个团队使用同一的架构语言;业务与架构强关联,从而建立针对业务变化的高响应力架构

    几个名词解释:

    DDD 中有较多的术语,这里仅写了几个,更多的可以参考 领域驱动设计-什么是领域驱动设计和怎么使用它

    • 领域:一个系统要解决的实际问题的集合,或者说业务本身
    • 通用语言:所谓通用语言讲的并不是开发和测试都用一种开发语言,比如 golang,JavaScript 等,而是与领域模型相关的结构化语言保证整个团队对整个系统的理解一致,比如一个商城系统中的订单收货地址和个人信息收货地址应该明确区分,而不是混为一谈「收货地址」

    上文中提到的前端架构设计其实类似于 DDD 六边形架构。

    DDD 相对于三层架构有什么提升?

    三层架构的劣势:MVC 可以看做是三层架构的一种实现模式,我们知道任何一个操作都是从 controller 层传入,services 层操作数据库或者第三方服务。

    • 严格分层模式下,用户界面层不能跨过业务逻辑层调用数据访问层
    • 三层架构下往往 service 层会越来越臃肿,最终一堆逻辑混杂在一起,不易于扩展以及满足新的业务需求

    三层架构又被称为「分层贫血领域模型架构」,贫血即指业务实体中没有或者很少方法。而 DDD 则被称为充血领域模型,正式因为领域对象拥有更多的能力。

    待增加更详细的内容

    展开全文
  • 写在前面的话 ...随着互联网技术的演进,大前端岗位逐渐成为IT行业的一大不可或缺的岗位,大前端从酝酿到出现经历了几代技术的演进。 1.1 切图仔时代 早期的前端并不是单独的编程岗位,它更贴近于设计岗位

    写在前面的话

    对于大前端开发岗位,在技术实现上各行业以及应用体系区域完善,也建立了统一的技术栈和规范,这就意味着如果想要从编码为主的开发岗位进一步越迁到架构设计岗位,开发者需要具备完整的技术视野和架构设计思想,完全掌控从抽象的设计层面到具体的落地层面,能帮助前端开发者在行业内走向一个新的高度。

    1. 大前端的架构变迁

    随着互联网技术的演进,大前端岗位逐渐成为IT行业的一大不可或缺的岗位,大前端从酝酿到出现经历了几代技术的演进。

    1.1 切图仔时代

    早期的前端并不是单独的编程岗位,它更贴近于设计岗位。国内早期的互联网或软件项目大多以MVC架构为主,通过服务端技术实现的MVC架构几乎都是基于个平台的动态网页技术实现的。动态网页技术是通过静态网页结合服务端渲染模版进行网页绘制,该时代的前端不需要使用模版引擎或大量的JavaScript编程,而通常的解决方案便是UI设计将设计稿完成后,通过HTML+CSS+少量成熟的JavaScript库变成网页,而数据采用服务端模版引擎,如JSP、ASP、Smarty等进行渲染,所以当时的前端以设计岗位为主。

    1.2 基于AJAX技术的前后交互时代

    1.2.1 MVC架构的疲软期

    随着互联网网民的不断增加,推动互联网应用架构提升规模和复杂度。这个时代的Web应用不在满足于提供基础服务,更注重交互、性能和用户体验,此时基于WebMVC架构实现的应用在大量用户群体上逐渐显得心有余而力不足,其具体原因,如图。

    MVC

    展开全文
  • 技术架构

    千次阅读 2021-02-03 11:06:01
    要深入掌握技术架构,就需要了解整体的系统。 面对一个复杂的系统,经常会有以下困扰: 不清楚系统整体的处理过程,当系统出问题时,不知道如何有针对性地去排查问题。 系统设计时,经常忽视非业务性功能的需求,也...
  • 互联网大流量的方法 安全秘籍 阿里巴巴常用小框架 架构方法论图谱 设计模式秘籍图谱 JVM垃圾回图谱png Java并发图谱 Java集合图谱 Java集合类图 JavaList类图 JavaMap类图 JavaSet类图 Hadoop技能图谱 大数据技能...
  • 正如他说言,今天几乎所有的互联网公司背后都有一支规模庞大的数据团队和一整套数据解决方案作决策,这个时代已经不是只有硅谷巨头才玩数据的时代,是人人都在依赖着数据生存,可以说如今社会数据价值已经被推到...
  • 大型网站的挑战主要来自庞大的用户高...j 教据采集与监伎 应用层架构 服努层架构 存储层架构 后fs架构 教据中心机房架构 图A.1网站系统架构履次 1前端架构 前端指用户请求到达网站应用服务器之前经历的环节通常不包含网
  • GMTC北京 2017年全球前端技术大会PPT合集(46份)。 移动开发的未来-来自一个移动开发者的自白 移动Web的现在与未来 移动分析助力App精细化运营 一站式短视频技术架构的新解读 移动电商中的图像算法应用 出行IOS端...
  • 成长背后有过怎样的心酸和快乐……4.26日晚间,腾讯大讲堂·深圳首站《QQ空间技术架构之峥嵘岁月》活动在腾讯总部腾讯大厦多功能厅举办,腾讯Web前端研发领域专家、腾讯最早的专职Web开发团队核心成员、Qzone核心...
  • 这是我在csdn上发表的第一篇文章,两年的webgis开发让我对现在的互联网地图技术架构有了一个初步的了解,这篇文章为大家简单的分享一下现有的互联网地图的技术架构。 1.纯前端前端地图架构依赖于众多的js框架,...
  • 实用标准 一个社交 App 需实现的功能 用户关注的常规社交功能活动地理位置探索功能新鲜事视频照片分享等等需要提供的功能不胜枚举 所以从技术角度来说开发者需要解决的问题也是异常复杂的 当一款社交 App 发布之初...
  • 前端架构师岗位的工作职责 前端架构师需要对技术负责人产出的技术方案进行审 核确保方案和架构设计整体的一致性以下是小编整理的 前端架构师岗位的工作职责 前端架构师岗位的工作职责 1 职责 制定前端的标准和规范并...
  • 前端架构快速选型 微前端选型指南 关键点的相关解释如下 框架限制在后台微服务系统里人们使用其它语言的库来开发新的服务如用于人工智能的 Python但是在前端几乎不存在这种可能性所以当我们的前端框架只有一个时...
  • 2022年前端技术发展趋势

    万次阅读 多人点赞 2022-07-25 14:30:49
    最近,字节跳动技术团队公布了一份关于2022年前端技术的发展趋势预测,总结了新的一年前端技术可能发生的6个变化,下面我们来参考一下。
  • 详解互联网APP架构1.0

    万次阅读 2018-09-11 20:44:33
    详解互联网APP架构1.0 详解互联网APP架构2.0 由于最近负责一个互联网APP项目,需要重新设计架构,这边架构已经设计完成,跟小伙伴们分享下设计思想: 首先我们分析大概的需求,可归结为以下几点: 此项目为...
  • 本文来源网络收集整理\word可编辑 本文来源网络收集整理\word可编辑 本文来源网络收集整理\word可编辑 web前端架构师的...web前端架构师的岗位职责表述1 职责 1负责公司产品 Web 前端技术选型架构设计与研发设计与
  • 部门架构 CTO 技术总监 架构师 产品组 研发组 运维组 职责描述 CTO 沟通能力得强、情商得高,得有亲和力 管理多条业务线,产品、技术等,人员,公司,规划等 参与公司运营:什么时候应该做什么样的事情,要做什么样...
  • 本文来源网络收集整理\word可编辑 本文来源网络收集整理\word可编辑 前端架构师岗位的职责_岗位职责 前端架构师岗位的职责 前端架构师负责研发部内部各项目组产出的技术方案进行评审以下是我整理的前端架构师岗位的...
  • Web前端技术在教学应用中改革创新.pdf
  • 本文来源网络收集整理\word可编辑 本文来源网络收集整理\word可编辑 本文来源网络收集整理\word可编辑 前端架构师岗位的工作职责_岗位职责 前端架构师岗位的工作职责 前端架构师需要对技术负责人产出的技术方案进行...
  • 尚融宝是一个投资理财类系统,作为全栈项目涉及的知识涵盖:前端、后端及项目的业务开发,整体内容分为四个篇章:一、项目介绍和前后端...项目涉及的技术架构:一、后端技术栈 二、前端技术栈 三、第三方资金托管平台
  • 前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为把多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 77,755
精华内容 31,102
热门标签
关键字:

互联网前端技术架构