☀小狮子前端の学习☁整理笔记❤ Front-end-learning-to-organize-notes 帮你整理好前端知识体系、更高效地吸收经验成果；另附小狮子前端进阶小册食用指北，敬请关注！

Home Page: https://chodocs.cn/

License: MIT License

HTML 29.88% JavaScript 67.94% CSS 0.34% C++ 1.84%

front-end acm network vue vue-router3 html-css-javascript css javascript

front-end-learning-to-organize-notes's Introduction

☀️Front-end-learning-to-organize-notes

🌱仓库地址

传送门：https://github.com/Chocolate1999/Front-end-learning-to-organize-notes/

📢公告

感谢访问本站，若喜欢请收藏，star支持一下 ✿✿ヽ(°▽°)ノ✿

访问 522道腾讯大厂真题汇总——涵盖各类前端的真题，可根据不同的 Label 查看对应内容，助你春招秋招牛气冲天~

考虑图片过大不太清晰问题，在公众号【小狮子前端】，已经提前为小伙伴们准备好了最全资料（包括思维导图、前端电子书籍、博客笔记等）

⛄笔记网站（更新）

https://yangchaoyi.vip/ （基于hexo-butterfly主题搭建的博客，整理面试记录）

为了让您更好的阅读本仓库笔记，考虑还是建了个人网站，本仓库内容陆续都会更新到网站上，你可以根据分类找到你想阅读的文章，隆重感谢给本仓库点 Star 的小伙伴!

由 Chocolate 和 HearLing 一起搭建的一个免费的文档网站，一站式获取前端知识笔记大全，欢迎访问：https://docs.yangchaoyi.vip/

🐇仓库内容

Ⅰ	Ⅱ	Ⅲ	Ⅳ	Ⅴ	Ⅵ	Ⅶ	Ⅷ	Ⅸ
HTML 总结	CSS 总结	JS 总结	面试经历	LeetCode刷题	Vue及源码	面试技巧	工具总结	前端全家桶

🎉项目经历

项目名称	时间	项目地址
J2EE项目-OnlineSchool（前后端分离的IT教育网站）	2019.07-2019.12	传送门
Vue全家桶开发电商管理系统（Element-UI）	2019.12-2020.01	传送门
Vue-family-bucket-SSR-Koa2-full-stack-development-from-Meituan（高仿美团）	2020.03-2020.04	传送门
hexo-blog-lionkk（基于hexo-butterfly:butterfly:主题魔改博客源码开放）	2020.04-2020.07	传送门
vue-shop（ 🐱 Vue全家桶开发电商管理系统（Element-UI 重制上线版））	2020.06-2020.07	传送门
Vue-MVVM（:star:剖析vue实现原理，动手实现一个简单版的mvvm:+1:）	2020.07	传送门
522道腾讯大厂真题（:star:涵盖整个春招秋招面试:+1:）	2021.02	传送门
基于 Next.js 和 Tailwind CSS 个人博客项目（The most beautiful blog in modern times）	2022.08 - 至今	传送门

☀️小狮子

「成长之路」挥手2020，Chocolate 同学年度总结，所遇 | 所思 | 所学 | 所悟（年度征文）

👍Chocolate 与 HearLing 同学前端学习笔记大汇总

在这里整合一下输出的文章，不定期更新，以下为部分优质文章，所有文章均首发于掘金「一百个Chocolate」与「HearLing」

JS

CSS

「面试」前端高频CSS面试题及答案

算法

Vue必知必会

🐮化身面试官出30+Vue面试题，超级干货（附答案）｜牛气冲天新年征文

学习Vue源码

计算机网络

浏览器工作原理

服务外包

从大一到大三，我与服务外包大赛🏆

小册

小狮子前端Vue进阶小册开通食用指北

总结

💝贡献

将会持续分享关于前端面试真题，从零到拿到满意的Offer！觉得不错，来个Star!

同时，也欢迎你对本仓库的贡献，欢迎您的面试经验分享，如需贡献，公众号留言即可。

🌻版权申明

博客中的每篇文章都是我一字一句敲出来的，如需转载，请附上原文链接，表示对原作者的尊重。谢谢合作！

📃排版

笔记内容按照中文文案排版指北进行排版。

🏆结尾

一起交流学习可以加企鹅群【666151691】

欢迎关注微信公众号：小狮子前端

可以联系到我，谢谢您的支持！✿✿ヽ(°▽°)ノ✿

注：本仓库不参与商业行为，也请各位读者周知。(This warehouse is not involved in commercial activities.)

转载使用请注明出处，谢谢！

License

MIT

front-end-learning-to-organize-notes's People

Contributors

Stargazers

Watchers

Forkers

