前端|笔记

秋梨陈皮汤
128 阅读10分钟

什么是前端

总结:前端工程师是使用Web技术栈解决多端图形用户界面交互问题的工程师

  • 解决GUI人机

  • 跨终端

    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等

  • Web技术栈

前端技术栈

image-20241101220600807.png

前端语言的基本能力

  • HTML:构建框架结构(包含控制内容的布局,为网页设计提供一个结构,是页面的基石)
  • CSS:添加样式(包含给元素添加样式,识别不同的屏幕尺寸让网站具备响应式的特征,是网页的外表和体验最重要的工具)
  • JS:增加了网页的交互性(增加了交互体验,处理复杂的函数和特性,优势的代码可以保证更高的效率和可机动性)

前端应该关注哪些方面

  • 功能
  • 美观
  • 无障碍
  • 安全
  • 性能
  • 兼容性
  • 用户体验

前端的边界

  • node.js:开发服务器端的应用
  • electron/React Native:开发客户端的应用
  • WebRTC:进行P2P的在线传输,实现多人会议
  • WebGL:开发流畅的3D游戏
  • WebAssembly:可以把C++等其他语言编写的代码编译成可以直接在浏览器运行的代码
笔记:
Electron

是一个使用 JavaScript, HTML 和 CSS 构建跨平台桌面应用程序的开源库。它允许开发者将网页应用打包成一个桌面应用，并且这个应用可以在 Windows、macOS 和 Linux 上运行。Electron 应用可以访问本地硬件功能，并且可以集成第三方原生库。

关键特性：
  1. 跨平台：Electron 应用可以在多个操作系统上运行，无需重写代码。
  2. Chromium：Electron 使用 Chromium 作为其渲染引擎，这意味着它可以显示丰富的网页内容。
  3. Node.js 集成：Electron 应用可以调用 Node.js API，这使得它们可以执行文件系统操作、网络请求等。
  4. NPM 模块：开发者可以使用 NPM（Node.js 的包管理器）来管理项目依赖。
  5. 快速开发：由于 Electron 应用是基于 Web 技术构建的，开发者可以使用现有的 Web 开发工具和框架。
  6. 原生 UI 控件：Electron 提供了一些内置的原生 UI 控件，也可以通过原生插件来扩展。
  7. 自动更新：Electron 应用可以集成自动更新功能，确保用户始终使用最新版本。

Electron 也因其性能问题和较高的资源消耗而受到一些批评，特别是在与轻量级的本地应用相比时。尽管如此，Electron 仍然是许多流行应用的基础，例如 Visual Studio Code、Slack、Discord、WhatsApp 桌面版等

React Native

是一个由 Facebook 开发的开源框架，它允许开发者使用 React 以及 JavaScript 来开发原生移动应用。这意味着使用 React Native，你可以编写一次代码，然后将其部署到 iOS 和 Android 设备上，而不需要分别为每个平台编写不同的代码。

关键特性：

  1. 跨平台开发：

    • 允许开发者使用相同的代码库为 iOS 和 Android 创建应用。

  2. 原生组件：

    • React Native 使用原生平台组件而不是WebView来渲染应用，这使得应用能够拥有接近原生应用的性能。

  3. 热重载：

    • 开发过程中，支持即时预览更改，提高了开发效率。

  4. 可扩展性：

    • 可以集成第三方库和原生模块，以增加应用的功能。

  5. 社区支持：

    • 由于 React Native 的流行和开源特性，它拥有一个活跃的社区，提供了大量的资源和支持。

  6. 性能：

    • 应用性能接近原生应用，因为它们直接利用了设备的硬件能力。

  7. 开发工具：

    • 支持现代的开发工具，如 Visual Studio Code、Xcode 和 Android Studio。

  8. 导航和路由：

    • 有成熟的导航库（如 React Navigation）来处理应用内的导航。

  9. 状态管理：

    • 可以与 Redux、MobX 或 Context API 等状态管理库集成，以管理应用状态。

  10. 模块化：

    • 应用可以模块化开发，便于维护和扩展。

React Native 适用于希望快速开发跨平台应用的团队，但它也有一些局限性，比如对于特别复杂的用户界面和动画，可能需要更多的工作来达到原生开发的水平。此外，React Native 应用的内存消耗通常比原生应用要高。

WebRTC

是一种支持网页浏览器进行实时通信（语音、视频和任意数据）的技术。

  1. 技术概述： WebRTC允许Web应用程序和站点捕获并选择性地流式传输音频和/或视频媒体，并在浏览器之间交换任意数据，而无需中介。它包括一整套标准和API，用于实现实时通信功能，可以看作是一个整体的框架。
  2. 核心组件： WebRTC主要使用UDP进行音视频数据的传输，并依赖RTP（Real-time Transport Protocol）和RTCP（Real-time Transport Control Protocol）来传输音视频流和监控流的质量。
  3. 信令机制： WebRTC自身不定义信令协议，信令用于在通信的两端交换信息（如SDP、ICE候选等），以建立和管理WebRTC连接，通常通过WebSocket或其他网络协议（如HTTP）来完成。
  4. 编解码技术： WebRTC支持多种音视频编解码器（如VP8、H.264、Opus等），用于压缩和解压缩音视频数据以提高传输效率。
  5. 应用场景： WebRTC技术已广泛应用于视频会议、在线教育、社交应用、在线游戏、远程医疗、在线客服等多个领域。例如，它可以实现多人实时音视频会议、在线授课、实时互动课堂、视频聊天、直播、远程会诊等功能。
  6. 行业状况： 随着5G时代的到来，RTC技术将赋能AI、AR、VR、智能家居、云游戏等场景化落地。
  7. 服务提供商： RTC服务提供商包括声网、腾讯云音视频、即构、阿里云RTC等。
  8. 优势： WebRTC提供低延迟的实时通信，支持多种浏览器和操作系统，具有良好的跨平台性，且提供了丰富的API，方便开发者快速构建实时通信应用。

