前端前端及其技术栈

Posted 黑黑白白君

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端前端及其技术栈相关的知识，希望对你有一定的参考价值。

文章目录

0）前端

1、什么是前端？

前端（Front-end）指的是用户可见的界面。

  • 网站前端页面也就是网页的页面开发，比如网页上的特效、布局、图片、视频，音频等内容。
  • 前端的工作内容：
    1. 将美工设计的效果图设计成浏览器可以运行的网页
    2. 并配合后端做网页的数据显示和交互等可视方面的工作内容。

前端开发：创建WEB页面或APP等前端界面呈现给用户的过程。

  • 通过html，CSS及javascript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

2、为什么需要前端？

即前端的意义是什么。

在这里插入图片描述

  • 1990 年，Tim 以超文本语言 HTML 为基础在 NeXT 电脑上发明了最原始的 Web 浏览器。
  • 1994 万维网联盟（World Wide Web Consortium）成立，简称 W3C，标志着万维网的正式诞生。
  • 1995 网景推出 JavaScript，可以用来更改前端 DOM 的样式。

前端的发展简史：

  • Web 1.0 时代：早期的网页以 HTML 为主，是纯静态的网页，网页是“只读”的，信息流只能通过服务器到客户端单向流通 。

  • 动态服务器页面技术的出现：页面不再是静止的，页面可以获取服务器数据信息并不断更新。

    • php、JSP、ASP.NET
    • 但前端页面要想获取后台信息，需要刷新整个页面

  • AJAX 技术的出现：不需要刷新页面就可以使得前端与服务器进行网络通信。

  • 前端Framework的出现：为解决浏览器兼容性问题。

    • Dojo、jQuery、YUI、ExtJS、MooTools
    • 前端开发人员用这些 Framework 频繁发送 AJAX 请求到后台，在得到数据后，再用这些 Framework 更新 DOM 树。

  • Node.js的出现：基于事件循环的异步 I/O 框架，拓展了 JavaScript 在服务器端的无限可能。

  • 移动Web和Hybrid App的出现。

  • 前端发展的主要话题：一开始是「特效」，后来是「用户体验」，然后是「前后端分离」，再后来是「页面性能」，然后到最近的「模块化、工程化」，到现在的「以数据为中心」。

因此个人认为，前端的意义主要还是在于：

  1. 提高产品开发效率
  2. 优化产品质量
  3. 提升用户使用体验

3、前端开发的类型