choi185 lucifer-ww liliang8858 mianlang wushaoyeye qq18350 huanqiuhuatou theglowofnewmoon if540 jelly-jk coollaughing66 yangzhigang1998 wmxnlfd itsujingli sunweiconfidence ruoling007 shyshy-2 fengming-fang hurenxun donmind29 hongruyang whw-haha touzi-me ishika0902 mmaoauroraso 15162067774 wangjian0610 yangz-hi babyyan gx-show dolphinhome githaonan kevinbp0608 kishori2019 xuezechao2012 jiapy97 niuhongchaoeip chen-y lh632861400 coollaughing666 rj-zou saier wringy jojo-cpu gyx2016 nekodeng orangecolaa xbwcoding doyouhearpeoplesing oduok yijingliedge aiss9 one-big-bug pyramid1 zixiyixi qinhua hefangs tammy-zting antonizhubar peal-eng jay6697117 quantanguoa hht127137 shuangwaiwai433 1148716206 sun-unc frontendmasterlh cheng-q binggana nywgithub yinuo-2 background-position yueyataihen skyplaying wu-jianyong lishanlei gggumiiinqiii furholeder keyzf snowicelove wu-jian-yong hi-2015 online-books shervinchen wkm-wangzhe wangliangxin themaximumpotential yuehan2020 yw738 a244885878 desiredev guoxuguoxu1989 sunscheung bert1100 melodyjerry szh941002 haomengrujiu fifththirteen wylyzyk lzwgoodmen

front-end-learning-to-organize-notes's Issues

tcp三次握手

这是博主面向腾讯学习的面试题大整理系列，可以在如下github仓库Issues中通过 Labels 标签分类查看相关内容，同时欢迎大家指正可能的错误并且提出自己的解答，希望大家学的鱼块，春秋招顺利！

传送门：https://github.com/Chocolate1999/Front-end-learning-to-organize-notes

往期精选：

tcp三次握手

三次握手要确认双方的两样能力：发送能力与接收的能力。

最开始双方都属于CLOSED状态。然后服务器开始监听某个端口，进入LISTEN状态。

客户端注重发起连接，发送SYN，自己变成了SYN-SENT状态
服务端收到，返回SYN和ACK（对应客户端发来的SYN），自己变成了SYN-RECD
客户端再发送ACK给服务端，自己变成ESTABLISHED（established）状态；服务端收到ACK之后，也变成这个状态

【作者：Chocolate】https://chocolate.blog.csdn.net/

学如逆水行舟，不进则退

出现 304 的场景，通过什么协议头来确认（304 的响应头）

【挑战系列9】实现apply方法

/* 实现apply */
function bar(name, age) {
  console.log(name)
  console.log(age)
  console.log(this.value);
}
var foo = {
  value: 1
};
Function.prototype.myApply = function(content = window) {
  content.fn = this
  let res
  if(arguments[1]){
    res = content.fn(...arguments[1])
  }else{
    res = content.fn()
  }
  delete content.fn
  return res
}
bar.myApply(foo,['Chocolate',18])

HTTP协议，1.1和2.0的区别，了解哪些请求方法，请求/响应头部

http介绍一下，为什么http2.0不普及，websocket的基本指令，性能

传送门：https://github.com/Chocolate1999/Front-end-learning-to-organize-notes

往期精选：

http介绍一下，为什么http2.0不普及，websocket的基本指令，性能

关于http2不普及这个问题，可能随着时间过去，这个问题已经过时了，因此，这里提供一些看到的文章。

【作者：Chocolate】https://chocolate.blog.csdn.net/

学如逆水行舟，不进则退

爬虫，网站如何去做防止，如何判断

传送门：https://github.com/Chocolate1999/Front-end-learning-to-organize-notes

往期精选：

爬虫，网站如何去做防止，如何判断

如何判断

下面介绍4中最常见的形式：

1.cookie检测，浏览器是会保存cookie的，这样网站会根据检测cookie来识别你是否是真实的用户，若是爬虫没有伪装好，将会触发被限制网页访问网页访问。
同样网站是可以根据这些途径去监测是否有爬虫，爬虫工作者也都可以依照这原理去攻破。比如是利用IP检测的，我们就可以用代理IP来进行换IP处理。

2、锁IP检测，即会检测到用户锁IP网页访问网页访问的速度，要是访问速度达到设置的阈值，便会开启限制，封锁IP，让爬虫中止了脚步，不能够重复获取信息。针对锁IP检测，（ipidea）大量优质资源高匿的安全保障可以很好的攻破限制。
3、验证码检测，设置登陆验证码限制，另外还有过快网页访问设置验证码限制等，若是没有输入正确的验证码，将没法再获取到信息。由于爬虫是可以借助其他的工具识别验证码，故网站不断的加深验证码的难度，从普通的纯数据研验证码到混合验证码，或者滑动验证码，图片验证码等。
4、请求头检测，爬虫并不是用户，在访问浏览时，如果没有其他的特征，网站是可以根据检测爬虫的请求头来检测对方到底是用户或者爬虫。

防爬虫

