Node.js 与前端开发实战 | 青训营笔记

用户9534627805481
90 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的的第11天

重点

  • Node.js应用场景
  • Node.js结构
  • 编写HTTP server

Node.js

应用场景（why）

前端工程化

image.png

image.png

web服务端应用

image.png

image.png

Electron跨端桌面应用

image.png

image.png

image.png

运行时结构（what）

image.png

image.png

特点

  • 异步i/o
  • 单线程
  • 跨平台

异步i/o

image.png

当Node.js执行I/O操作时，会在响应返回后恢复操作，而不是阻塞线程并占用额外内存等待

image.png

单线程

image.png

跨平台

image.png

编写HTTP Server（how）

安装Node.js

image.png

编写Http Server + Client，收发GET POST请求

HTTP Server

HEELO WORLD

image.png json

image.png

image.png

HTTP client

image.png

promisify

用promise+async await重写：将callback换成promise image.png

编写静态文件服务器

image.png

结果

image.png

与高性能、可靠的服务相比 还需

  • CDN:缓存 + 加速
  • 分布式储存，容灾

编写React SSR服务

SSR特点

  • 相比传统HTML模板引擎：避免重复写代码
  • 相比SPA （single page application）：首屏渲染更快，SEO友好
  • 缺点：qps较低，前端写代码时需考虑服务端渲染情况

HTML方法

image.png React方法 image.png 难点

1.需要处理打包代码 image.png

2.需要思考前端代码在服务端运行的逻辑

image.png 3.移除对服务端无意义的副作用，或重置环境

适用inspector进行调试 诊断

V8 Inspector:开箱即用、特性丰富强大、与前端开发一致、跨平台 使用方法 输入

image.png

场景：

  • 查看console.log内容
  • breakpoint
  • 高CPU\死循环：cpuprofile
  • 高内存占用：heapsnapshot
  • 性能分析

image.png

image.png

image.png

部署简介

image.png

延申话题

image.png github.com/joyeecheung…

image.png

image.png

image.png

image.png

总结

有点听不懂，讲了Node.js结构和编写

avatar
文章
阅读
粉丝