标签：icon back return time 建立 cal 增删改 前端 挥手
1：实现一个函数判断是不是回文字符串
function run(input) {
if(typeof
input !== "string")
return false
return input.split(‘‘).reverse().join(‘‘) === input;
//input.split(‘‘)可以把字符串变成数组
}
2：两种以上方式实现已知或者未知宽度的垂直水平居中
//已知宽高
.box{
height: 400px;
width: 400px;
background-color: #808080;
position: relative;
}
.box1{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
//
.box{
height: 400px;
width: 400px;
background-color: #808080;
position: relative;
}
.box1{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
left:50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
//未知宽高 transform: translate3d(-50%,-50%,0);
3D变化，-50%表示的是当前元素的50%
.box{
height: 400px;
width: 400px;
background-color: #808080;
position: relative;
}
.box1{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
left:50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
}
//flex布局
.box{
height: 400px;
width: 400px;
background-color: #808080;
display: flex;
justify-content: center;
align-items:center
}
.box1{
height: 100px;
width: 100px;
background-color: red;
}
3：实现效果，点击容器内的图标，图标边框变成border 1px solid red，点击空白处重置。
Const box = document.getElementById(‘box‘);
function isIcon(target) {
return target.className.includes(‘icon‘)
}
box.onClick = function(e) { e.stopPropagation();
const target = e.target;
if (isIcon(target)) {
target.style.border = ‘1px solid red‘
}
}
Const doc = document;
doc.onclick = function(e) {
const children = box.children;
for(let i; i < children.length; i++) {
if (isIcon(children[i])) {
children[i].style.border = ‘none‘
}
}
}
4：实现简单的双向数据绑定mvvm
<input type="text" id="input">
const data = {};
const input = document.getElementById("input");
input.onchange = e =>{
let target
= e.target;
data.text = target.value;
}
Object.defineProperty(data,‘text‘,{
set(value){
input.value = value;
this.value = value;
}
})
5: 实现Storge，使得该对象为单例，并定于localStroage进行封装设置数值setitem（key,value），
Getitem(key)；
class Store{
constructor(){
}
static getInstance(){
if(!Store.instance){
Store.instance = new Store();
}
return Store.instance
}
set=(key,value) =>{
localStorage.setItem(key,value);
}
get = (key)=>{
return localStorage.getItem(key);
}
}
6：事件循环机制event loop
首先，js是单线程的，主要的任务是处理用户的交互，而用户的交互无非就是响应DOM的增删改，使用事件队列的形式，一次事件循环只处理一个事件响应，使得脚本执行相对连续，所以有了事件队列，用来储存待执行的事件，那么事件队列的事件从哪里被push进来的呢。那就是另外一个线程叫事件触发线程做的事情了，他的作用主要是在定时触发器线程、异步HTTP请求线程满足特定条件下的回调函数push到事件队列中，等待js引擎空闲的时候去执行，当然js引擎执行过程中有优先级之分，首先js引擎在一次事件循环中，会先执行js线程的主任务，然后会去查找是否有微任务microtask（promise），如果有那就优先执行微任务，如果没有，在去查找宏任务macrotask（setTimeout、setInterval）进行执行。
事件循环，先执行宏任务，其中同步任务立即执行，异步任务，加载到对应的的Event Queue中(setTimeout等加入宏任务的Event Queue，Promise.then加入微任务的Event Queue)，所有同步宏任务执行完毕后，如果发现微任务的Event Queue中有未执行的任务，会先执行其中的任务，这样算是完成了一次事件循环。接下来查看宏任务的Event Queue中是否有未执行的任务，有的话，就开始第二轮事件循环，依此类推。
7: 事件流
事件流分为两种，捕获事件流和冒泡事件流。
捕获事件流从根节点开始执行，一直往子节点查找执行，直到查找执行到目标节点。
冒泡事件流从目标节点开始执行，一直往父节点冒泡查找执行，直到查到到根节点。
事件流分为三个阶段，一个是捕获节点，一个是处于目标节点阶段，一个是冒泡阶段。
8：有一个数组【1,2,3,4】实现数组的全排列
//算法自行搜索
9：输入url看到页面的发生的全部过程，越详细越好
首先浏览器主进程接管，开了一个下载线程。
然后进行HTTP请求（DNS查询、IP寻址等等），中间会有三次捂手，等待响应，开始下载响应报文。将下载完的内容转交给Renderer进程管理。
Renderer进程开始解析css rule tree和dom tree，这两个过程是并行的，所以一般我会把link标签放在页面顶部。
解析绘制过程中，当浏览器遇到link标签或者script、img等标签，浏览器会去下载这些内容，遇到时候缓存的使用缓存，不适用缓存的重新下载资源。
css rule tree和dom tree生成完了之后，开始合成render tree，这个时候浏览器会进行layout，开始计算每一个节点的位置，然后进行绘制。
绘制结束后，关闭TCP连接，过程有四次挥手。
10：三次握手和四次挥手
为什么要三次挥手？
在只有两次“握手”的情形下，假设Client想跟Server建立连接，但是却因为中途连接请求的数据报丢失了，故Client端不得不重新发送一遍；这个时候Server端仅收到一个连接请求，因此可以正常的建立连接。但是，有时候Client端重新发送请求不是因为数据报丢失了，而是有可能数据传输过程因为网络并发量很大在某结点被阻塞了，这种情形下Server端将先后收到2次请求，并持续等待两个Client请求向他发送数据...问题就在这里，Cient端实际上只有一次请求，而Server端却有2个响应，极端的情况可能由于Client端多次重新发送请求数据而导致Server端最后建立了N多个响应在等待，因而造成极大的资源浪费！所以，“三次握手”很有必要！
为什么要四次挥手？
试想一下，假如现在你是客户端你想断开跟Server的所有连接该怎么做？第一步，你自己先停止向Server端发送数据，并等待Server的回复。但事情还没有完，虽然你自身不往Server发送数据了，但是因为你们之前已经建立好平等的连接了，所以此时他也有主动权向你发送数据；故Server端还得终止主动向你发送数据，并等待你的确认。其实，说白了就是保证双方的一个合约的完整执行！
使用TCP的协议：FTP（文件传输协议）、Telnet（远程登录协议）、SMTP（简单邮件传输协议）、POP3（和SMTP相对，用于接收邮件）、HTTP协议等。
标签：icon back return time 建立 cal 增删改 前端 挥手
原文地址：https://www.cnblogs.com/love-life-insist/p/10204637.html