防爬虫，简单来说，就是在尽量减少对正常用户的干扰的情况下尽可能的加大爬虫的成本。

　爬虫不仅会占用大量的网站流量，造成有真正需求的用户无法进入网站，同时也可能会造成网站关键信息的泄漏，所以为了避免这种情况发生网站开发工程师必须掌握相应的反爬虫技术。下面为大家提供几种可行的反爬虫方案:

1、通过user-agent来控制访问

ser-agent能够使服务器识别出用户的操作系统及版本、cpu类型、浏览器类型和版本。很多网站会设置user-agent白名单，只有在白名单范围内的请求才能正常访问。所以在我们的爬虫代码中需要设置user-agent伪装成一个浏览器请求。有时候服务器还可能会校验Referer，所以还可能需要设置Referer(用来表示此时的请求是从哪个页面链接过来的)。

2、通过IP来限制

当我们用同一个ip多次频繁访问服务器时，服务器会检测到该请求可能是爬虫操作。因此就不能正常的响应页面的信息了。当然这种反爬虫技术可以通过使用IP代理池来反反爬虫。网上就有很多提供代理的网站。

3、设置请求间隔

一般爬虫抓取网站时会制定相应的爬虫策略，但是有些恶意的爬虫会不间断的工具某个网站，面对这种情况，我们可以通过设计请求间隔来实现反爬虫，避免在爬虫短时间内大量的访问请求影响网站的正常运行。

4、自动化测试工具Selenium

Web应用程序测试的Selenium工具。该工具可以用于单元测试，集成测试，系统测试等等。它可以像真正的用户一样去操作浏览器(包括字符填充、鼠标点击、获取元素、页面切换)，支持Mozilla Firefox、Google、Chrome、Safari、Opera、IE等等浏览器。

5、参数通过加密

某些网站可能会将参数进行某些加密，或者对参数进行拼接发送给服务器，以此来达到反爬虫的目的。这个时候我们可以试图通过js代码，查看破解的办法。或者可以使用"PhantomJS",PhantomJS是一个基于Webkit的"无界面"(headless)浏览器，它会把网站加载到内存并执行页面上的JavaScript，因为不会展示图形界面，所以运行起来比完整的浏览器更高效。

6、通过robots.txt来限制爬虫

robots.txt是一个限制爬虫的规范，该文件是用来声明哪些东西不能被爬取。如果根目录存在该文件，爬虫就会按照文件的内容来爬取指定的范围。例如大家可以尝试方位淘宝的robots.txt文件：https://error.taobao.com/robots.txt。可以看到淘宝对爬虫访问的限制。User-agent: *表示禁止一切爬虫访问。

爬虫与反爬虫是互联网开发工程师之间的斗智斗勇。作为网站开发者即要掌握爬虫的技术，还要跟进一步去了解如何实现反爬虫。

参考：

通常网站是如何判断爬虫的？
常见的反爬虫技术有哪些？如何防止别人爬自己的网站？

【作者：Chocolate】https://chocolate.blog.csdn.net/

学如逆水行舟，不进则退

POST和GET 的区别，除了长度，安全其他的

传送门：https://github.com/Chocolate1999/Front-end-learning-to-organize-notes

往期精选：

POST和GET 的区别，除了长度，安全其他的

从标准上来看，GET 和 POST 的区别如下：

GET 用于获取信息，是无副作用的，是幂等的，且可缓存
POST 用于修改服务器上的数据，有副作用，非幂等，不可缓存

GET 和 POST 报文上的区别

GET 和 POST 方法没有实质区别，只是报文格式不同。

GET 和 POST 只是 HTTP 协议中两种请求方式，而 HTTP 协议是基于 TCP/IP 的应用层协议，无论 GET 还是 POST，用的都是同一个传输层协议，所以在传输上，没有区别。

报文格式上，不带参数时，最大区别就是第一行方法名不同

POST方法请求报文第一行是这样的 POST /uri HTTP/1.1 \r\n
GET方法请求报文第一行是这样的 GET /uri HTTP/1.1 \r\n

两种方法本质上是 TCP 连接，没有差别，也就是说，如果我不按规范来也是可以的。我们可以在 URL 上写参数，然后方法使用 POST；也可以在 Body 写参数，然后方法使用 GET。当然，这需要服务端支持。

常见问题

GET 方法参数写法是固定的吗？

在约定中，我们的参数是写在 ? 后面，用 & 分割。

我们知道，解析报文的过程是通过获取 TCP 数据，用正则等工具从数据中获取 Header 和 Body，从而提取参数。

也就是说，我们可以自己约定参数的写法，只要服务端能够解释出来就行，一种比较流行的写法是 http://www.example.com/user/name/chengqm/age/22。

POST 方法比 GET 方法安全？

按照网上大部分文章的解释，POST 比 GET 安全，因为数据在地址栏上不可见。

然而，从传输的角度来说，他们都是不安全的，因为 HTTP 在网络上是明文传输的，只要在网络节点上抓包，就能完整地获取数据报文。

