later-zc notes

Appearance

一. 软件和应用程序的区别 ​

软件的定义与分类 ​

什么是软件？ ​

  • 软件是指计算机中一系列有组织的程序、数据和文档的集合，用于执行特定任务或满足用户需求。它是计算机系统中无形的部分，与硬件相对。
  • 软件可以细分为系统软件和应用软件：
    • 系统软件：如操作系统（Windows、Linux、macOS）、驱动程序等，主要用于管理硬件资源和提供基础操作环境。
    • 应用软件：如微信、浏览器、办公软件等，用于帮助用户完成特定任务。

软件的特性 ​

  • 无形性：无法触摸到的软件，需要通过屏幕或其他输入/输出设备与用户交互。
  • 可移植性：同一软件可以在不同的硬件平台上运行，只需要根据平台的不同进行相应的修改。
  • 可更新性：软件可以通过补丁、版本更新等方式进行修复和升级，以提供更好的性能和功能。

应用程序的定义与特性 ​

什么是应用程序？ ​

  • 应用程序（Application Program）是指专门为用户执行特定任务而设计的应用软件。应用程序可以是单一功能的小工具（如计算器），也可以是包含多个功能的大型软件（如微软 Office 套件）。

应用程序的特性 ​

  • 面向用户：应用程序直接面向终端用户，提供具体的功能和服务，如聊天、购物、视频播放等。
  • 可交互性：应用程序通常有图形用户界面（GUI），允许用户与程序进行交互。
  • 多样性：应用程序可以涵盖不同领域和用途，如娱乐、教育、商务、医疗等。

应用程序与软件的区别 ​

  • 广义与狭义：软件是一个广义的概念，包含系统软件和应用软件。而应用程序一般指代特定的、可执行的用户程序。
  • 用途和功能：系统软件管理硬件资源，应用程序则是直接满足用户需求的工具。 image-20220325182255188

如何区分软件与应用程序？ ​

  1. 使用场景的不同：
    • 软件包含更广泛的领域，不仅包括直接可见的应用程序，还包括系统后台的操作系统、服务等。
    • 应用程序则是以用户为中心的程序，通常提供用户可操作的功能界面。
  2. 功能与目的的差异：
    • 软件的功能可以包括系统管理、资源分配、应用支持等，目的是让计算机能够有效运行。
    • 应用程序的功能更多是解决特定用户需求，如文字处理、图片编辑、社交聊天等。

二. 一个完善的应用系统包含哪些环节 ​

应用系统的整体架构 ​

一个完善的应用系统通常由多个部分构成，这些部分协同工作，共同提供稳定的功能和服务。系统的架构可以分为以下几个主要环节：

  1. 服务器端开发（后端开发）：
    • 服务器端负责处理业务逻辑、数据库操作、用户请求和响应等核心功能。
  2. 客户端开发：
    • 客户端是用户直接接触的部分，包括移动端、网页端和桌面端。
  3. 数据库设计与管理：
    • 数据库用于存储和管理系统的数据，负责数据的持久化和查询优化。
  4. 运维与部署：
    • 运维与部署涉及到系统的上线、监控和维护，确保系统的稳定和高可用性。

服务器端开发 ​

服务器端是整个系统的核心，通常负责处理复杂的业务逻辑和数据交互。常用的开发语言包括：

  1. Java：
    • 广泛应用于企业级开发，具有良好的性能和稳定性。常用于开发电商、银行等高并发、高安全性的应用系统。
  2. Node.js：
    • 使用 JavaScript 开发的服务器端平台，擅长实时通信、WebSocket 和高并发场景。常用于开发聊天系统、实时数据分析等。
  3. Python：
    • 适合快速开发和数据处理，常用于机器学习、数据科学和后端 API 服务。
  4. Go：
    • 以高并发和高性能著称，适合开发微服务和云计算相关的项目。
  5. C++：
    • 常用于系统级开发，如操作系统、数据库内核、游戏服务器等，对性能有极高的要求。

客户端开发 ​

