js笔记

Javascript 事件循环：

• 1. js解析方法时，将同步任务排队到执行栈中，异步任务排队到事件队列中。
• 2. 事件队列分为:
     • 宏任务：setTimeout，setInterval，setImmediate，I/O，UI交互事件
     • 微任务：process.nextTick，Promise.then
• 3. 浏览器环境中执行方法时，先将执行栈中的任务清空，再将微任务推到执行栈中并清空，
     之后检查是否存在宏任务，若存在则取出一个宏任务，执行完成检查是否有微任务，
• 4. Event Loop在浏览器与node环境中的区别：
  • 浏览器环境每次执行一个宏任务，再去检查微任务
  • node会清空当前所处阶段的队列，即执行所有task，再去检查微任务

table 布局, float + margin; inline-block ; flex;

clip-path: 裁剪容器, + background 可以做到图片的裁剪, + svg 实现容器的裁剪

---

3D-transfrom : rotate,
关键帧中的 steps 属性, 定义关键帧之间是否存在补间动画;

---

视频直播技术:

• video标签: controlslist 属性控制播放控件的显示
• 制作直播源: Nginx + ffmpeg(推流)制作直播源, 使用 rtmp 的协议 和 hls 的模块
• h5: video.js ; hls.js (小巧的 hls协议的直播 和 点播 ); flv.js(flv 开源的播发器, flv 协议) 三个框架; rtmp 协议不常用在 h5 中;

---

• 1. 我们看一个 __proto__ 和 prototype 这两者之间的关系：

每一个 js 对象一定对应一个原型对象， 并从原型对象继承属性和方法， 那么既然存在一个原型对象，

• 2 那么对象和它怎么对应呢？

对象__proto__属性的值就是它所对应的原型对象:

```js
  var a = {}  a.__proto__ === Object.prototype  // a.toString === a.__proto__.toString 
```

• prototype 属性：

  • 只有函数才有 prototype 属性; 不是每一个对象都存在__proto__ 属性来标识自己所继承的原型，
  • js 中的函数是一等公民， 使用函数来模拟类，但创建函数时， js 会自动为这个函数创建prototype属性（是一个对象）； 值是一个有constructor 属性的值就是函数本身的对象， 不是空对象， 那么我们要是使用new关键字， 那么这个时候， 这个时候， js 会帮你创建这个构造函数的对象， 实例继承构造函数prototype的所有属性和方法， 实例通过设置自己的__proto__指向构造函数的prototype来实现这种继承

• fn (function) ===> fn.prototype => {contractor: fn() 其实就是自身fn 这个函数; }

• f = new fn() >> f 是一个对象 typeof ==> "object" f.__proto__ === fn.prototype 从而实现了继承；

那么也就是说 一个对象的__proto__属性指向谁， 就继承了谁；

• isPrototypeOf 这个实际上判断两个对象是否有原型链的关联

• instanceof只能说明 这个对象是否在原型链中， 不能说明是直接继承关系

• IndexDB

  • 是一种事物型数据库，NoSql数据库，使用Js对象存储数据，
  • 存储类型丰富，可实现高级查询，可在 Web Server 中使用，无存储空间限制，

preload 和 prefetch

• prefetch 是告诉浏览器下一个页面可能需要加载的资源， 不是当前的页面，这种方式是加速下一个页面的加载速度，浏览器不一定会加载这个资源； 这个属性是link标签的rel属性值，

• preload 是告诉浏览器必定需要加载的资源； as属性， 浏览器可以设置正确的资源加载的优先级， 这个方式可以确保资源根据其重要性来依次加载， 所以preload不会影响重要的资源的加载， 又不会让次要的资源影响其自身的加载， 浏览器会根据as的值发送适当的Accept头部信息，

• preload 不会阻塞window的onload事件， 那么对于跨域的文件 需要加上属性crossorigin属性

• 在 Vue 的 ssr 的页面中，

  • 首页的资源均需要使用preload；
  • 而对应的路由则需要使用 prefetch

  使用 preload 和 prefetch 的逻辑可能不是写到一起， 这样会造成双倍的网络请求

• DNS 的 prefetch ， 当浏览器需要解析域名，这个解析的过程中，浏览器缓存， 系统缓存， 路由器缓存， isp 缓存等，
  这个属性是DNS 预解析就是根据浏览器定义的规则， 提前解析之后可能遇到的域名， 这样可能缩短 DNS 解析时间，

hasOwnProperty 是js中唯一可以判断一个属性定义在对象本身而不是继承原型链的方法，主要用于判断某个对象中是否有某个属性，返回值为布尔值

Document 对象：

• 和网页请求相关的三个属性：URL、domain和referrer。
• URL: 保存当前页面的完整的url链接
• domain： 只包含当前页面的域名
• referrer： 保存着链接到当前页面的url链接

currentTarget 始终是监听事件者，而 target 是事件的真正发出者。
事件冒泡阶段，e.currenttarget和e.target是不相等的，但是在事件的目标阶段，e.currenttarget和e.target是相等的。

// 判断一个元素是否出现在窗口中：
// Determine if an element is in the visible viewport
function isInViewport(element) {
  var rect = element.getBoundingClientRect();
  var html = document.documentElement;
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || html.clientHeight) &&
    rect.right <= (window.innerWidth || html.clientWidth)
  );
}