第五届字节跳动青训营 前端进阶学习笔记(九)Node.js 与前端开发实战

news2024/12/25 2:18:12

文章目录

  • 前言
  • Node.js的应用场景
      • 1.典型应用场景
  • Node.js运行时结构
      • 特点
  • Node.js实战
      • 1.搭建一个基本的http服务器
      • 2.返回json数据
      • 3.编写一个简单的静态服务器
      • 4.SSR
      • 5.调试
      • 6.部署
  • 总结

前言

本堂课程重点内容:

  • Node.js的应用场景
  • Node.js的运行时结构
  • Node.js实战

Node.js的应用场景

1.典型应用场景

  • 前端工程化
    • Bundle:webpack、vite、esbuild、parcel
    • Uglify:uglifyjs
    • Transpile:bablejs、TypeScript
    • 现状:难以替代
  • Web服务端应用
    • 学习曲线平缓,开发效率较高
    • 运行效率接近常见的编译语言
    • 社区生态丰富以及工具链成熟
    • 与前端结合的场景会有优势
    • 现状:竞争激烈,有自己独特的优势
  • Electron跨桌面应用
    • 商业应用:vscode、slack、discord、zoom
    • 大型公司内的效率工具
    • 现状:大部分场景在做技术选型时,都值得考虑

Node.js运行时结构

image.png

### 1.基本构成 - V8:JavaScript Runtime, 诊端调试工具(inspector) - libuv:eventloop(事件循环),syscall(系统调用)

特点

  • 异步I/O
    • 当Node.js执行I/O操作时,会在响应返回后恢复操作,而不是阻塞线程并占用额外内存等待
  • 单线程
    • 实际上是JS线程+uv线程池+V8任务线程池+V8 Inspector线程
    • 优点:不需要考虑多线程状态同步问题,同时还能比较高效地利用系统资源
    • 缺点:阻塞会产生更多的负面影响
  • 跨平台
    • 开发成本低,整体学习成本低

Node.js实战

1.搭建一个基本的http服务器

const http = require('http');

const port = 3000;

const server = http.createServer((req, res) => {
  res.end('hello');
});

server.listen(port, () => {
  console.log(`server listen on http://localhost:${port}`);
});

访问http://localhost:3000/

image.png

2.返回json数据

const server = http.createServer((req, res) => {
  const bufs = [];

  req.on('data', (data) => {
    bufs.push(data);
  });
  req.on('end', () => {
    let reqData = {};
    try {
      reqData = JSON.parse(Buffer.concat(bufs).toString());
    } catch (err) {}
    res.setHeader('Content-Type', 'application/json');
    res.end(
      JSON.stringify({
        echo: reqData.msg || 'Hello',
      }),
    );
  });
});

image.png

3.编写一个简单的静态服务器

需要引入fs模块进行文件读取,path和url模块对路径进行处理。

const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');

const folderPath = path.resolve(__dirname, './static');

const server = http.createServer((req, res) => {
  const info = url.parse(req.url);
  const filepath = path.resolve(folderPath, './' + info.path);
  const filestrem = fs.createReadStream(filepath);
  filestrem.pipe(res);
});

const port = 3000;

server.listen(port, () => {
  console.log(`server listen on http://localhost:${port}`);
});

与高性能、高可用的服务相比,还差了:CDN、分布式存储和容灾。

4.SSR

  • 相比于传统HTML模板引擎,可以避免重复编写代码
  • 相比SPA,首屏渲染更快,SEO更加友好
  • 缺点:
    • 通常qps较低,写代码时需要考虑服务端渲染的情况
  • SSR难点
    • 需要处理打包代码
    • 需要思考前端代码在服务端运行时的逻辑
    • 移除对服务端无意义的副作用,或重置环境

5.调试

  • V8 Inspector:开箱即用、特性丰富强大、与前端开发一致、跨平台
  • 场景
    • 查看console.log内容
    • breakpoint
    • 高CPU、死循环:cpuprofile
    • 高内存占用:heapsnapshot
    • 性能分析

6.部署

  • 部署要解决的问题
    • 守护进程:当进程退出时,重新拉起
    • 多进程:cluster便捷地利用多进程
    • 记录进程状态,用于诊断
  • 容器环境
    • 通常有健康检查的手段,只需要考虑多核cpu利用率即可

总结

本次课程主要介绍了Node.js的一些历史背景、应用环境和运行时结构,同时还从零开始搭建了一个基本的http服务器和静态资源服务器,并对SSR的原理和应用进行了相应的讲解和实现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/187305.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用Markdown写出一份漂亮的简历

文章目录背景Markdown编辑器开始写你的简历个人优势项目经历            牧竹子个人技能公司经历项目经验XXXXXX项目 202N.N0.15-202N.N.N导出文档格式高级版修改样式背景 每当你要更新简历时是否因为各个平台不同输入框而陷入适配不同的模板,如此以来为…

全球开源学习平台Moodle

今天是正月初九,老苏开始上班了,起航新程,开工大吉! 什么是 Moodle ? Moodle 是一个开源的在线教育系统(慕课)。旨在为教育工作者、管理人员和学习者提供一个强大、安全且集成的系统&#xff0c…

DP背包问题

目录 一、前言 二、0/1背包 1、装箱问题(lanqiaoOJ题号763) 2、2022(2022年国赛填空题,lanqiaoOJ题号2186) 三、完全背包 1、小明的背包2(lanqiaoOJ题号1175) 四、分组背包 五、多重背包…

Kylin 4.0.1 分布式集群安装部署

