临时拼凑的知识点**想想面试还会有啥

微任务和宏任务

setTimeout(_ => console.log(4))//delay的默认值为0

new Promise(resolve => {
  resolve()
  console.log(1)
}).then(_ => {
  console.log(3)
})

console.log(2)

这段代码的顺序是1、2、3、4,原因是js同步执行完任务前不会执行异步任务(这是很容易理解大家也应该知道的)。然后Promise对象实例化是一个同步的过程,只有then后面的才是异步。所以1,2是同步任务,3,4是异步任务,现在的顺序就很合理了。

不过,3明明在4后面,怎么还先输出呢?这是因为微任务会在宏任务之前执行,Promise.then就是典型的微任务,注意是.then,不是Promise本身。

为了避免混淆,有必要指明一下,宏任务、微任务与同步、异步并不直接对应。

目前比较公认的说法是,I/O和setTimeout和setInterval是宏任务,而微任务包括但不限于Promise.then和catch和finally。

Event-loop

那么Event-loop是什么意思?这个概念只和微任务宏任务有关,即每次做完一个任务都会检查:现在还有没有微任务呢~没有的话就开始做宏任务了哦~等下一波检查才有机会执行微任务咯

async和await

新的异步机制,await之前同步,await之后异步,await可以理解为then。至于异步呢,常用于等待获取文件或资源。

观察者模式和发布-订阅模式

观察者模式

一般的实现是一个对象维护一个列表,发生事件时通知列表中的对象。

发布-订阅模式

和观察者模式类似,但发生事件时发布者通知订阅者,由订阅者通知对象。发布订阅模式更容易解藕、异步、缓存、过滤。

JS中的实现

JS提供setter和getter实现此机制(实现watch)。

Object.defineProperty提供了更多属性的配置。

var language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
}

language.current = 'EN';
language.current = 'FA';

console.log(language.log);
// expected output: Array ["EN", "FA"]

HTTP/2

HTTP请求资源时一个一次连接,HTTP/2改为持续性连接。

服务器可以主动发起推送。

通过设置优先级避免关键请求导致阻塞。

明文传输变为二进制帧传输,不过我也不知道1.0和1.1是不是用的ASCII码和MIME。

事件流

分为冒泡和捕获。冒泡向上,捕获向下。

Viewport

往期文章

Arguments

函数接受的任意长的参数数组,但不是普通数组。它的存在也意味着js函数可以接受任意多个参数,且没有重载的说法。可以用Array.from()转换为数组。

Bind

引用方法时会失去与对象的连接,bind的作用是绑定对象。

盒子模型

太基础了

箭头函数

不能用new,this值为上下文且固定,没有arguments

requestAnimationFrame

每次绘制一帧前都向回掉函数发送时间戳,并执行回掉函数。

apply和call

改变this,一个是参数数组,一个传很多参数,实质都一样

DI和AOP

AOP,Aspect Oriented Programming 面向切面的程序设计

AOP即不修改源代码增加功能,通过预编译和动态代理实现

DI 依赖注入,实现IoC控制反转 和结构层次化、接口有关 就是定义下层接口,通常用于插件

“防抖”(Debouncing)和“节流”(Throttling)

防抖和节流,即限制事件在一定时间内的发生次数,或者说把多次事件合并为一次,这个可能经常用过但不知道叫防抖,通常用在响应特别频繁的事件上。

他们的区别在于,防抖一般等所有事件完了再响应,节流是以一定频率响应。

这个可以和requestAnimationFrame放到一起考虑。

Mac OS 10.15有一个小更新

以前我的路由器如果崩溃了,我会重启它。但是刚刚重启的时候Mac就会自动加入Wifi并发现此Wifi无法加入,于是就不再自动加入。这次系统更新后,Mac能够自动加入且无错误提示。猜测是隔一段时间再尝试,这个机制挺好的。

挖坑解释一下纯CSS游戏是怎么做的

待填

label标签的for属性绑定任意input元素

用for和input响应点击,被选中就能用伪类切换到不同的css描述

http://www.w3school.com.cn/tags/att_label_for.asp

伪元素和counter结合显示计数

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Counters

tabindex=-1避免被键盘选中元素

pointer-events属性穿透元素

https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

以及整体的思路。。待补充

如何使用BT下载冷门、版权资源

使用离线下载服务

https://www.loadbt.com/

这网站有免费的2G空间,支持同时下载一个种子,速度很快,有秒传。类似的服务还有很多,但这家至少不会限制每天只能丢一个链接之类的。

百度云/微云

虽然也支持离线下载,但只在网页版可用,并且很多资源被举报或者没速度。能用的话当然最好,还支持在线播放。

使用下载工具

迅雷

由于版权和举报,屏蔽的资源较多,不推荐。但是用的人多。

µTorrent、qBittorrent、FDM等

冷门资源没有速度,基本上下不动

Aria2

Aria2的好处在于,你可以让它在服务器上运行,服务器的网络环境好,那么速度就非常块,通常机房不限制下行速度,30-50MBps很常见。配置Aria2也很简单,我甚至不使用配置文件,看一下官网的文档,开启rpc服务就行。Aria2的web界面也有很多选择,综合来说很推荐这个软件。选择服务器需要注意,国内机房可能速度还是没那么快,国外有被封机器的危险。

Aria2 Web界面:http://aria2.guohere.com/#!/downloading

Flex布局的相关问题

Flex没有“行”的概念

Flex虽然很强大,但flex-wrap并不方便控制,由于没有行的概念,只能使用嵌套,但嵌套又不能使用flex自带的排列。比如手机屏幕上APP的排列,只用flex无法模拟,因为flex无法定义出最后一行,更无多行对齐的概念。

子元素和父元素,谁先压缩?

两级Flex嵌套的情况下,如果他们都设置了flex-wrap,在空间不够的情况下谁先压缩就很微妙了。不过可以使用媒体断点查询为不同情况分别设置wrap。