随笔随笔随笔

爱学习的小康

已于 2022-02-24 17:31:22 修改

阅读量324

点赞数

文章标签： vue.js

于 2022-02-15 15:05:18 首次发布

本文链接：https://blog.csdn.net/wnk1997/article/details/122945034

版权

从输入URL到页面加载的全过程：
1.首先在浏览器中输入URL
2.查找缓存：浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。
3.DNS域名解析：浏览器向DNS服务器发起请求，解析该URL中的域名对应的IP地址。DNS服务器是基于UDP的，因此会用到UDP协议。
4.建立TCP连接：解析出IP地址后，根据IP地址和默认80端口，和服务器建立TCP连接
5.发起HTTP请求：浏览器发起读取文件的HTTP请求，，该请求报文作为TCP三次握手的第三次数据发送给服务器
6.服务器响应请求并返回结果：服务器对浏览器请求做出响应，并把对应的html文件发送给浏览器
7.关闭TCP连接：通过四次挥手释放TCP连接
8.浏览器渲染：客户端（浏览器）解析HTML内容并渲染出来，浏览器接收到数据包后的解析流程为：

构建DOM树：词法分析然后解析成DOM树（dom tree），是由dom元素及属性节点组成，树的根是document对象
构建CSS规则树：生成CSS规则树（CSS Rule Tree）
构建render树：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）
布局（Layout）：计算出每个节点在屏幕中的位置
绘制（Painting）：即遍历render树，并使用UI后端层绘制每个节点。

react的生命周期:
生命周期：挂载、更新、卸载
在这里插入图片描述
demo：

//组件

class Testlifecycles extends React.Component {
  constructor(props) {
    super(props);
    console.log('constructor');
    this.handleClick = this.handleClick.bind(this);
    this.state = {b: 1};
    // getDefaultProps：接收初始props
    // getInitialState：初始化state
  }
  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps', props, state);

    // 组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；;每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state
    return state;
  }
  componentDidCatch(error, info) {
    console.log('componentDidCatch', error, info);
    // 获取到javascript错误
  }
  handleClick() {
    this.props.parentClick();
  }
  render() {
    return <h2 onClick={this.handleClick}>点击试一下，a:{this.props.a}</h2>;
  }
  componentDidMount() {
    console.log('componentDidMount');
    // 挂载后
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate', nextProps, nextState);

    // 组件Props或者state改变时触发，true：更新，false：不更新
    return true;
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate', prevProps, prevState);
    // 组件更新前触发
    return null;
  }
  componentDidUpdate() {
    console.log('componentDidUpdate');
    // 组件更新后触发
  }
  componentWillUnmount() {
    console.log('componentWillUnmount');
    // 组件卸载时触发
  }
}

//在App中调用Testlifecycles组件
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {a: 1};
  }
  parentClick() {
    this.setState({a: 2});
  }

  render() {
    let x;
    if (this.state.a === 1) {
      x = (
        <Testlifecycles
          parentClick={() => this.parentClick()}
          a={this.state.a}
        />
      );
    } else {
      x = <div>estlifecycles组件被卸载</div>;
    }
    return <div>{x}</div>;
  }
}
//将App挂载到根节点下
ReactDOM.render(<App />, document.getElementById('root'));

const的一些基础知识

	  const arr = [1, 2, 3];
      arr.push(4);
      arr.splice(1, 1);
      arr[0] = 7;
      arr = [1, 2, 3];
      arr = [2, 3];
      console.log(arr);

在这里插入图片描述
直接赋值整个数组的会报错的，其他的操作没事

var定义的问题:

		 var a = 3;
	     (function () {
	       console.log(a);
	       var a = 4;//或者改成let
	     })();

输出都是未定义
在这里插入图片描述

为什么for in效率低：
使用for in循环会将Array当成对象遍历，而Array的存取速度明显比Object要快。所以使用for循环遍历数组比for in循环遍历快。
foreach while map性能都不如for,但比for in好
for >while> foreach>for…of > map>for…in
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map使用方法：
在这里插入图片描述

.sort()原理:
数量小于10的数组使用插入排序，比10大的数组则使用快速排序。

get post的区别:
1）get：请求参数是作为一个key/value对的序列（查询字符串）附加到URL上的。
2）post：请求参数是在http标题的一个不同部分（名为entity body）传输的，这一部分用来传输表单信息，因此必须将Content-type设置为:application/x-www-form-urlencoded。
3）soap：是http post的一个专用版本，遵循一种特殊的xml消息格式Content-type设置为: text/xml 任何数据都可以xml化。
4） GET请求会被浏览器主动cache，而POST不会，除非手动设置。
5）GET产生一个TCP数据包；POST产生两个TCP数据包。GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200(返回数据)；POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok(返回数据)。
6) GET请求的参数参数在url里面，不安全，POST请求的参数放在请求体中，安全。

那用GET还是POST呢:
为了保证信息安全性，注册、登录等操作通常都会使用POST请求，GET请求一般用来获取信息。get还有一点方便大家互相传输，例如我看到一个好的商品，把url发给你，你可以直接打开，post就不能了。

graphql restful:
graphql是post，restful get + post
GraphQL 优点：数据更少，合并请求，订阅功能，
缺点：正常情况下 GraphQL 只会返回 Status Code 200，复杂度特别高
GraphQL可以显著的节省网络传输资源，在带宽紧张的环境中（例如移动端）。总结来说，如果你希望做的应用追求简单而敏捷，且没有什么特殊考量，那就没什么必要使用 GraphQL，REST 可靠、经济、不易出错；反而言之，如果应用的关键点在于组织复杂数据逻辑，或者对于网络环境敏感，那么 GraphQL 会是一发银弹。

什么是跨域:
当一个请求中url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