目录1. 安装依赖2. 安装Kylin(kylin1上操作)2.1 下载解压2.2 修改conf/kylin.properties2.3 下载Mysql驱动包和创建Mysql数据库2.4 hive-site.xml复制到spark的conf目录2.5 配置环境变量(两台kylin服务器)2.6 kylin运行环境检查2.7 ConfigurationException问题(没有则忽略)2.8 …

神经网络--从0开始搭建全连接网络和CNN网络

前言: Hello大家好,我是Dream。 今天来学习一下如何从0开始搭建全连接网络和CNN网络,并通过实验简单对比一下两种神经网络的不同之处,本文目录较长,可以根据需要自动选取要看的内容~ 本文目录:一、搭建4层全…

Spark核心RDD详解(设计与运行原理,分区,创建,转换,行动与持久化)

RDD设计背景与概念 在实际应用中,存在许多迭代式算法(比如机器学习、图算法等)和交互式数据挖掘工具,这些应用场景的共同之处是,不同计算阶段之间会重用中间结果,即一个阶段的输出结果会作为下一个阶段的输…

go: GOPATH entry is relative; must be absolute path: “F:oocode“.

系列文章目录 文章目录系列文章目录前言一、可以先查看一下啊二、gopath和goroot变量要和设置的一致总结前言 在安装hertz 之类的 总会弹出go 的不合法 等 出现这样的错误 要不就是go的不合法 会爆红 说go无这种命令 go:术语“ go”未被识别为cmdlet,函…

Hystrix断路器

目录 一、概述 (一)分布式系统面临的问题 (二)Hystrix是什么 (三)能干吗 (四)官网 (五)Hystrix官宣,停更进维 二、Hystrix重要概念 &…

JAVA开发(springBoot之HikariDataSource)

HikariDataSource是springBoot自带的数据源管理工具。应该是有zaxxer公司提供贡献给spring社区的。它是一款优秀的数据库连接池工具(新的东西一般会吹吹牛),号称 Java WEB 当前速度最快的数据源,相比于传统的 C3P0 、DBCP、Tomcat…

【数据结构】认识顺序表

目录 1、先来认识一下线性表 1.1、对非空的线性表或者线性结构的特点: 1.2、线性表的实现方式 2、顺序表 2.1、定义一个类,实现顺序表 2.2、顺序表的操作方法 2.2.1、打印顺序表(display) 2.2.2、获取顺序表的长度&#x…

Rancher 中使用 Longhorn 备份恢复数据卷

全文目录导航0. 前言1. NFS 安装配置1.1 安装 nfs 及 rpcbind1.2 创建共享目录1.3 配置访问权限1.4 限制 showmount -e 防止漏洞扫描1.5 防火墙配置2. Longhorn 备份配置2.1 在 Longhorn UI 中配置3. 数据卷备份恢复操作3.1 创建示例工作负载3.2 创建测试数据3.3 创建数据卷备份…

车载以太网 - SomeIP测试专栏 - SomeIP Header - 03

前面已经简单的介绍了整帧SomeIP报文的组成部分,由于Ethernet报文头都是通用的,因此不会做详细的介绍,当然后面在介绍TC8中的TCP、UDP、IPv4、IPv6的时候也会做简单的介绍。不过在这里就不做介绍了,我们直接介绍SomeIP。 SomeIP Header 一、Message ID Message ID是由Serv…

Web3中文|构建Web3融资交易:股权和内部代币分配的比例

2017年,首次币发行(ICO,Initial Coin Offering,也称首次代币发售、区块链众筹,是用区块链把使用权和加密货币合二为一,来为开发、维护、交换相关产品或者服务的项目进行融资的方式)的融资方式激…

聚观早报 | 抖音超市上线;首架国产大飞机 C919 完成首次飞行

今日要闻:抖音超市上线;首架国产大飞机 C919 完成首次飞行;小鹏汽车计划有 5 款车型上市;2023年春节档电影总票房67.58亿元;亚洲首富被空头重创抖音超市上线 1 月 28 日消息,抖音超市已上线抖音 App&#x…

Javadoc(文档注释)详解

Java 支持 3 种注释,分别是单行注释、多行注释和文档注释。文档注释以/**开头,并以*/结束,可以通过 Javadoc 生成 API 帮助文档,Java 帮助文档主要用来说明类、成员变量和方法的功能。文档注释只放在类、接口、成员变量、方法之前…

vue+element高度仿照QQ音乐,完美实现PC端QQ音乐

一.前言 QQ音乐官网:点击访问作者成品效果预览:点击访问作者其他博客成品汇总预览:点击访问 暂时源码并没有提供其他获取渠道,私聊作者获取即可,或通过博客后面名片添加作者,很简单! 二.主要…

创建的vue项目--打包

自创建的项目(未使用项目框架),使用weabpack打包 1.在package.json文件中配置 2.在控制台执行打包命令npm run build 打包完成后,会在项目中生成一个dist文件夹,其中就是打包生成的静态文件 3.打开index.html&…

RocketMq基础详解

1、RocketMq的架构: 在RocketMq中有四个部分组成,分别是Producer,Consumer,Broker,以及NameServer,类比于生活中的邮局,分别是发信者,收信者,负责暂存,传输的…

找到二叉树中的最大搜索二叉树

题目 给定一棵二叉树的头节点 head,一致其中所有节点的值都不一样,找到含有节点最多的搜索二叉树,并返回这棵子树的头节点。 示例 分析 树形dp套路:如果题目求解目标是S规则,则求解流程可以定成以每一个节点为头节点…

【前端】如何判断是页面滚动还是窗口滚动

在写项目的时候遇到这个问题&#xff0c;现在举两个例子来记录这个问题。 页面滚动 html: <div class"temp"><template v-for"item in 100"><div>{{ item }}</div></template> </div>css: .temp {height: 100px;o…