Promise 基础

Promise 概念

then()

错误处理

Promise 值穿透

finally()

包装Pomise 对象

并发方法

promise 基础直接参考 阮一峰《ECMAScript 6 入门》

ES6新特性

1. let const
2. 字符串、数组、对象的方法扩展
3. symbol、set、map新的数据类型和数据结构
4. proxy代理拦截
5. 异步解决方案：promise、generate，async、await
6. class类
7. module模块

详情可参考：ES6 入门教程 - 阮一峰

实现 new 操作符

new操作符作用: 创建一个给定构造函数的实例

• 原理
  • （1）创建一个空对象；
  • （2）将空对象的[prototype]原型指向构造函数的原型对象；
  • （3）将构造函数的执行上下文this绑定到空对象；
  • （4）返回空对象

/**

 \* @param {Function} construct 构造函数

 \* @param {any} args  其余参数

 \* @return obj 绑定了构造函数上下文的空对象

 */

function myNew(construct, ...args) {

  let obj = {} //创建空对象

  obj.__proto__ = construct.prototype //将空对象的[prototype]原型指向构造函数的原型对象

  construct.apply(obj, args) //将构造函数的执行上下文this绑定到空对象

  return obj

}

//-----------------------------------------使用-------------------------------------------------------

function Person(name, age) {

  this.name = name

  this.age = age

}

let person1 = myNew(Person, 'joker', 20)

console.log(`name is ${person1.name}, age is ${person1.age}`)

图片预加载和懒加载

图片预加载

• 概念：将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。
• 作用：减少用户的等待时间，提高用户的体验
• 方法：使用js中的image对象，通过为image对象来设置scr属性，来实现图片的预加载

图片懒加载

• 概念：懒加载也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载。

• 作用：

  • 提高网站的首屏加载速度，提升用户的体验
  • 减少请求数或延迟请求数，减少服务器的压力

• 适用场景：图片很多，页面很长的场景

• 懒加载图示：

  • 图片滚动到可视区域时，浏览器才真正请求图片资源

• 实现原理：

  • 一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的 src 属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的 src 赋值，这样浏览器就不会发送请求了;
  • 将页面上的图片的 src 属性设置为空字符串，将图片的真实路径保存在一个自定义属性中
  • 当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的 src 属性，此时浏览器才会真正请求加载图片资源。

• 实现步骤：

  • 初始图片效果
    • 方式1：加载loading图片
    • 方式2：用 CSS 制造模糊效果
  • 按需加载：判断哪些图片要加载【重点】。
    • 方式1：Intersection_Observer：应用会新建一个它的实例。当一个或多个监听对象跟 Observer 发生交互时（即图片出现在视口中时），作为参数传递的函数可以用来处理一些回调事务（例如图片加载）。我们可以迭代每一个对象，并对它们进行相应的处理：当图片可见时，我们开始加载真正的图片并且停止监听这张图片，因为在图片加载完成之后，我们已经没必要再知道它的状态了。
    • 方式2：使用 JS 监听并计算
  • 隐形加载图片
  • 替换真图片

• 判断图片是否进入可视区域：

  • 方式2：使用 JS 监听并计算。

    • 让在浏览器可视区域的图片显示，可视区域外的不显示，所以当图片距离顶部的距离top-height等于可视区域h和滚动区域高度s之和时说明图片马上就要进入可视区了，就是说当 top-height<=s+h 时，图片在可视区

    • 使用 API：

      • 页可见区域宽： document.body.clientWidth;
      • 网页可见区域高： document.body.clientHeight;
      • 网页可见区域宽： document.body.offsetWidth (包括边线的宽);
      • 网页可见区域高： document.body.offsetHeight (包括边线的宽);
      • 网页正文全文宽： document.body.scrollWidth;
      • 网页正文全文高： document.body.scrollHeight;
      • 网页被卷去的高： document.body.scrollTop;
      • 网页被卷去的左： document.body.scrollLeft;
      • 网页正文部分上： window.screenTop;
      • 网页正文部分左： window.screenLeft;
      • 屏幕分辨率的高： window.screen.height;
      • 屏幕分辨率的宽： window.screen.width;
      • 屏幕可用工作区高度： window.screen.availHeight;
      • HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。
      • window.innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。

宏任务&微任务

事件循环：event loop 宏任务：macrotask 也称为 task 微任务：microtask 也称为 jobs

微任务

• process.nextTick (Node)
• promise.then()，Promise.resolve()
• Object.observe
• MutationObserver (浏览器)

宏任务