计算机网络

1.计算机网络

七层模型的概念

  • 应用层
    OSI参考模型中最靠近用户的一层,是为计算机用户提供应用接口,也为用户直接提供各种网络服务。我们常见应用层的网络服务协议有:HTTP,HTTPS,FTP,POP3、SMTP等。

  • 表示层
    表示层提供各种用于应用层数据的编码和转换功能,确保一个系统的应用层发送的数据能被另一个系统的应用层识别。如果必要,该层可提供一种标准表示形式,用于将计算机内部的多种数据格式转换成通信中采用的标准表示形式。数据压缩和加密也是表示层可提供的转换功能之一。

  • 会话层
    会话层就是负责建立、管理和终止表示层实体之间的通信会话。该层的通信由不同设备中的应用程序之间的服务请求和响应组成。

  • 传输层
    传输层建立了主机端到端的链接,传输层的作用是为上层协议提供端到端的可靠和透明的数据传输服务,包括处理差错控制和流量控制等问题。该层向高层屏蔽了下层数据通信的细节,使高层用户看到的只是在两个传输实体间的一条主机到主机的、可由用户控制和设定的、可靠的数据通路。我们通常说的,TCP UDP就是在这一层。端口号既是这里的“端”。

  • 网络层
    本层通过IP寻址来建立两个节点之间的连接,为源端的运输层送来的分组,选择合适的路由和交换节点,正确无误地按照地址传送给目的端的运输层。就是通常说的IP层。这一层就是我们经常说的IP协议层。IP协议是Internet的基础。

  • 数据链路层
    将比特组合成字节,再将字节组合成,使用链路层地址 (以太网使用MAC地址)来访问介质,并进行差错检测
    数据链路层又分为2个子层:逻辑链路控制子层(LLC)和媒体访问控制子层(MAC)。
    MAC子层处理CSMA/CD算法、数据出错校验、成帧等;LLC子层定义了一些字段使上次协议能共享数据链路层。 在实际使用中,LLC子层并非必需的。

  • 物理层
    实际最终信号的传输是通过物理层实现的。通过物理介质传输比特流。规定了电平、速度和电缆针脚。常用设备有(各种物理设备)集线器、中继器、调制解调器、网线、双绞线、同轴电缆。这些都是物理层的传输介质。

三次握手

  1. 首先Client端发送连接请求SYN报文,
  2. Server段接受连接后回复ACK报文,并为这次连接分配资源。
  3. Client端接收到ACK报文后也向Server段发送ACK报文,并分配资源,这样TCP连接就建立了。

四次挥手

  1. Client端发起中断连接请求,发送FIN报文
  2. Server端接到FIN报文后,你先发送ACK,Client端就进入FIN_WAIT状态,继续等待Server端的FIN报文。
  3. Server端确定数据已发送完成,向Client端发送FIN报文
  4. Client端收到FIN报文后,发送ACK后进入TIME_WAIT状态,Server端收到ACK后,“就知道可以断开连接了”。Client端等待了2MSL后依然没有收到回复,则证明Server端已正常关闭

tcp/ip协议和udp协议的区别

TCP 与 UDP 的区别:TCP面向连接的,可靠的字节流服务;UDP面向无连接的,不可靠的数据报服务。

websocket的方法和使用

WebSocket是一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。它基于TCP传输协议,并复用HTTP的握手通道。

最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息

new WebSocket('ws://localhost:7070') 开启连接
WebSocket.send() 发送会话
WebSocket.close() 关闭会话
WebSocket.onmessage() 接受会话

2.操作系统

进程与线程的区别

  • 进程 每一个执行中的程序都是一个单独的进程,是系统进行资源分配调度的一个独立单位;
  • 线程进程的一个实体,一个进程中拥有多个线程,线程之间共享地址空间和其它资源(所以通信和同步等操作线程比进程更加容易);
  • 线程上下文的切换比进程上下文切换要快很多。
    (1)进程切换时,涉及到当前进程的 CPU 环境的保存和新被调度运行进程的 CPU 环境的设置。
    (2)线程切换仅需要保存和设置少量的寄存器内容,不涉及存储管理方面的操作。

死锁的形成条件和解决方法

  • 互斥条件:一个资源每次只能被一个线程使用;
  • 请求与保持条件:一个线程因请求资源而阻塞时,对已获得的资源保持不放;
  • 不剥夺条件:进程已经获得的资源,在未使用完之前,不能强行剥夺;
  • 循环等待条件:若干线程之间形成一种头尾相接的循环等待资源关系。

