01-大前端底层原理|大前端渲染原理-综述

937 阅读7分钟

前言

概述

本文所起的作用就像是一本书的导读,主要是为不同的分述文章做一个概要介绍,并不直接深入细枝末节去展开问题进行讨论。读者朋友们可以根据自己的兴趣或需要进入不同的章节进一步了解相关内容。
本系列文章既对渲染原理有一个相对系统的探讨,也引入了环式学习法比较学习法链式学习法等几种帮助我们在程序生涯中提升技能的优良学习方法。
本系列文章涉及的范围:

计算机原理知识

iOS相关专题

webApp相关专题

跨平台开发相关专题

其它Natice设备端相关专题

扩展程序生态的小程序相关专题

一、计算机渲染原理知识

该章节从相对底层的角度,对计算图形渲染原理进行简要介绍,以作为后续对图形学相关的开发(如OpenGL、视频播放器、AR、VR等)指导进行知识储备。
该章节目前只通过一篇文章来介绍,文章通篇内容包括四个小章节,如附图: 通篇内容 文章地址:juejin.cn/post/701875…

二、iOS页面渲染专题

计算机渲染原理知识的基础上,我们扩展开来讨论移动开发iOS端的几个相关的小课题:

三、webApp页面渲染专题

大前端的开发框架主要分为两类:

第一类是基于 WebView 的,第二类是类似 React Native 的。
对于第一类 WebView 的大前端渲染,主要工作在 WebKit 中完成。

  • WebKit 的渲染层来自以前 macOS 的 Layer Rendering 架构,而 iOS 也是基于这一套架构。
  • 所以,从本质上来看,WebKit 和 iOS 原生渲染差别不大

第二类的类 React Native 更简单,渲染直接走的是 iOS 原生的渲染

那么,我们为什么会感觉 WebView 和类 React Native 比原生渲染得慢呢?
想要了解更多可以进入我这篇文章查看详情:Web和类RN大前端的渲染原理

四、跨平台方案页面渲染专题

本次讨论的移动跨平台方案以Flutter框架为例,篇幅如下:

Flutter是一个使用Dart语言开发的跨平台移动UI框架,通过自建绘制引擎,能高性能、高保真地进行Android和IOS开发。作为一个跨平台的应用框架,诞生之后,就被高度关注
它通过自绘 UI ,解决了之前 RN 和 weex 等类RN技术方案难以解决的多端一致性问题。
了解底层引擎的工作原理可以帮助我们更深入地结合具体的业务来对引擎进行定制和优化,更好的去创新和支撑业务。 若Flutter方案恰好是您关注的问题,可以通过我的这篇文章进行更详细了解:Flutter的渲染原理

五、Android、HarmonyOS页面渲染专题

六、小程序页面渲染原理

七、总结

  • 终于来到本次专题学习的尾声了。首先为连续学习几个分述章节的我们一起鼓个掌吧😆!!!
  • 现在进入我们的总结阶段!!!
  • 首先,先来个回顾:通过前面的几个章节的介绍,我们在学习了计算机图形渲染原理的基础上大体上掌握了Native端页面的渲染原理(iOS、Android、HarmonyOS)、webApp页面渲染原理HybridApp页面渲染原理(以Flutter为例子)、小程序页面渲染原理,更详细的介绍可以回顾本文前面的章节。
    • 前面每个章节的概要,可以告诉我们该章节主要讨论什么专题,若刚好是您想要了解的专题,可以点击章节索引的链接,进入更深入的探索学习!希望能够解开您心中的疑云.
    • 如若我的文章是您关注的问题然而却未解决您的疑惑,欢迎您向我留言,我将争取在我发现信息的第一时间为您提供帮助。
    • 然后,我们接下来要通过结合它们各自不同场景的性能体现以及项目组研发成本等情况做一个项目组技术方案选型案例: 项目方案的大前端技术搭配选型(待输出)
    • 最后,我们作为程序员,要对自己的职业生涯发展进行相对可靠的规划。所以我们也要对自己的技术栈积累进行一定可靠的选择。毕竟路选对了就少走弯路了:大前端工程师技术栈积累的思考(待输出)

相关阅读(共计14篇文章)

iOS相关专题

webApp相关专题

跨平台开发方案相关专题

阶段性总结:Native、WebApp、跨平台开发三种方案性能比较

Android、HarmonyOS页面渲染专题

小程序页面渲染专题