移动端+适配
未读1. 什么是移动端适配两个概念
自适应：根据不同的设备屏幕大小来自动调整尺寸，大小。
响应式：会随着屏幕的实时变动而自动调整，是一种自适应。
2. 理解视口viewport2.1 PC端的视口
在浏览器中，我们可以看到的区域就是视口（viewport）
fixed就是相对于视口来进行定位的。
在PC端的页面中，我们是不需要对视口进行区分，因为我们的布局视口和视觉视口是同一个
2.2 移动端的视口在移动端，不太一样，你布局的视口和你可见的视口是不太一样的。
这是因为移动端的网页窗口往往比较小，我们可能会希望一个大的网页在移动端可以完整的显示
所以在默认情况下，移动端的布局视口是大于视觉视口的
所以在移动端，我们可以将视口划分为三种情况：
布局视口 (layout viewport)
视觉视口 (visual layout)
理想视口 (ideal layout)
2.2.0 PC端的网页在移动端显示的问题12345.box{ width: 100px; height: 100px; background-color: #c2d873;}
1< ...
JavaScript
未读1. 原型与原型链123456function Person() { }const person = new Person()person.name = 'cuifanfan'console.log(person.name) // cuifanfan
在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。
1.1 prototype每个函数都有一个prototype属性，就是我们经常在各种例子中看到的那个prototype，它指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型。
什么是原型呢？你可以这样理解：每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型”继承”属性。
12345678910function Person() {}// prototype是函数才会有的属性Person.prototype.name = 'cuifanfan'const pers ...
JavaScript
未读Promise虽然使得异步编程更加线性化，但是代码里面包含了大量的 then 函数，使得代码依然不是太容易阅读。基于这个原因，ES7 引入了 async/await，这是 JavaScript 异步编程的一个重大改进，提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力，并且使得代码逻辑更清晰。
123456789fetch('https://www.baidu.org') .then((response) => { console.log(response) return fetch('https://www.baidu.org/test') }).then((response) => { console.log(response) }).catch((error) => { console.log(error) })
改为await-async:
123456789101112async function foo ...
1. 什么是promisepromise是JavaScript中异步编程的一种新解决方案。
从语法上来说，promise是一个构造函数。
从功能上来说，promise对象封装一个异步操作并可以获取它成功或者失败的结果值。
2. promise的状态初始promise对象状态为pending、状态只能改变为rejected或者resolved，而且只能改变一次。无论变为成功还是失败, 都会有一个结果数据。 成功的结果数据一般称为 value, 失败的结果数据一般称为 reason。
3. promise的基本使用3.1 基本编码1234567891011121314151617181920212223242526// 1) 创建 promise 对象(pending 状态), 指定执行器函数const p = new Promise((resolve, reject) => { // 2) 在执行器函数中启动异步任务 setTimeout(() => { const time = Date.now() // 3) 根据结果做不同 ...
JavaScript
未读1. 浏览器怎么实现setTimeout渲染进程所有运行在主线程上的任务都要首先添加到消息队列，然后事件循环系统按照顺序执行消息队列中的任务。那么有哪些典型的事件呢？
当接收到HTML文档数据，渲染引擎就会将“解析DOM“事件添加到消息队列中
当用户改变了Web页面的窗口大小，渲染引擎就会将“重新布局”事件添加到消息队列中
当触发了JavaScript引擎垃圾回收机制，渲染引擎就会将”垃圾回收“任务添加到消息队列中
当执行一段异步JavaScript代码，也会把需要执行任务添加到消息队列中回调函数是在指定的时间间隔内被调用，但是消息队列中的任务是按照顺序被执行的，所以定时器中的任务不能直接添加到消息队列中。那么怎么在消息循环系统的基础上添加定时器的功能呢？
其实在Chrome中，除了正常使用的消息队列外，还有一个HashMap，其中维护了需要延迟执行的任务，包括定时器和Chromium内部需要延迟执行的任务。当通过JavaScript创建一个定时器的时候，渲染进程会将该定时器中的回调任务添加到该HashMap中。
通过JavaScript调用setTimeout设置回调函数的时候， ...
JavaScript
未读随着浏览器应用领域的广泛，消息队列这种粗时间颗粒度的任务已经不能适应部分领域的需求。所以出现了一种新的技术——微任务。微任务可以在实时性和效率之间做一个权衡。
目前来看，基于微任务的技术有MutationObserver、Promise 以及以 Promise 为基础开发出来的很多其他的技术
1. 宏任务页面中大部分任务都是在主线程上进行的：
渲染事件（如解析 DOM、计算布局、绘制）；
用户交互事件（如鼠标点击、滚动页面、放大缩小等）；
JavaScript 脚本执行事件；
网络请求完成、文件读写完成事件。
为了协调这些任务有条不紊地在主线程上执行，页面进程引入了消息队列和事件循环机制，渲染进程内部会维护多个消息队列，比如延迟执行队列和普通的消息队列。然后主线程采用一个 for 循环，不断地从这些任务队列中取出任务并执行任务。我们把这些消息队列中的任务称为宏任务。
WHATWG是这样定义消息循环机制的：
先从多个消息队列中选出一个最老的任务，这个任务称为 oldestTask；
然后循环系统记录任务开始执行的时间，并把这个 oldestTask 设置为当前正在执行的任务；
当任 ...