3.css

浮动的特点、清除浮动的方法

浮动特点:(1)脱离文档流,高度塌陷(2)Margin边距重叠(3)两栏布局

消除浮动:
1.设置after伪元素(公司常用),设置 clear:both属性

.clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

2.触发BFC(块级格式化上下文)或haslayout:设置父元素 overflow 或者display:table 属性

flex属性和属性值

display:flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center |  baseline | stretch;

css3新特性

  • 选择器
  • 边框(border-image、border-radius、box-shadow)
  • 背景(background-clip、background-origin、background-size)
  • 渐变(linear-gradients、radial-gradents)
  • 字体(@font-face)
  • 转换、形变(transform)
  • 过度(transition)
  • 动画(animation)
  • 弹性盒模型(flex-box)
  • 媒体查询(@media)

4.JS

AJAX的基本使用

$.ajax({
    type : "GET",  //提交方式
    url : web2, //路径,www根目录下
	datatype: "json", //数据类型
	async: false, //是否为异步操作
    success : function(result) { //返回数据根据结果进行相应的处理
	    var accountname = result.attributes.accountname;
	    alert(accountname);
	}
});

AXIOS的封装

// axios.config.ts
export function request (config) {
    // 1. 创建axios的实例 
    const instance = axios.create({
        baseURL: 'http://111.222.33.44',
        timeout: 5000
        ...config
    })
    
    // 2. axios 请求拦截器 
    // config可以随便命名
    instance.interceptors.request.use(config => {
    	// 在发送请求之前做些什么
        // 不返回, 调用的时候会进入err
        return config
    }, err => {      // 发送都没成功
        console.log(err);
    })
    
    // 3. axios 响应拦截器   
    instance.interceptors.response.use(response=> {
      // 对响应数据做点什么
      console.log("response:", response);
      const { code, data, message } = response.data;
      if (code === 200) return data;
      else if (code === 401) {
        jumpLogin();
      } else {
         Message.error(message);
         return Promise.reject(response.data);
      }
    },
  );
    
    // 4. 发送真正的网络请求
    return instancel(config)
}

fetch函数的使用

fetch('./api/some.json')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.json().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

手写AJAX的使用过程

const getJSON = function (url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, false);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.onreadystatechange = function () {
      if (xhr.readyState !== 4) return;
      if (xhr.status === 200 || xhr.status === 304) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(xhr.responseText));
      }
    };
    xhr.send();
  });
};

map方法的使用

map() 方法通过对每个数组元素执行函数来创建新数组。

0.1+0.2==0.3的判断

JavaScript 中所有数字包括整数和小数都只有一种类型 — Number。使用 64 位固定长度来表示,也就是标准的 double 双精度浮点数。

由于0.1转换成二进制时是无限循环的,所以在计算机中0.1只能存储成一个近似值

解决方法:parseFloat((0.1 + 0.2).toFixed(10))

事件循环和事件队列(宏任务和微任务)

setTimeOut的输出结果

for(var i=1;i<=5;i++) 
{setTimeout(()=>{console.log(i)},i*1000)};

// 输出结果
5 5 5 5 5

修改为
for(let i=1;i<=5;i++) {setTimeout(()=>{console.log(i)},i*1000)};

// 输出结果
1 2 3 4 5

原因:

  • var变量存在变量提升,会将声明提升到作用域顶部,然后for循环执行,setTimeout是宏任务,放在栈底部执行
  • let存在块级作用域,每次取值的作用域都是当前作用域的

写一个快速排序

1.快速排序思路:选择数组中的一个值作为基准,将数组中小于该值的数置于该数之前,大于该值的数置于该数之后,接着对该数前后的两个数组进行重复操作直至排序完成。

2.代码实现:

function quickSort( arr ) {
    if(arr.length <= 1) return arr;
    const num = arr[0];
    let left = [], right = [];
    for(let i = 1;i < arr.length; i++) {
        if(arr[i]<=num) left.push(arr[i]);
        else right.push(arr[i]);
    }
    return quickSort(left).concat([num],quickSort(right));
}

5.Vue

Vue中的Virtual Dom以及原理

Vue中双向数据绑定的原理

Vue-router的原生JS实现

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值