🌏【前言】
这是我在b站看到的总结，准备自己慢慢来学习总结，自己的面试经验很薄弱，一点点更新
🌟html
1.flex的布局 用法 属性
2.定位，粘性定位
3.选择器的表达式
4.清除浮动
5.heade标签有哪些
6.script标签有哪些属性
7.canvas使用
🌟css
1.元素显示disply:none,visibility:hidden 区别以及他们是否会触发重绘以及重排
2.元素垂直居中的问题
3.盒子模型 两个盒子模型，区别 使用场景
🌟js
1.闭包
2.继承相关问题 原理 手写
3.原型链 链的过程 原型怎么访问
/*
函数有prototype && __proto__ prototype也就是原型，
原型也是一个对象，所以原型也有__proto__
对象只有__proto__
*/
function user(){
}
console.dir(user);//_proto_(_proto_) prototype (_proto_)
let v = {};
console.dir(v);//_proto_
console.log(user.__proto__.__proto__==user.prototype.__proto__);//true
/*
实例的__proto__指向构造函数的prototype
*/
let arr = [];//构造函数为Array
console.log(arr.__proto__ == Array.prototype)//true
console.log(arr.__proto__.__proto__ == Object.prototype)//true
通过对象找到原型--通过原型的constructor找到构造函数---通过构造函数创建对象 所以construcor不可以丢掉
function User(name){
this.name = name;
this.show = function(){
console.log(this.name);
}
}
let lily = new User('lily');
console.log(lily);
function createByObject(obj,...args){
// .getprototype 通过对象找到原型 .constructor通过constructor找到构造函数
const constructor = Object.getPrototypeOf(obj).constructor;
return new constructor(...args);
}
let ln = createByObject(lily,'ln');
ln.show();
4.let const var 变量提升 作用域
5.基本数据类型，手写类型判断
instanceof 通过原型链查找prototype判断 适用于引用数据类型 但是对数组和函数还是判断不出来
6.数组自身被改变的方法
改变自身值的方法一共有9个，分别为pop、push、reverse、shift、sort、splice、unshift，以及两个ES6新增的方法copyWithin 和 fill。
7.判断数组的方法,数组循环的方法
8.parseInt的原理和第二个参数
parseInt() 函数可解析一个字符串，并返回一个整数。
parseInt(string, radix)
string ：必需。要被解析的字符串。
radix ：可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，
则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。
如果该参数小于 2 或 者大于 36 ，则 parseInt() 将返回 NaN。
9.es6新语法
10.模块化
11.垃圾回收机制
- 标记清除
- 引用计数
12.map weakmap set weakset
WeakMap与Map类似，但有几点区别：
1、WeakMap只接受对象作为key，如果设置其他类型的数据作为key，会报错。
2、WeakMap的key所引用的对象都是弱引用，只要对象的其他引用被删除，垃圾回收机制就会释放该对象占用的内存，从而避免内存泄漏。
3、由于WeakMap的成员随时可能被垃圾回收机制回收，成员的数量不稳定，所以没有size属性。
4、没有clear()方法
WeakSet和Set类似，但有几点区别：
1、WeakSet和set一样存放数据，但是和Set的区别：
2、: WeakSet只能存储对象引用，Set任何数据都可以
3、成员都是弱引用，可以被垃圾回收机制回收，不能被遍历
🌟八股文
1.http1 1.1 2之间的区别
http1 和http1.1区别：
- 长连接
- 节约带宽 header 100 401 if(100)->request body
- HOST域
http1.1和http2区别：
- 多路复用 :做到同一个连接并发处理多个请求
- 数据压缩 :HTTP2.0使用HPACK算法对header的数据进行压缩
- 服务器推送
HTTP 发展历史
HTTP/0.9
- 只有一个命令GET
- 响应类型: 仅 超文本
- 没有header等描述数据的信息
- 服务器发送完毕，就关闭TCP连接
HTTP/1.0
- 增加了很多命令（post HESD ）
- 增加
status code和header - 多字符集支持、多部分发送、权限、缓存等
- 响应：不再只限于超文本 (Content-Type 头部提供了传输 HTML 之外文件的能力 — 如脚本、样式或媒体文件)
HTTP/1.1
- 持久连接。TCP三次握手会在任何连接被建立之前发生一次。最终，当发送了所有数据之后，服务器发送一个消息，表示不会再有更多数据向客户端发送了；则客户端才会关闭连接（断开 TCP）
- 支持的方法:
GET,HEAD,POST,PUT,DELETE,TRACE,OPTIONS - 进行了重大的性能优化和特性增强，分块传输、压缩/解压、内容缓存磋商、虚拟主机（有单个IP地址的主机具有多个域名）、更快的响应，以及通过增加缓存节省了更多的带宽
HTTP2
- 所有数据以二进制传输。HTTP1.x是基于文本的，无法保证健壮性，HTTP2.0绝对使用新的二进制格式，方便且健壮
- 同一个连接里面发送多个请求不再需要按照顺序来
- 头信息压缩以及推送等提高效率的功能
HTTP3
- QUIC“快速UDP互联网连接”（Quick UDP Internet Connections）
HTTP3 的主要改进在传输层上。传输层不会再有我前面提到的那些繁重的 TCP 连接了。现在，一切都会走 UDP。
2.浏览器缓存的全过程
3.强缓存 协商缓存 字段 优先级
4.http状态码
5.h5和cookie的区别
6.js css文件阻塞
7.async defer 异步下载的区别
8.浏览器输入url后的全过程
9.tcp udp的区别
10.队头阻塞
11.promise的常见方法，API
12.promise.all promise.race他的手写
13.history hash他们两个的原理 区别
14.跨域 CORS JSONP 怎么解决
15.webpack打包问题，plugin babel loader之间的区别和用法
16.plugin自己写过吗
🌟代码必会
1.原生AJAX发送请求手写
2.promise封装ajax
3.深拷贝实现手写
4.手写new操作符
5.解析url的参数
6.apply和call和bind的手写
//apply🌰一：
let ln = {
data:[1,2,3,32,34,56,7,16],
};
//Object.getPrototypeOf() 方法用于获取指定对象的原型对象（也就是__protp__的指向）
// Object.setPrototypeOf()，为现有对象设置原型，返回一个新对象接收两个参数：第一个是现有对象，第二是原型对象。
Object.setPrototypeOf(ln,{
max(){
return this.data.sort((a,b)=>b-a)[0];
}
})
console.log(ln.max());//56
let xj = {
lessons:{
js:96,
vue:89,
node:99,
linux:80
},
get data(){
return Object.values(this.lessons)
}
};
console.log(ln.max.apply(xj));//99
//apply🌰二：
let hd = {
data:[1,2,12,3,4,34]
};
console.log(Math.max.apply(null,hd.data));