客户端是用户直接与系统交互的部分，通常分为以下几种类型：

  1. 移动端开发：
    • Android 开发：
      • 使用 Java 或 Kotlin 开发，原生开发提供更好的性能和用户体验。
      • 跨平台解决方案：Flutter（Dart 语言）、React Native（JavaScript），可以同时生成 iOS 和 Android 应用。
    • iOS 开发：
      • 使用 Objective-C 或 Swift 开发，针对苹果设备的优化和封装。
      • 跨平台解决方案：同样可以使用 Flutter 或 React Native 进行开发。
    • 移动设备特殊开发：
      • iPad 开发通常与 iOS 开发一致，但需要适配更大的屏幕和不同的交互方式。
  2. 网页端开发：
    • 前端开发技术：HTML、CSS、JavaScript 是基础，还包括流行的框架和库如 React、Vue.js、Angular。
    • 前后端分离开发：前端与后端通过 API 交互，前端负责渲染和交互逻辑，后端负责数据处理和业务逻辑。
  3. 桌面端开发：
    • Windows 客户端：
      • 使用 C# 和 .NET 平台开发，适合企业级应用和工具软件的开发。
      • 使用 Electron（基于 JavaScript 和 Node.js）可以开发跨平台桌面应用。
    • macOS 客户端：
      • 使用 Objective-C 和 Swift 开发，也可以使用 Qt 或 Electron 实现跨平台开发。

数据库设计与管理 ​

数据库是系统中数据存储和管理的核心。常见的数据库类型有：

  1. 关系型数据库：
    • MySQL、PostgreSQL：结构化数据存储，支持复杂查询和事务处理。
  2. NoSQL 数据库：
    • MongoDB、Redis：适合存储非结构化数据，适用于高并发、海量数据的场景。
  3. 数据库设计原则：
    • 数据库设计需要考虑数据的规范化、冗余、性能优化、索引设计等。

运维与部署 ​

  1. 部署工具和平台：
    • 使用 Docker 容器化技术实现微服务的灵活部署和管理。
    • 使用 Kubernetes 实现容器的自动化部署和管理。
    • 常用云平台包括 AWS、Azure、阿里云等。
  2. 持续集成与持续部署（CI/CD）：
    • 使用 Jenkins、GitLab CI 等工具实现代码的自动测试、打包和部署。
  3. 系统监控与日志管理：
    • 使用 ELK（Elasticsearch、Logstash、Kibana） 或 Prometheus 进行日志收集和性能监控。

三. 网页从编写到浏览器显示的完整流程解析 ​

网页显示过程概述 ​

在用户浏览网页的过程中，从输入网址到浏览器展示页面，这一过程涉及多个环节，包括 DNS 解析、服务器请求、资源加载、渲染解析等步骤。对于前端开发者而言，从开发到部署的每个环节也直接影响到最终的用户体验。

前端工程师的开发与部署过程 ​

  1. 项目开发：
    • 使用 HTML、CSS、JavaScript 开发前端页面，或使用前端框架（如 Vue、React、Angular）进行组件化开发。
    • 使用模块化、组件化的方式组织代码，提高代码的可维护性和可重用性。
  2. 打包与构建：
    • 使用构建工具（如 Webpack、Vite）进行打包、压缩、代码分割、Tree Shaking 等优化处理。
    • 将项目中的各个模块和资源打包为一个或多个可部署的文件（如 JS、CSS、HTML）。
  3. 部署到服务器：
    • 将打包好的文件上传到服务器（如 Nginx、Apache、云服务器）。
    • 配置服务器路径映射，将不同的 URL 路径映射到对应的静态文件或后端 API 服务。
  4. 上线与运维：
    • 项目上线后，通过监控工具（如 Google Analytics、Sentry）监测用户行为和错误日志。
    • 通过持续集成与持续部署（CI/CD）流程，快速修复线上问题并更新版本。