要想安全传输，就只有加密，也就是 HTTPS。

GET 方法的长度限制是怎么回事？

首先说明一点，HTTP 协议没有 Body 和 URL 的长度限制，对 URL 限制的大多是浏览器和服务器的原因。

浏览器原因就不说了，服务器是因为处理长 URL 要消耗比较多的资源，为了性能和安全（防止恶意构造长 URL 来攻击）考虑，会给 URL 长度加限制。

POST 方法会产生两个TCP数据包？

有些文章中提到，post 会将 header 和 body 分开发送，先发送 header，服务端返回 100 状态码再发送 body。

HTTP 协议中没有明确说明 POST 会产生两个 TCP 数据包，而且实际测试(Chrome)发现，header 和 body 不会分开发送。

所以，header 和 body 分开发送是部分浏览器或框架的请求方法，不属于 post 必然行为。

参考：

【作者：Chocolate】https://chocolate.blog.csdn.net/

学如逆水行舟，不进则退

【挑战系列5】用CSS实现三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画三角形</title>
    <style>
        .triggle{
            width: 0px;
            height: 0px;
            border-top: 40px solid transparent;
            border-left: 40px solid transparent;
            border-bottom: 40px solid red;
            border-right: 40px solid transparent;
            margin: 40px;
        }
    </style>
</head>
<body>
    <div class="triggle"></div>
</body>
</html>

tcp是怎么去保证可靠传输的？

传送门：https://github.com/Chocolate1999/Front-end-learning-to-organize-notes

往期精选：

tcp是怎么去保证可靠传输的？

应用数据被分割成 TCP 认为最适合发送的数据块。
TCP 给发送的每一个包进行编号，接收方对数据包进行排序，把有序数据传送给应用层。
校验和：TCP 将保持它首部和数据的检验和。这是一个端到端的检验和，目的是检测数据在传输过程中的任何变化。如果收到段的检验和有差错，TCP 将丢弃这个报文段和不确认收到此报文段。
TCP 的接收端会丢弃重复的数据。
流量控制：TCP 连接的每一方都有固定大小的缓冲空间，TCP的接收端只允许发送端发送接收端缓冲区能接纳的数据。当接收方来不及处理发送方的数据，能提示发送方降低发送的速率，防止包丢失。TCP 使用的流量控制协议是可变大小的滑动窗口协议。（TCP 利用滑动窗口实现流量控制）
拥塞控制：当网络拥塞时，减少数据的发送。
ARQ(自动重传请求)协议：也是为了实现可靠传输的，它的基本原理就是每发完一个分组就停止发送，等待对方确认。在收到确认后再发下一个分组。
超时重传：当 TCP 发出一个段后，它启动一个定时器，等待目的端确认收到这个报文段。如果不能及时收到一个确认，将重发这个报文段。

【作者：Chocolate】https://chocolate.blog.csdn.net/

学如逆水行舟，不进则退

dns过程

在TCP建立连接后，路由器发生了什么变化

【挑战系列1】以下代码输出结果

console.log(1);
setTimeout(() => {
  console.log(2);
  process.nextTick(() => {
    console.log(3);
  });
  new Promise((resolve) => {
    console.log(4);
    resolve();
  }).then(() => {
    console.log(5);
  });
});
new Promise((resolve) => {
  console.log(7);
  resolve();
}).then(() => {
  console.log(8);
});
process.nextTick(() => {
  console.log(6);
});
setTimeout(() => {
  console.log(9);
  process.nextTick(() => {
    console.log(10);
  });
  new Promise((resolve) => {
    console.log(11);
    resolve();
  }).then(() => {
    console.log(12);
  });
});

tcp和udp区别

传送门：https://github.com/Chocolate1999/Front-end-learning-to-organize-notes

往期精选：

tcp和udp区别

首先

TCP是面向连接的、可靠的、基于字节流的传输层协议
UDP是一个面向无连接的传输层协议

详细的区别：

1、tcp是基于连接的，可靠性高；udp是基于无连接的，可靠性较低；

2、由于tcp是连接的通信，需要有三次握手、重新确认等连接过程，会有延时，实时性差；由于协议所致，安全性较高；而udp无连接，无建立连接的过程，因而实时性较强，安全略差；

3、在传输相同大小的数据时，tcp首部开销20字节；udp首部开销只有8个字节，tcp报头比udp复杂，故实际包含的用户数据较少。tcp无丢包，而udp有丢包，故tcp开销大，udp开销较小；

4、每条tcp连接只能是点到点的；udp支持一对一、一对多、多对一、多对多的交互通信。

应用场景的区别：

由于TCP和UDP的特点，如果对实时性要求高和高速传输的场景下需要使用UDP；
如果需要传输大量数据且对数据可靠性要求高的场景使用TCP；
在可靠性要求低追求效率的情况使用UDP；