解决跨域：
搭建一个中转 nginx 服务器，用于转发请求。实际就是把web项目和后端接口项目放到一个域中，这样就不存在跨域问题，然后根据请求地址去请求不同服务器（真正干活的服务器）

cors cookie请求头：
对于简单的跨域请求，浏览器会自动在请求的头信息加上 Origin 字段，表示本次请求来自哪个源(协议 + 域名 + 端口)，服务端会获取到这个值，然后判断是否同意这次请求并返回。

http什么时候断开：
TCP四次挥手的时候服务器只要收到了客户端发出的确认，立即进入CLOSED状态

keep-alive:
服务端会保存当前的 socket，下一次通信不会再三次握手。
keep-alive 上值属性定义了时间，超时以后服务器就会主动断开。以及客户端主动发起断开请求

回流重绘：
当 Render Tree 中部分或全部, 因元素的尺寸、布局、隐藏等改变而需要重新构建，浏览器重新渲染的过程称为回流

当页面中元素样式的改变并不影响b布局时（eg：color、background-color等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

一句话：回流必将引起重绘，重绘不一定会引起回流。

原型原型链继承：
原型：
每个对象都有一个__proto__属性，并且指向它的prototype原型对象
每个构造函数都有一个prototype原型对象
prototype原型对象里的constructor指向构造函数本身
在这里插入图片描述

原型链：
每个对象都有一个__proto__，它指向它的prototype原型对象，而prototype原型对象又具有一个自己的prototype原型对象，就这样层层往上直到一个对象的原型prototype为null
这个查询的路径就是原型链

继承：
在这里插入图片描述

vue双向绑定原理：
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,VUE利用了Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的

简单demo：

	  var Book = {};
      var name = "";
      Object.defineProperty(Book, "name", {
        set(value) {
          name = value;
          console.log("set:", name);
        },
        get() {
          console.log("get:", name);
          return "《" + name + "》";
        },
      });
      Book.name = "vue权威指南"; // 你取了一个书名叫做vue权威指南
      console.log(Book.name); // 《vue权威指南》

事件循环（Event Loop）：
JS 是一门单线程语言，异步操作都是放到事件循环队列里面，等待主执行栈来执行的，并没有专门的异步执行线程。JS首先是同步代码运行，碰到setTimeout之类的宏任务就先放到宏任务的队列里面，碰到promise.resolve()函数里的微任务就放到微任务的队列里面，然后同步代码运行完毕后，开始释放微任务队列，根据微任务先进先出的原则，把最近放在其队列的微任务依次拿出来运行，完了之后，接着再开始释放宏任务队列，根据宏任务先进先出的原则，把最先放在其队列的宏任务依次拿出来运行，完了以后全部结束

下面是一个demo

	  console.log("script start");

      setTimeout(function () {
        console.log("timeout1");
        Promise.resolve()
          .then(function () {
            console.log("promise11");
          })
          .then(function () {
            console.log("promise22");
          });
      }, 10);

      new Promise((resolve) => {
        console.log("promise1");
        resolve();
        console.log("promise2");
        setTimeout(() => console.log("timeout2"), 10);
        console.log("promise3");
      })
        .then(function () {
          console.log("then1");
          setTimeout(() => console.log("timeout3"), 10);
        })
        .then(function () {
          console.log("then2");
          setTimeout(() => console.log("timeout4"), 10);
        });

      console.log("script end");

在这里插入图片描述

简单的说，.then()都是微任务，setTimeout()是宏任务，从上倒下输出完后，先从上到下输出完微任务，再从上到下输出宏任务，微任务里面的宏任务不能输出，宏任务里面的微任务可以输出。

js的最大值
在JavaScript中，2^53 是最大的值，没有比这更大的值了。所以 2^53 + 1 == 2^53，所以这个循环无法终止，会一直执行。

js的数字是怎么表示的：
所有的数值都由浮点数表示,所以会出现0.8-0.6不等于0.2的情况
在这里插入图片描述

webpack几个概念

entry:指定了单一的入口
output:打包后的文件放置的位置
loader:处理.txt等其他类型的文件需要在这配置
plugins:loader 只能针对某种特定类型的文件进行处理，而 plugin能够介入到整个 webpack 编译的生命周期

GraphQL:
GraphQL 是一种针对 Graph（图状数据）进行查询特别有优势的 Query Language（查询语言），所以叫做 GraphQL。
GraphQL 最大的优势是查询图状数据。GraphQL 是 Facebook 发明的。

reacthooks是为了解决什么：
可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

js快速排序：
用的时候就this.quickSort(arr)即可

quickSort(arr, left = 0, right = arr.length - 1) {
      if (left >= right) {
        //如果左边的索引大于等于右边的索引说明整理完毕
        return;
      }
      let i = left;
      let j = right;
      const temp = arr[j]; // 取无序数组最后一个数为基准值
      while (i < j) {
        //把所有比基准值小的数放在左边大的数放在右边
        while (i < j && arr[i] <= temp) {
          //找到一个比基准值大的数交换
          i++;
        }
        // console.log(arr);
        arr[j] = arr[i]; // 将较大的值放在右边如果没有比基准值大的数就是将自己赋值给自己（i 等于 j）
        while (i < j && arr[j] >= temp) {
          //找到一个比基准值小的数交换
          j--;
        }
        arr[i] = arr[j]; // 将较小的值放在左边如果没有找到比基准值小的数就是将自己赋值给自己（i 等于 j）
        console.log(arr);
      }
      arr[j] = temp; // 将基准值放至中央位置完成一次循环（这时候 j 等于 i ）
      console.log(":", arr);
      this.quickSort(arr, left, j - 1); // 将左边的无序数组重复上面的操作
      this.quickSort(arr, j + 1, right); // 将右边的无序数组重复上面的操作
    },