浏览器从输入 URL 到页面展示的详细过程 ​

  1. 输入网址：
    • 用户在浏览器地址栏中输入一个 URL，例如 https://www.baidu.com。
    • 浏览器会进行 URL 合法性验证（如协议、主机名等），并记录历史记录。
  2. DNS 解析：
    • DNS 解析的主要目的是将域名转换为 IP 地址，可以通过本地缓存、hosts 文件和 DNS 服务器来完成解析。
    • 浏览器首先会检查本地 DNS 缓存（浏览器缓存、操作系统缓存）。
    • 如果本地没有缓存，浏览器会向 DNS 服务器（ISP 提供的）发起 DNS 查询，将域名解析为对应的 IP 地址。
    • DNS 解析过程可能会经过多个中间 DNS 服务器（根 DNS 服务器、顶级域名服务器、权威 DNS 服务器）才能找到目标 IP。
  3. 建立 TCP 连接：
    • 根据解析到的 IP 地址，浏览器向目标服务器发起 TCP 连接请求，通常使用 80（HTTP）或 443（HTTPS）端口。
    • 建立 TCP 连接的过程是通过三次握手完成的：
      • 第一次握手：客户端向服务器发送 SYN 请求包。
      • 第二次握手：服务器收到请求，发送 SYN-ACK 包给客户端。
      • 第三次握手：客户端收到确认包，发送 ACK 包给服务器，连接建立完成。
    • 三次握手完成后，浏览器与服务器之间建立稳定的通信通道。
  4. 发送 HTTP 请求：
    • 连接建立后，浏览器发送 HTTP 请求给服务器，请求网页资源（如 HTML、CSS、JS、图片等）。
    • 请求包含请求方法（如 GET、POST）、请求头（如 User-Agent、Cookies、Accept 等）和请求体（POST 请求的表单数据）。
  5. 服务器响应：
    • 服务器接收请求后，服务器根据请求路径、请求方法（如 GET、POST）处理请求
    • 处理完后通过 HTTP 响应返回数据，包括 HTTP 状态码（如 200 成功、404 找不到页面、500 服务器错误等），响应头（如 Content-Type、Cache-Control 等）和响应体（实际的 HTML 内容、JSON 数据等）。
  6. 浏览器接收并解析响应：
    • 浏览器接收服务器响应后开始下载资源，渲染引擎解析响应的 HTML 文件，逐步构建 DOM 树，解析 CSS 文件构建 CSSOM 树。
    • 遇到 JS 文件时，会暂停解析，先下载并执行 JS（v8引擎解析执行js），防止操作尚未构建的 DOM 节点。
  7. 构建渲染树与布局绘制：
    • 浏览器构建 DOM 树和 CSSOM 树，合并为渲染树（Render Tree）。
    • 浏览器计算每个节点的位置和尺寸（布局），然后将渲染树节点绘制到屏幕上（绘制）。
    • JavaScript 的解析和执行可能会导致 DOM 结构的改变或样式的重绘。
  8. 渲染完成显示页面：
    • 最终，用户可以看到完整的网页内容和样式。

浏览器优化与性能提升 ​

  1. 预加载与预渲染：
    • 使用 <link rel="preload"> 和 <link rel="prefetch"> 提前加载重要资源。
    • 使用 <link rel="prerender"> 提前渲染用户可能访问的页面。
  2. 异步加载与代码分割：
    • 使用 async 和 defer 属性异步加载 JS，减少阻塞渲染。
    • 使用动态 import 实现代码分割，按需加载模块，减小首屏渲染时间。
  3. 缓存机制与资源优化：
    • 使用浏览器缓存（如 HTTP 缓存头、Service Worker）减少重复加载。
    • 使用图片优化（如 Lazy Load）、CSS 压缩等减少资源体积。

四. 什么是服务器 ​

1. 定义 ​

  • 服务器本质上也是一台类似电脑一样的主机

2. 特点 ​

  • 二十四小时不关机的（稳定运行）
  • 没有显示器的
  • 一般装的是 linux 操作系统（比如 centos）

五. 网页的三大组成部分及对应的作用 ​

1. 发展历史 ​

  • 阶段一：只有 html 元素
  • 阶段二：html 元素 + css 样式
  • 阶段三(目前处于)：html 元素 + css 样式 + javascript 语言

2. 三大组成部分 ​

  • html + css + javascript

3. 各自作用 ​

  • html 网页的内容结构
  • css 网页的视觉体验
  • javascript 网页的交互处理

六. 什么是浏览器内核，常见的浏览器内核有哪些 ​

1. 浏览器内核是什么 ​

  • 浏览器最核心的部分是 渲染引擎（Rendering Engine），一般也称为 " 浏览器内核 "
  • 负责解析网页语法，并渲染网页

2. 常见的浏览器内核 ​

内核浏览器
Trident （三叉戟）IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器
Gecko（壁虎）Mozilla Firefox （火狐）
Presto（急板乐曲）=> Blink（眨眼）Opera
WebKitSafari、移动端浏览器（Android、ios）、360极速浏览器、搜狗高速浏览器
WebKit（分支优化）=> Blink（目前渲染最快）Google Chrome、Edge
image-20220325182402397