【作者：Chocolate】https://chocolate.blog.csdn.net/

学如逆水行舟，不进则退

http2相关问题。在http1的时代，会经常把很多资源部署在不同域名下，为什么？（有可能是减少cookie的传输量）

【挑战系列6】用JS实现判断堆栈的出栈顺序是否合理

/* 判断堆栈的出栈顺序是否合理 */
let validStack = (inArr, outArr) => {
  if(inArr == null || outArr == null) return false
  let stack = []
  for(let i=0;i<inArr.length;i++){
    stack.push(inArr[i])
    while(stack.length && stack[stack.length-1] === outArr[0]){
      stack.pop()
      outArr.shift()
    }
  }
  return stack.length === 0? true : false
}
let inArr = [1,2,3,4,5]
let outArr = [4,5,3,2,1]
console.log(validStack(inArr, outArr))

TCP和UDP的区别和场景，又问如果让你设计一个既保证准确性速度又快的协议，怎么做

【挑战系列7】用setTimeout来实现 setInterval

/* 用setTimeout来实现 setInterval */
let newInterval = (fn, time) => {
  let inside = () =>{
    fn();
    setTimeout(inside,time)
  }
  setTimeout(inside,time)
}
let doSome = () => {
  console.log('执行Go')
}
newInterval(doSome,1000)

为什么tcp连接是可靠的（校验和重传）

http状态码 302 504分别代表什么意思

传送门：https://github.com/Chocolate1999/Front-end-learning-to-organize-notes

往期精选：

http状态码 302 504分别代表什么意思

302 Found

请求的资源现在临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。

504 Gateway Timeout

当服务器作为网关，不能及时得到响应时返回此错误代码。

完整状态码请查阅 MDN HTTP状态码

【作者：Chocolate】https://chocolate.blog.csdn.net/

学如逆水行舟，不进则退

通过什么机制处理服务端接收数据乱序丢包等（滑动窗口和拥塞控制）

【挑战系列8】实现call方法

function bar(name, age) {
  console.log(name)
  console.log(age)
  console.log(this.value);
}
var foo = {
  value: 1
};
Function.prototype.myCall = function (content = window){
  content.fn = this
  let args = [...arguments].slice(1)
  let res = content.fn(...args)
  delete content.fn
  return res
}
bar.myCall(foo,'Chocolate',18)

OSI7层模型每层大致用处及相关协议

session怎么保存、有多台服务器，sessionid 怎么找

【挑战系列4】实现一个倒计时

截止时间 2020年11月11日 0点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>倒计时</title>
</head>
<body>
  <section>
    <p>倒计时</p>
    <span class="daySpan"></span>
    <span class="hourSpan"></span>
    <span class="minuSpan"></span>
    <span class="secondSpan"></span>
  </section>
  <script>
    let daySpan = document.querySelector('.daySpan')
    let hourSpan = document.querySelector('.hourSpan')
    let minuSpan = document.querySelector('.minuSpan')
    let secondSpan = document.querySelector('.secondSpan')
    let deadLine = new Date('2020-11-11 00:00')
    let countDown = () =>{
      let timeout = deadLine - new Date()
      if(timeout < 0) return 0
      let day = Math.floor(timeout/1000/60/60/24)
      let hour = Math.floor(timeout/1000/60/60%24)
      let minu = Math.floor(timeout/1000/60%60)
      let second = Math.floor(timeout/1000%60)
      daySpan.innerHTML = day + '天'
      hourSpan.innerHTML = hour + '时'
      minuSpan.innerHTML = minu + '分'
      secondSpan.innerHTML = second + '秒'
      setTimeout(countDown,1000)
    }
    countDown()
  </script>
</body>
</html>

http头部chunk

响应状态码，200(from disk cache)，200（from memory cache），304的区别

传送门：https://github.com/Chocolate1999/Front-end-learning-to-organize-notes

往期精选：

响应状态码，200(from disk cache)，200（from memory cache），304的区别

这个属于HTTP缓存相关内容了，HTTP缓存，也可以叫浏览器缓存

浏览器缓存有两种：200 OK (from memory/disk cache) 和 304 Not Modified

1、200 OK (from memory/disk cache)

这种缓存方式已经很普遍，大部分网站的静态文件都采用了，200 OK (from memory cache)或者200 OK (from disk cache)都是直接读取客户端的缓存，无需再请求服务器。一般是在Apache或者Nginx里设置，比如Nginx配置里会有类似这样的配置：

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)${expires 30d;}location ~ .*\.(js|css)?${expires 12h;}

这样就可以给静态文件缓存了，在有效期内，浏览器会直接读取客户端的缓存，而不用再请求服务器，除非用户清除了缓存或者使用Ctrl+F5强制刷新了页面。

2、304 Not Modified（不会从服务器端获取数据，而是直接使用直接第一次200 ok时获取的缓存数据）

