跳至主要內容
个人博客

个人博客

路漫漫其修远兮，吾将上下而求索。

项目名称
项目详细描述
链接名称
链接详细描述
书籍名称
书籍详细描述
文章名称
文章详细描述
伙伴名称
伙伴详细介绍
自定义项目
自定义项目
自定义详细介绍
Node.js 介绍

Node.js 介绍

Node.js 是一个免费的、开源的、跨平台的 JavaScript 运行时环境，允许开发人员在浏览器之外编写命令行工具和服务器端脚本.

  • Node.js 是一个服务器端 JavaScript 解释器，解释运行 JavaScript
    • 浏览器
    • Node.js
  • Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境
  • Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效
  • Node.js 的包管理器 npm，是全球最大的开源库生态系统
  • Node.js 是一门动态语言，运行在服务端的 Javascript
路漫大约 2 分钟
Node.js 入门

Node.js 入门

下载

下载地址

LTS（推荐） 和 Current（最新）

  • LTS: Long Time Support 长期支持版本
  • Current：最新版本特性

操作系统

  • Window

    • .msi：windows 安装包；下一步
    • .zip：Windows 二进制；解压缩

  • MacOS

    • .pkg：MacOS 安装包
    • .tar.gz：MacOS 二进制

  • Linux

    • x64：
    • ARM：

  • Source Code: 源代码安装

  • 其他平台

    • Docker 镜像：https://hub.docker.com/_/node/
路漫小于 1 分钟
Node.js 版本时间线

Node.js 版本时间线

  • 时间线
    • 查漏补缺我们所掌握的知识
    • 记录一些重要的更新信息等
    • 做到有据可依

Web 诞生于 1989
JavaScript 诞生 于 1996年
Node.js 诞生于 2009年

  • 2009
    • Node.js 诞生
    • 第一版的 npm 被创建
  • 2010
    • Express 诞生
    • Socket.io 诞生
  • 2011
    • npm 发布 1.0 版本
    • 较大的公司（LinkedIn、Uber 等）开始采用 Node.js
    • hapi 诞生
  • 2012
    • 普及速度非常快
  • 2013
    • 第一个使用 Node.js 的大型博客平台：Ghost
    • Koa 诞生
  • 2014
    • 大分支：io.js 是 Node.js 的一个主要分支，目的是引入 ES6 支持并加快推进速度
  • 2015
    • Node.js 基金会 诞生
    • IO.js 被合并回 Node.js
    • npm 引入私有模块
    • Node.js 4（以前从未发布过 1、2 和 3 版本）
  • 2016
    • leftpad 事件
    • Yarn 诞生
    • Node.js 6
  • 2017
    • npm 更加注重安全性
    • Node.js 8
    • HTTP/2
    • V8 在其测试套件中引入了 Node.js，除了 Chrome 之外，Node.js 正式成为 JS 引擎的标杆
    • 每周 30 亿次 npm 下载
  • 2018
    • Node.js 10
    • ES 模块 .mjs 实验支持
    • Node.js 11
  • 2019
    • Node.js 12
    • Node.js 13
  • 2020
    • Node.js 14
    • Node.js 15
  • 2021
    • Node.js 16
    • Node.js 17
路漫小于 1 分钟
Buffer

Buffer

源代码：lib/buffer.js，是 JavaScript Unit8Array 的子类

JavaScript 语言自身只有字符串数据类型，没有二进制数据类型。

但在处理像 TCP 流 或 文件流 时，必须使用到 二进制数据。因此在 Node.js 中，定义了一个 Buffer 类，该类用来创建一个专门存放二进制数据的缓存区。

路漫大约 2 分钟
CSS 渲染

CSS 渲染

CSS 选择器从右往左解析

CSS 尽量减少使用层级关系的目的

  • 减少选择器匹配的次数
  • 提高 CSS 匹配效率
  • 提高 Render Tree 生成效率

示例

<!-- html -->
<div id="div1">
  <div class="a">
    <div class="b">
      ...
    </div>
    <div class="c">
      <div class="d">
        ...
      </div>
      <div class="e">
        ...
      </div>
    </div>
  </div>
  <div class="f">
    <div class="c">
      <div class="d">
        ...
      </div>
  </div>
</div>
路漫小于 1 分钟
HTML 文档解析和渲染

HTML 文档解析和渲染

DOMContentLoaded 和 load 事件

MDN 定义
DOMContentLoaded

  • 当初始的 HTML 文档 被 完全加载 和 解析完成 之后，DOMContentLoaded 事件被触发。
  • 而无需等待 CSS、图像和子框架的完成加载

load

  • 当所有资源加载完成之后触发
  • 包括所有相关资源: 样式表 CSS、图像 img、脚本 js
路漫大约 2 分钟
浏览器渲染

浏览器渲染

渲染引擎的主流程

浏览器内核不同，前端关注的主要是渲染引擎的不同

主流程基本一致

  • 解析 HTML 以构建 DOM 树
  • 解析 CSS 以构建 StyleRules
  • 构建 render 树
  • 排版布局 render 树
  • 绘制 render 树
  • 显示内容

Webkit

Gecko

加入 JavaScript 后

路漫小于 1 分钟
浏览器基本知识

浏览器基本知识

常用浏览器

  • IE
  • Edge
  • Chrome
  • Firefox
  • Safari
  • Opera

主要构成

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