了解js执行机制以及服务器express框架

芒果555
1,089 阅读6分钟

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

JS任务和事件循环

JS是单线程的

JavaScript是单线程的，也就是说，同一个时刻，JavaScript只能执行一个任务，其他任务只能等待。JS引擎在执行任务时，是一个一个执行的，如果有多个任务，则后面的任务只能等待

那么js为什么要设计为单线程呢?

js是运行于浏览器的脚本语言，因其经常涉及操作dom，如果是多线程的，也就意味着，同一个时刻，能够执行多个任务。

试想，如果一个线程修改 div 为红色，另一个线程 修改div为红色，那么浏览器就不知道该先执行哪个操作。

所以js执行的时候会按照一个任务一个任务来执行。

同步和异步

为什么任务要分为同步任务和异步任务?

如果js的任务都是同步的，那么遇到定时器、网络请求等这类型 需要延时执行的任务 会发生什么？

页面可能会瘫痪，需要暂停下来等待这些需要很长时间才能执行完毕的代码

所以，又引入了异步任务。

同步任务：同步任务不需要进行等待可立即看到执行结果，比如console

异步任务：异步任务需要等待一定的时候才能看到结果，比如setTimeout、网络请求

事件循环

事件循环的比较简单，它是一个在 JavaScript 引擎等待任务，执行任务和进入休眠状态等待更多任务这几个状态之间转换的无限循环。

  1. 当有任务时：

    从最先进入的任务开始执行。

  2. 没有其他任务，休眠直到出现任务，然后转到第 1 步。

任务队列（task queue）

事件循环是通过任务队列的机制来进行协调的。

一个 Event Loop 中，可以有一个或者多个任务队列(task queue)

一个任务队列便是一系列有序任务(task)的集合；

JS执行机制

1661520620147.png

  1. js代码开始执行后，主线程执行栈中会把任务分为两类.
  1. 一类是同步任务, 一类是异步任务; 主线程执行栈优先执行同步任务，
  1. 异步任务会被放入特定的处理程序中，满足条件后，被放到消息(任务/事件)队列中，

  1. 主线程执行栈中所有的同步任务执行完毕之后，通过事件循环去消息(任务/事件)队列中，

    挑选优先满足条件的程序，放入主线程执行栈中执行。事件循环，周而复始，一直执行。

宏任务和微任务

在ES3 以及以前的版本中，JavaScript本身没有发起异步请求的能力，也就没有微任务的存在。在ES5之后，JavaScript引入了Promise，这样，不需要浏览器，JavaScript引擎自身也能够发起异步任务了。 Tick会触发浏览器渲染，不会触发，所以更加轻量级，多使用

1661521044107.png

1661521903072.png

宏任务

(macro)task，可以理解是每次执行栈执行的代码就是一个宏任务

主线程上的执行栈中的代码

每次从事件队列中获取一个事件回调并放到执行栈中执行。

比如去银行排队办业务，每个人的业务就相当于是一个宏任务；

总结起来，宏任务有

setTimeout

setInterval

Ajax

事件

微任务

微任务（microtask）是宏任务中的一个部分，它的执行时机是在同步代码执行之后，下一个宏任务执行之前。

总结起来，微任务有：

Promise.then

process.nextTick(Node.js 环境)

JS优先执行同步任务，然后执行微任务，最后执行宏任务

setTimeout(() => {
    //执行后 回调一个宏事件
    console.log('1')
}, 0)
console.log('2'); //同步
​
new Promise((resolve) => {
    console.log('3');  //同步
    resolve() //异步
}).then(() => {
    console.log('4');  //微事件
}).then(()=>{
    console.log('5') //微事件
})
console.log('6')  //同步
​

所以打印结果是 236451

服务器

网络通信三大要素

网络通信三大要素:协议，域名(IP)，端口号

请求网站的基本流程

浏览器输入地址，回车；（或发送一个Ajax请求）

如果使用的是域名，则查找域名对应的 IP 地址（因为 IP 地址像人的身份证一样，是独一无二的）

检查浏览器缓存

检查本机的hosts文件

通过DNS服务器查询

得到服务器的 IP 地址后，通过http/https协议发送请求服务器，指定端口后，建立连接可以进行数据交换。

发送请求

接收响应

……

1661520074366.png

通过ip找到计算机，再通过端口找到应用程序，符合规则就可进行数据传输。 传输协议：规定数据传输的规则，http或https或file；前端目前只接触这三项。 网络通讯的格式; 请求报文/响应报文; 域名或 IP：电子设备（计算机，服务器）在网络中的唯一标识。 localhost代表本机地址; 127.0.0.1代表本机地址; 端口：应用程序在计算机中的唯一标识。065535之间，01023的端口可能被系统占用。 80是 http 用; 443是 https 用；

express框架

Express 是一个第三方模块，用于快速搭建服务器（替代http模块）

Express 是一个基于 Node.js 平台，快速、开放、极简的 web 开发框架。

Express保留了http模块的基本API，使用express的时候，也能使用http的API，比如 res.end()、req.url

express还额外封装了一些新方法，能让我们更方便的搭建服务器

express提供了中间件功能，其他很多强大的第三方模块都是基于express开发的

参考网站：

expressjs.com

www.expressjs.com.cn

使用express构造web服务器

1661530601203.png

使用Express构建Web服务器步骤：

  1. 加载 express 模块

  2. 创建 express 服务器

  3. 开启服务器

  4. 监听浏览器请求并进行处理

express中的send方法

send方法，用于做出响应

send 方法的优点：

send方法会自动将对象转成JSON格式

send会根据响应体，自动设置 Content-Type 响应头

send 不能响应数字

import express from 'express'
const app = express()
​
app.get('/', function (req, res) {
  res.send('哈哈哈哈')
});
app.listen(3009,function () {
  console.log('端口开启成功');
})

响应头设置

  1. 设置响应状态码：res.status() ; 可以设置响应状态码，200 201 301 302 305 307 等

很少使用；

  1. 设置响应头: res.set({ 属性:值 }) ; Content-Type 等； application/json text/plain 等

很少使用；

前端传递参数的方式有几种?

  1. 参数写到地址中,用&符号连接
  2. 参数写在请求体中

请求参数接收

  1. 请求路径中的参数，根据所在位置不同有两种：查询参数和路由参数；（get/delete常用）

    查询参数: req.query

    路由参数: req.params

  2. 请求体参数一种，但是传递参数的类型，常见的有两种；（post/put常用）

    请求体参数: req.body;

获取请求体参数需要配置一句话，两种类型对应两种不同的配置方式：

app.use( express.urlencode() ) :

对应 content-type: application/x-www-form-urlencoded

app.use( express.json() ) :

对应 content-type: application/json

开放静态资源

想要把某些html/css/js，图片，音频，视频等静态资源发送给客户端，只需要设置一句

express的内置中间件即可；

app.use(express.static(路径));

avatar
文章
阅读
粉丝