3. 为什么需要做浏览器的适配 ​

  • 因为不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果可能不一样

七. HTML 页面的基本结构 ​

html
<html>
  <head>
    <!-- 一般是用来放网页的元数据(metadata, 描述数据的数据) -->
    <title>网页标题</title>
  </head>
  <body>
    <!-- 网页的主体内容 -->
  </body>
</html>

八. 元素的结构是什么，有哪些单标签元素、双标签元素 ​

1. 什么是元素(Element)呢？ ​

  • 元素是网页的一部分
  • 一个元素可以包含一个数据项，或是一块文本，或是一张图片，亦或是什么也不包含

2. 元素的本质 ​

  • 元素本质上就是浏览器给其加了一些默认的 css 属性罢了
  • 那既然默认可以加，那我们也是可以用别的元素去设置一些 css 属性去替代相应的元素的，所以一些元素之间是可以相互实现的
  • 大多数元素本质上是一样的，只不过是 css 属性不一样罢了（img 元素除外）
  • 例如：h1 元素就是浏览器给其加了一些默认的 css 属性罢了，我们自然可以用 div 元素加上一些对应的 css 属性去代替 h1 元素

3. 元素的结构 ​

  • 开始标签（opening tag）: 包含元素的名称，被左右尖括号所包围。表示元素从这里开始或者开始起作用

  • 结束标签（closing tag）: 与开始标签相似，只是其在元素名之前多包含了一个斜杠。这表示元素的结尾

  • 内容（content）: 元素的内容

  • 元素（Element）: 开始标签、结束标签与内容相结合，便是一个完整的元素

    image-20220325212004208

4. 常见的单双标签元素 ​

  • 双标签元素：html、body、head、h2、p、a、div、...
  • 单标签元素：br、img、hr、meta、input、...

5. 元素的属性 ​

  • 元素也可以拥有属性（Attribute）

  • 属性包含元素的额外信息，这些信息不会出现在实际的内容中

  • 一个属性必须包含如下内容：

    • 一个空格，在属性和元素名称之间（如果已经有一个或多个属性，就与前一个属性之间有一个空格）

    • 属性名称，后面跟着一个等号 =

    • 一个属性值，用一对引号 " " 引起来

      html
      <!-- <h1 属性名="属性值">我是一级标题</h1> -->
<h1 class="title">我是一级标题</h1>

6. 元素属性的分类 ​

  • 有些属性是公共的，每一个元素都可以设置
    • 如 class、id、title 属性
  • 有些属性是元素特有的，不是每一个元素都可以设置
    • 比如 meta 元素的 charset 属性、img 元素的 alt 属性等

注意：

  • HTML 元素不区分大小写，推荐小写
  • 在 xml 语法中，单标签是需要写 / 反斜杠的，但是现在统一不需要加反斜杠了
  • img 元素是一种特殊元素，别名：可替换元素（replace Element）

九. 元素之间的关系 ​

1. 元素的嵌套关系 ​

html
<!-- 元素的内容除了可以是文本，还能是其他元素 -->
<ul>
  <!-- alt + shift + 向下箭头 => 快速复制元素 -->
  <li>
    <div>
      <span>aaa</span>   
      <span>bbb</span>  
    </div>
  </li>
  <li></li>
</ul>

2. 元素之间的关系 ​

  • 父子关系：上述代码中，ul (父) 和 li (子) ， div (父) 和 span (子)
  • 兄弟关系：上述代码中，两个 li 是兄弟关系，两个 span 兄弟关系

十. 注释的作用，HTML 的注释如何编写 ​

1. 什么是注释 ​

  • 注释就是一段代码的说明

    html
    <!-- 注释内容 -->

  • 注释是只给开发者看的，浏览器不会把注释显示给用户看

2. 注释的意义 ​

  • 帮助理清代码思路，方便以后进行查阅
  • 与他人合作开发时，可以减少沟通成本
  • 开发自己的开源框架时，方便别人使用和学习
  • 可以临时注释掉一段代码，方便调试
  • 快捷键：ctrl + /

Released under the MIT License.

Copyright © 2024-present later-zc