304缓存和上面最大的区别是浏览器需要向服务器询问一次，如果服务器端认为没有内容更新，直接返回304状态码，无需返回body内容，浏览器就会直接取缓存内容输出，这样省掉了没必要的数据传输，也就提升了访问速度。

两个的区别是 200 OK (from disk cache) 是浏览器没有与服务器进行确认，直接用浏览器缓存。304 是浏览器和服务器确认了一次缓存有效性，再启用缓存

禁止200 OK (from disk cache) 这个缓存的方法是，ajax 请求是带上参数 cache: false

完整状态码请查阅 MDN HTTP状态码

【作者：Chocolate】https://chocolate.blog.csdn.net/

学如逆水行舟，不进则退

【挑战系列12】实现浅拷贝与深拷贝

实现浅拷贝

/* 实现浅拷贝的几种方式 */
let obj = {
  a: 1,
  b: {
      c: 2,
      d: 3,
      e: {
        name: 'Chocolate',
        age: 18
      },
      f: new Date('2020-11-11 00:00')
  },
  d: new RegExp(/^\s+|\s$/g)
}
/* Object.assign() */
let res = Object.assign({},obj)
console.log(res)

/* 展开运算符... */

let res = {...obj}
console.log(res)

/* 实现浅拷贝 */
let shallowClone = (obj) => {
  let ans = {}
  for(let key in obj){
    if(obj.hasOwnProperty(key)){
      ans[key] = obj[key]
    }
  }
  return ans
}
console.log(shallowClone(obj))

实现深拷贝

let obj = {
  a: 1,
  b: {
      c: 2,
      d: 3,
      e: {
        name: 'Chocolate',
        age: 18
      },
      f: new Date('2020-11-11 00:00')
  },
  d: new RegExp(/^\s+|\s$/g)
}

/* 实现深拷贝 */

/* JSON.parse(JSON.stringify()) */
let res = JSON.parse(JSON.stringify(obj))
console.log(res)

let deepClone = (obj,map = new WeakMap()) => {
  if(obj == null) return obj
  if(obj instanceof Date) return new Date(obj)
  if(obj instanceof RegExp) return new RegExp(obj)
  if(typeof obj !== 'object') return obj
  if(map.has(obj)) return map.get(obj)
  let cloneObj = new obj.constructor()
  map.set(obj,cloneObj)
  for(let key in obj){
    if(obj.hasOwnProperty(key)){
      cloneObj[key] = deepClone(obj[key],map)
    }
  }
  return cloneObj
}
let res = deepClone(obj)
console.log(res)

http2.0有了解吗？有抓包看看到底什么个情况吗？

CDN的原理是什么

tcp拥塞控制（四部分）

get 发一个 tcp 包，post 发两个 tcp 包，这种情况是一定的吗，什么情况下不是这样

为什么cookie可以用来保存登录状态

TCP的超时重传

【挑战系列3】下面表达式各自输出什么？

function Foo() {
  getName = function(){ console.log(1); };
  return this;
}
Foo.getName = function() { console.log(2); };
Foo.prototype.getName = function(){ console.log(3); };
var getName = function() { console.log(4); };
function getName(){ console.log(5); }

Foo.getName(); //
getName(); //
Foo().getName(); //
getName(); //
new Foo.getName(); //
new Foo().getName(); //

常见状态码知道哪些？ 304 403 405分别是什么

传送门：https://github.com/Chocolate1999/Front-end-learning-to-organize-notes

往期精选：

【亡羊补牢】计算机网络灵魂之问第1期一道百度笔试题引发的血案（有了IP地址和子网掩码，广播地址还求不出来？）

常见状态码知道哪些？ 304 403 405分别是什么

HTTP 响应状态代码指示特定 HTTP 请求是否已成功完成。响应分为五类：信息响应(100–199)，成功响应(200–299)，重定向(300–399)，客户端错误(400–499)和服务器错误 (500–599)。

信息响应

100 Continue

这个临时响应表明，迄今为止的所有内容都是可行的，客户端应该继续请求，如果已经完成，则忽略它。

成功响应

200 OK

请求成功。成功的含义取决于HTTP方法：

GET：资源已被提取并在消息正文中传输。
HEAD：实体标头位于消息正文中。
POST：描述动作结果的资源在消息体中传输。
TRACE：消息正文包含服务器收到的请求消息

204 No Content

服务器成功处理了请求，但不需要返回任何实体内容，并且希望返回更新了的元信息。响应可能通过实体头部的形式，返回新的或更新后的元信息。如果存在这些头部信息，则应当与所请求的变量相呼应。如果客户端是浏览器的话，那么用户浏览器应保留发送了该请求的页面，而不产生任何文档视图上的变化，即使按照规范新的或更新后的元信息应当被应用到用户浏览器活动视图中的文档。由于204响应被禁止包含任何消息体，因此它始终以消息头后的第一个空行结尾。

206 Partial Content