WebRTC作为一种强大的实时通信技术，正在不断改变我们的生活和工作方式，其应用场景也将越来越广泛。

WebGL

是一种在Web浏览器中渲染交互式3D和2D图形的JavaScript API。它允许开发者在无需任何插件的情况下，直接在浏览器中利用JavaScript和HTML5创建和渲染复杂的2D和3D图形。WebGL技术起源于OpenGL ES 2.0标准，是由Khronos Group专为嵌入式系统和移动设备设计的轻量级3D图形API。

技术特点
  1. 跨平台性：WebGL可以在所有支持该技术的现代浏览器中运行，无需安装任何额外的软件或插件。
  2. 高性能：WebGL利用GPU进行硬件加速，能够实现高效的图形渲染，提供流畅的3D体验。
  3. 灵活性：WebGL支持多种3D模型格式，如OBJ、FBX等，可以满足各种应用场景的需求。
  4. 实时交互：WebGL能够实现实时的图形渲染和用户交互，提供丰富的交互体验。
应用领域

WebGL的应用领域非常广泛，包括但不限于：

  1. 在线游戏：WebGL使得在浏览器中运行3D游戏成为可能，降低了游戏的准入门槛。
  2. 虚拟展示：如汽车厂商通过WebGL在网页上展示汽车的3D模型，用户可以从各个角度查看车辆细节。
  3. 建筑可视化：建筑师使用WebGL创建建筑模型的3D可视化效果，让客户更直观地了解建筑设计。
  4. 医学教学：WebGL用于创建人体器官的3D模型，帮助医学生更好地理解人体结构。
  5. 科学可视化：WebGL可用于展示复杂的科学概念，如分子结构、天体运动等。
  6. 数据可视化：WebGL可以用于创建动态和交互式的数据可视化图表，使用户能够直观地分析和理解大量数据。
  7. 教育和培训：在教育领域，WebGL可以用于创建交互式的学习工具和虚拟实验室，提供更丰富的教学体验。
  8. 广告和营销：WebGL可以用于创建吸引人的广告和营销页面，通过动态和引人注目的视觉效果提高用户参与度。
  9. 艺术和创意：创意领域可以使用WebGL创建令人惊叹的艺术品、动画和交互式创意项目。
  10. 模拟和训练：在军事、航空航天和其他领域，WebGL可以用于创建高保真度的模拟和培训环境，帮助培训人员提高技能。

WebGL为开发者提供了在Web浏览器中实现高性能图形渲染的能力，为各种行业应用的开发提供了强大的支持，使得这些应用可以在多个领域中提供更具交互性和引人注目的用户体验。

WebAssembly

是一种革命性的技术，它允许非JavaScript代码在浏览器中以接近原生的速度运行。

WebAssembly是一种二进制指令格式，用于在现代Web浏览器中运行新型代码，并提供新的性能特性。它不是编程语言，而是一种中间格式，可以作为其他语言（如C、C++、Rust等）的编译目标。

工作原理
  1. 源代码生成：首先，使用C、C++或其他语言编写源代码，这段代码可以解决某个问题或完成某段对浏览器中的JavaScript来说过于复杂的流程。
  2. 编译为WebAssembly：然后，使用Emscripten等工具将源代码编译为WebAssembly，生成一个.wasm文件。
  3. 在网页上使用：最后，可以在网页上使用这个.wasm文件，像其他ES6模块一样加载这个文件。
目标
  • 快速、高效、可移植：WebAssembly代码能够在不同平台上以接近本地速度运行，利用常见的硬件能力。
  • 可读、可调试：WebAssembly有人类可读的文本格式，允许手工编写、查看和调试代码。
  • 保持安全：WebAssembly运行在一个安全的沙箱执行环境中，遵循浏览器的同源策略和授权策略。
  • 不破坏Web：WebAssembly的设计原则是与其他Web技术和谐共处并保持向后兼容。
应用场景

WebAssembly因其性能优势，已经被应用于多种场景，包括但不限于：

  • 在线游戏：在浏览器中运行3D游戏和VR/AR应用。
  • UI设计工具：如Figma，使用WebAssembly提升设计文件的读取速度和性能。
  • 3D地图：Google Earth通过WebAssembly在各大浏览器上流畅运行。
  • 图形处理：用于图像和视频编辑等高性能应用。
  • 科学计算：在Web上进行复杂的数学和科学计算。

WebAssembly为Web平台带来了接近本地速度的代码执行能力，扩展了Web应用的可能性，使得多种语言编写的代码都能在Web上高效运行。

开发环境

  • 浏览器:IE/Edge Chrome Firefox Safari
  • 编辑器:VSCode Vim WebStorm

浏览器包含两种引擎

  • 渲染引擎:加载页面

    image-20241106194629551.png

  • JavaScript引擎

    image-20241106194717600.png

解释器:处理复杂的语法,有高度优化的性能

avatar
文章
阅读
粉丝