在这里插入图片描述

  • Web前端开发：

    • PC端开发：主要分为面向大众的各类网站（如新闻媒体、社交、电商、论坛等）和面向管理员的各种 CMS (内容管理系统)和其它的后台管理系统。
    • 移动端开发：
      • Web App (HTML5）开发：利用Web技术进行的App开发，可以在手机端浏览器里面打开的网站就称之为webapp。
        • Web技术本身需要浏览器的支持才能进行展示和用户交互，因此主要用到的技术是HTML、CSS、Javascript以及jQuery、Vue、React等JS框架。
      • 混合（Hybrid App）开发：开发一款App产品的时候，利用原生与H5的开发技术的混合应用。
        • 通常由“HTML5云网站+APP应用客户端”两部份构成。
        • 原生代码部分利用WebView插件或者其它框架为H5提供容器，程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。
        • 比如京东、淘宝、今日头条等APP都是利用混合开发模式而成的。
      • 微信公众号开发
      • 小程序开发
      • 小游戏开发

  • 客户端（APP）开发：

    原生开发（Native App开发），是在android、ios等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App开发。
    • 比如Android是利用Java、Eclipse、Android studio
    • IOS是利用Objective-C 和Xcode进行开发
  • 关于Web App、原生App、混合App的概念可参考：https://www.cnblogs.com/runhua/p/9618552.html
  • 关于三者的区别可参考：https://zhuanlan.zhihu.com/p/162865070
    以及https://zhuanlan.zhihu.com/p/71192935
  • 关于移动端和PC端的区别，可参考：https://www.zhihu.com/question/35633784?sort=created
    以及https://www.cnblogs.com/zhuzhenwei918/p/6790859.html

4、前端与后端的交互

主要有两种方式：Ajax 和 Socket 连接。

  • Ajax：

    常见的前后端交互方式。
    • 以 “请求→响应” 的方式来完成前后端的信息传递。
    • 传统的表单交互需求几乎都可以由 Ajax 改造为 “原地提交并获取反馈” 的交互方式，不需要跳转页面，从而有效提升用户体验。

  • Socket：

    对于实时性比较高的场景，Socket 连接是一个更好的选择。
    • 工作方式：前后端建立一个持续的连接，信息可以随时由前端发向后端，或由后端推送到前端。
    • 如果要建立一个实时对话的应用，通常就会用到 Socket 连接。

*前端技术栈

在这里插入图片描述

1）核心语言

web 开发者必学的三种语言：

  • HTML 定义网页的内容
  • CSS 规定网页的布局
  • JavaScript 对网页行为进行编程

1.1 HTML

  • 什么是HTML？

    HTML（Hyper Text Markup Language，超文本标记语言 ）是用来描述网页的一种语言。

    • HTML 不是一种编程语言，而是一种标记语言 (markup language)，标记语言是一套标记标签 (markup tag)。

  • HTML如何描述网页？

    HTML 使用标记标签（HTML tag）来描述网页：

    • HTML 标签是由尖括号包围的关键词，比如 <html>
    • HTML 标签通常是成对出现的，比如 <b> 和 </b>
    • 标签对中的第一个标签是开始标签，第二个标签是结束标签
    • 始和结束标签也被称为开放标签和闭合标签

  • HTML文档与网页的关系？

    HTML 文档也被称为网页，HTML 文档 = 网页。

    • Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
      • 浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

    【举例】

    <html> 
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body> 
</html>
    • <html> 与 </html> 之间的文本描述网页
    • <body> 与 </body> 之间的文本是可见的页面内容
    • <h1> 与 </h1> 之间的文本被显示为标题
    • <p> 与 </p> 之间的文本被显示为段落

1.2 CSS

  • 什么是CSS？

    CSS（Cascading Style Sheets，层叠样式表/级联样式表）描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素。

    • CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。
    • CSS 节省了大量工作，它可以同时控制多张网页的布局，外部样式表存储在 CSS 文件中

  • 为什么使用CSS？

    • 分离HTML和样式格式：创建 HTML 的目的是描述网页的内容，CSS 从 HTML 页面中删除了样式格式，避免了将格式添加到每个页面的漫长而又昂贵的过程。
    • 减少大量工作：样式定义通常保存在外部 .css 文件中，通过使用外部样式表文件，这样只需更改一个文件即可更改整个网站的外观。

1.3 JavaScript（JS）

  • 什么是JavaScript？

    JavaScript 是属于 HTML 和 Web 的编程语言。

    • 注意：JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。

  • JavaScript的作用？

    • JavaScript 能够改变 HTML 内容
    • JavaScript 能够改变 HTML 属性
    • JavaScript 能够改变 HTML 样式 (CSS)
    • JavaScript 能够隐藏 HTML 元素
    • JavaScript 能够显示 HTML 元素

2）基础技术

2.1 AJAX

  • 什么是AJAX？

    AJAX（Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

    • AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。
    • 使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

  • AJAX的工作原理？

    通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM从而更新页面。

    • XMLHttpRequest 是 AJAX 的基础。

    1. 创建XMLHttpRequest对象（不同浏览器下建立方式可能不同）
    2. 使用该对象向服务器发送请求（使用 XMLHttpRequest 对象的 open() 和 send() 方法）
    3. 服务器收到请求并返回信息给客户端（获取服务器的响应使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性）
    4. 客户端收到信息后将数据呈现到用户界面上

2.2 JSON

  • 什么是JSON？

    JSON（JavaScript Object Notation，JavaScript 对象表示法）是轻量级的文本数据交换格式。

    • JSON 文件的文件类型是 “.json”
    • JSON 文本的 MIME 类型是 “application/json”

  • 为什么使用JSON？

    对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：

    • 使用 XML：读取XML文档 --> 使用 XML DOM 来循环遍历文档 --> 读取值并存储在变量中
    • 使用JSON：读取 JSON 字符串 --> 用 eval() 处理 JSON 字符串

  • JSON的特点：

    • JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台，JSON 解析器和 JSON 库支持许多不同的编程语言。
    • 由于JSON 文本格式在语法上与创建 JavaScript 对象的代码相同，因此JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
    • 类似XML：JSON 是纯文本，具有层级结构，可通过 JavaScript 进行解析，JSON 数据可使用 AJAX 进行传输。
    • 与XML不同：没有结束标签，更短，读写的速度更快，能够使用内建的 JavaScript eval() 方法进行解析，使用数组，不使用保留字。

2.3 Node.js

  • 什么是Node.js？

    Node.js是一个基于Chrome V8引擎的JavaScript运行环境，一个让JavaScript运行在服务端的开发平台。

  • 为什么使用Node.js?

    • 早期 JavaScript 只是一个跑在浏览器环境里的一门脚本语言，主要用于前端页面交互。
    • 通过Node.js，Javascript 不只运行于浏览器，还可以运行于服务端，打通了前端与后端。

  • Node.js 的特点

    • Node.js的定位：提供一种简单安全的方法在 JavaScript 中构建高性能和可扩展的网络应用程序。
    • 单线程：Node.js 使用单线程来运行，避免了 CPU 上下文切换和内存中的大量执行堆栈。
    • 非阻塞 I/O：得益于 Libuv 强大的异步 I/O，避免了由于需要等待输入或者输出（数据库、文件系统、Web服务器…）响应而造成的 CPU 时间损失。
    • 事件驱动编程：这种编程模式是一种高性能的服务模型。
    • 跨平台：可运行于 Linux 平台，v0.6.0 版本可以在 Windows 平台运行。

  • 适用场景

    • I/O 密集型场景：Node.js 的优势主要在于事件循环，非阻塞异步 I/O，只开一个线程，不会每个请求过来都去创建一个线程，从而产生资源开销。
    • ResutFul API：可以使用 Node.js 来做为中间层，负责组装数据提供 API 接口给到前端调用，这些数据源可能来自第三方接口或者数据库，后端则可以更专注于业务开发。
    • RPC 服务：RPC（Remote Procedure Call，远程过程调用），在当今微服务模式下，我们可能是针对功能或者具体的业务形态进行服务化。

*Nodejs和AJAX的区别：

  • Ajax（异步Javascript和XML）是一种客户端技术，通常用于更新页面内容而不刷新它。
  • 而Node.js是服务器端Javascript运行环境，用于开发服务器软件。

2.4 PHP

  • 什么是PHP？

    PHP（PHP Hypertext Preprocessor）是一种创建动态交互性站点的强有力的服务器端开源脚本语言。

  • 什么是PHP文件？

    • PHP 文件能够包含文本、HTML、CSS 以及 PHP 代码
    • PHP 代码在服务器上执行，而结果以纯文本返回浏览器
    • PHP 文件的后缀是 “.php”

  • PHP 能做什么？

    • PHP 能够生成动态页面内容
    • PHP 能够创建、打开、读取、写入、删除以及关闭服务器上的文件
    • PHP 能够接收表单数据
    • PHP 能够发送并取回 cookies
    • PHP 能够添加、删除、修改数据库中的数据
    • PHP 能够限制用户访问网站中的某些页面
    • PHP 能够对数据进行加密

  • 为什么使用 PHP？

    • PHP 运行于各种平台（Windows, Linux, Unix, Mac OS X 等等）
    • PHP 兼容几乎所有服务器（Apache, IIS 等等）
    • PHP 支持多种数据库
    • PHP 是免费的，易于学习，并可高效地运行在服务器端

3）其他

3.1 Vue

  • 什么是Vue？

    Vue是一套用于构建用户界面的渐进式JavaScript框架。

    • Vue 只关注视图层， 采用自底向上增量开发的设计。

  • 核心特点：

    • 声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式*地将数据渲染进 DOM 的系统。
    • 组件系统：允许使用小型、独立和通常可复用的组件构建大型应用。
      • 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
      • 一个页面映射为组件树，划分组件可维护、可重用、可测试，也就是一个页面由多个组件组合而成。
    • 虚拟DOM：当数据发生变化时，能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。
      • 利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM。
    • MVVM模式
    • 响应式数据绑定

3.2 Servlet

  • 什么是Servlet？

    Java Servlet 是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层。

    • 是运行在 Web 服务器或应用服务器上的程序。
    • Servlet 在 Web 应用程序中的位置：
      在这里插入图片描述

  • 为什么使用Servlet？

    Java Servlet 通常情况下与使用 CGI（Common Gateway Interface，公共网关接口）实现的程序可以达到异曲同工的效果，但相比CGI，优势如下：

    1. 性能明显更好。
    2. 无须再创建一个单独的进程来处理每个客户端请求：因为Servlet 在 Web 服务器的地址空间内执行。
    3. Servlet 是独立于平台的：因为它们是用 Java 编写的。
    4. Servlet 是可信的：服务器上的 Java 安全管理器执行了一系列限制，以保护服务器计算机上的资源。
    5. Java 类库的全部功能对 Servlet 来说都是可用的：它可以通过 sockets 和 RMI 机制与 applets、数据库或其他软件进行交互。

  • Servlet做什么？

    • 读取客户端（浏览器）发送的显式的数据。
      • 这包括网页上的 HTML 表单，或者也可以是来自 applet 或自定义的 HTTP 客户端程序的表单。
    • 读取客户端（浏览器）发送的隐式的 HTTP 请求数据。
      • 这包括 cookies、媒体类型和浏览器能理解的压缩格式等等。
    • 处理数据并生成结果。
      • 这个过程可能需要访问数据库，执行 RMI 或 CORBA 调用，调用 Web 服务，或者直接计算得出对应的响应。
    • 发送显式的数据（即文档）到客户端（浏览器）。
      • 该文档的格式可以是多种多样的，包括文本文件（HTML 或 XML）、二进制文件（GIF 图像）、Excel 等。
    • 发送隐式的 HTTP 响应到客户端（浏览器）。
      • 这包括告诉浏览器或其他客户端被返回的文档类型（例如 HTML），设置 cookies 和缓存参数，以及其他类似的任务。

3.3 HTTP

3.4 浏览器

  • 浏览器是什么？

    浏览器是用来检索、展示以及传递Web信息资源的应用程序。
    • 五种主流浏览器：IE、Firefox、Safari、Chrome及Opera。

  • 浏览器的主要构成（High Level Structure）：

    • 用户界面：包括地址栏、后退/前进按钮、书签目录等（即你所看到的除了用来显示你所请求页面的主窗口之外的其他部分）。
    • 浏览器引擎：用来查询及操作渲染引擎的接口。
    • 渲染引擎（The rendering engine）：用来显示请求的内容。
      • 例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
    • 网络：用来完成网络调用。
      • 例如http请求，它具有平台无关的接口，可以在不同平台上工作。
    • UI后端：用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
    • JS解释器：用来解释执行JS代码。
    • 数据存储：属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据。
      • HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。

  • 浏览器内核

    • 浏览器内核可以分成两部分：渲染引擎（layout engineer / Rendering Engin）和 JS 引擎。

      • 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。
        • 浏览器内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
      • JS引擎：解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。

    • 常见的浏览器内核可以分为四种：Trident、Gecko、Blink、Webkit。

    内核浏览器
    TridentIE
    GeckoMozilla FireFox(火狐浏览器)
    webkitSafari
    Chromium/Bink（Blink 其实是 WebKit 的分支）chrome
    PrestoOpera"前任" 内核（最新的 opera 浏览器现已改用Google Chrome的Blink内核）

    • 移动端的浏览器内核主要说的是系统内置浏览器的内核。
      • iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit
      • Android 4.4 之前的 Android 系统浏览器内核是 WebKit
      • Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink
      • Windows Phone 8 系统浏览器内核是 Trident。
  • 浏览器内部工作原理可参考：https://kb.cnblogs.com/page/129756/
  • 由于不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。前端常见浏览器兼容性问题解决方案可参考：https://blog.csdn.net/weixin_43638968/article/details/109177674

【部分内容参考自】

  • 前端和后端的区别：https://zhuanlan.zhihu.com/p/83515211
  • 前端发展简史：https://blog.csdn.net/freekiteyu/article/details/79927047
  • 前端的意义是什么？：https://www.zhihu.com/question/44812950
  • https://www.w3school.com.cn/ajax/index.asp
  • Node.js 是什么？我为什么选择它？：https://zhuanlan.zhihu.com/p/76635822
  • http://nodejs.cn/learn
  • https://cn.vuejs.org/v2/guide/
  • vue框架简介：https://blog.csdn.net/huangjianfeng21/article/details/92043800
  • Servlet 简介：https://www.runoob.com/servlet/servlet-intro.html
  • 浏览器介绍（常用浏览器，浏览器内核）：https://www.cnblogs.com/niujifei/p/11055559.html

以上是关于前端前端及其技术栈的主要内容，如果未能解决你的问题，请参考以下文章

前端工程化 - 前端技术栈构建

大前端的完整技术栈包括哪些？

2022前端技术栈

Web 前端的技术栈是怎样的

前端技术栈都有哪些

前端技术栈是不是都玩过，那WebGL呢？