服务器已经成功处理了部分 GET 请求。类似于 FlashGet 或者迅雷这类的 HTTP 下载工具都是使用此类响应实现断点续传或者将一个大文档分解为多个下载段同时下载。该请求必须包含 Range 头信息来指示客户端希望得到的内容范围，并且可能包含 If-Range 来作为请求条件。

重定向

300 Multiple Choice

被请求的资源有一系列可供选择的回馈信息，每个都有自己特定的地址和浏览器驱动的商议信息。用户或浏览器能够自行选择一个首选的地址进行重定向。

301 Moved Permanently

被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个 URI 之一。如果可能，拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定，否则这个响应也是可缓存的。

302 Found

请求的资源现在临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。

304 Not Modified

如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。

307 Temporary Redirect

请求的资源现在临时从不同的URI 响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。

客户端响应

400 Bad Request

1、语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。
2、请求参数有误。

401 Unauthorized

当前请求需要用户验证。该响应必须包含一个适用于被请求资源的 WWW-Authenticate 信息头用以询问用户信息。客户端可以重复提交一个包含恰当的 Authorization 头信息的请求。如果当前请求已经包含了 Authorization 证书，那么401响应代表着服务器验证已经拒绝了那些证书。如果401响应包含了与前一个响应相同的身份验证询问，且浏览器已经至少尝试了一次验证，那么浏览器应当向用户展示响应中包含的实体信息，因为这个实体信息中可能包含了相关诊断信息。

403 Forbidden

服务器已经理解请求，但是拒绝执行它。与 401 响应不同的是，身份验证并不能提供任何帮助，而且这个请求也不应该被重复提交。如果这不是一个 HEAD 请求，而且服务器希望能够讲清楚为何请求不能被执行，那么就应该在实体内描述拒绝的原因。当然服务器也可以返回一个 404 响应，假如它不希望让客户端获得任何信息。

404 Not Found

请求失败，请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话，应当使用410状态码来告知旧资源因为某些内部的配置机制问题，已经永久的不可用，而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。

405 Method Not Allowed

请求行中指定的请求方法不能被用于请求相应的资源。该响应必须返回一个Allow 头信息用以表示出当前资源能够接受的请求方法的列表。鉴于 PUT，DELETE 方法会对服务器上的资源进行写操作，因而绝大部分的网页服务器都不支持或者在默认配置下不允许上述请求方法，对于此类请求均会返回405错误。

服务端响应

500 Internal Server Error

服务器遇到了不知道如何处理的情况。

503 Service Unavailable

服务器没有准备好处理请求。常见原因是服务器因维护或重载而停机。请注意，与此响应一起，应发送解释问题的用户友好页面。这个响应应该用于临时条件和 Retry-After：如果可能的话，HTTP头应该包含恢复服务之前的估计时间。网站管理员还必须注意与此响应一起发送的与缓存相关的标头，因为这些临时条件响应通常不应被缓存。

504 Gateway Timeout

当服务器作为网关，不能及时得到响应时返回此错误代码。

完整状态码请查阅 MDN HTTP状态码

【作者：Chocolate】https://chocolate.blog.csdn.net/

学如逆水行舟，不进则退

如果让你做一个视频聊天软件，你用tcp还是udp？为什么？

传送门：https://github.com/Chocolate1999/Front-end-learning-to-organize-notes

往期精选：

如果让你做一个视频聊天软件，你用tcp还是udp？为什么？

TCP 和 UDP 协议在传输上有很多的差别，首先 TCP 面向连接，而 UDP 是无连接的。而 TCP 注重提供可靠的服务。能保证连接传送的数据，无差错，不丢失，不重复，且按序到达。而 UDP 是尽最大努力交付，即不保证可靠交付。

因此传统的 TCP 协议并不是为实时媒体传输设计的，这就导致了它在弱网环境下的产生的延时相当大。因此在音视频传输时需要对网络协议进行优化。

UDP 协议就比较适合用于实时音视频通讯，首先它是允许端到端的全链条信道策略控制，可以保证弱网环境下播放的流畅性。在丢包方面 UDP 协议也更加灵活，方便我们在视频流畅与画质之间做好平衡。

再者是网络优化 CDN 业务，CDN 可以将视频内容分发至全网加速节点，让用户可以就近获取需要的内容，降低视频延迟。

参考：

在和女朋友视频对话时，视频到底经历了哪些音视频处理步骤？

【作者：Chocolate】https://chocolate.blog.csdn.net/

学如逆水行舟，不进则退

cookie session区别

【挑战系列10】实现bind方法

/* 实现bind方法 */
function bar(name, age,city) {
  console.log(name)
  console.log(age)
  console.log(this.value);
  console.log(city)
}
var foo = {
  value: 1
};

Function.prototype.myBind  = function(content = window){
  let that = this
  let args = [...arguments[1]]
  return function fn(){
    return that.apply(content,args.concat([...arguments]))
  }
}
bar.myBind(foo, ['kevin', 18])('北京')

防抖

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>防抖</title>
    <style>
      .box {
        width: 300px;
        height: 200px;
        background-color: #38b99b;
        font-size: 30px;
        line-height: 200px;
        text-align: center;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      var oBox = document.getElementsByClassName('box')[0]
      // let cnt = 0
      // var timeout = null
      // oBox.onmouseover = function(){
      //   // oBox.innerHTL =  ++cnt
      //   clearTimeout(timeout)
      //   timeout = setTimeout(()=>{
      //     oBox.innerHTML =  ++cnt
      //   },2000)
      // }
      let cnt = 0
      let addSomething = () => {
        oBox.innerHTML = ++cnt
      }
      let debounce = (fn, time, triggerNow) => {
        let timeout = null
        let debounced = (...args) => {
          if (timeout) {
            clearTimeout(timeout)
          }
          if (triggerNow) {
            let exec = !timeout
            timeout = setTimeout(() => {
              timeout = null
            }, time)
            if (exec) {
              fn.apply(this, args)
            }
          } else {
            timeout = setTimeout(() => {
              fn.apply(this, args)
            }, time)
          }
        }
        debounced.remove = () => {
          clearTimeout(timeout)
          timeout = null
        }
        return debounced
      }
      oBox.onmouseover = debounce(addSomething, 2000, false)
    </script>
  </body>
</html>

节流

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>节流</title>
    <style>
      .box {
        width: 300px;
        height: 200px;
        background-color: #38b99b;
        font-size: 30px;
        line-height: 200px;
        text-align: center;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      var oBox = document.getElementsByClassName('box')[0]

      let cnt = 0
      let addSomething = () => {
        oBox.innerHTML = ++cnt
      }
      let throttle = (fn,time) => {
        let flag = true
        let timeout = null
        let throttled = (...args) => {
          if(!flag) return
          flag = false
          clearTimeout(timeout)
          timeout = setTimeout(()=>{
            fn.apply(this,args)
            flag = true
          },time)
        }
        return throttled
      }
      oBox.onmouseover = throttle(addSomething, 2000)
    </script>
  </body>
</html>

tcp握手结束第一次的包有多大

传送门：https://github.com/Chocolate1999/Front-end-learning-to-organize-notes

往期精选：

tcp握手结束第一次的包有多大

这个问题我在网上搜了搜，我觉得应该是问的这个问题：握手结束后第一次发送数据的ACKnum是多少？

当然你有新的解释与建议，可以在下面回复补充，谢谢~

RFC793中有如下显示：

可以看到，三次握手后(第4点，为第三次握手)，再次发送数据ACKnum与第三次握手是一样的。

参考：

RFC793

【作者：Chocolate】https://chocolate.blog.csdn.net/

学如逆水行舟，不进则退

/* 实现new原理 */
function foo(name, age) {
  this.name = name;
  this.age = age;
}

let myNew = (fn,...args) => {
  let obj = {}
  obj.__proto__ = fn.prototype
  let res = fn.apply(obj,args)
  if(res instanceof Object){
    return res
  }else 
    return obj
}

let ans = myNew(foo,'Chocolate',18)
console.log(ans)

chocolate1999 / front-end-learning-to-organize-notes Goto Github PK

front-end-learning-to-organize-notes's Introduction

☀️Front-end-learning-to-organize-notes

🌱仓库地址

📢公告

⛄笔记网站（更新）

🐇仓库内容

🎉项目经历

☀️小狮子

👍Chocolate 与 HearLing 同学前端学习笔记大汇总

JS

CSS

算法

Vue必知必会

学习Vue源码

计算机网络

浏览器工作原理

服务外包

小册

总结

💝贡献

🌻版权申明

📃排版

🏆结尾

License

front-end-learning-to-organize-notes's People

Contributors

Stargazers

Watchers

Forkers

front-end-learning-to-organize-notes's Issues

tcp三次握手

http介绍一下，为什么http2.0不普及，websocket的基本指令，性能

爬虫，网站如何去做防止，如何判断

如何判断

防爬虫

POST和GET 的区别，除了长度，安全其他的

常见问题

GET 方法参数写法是固定的吗？

POST 方法比 GET 方法安全？

GET 方法的长度限制是怎么回事？

POST 方法会产生两个TCP数据包？

tcp是怎么去保证可靠传输的？

tcp和udp区别

http状态码 302 504分别代表什么意思

响应状态码，200(from disk cache)，200（from memory cache），304的区别

实现浅拷贝

实现深拷贝

常见状态码知道哪些？ 304 403 405分别是什么

信息响应

成功响应

重定向

客户端响应

服务端响应

如果让你做一个视频聊天软件，你用tcp还是udp？为什么？

防抖

节流

tcp握手结束第一次的包有多大

Recommend Projects

Recommend Topics

Recommend Org

Jobs