Web API

var eventLoop = []
var event

while (true) {
  if (eventLoop.length > 0) {
    event = eventLoop.shift()
    try {
      event()
    } catch(err) {
      reportError(err)
    }
  }
}

setTimeout(function() {
	console.log('a')
});

new Promise(function(resolve) {
	console.log('b');

	for(var i =0; i <10000; i++) {
		i ==99 && resolve();
	}
}).then(function() {
	console.log('c')
});

console.log('d');

// b
// d
// c
// a

// 1.首先执行script下的宏任务，遇到setTimeout，将其放入宏任务的队列里。
// 2.遇到Promise，new Promise直接执行，打印b。
// 3.遇到then方法，是微任务，将其放到微任务的队列里。
// 4.遇到console.log('d')，直接打印。
// 5.本轮宏任务执行完毕，查看微任务，发现then方法里的函数，打印c。
// 6.本轮event loop全部完成。
// 7.下一轮循环，先执行宏任务，发现宏任务队列中有一个setTimeout，打印a。

// 作者：童欧巴
// 链接：https://juejin.im/post/5d2036106fb9a07eb15d76e9
// 来源：掘金
// 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

var offset = (el, type) => {
    var offset = 0
    while(el.offsetParent != null) {
        left += el['offset' + type]
        el = el.offsetParent
       
    }
    return offset
}

var fragment = document.createDocumentFragment();

let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);

links.forEach(link => link.style.color = 'orange');

function loadStyles(url){
  var script = document.createElement('link')
  link.rel = 'stylesheet'
  link.type = 'text/css'
  var head = document.getElementByTagName('head')[0]
  head.appendChild(script)
}

getComputedStyle() //ie不支持
document.querySelector("#myDiv").currentStyle; //ie支持

element.style 可读可写 只能获取定义了的 style 样式

window.getComputedStyle(ele, null).getPropertyValue('height') 只读

document.defaultView.getComputedStyle 只读

// 操作 className
document.body.className = 'foo' 会替换掉已有的类名 
var beforeClassName = document.body.className
document.body.className = `${beforeClassName} foo`


var myDiv = document.getElementById('myDiv');
myDiv.style.backgroundColor = 'red';
myDiv.style.width = "100px"

// 应用所有样式
myDiv.style.cssText = "width: 25px; height: 100px"

var btn = document.getElementById('myBtn');
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false , false, 0, null);
btn.dispatchEvent(event)

var div = document.getElementById('myDiv'),
    event;
div.addEventListener('myEvent', function(event){
    alert('div' + event.detail)
})
document.addEventListener('myEvent', function(event){
    alert('document' + event.detail)
})
if(document.implementation.hasFeature('CustomEvents', '3.0')) {
    event = document.createEvent('CustomEvent');
    event.initCustromEvent('myEvent', true, false, 'hello world');
    div.dispatchEvent(event)
}

let myEvent = new Event('custome')
$el.addEventListener('custome', () => {
  console.log('custome')
})
$el.dispatchEvent(myEvent)

var url = 'https://example.com/profile';
var data = {username: 'example'};

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    'Content-Type': 'application/json'
  })
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response))

controller.signal.addEventListener('abort', rejectFn)

//选择表单元素
var selectbox = document.forms[0].elements['selectbox'];

//选择form
var form = document.getElementById('myForm')

<input type="reset" value="rest btn">
<button type="reset">reset</button>

//阻止重置表单
var form = document.getElementById('myForm')
form.addEventListener('reset', function(e){
  e.preventDefault()
})

// 选择需要观察变动的节点
const targetNode = document.getElementById('some-id');

// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };

// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 之后，可停止观察
observer.disconnect();

// 1 图片懒加载
let observer = new IntersectionObserver(
(entries, observer) => { 
entries.forEach(entry => {
    /* 替换属性 */
    entry.target.src = entry.target.dataset.src;
    observer.unobserve(entry.target);
  });
}, 
{rootMargin: "0px 0px -200px 0px"});

document.querySelectorAll('img').forEach(img => { observer.observe(img) });


// 2 兴趣埋点
const boxList = [...document.querySelectorAll('.box')]

var io = new IntersectionObserver((entries) =>{
  entries.forEach(item => {
    // intersectionRatio === 1说明该元素完全暴露出来，符合业务需求
    if (item.intersectionRatio === 1) {
      // 。。。 埋点曝光代码
      io.unobserve(item.target)
    }
  })
}, {
  root: null,
  threshold: 1, // 阀值设为1，当只有比例达到1时才触发回调函数
})

// observe遍历监听所有box节点
boxList.forEach(box => io.observe(box))

function filterTime(a, b) {
  return (a > 0 && b > 0 && (a - b) >= 0) ? (a - b) : undefined;
}

let resolvePerformanceTiming = (timing) => {
  let o = {
    initiatorType: timing.initiatorType,
    name: timing.name,
    duration: parseInt(timing.duration),
    redirect: filterTime(timing.redirectEnd, timing.redirectStart), // 重定向
    dns: filterTime(timing.domainLookupEnd, timing.domainLookupStart), // DNS解析
    connect: filterTime(timing.connectEnd, timing.connectStart), // TCP建连
    network: filterTime(timing.connectEnd, timing.startTime), // 网络总耗时

    send: filterTime(timing.responseStart, timing.requestStart), // 发送开始到接受第一个返回
    receive: filterTime(timing.responseEnd, timing.responseStart), // 接收总时间
    request: filterTime(timing.responseEnd, timing.requestStart), // 总时间

    ttfb: filterTime(timing.responseStart, timing.requestStart), // 首字节时间
  };

  return o;
};

let resolveEntries = (entries) => entries.map(item => resolvePerformanceTiming(item));

let resources = {
  init: (cb) => {
    let performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance;
    if (!performance || !performance.getEntries) {
      return void 0;
    }

    if (window.PerformanceObserver) {
      let observer = new window.PerformanceObserver((list) => {
        try {
          let entries = list.getEntries();
          cb(resolveEntries(entries));
        } catch (e) {
          console.error(e);
        }
      });
      observer.observe({
        entryTypes: ['resource']
      })
    } else {
        window.addEventListener('load', () => {
        let entries = performance.getEntriesByType('resource');
        cb(resolveEntries(entries));
      });
    }
  },
};

// 这将分配一个16字节的连续内存区域，并预先将其填充为零
let buffer = new ArrayBuffer(16); // create a buffer of length 16
let view = new Uint32Array(buffer);
alert(buffer.byteLength); // 16

alert(view.length); // 4, it stores that many integers
alert(view.byteLength); // 16, the size in bytes

// let's write a value
view[0] = 123456;

// iterate over values
for(let num of view) {
  alert(num); // 123456, then 0, 0, 0 (4 values total)
}

let buffer = new Uint8Array([255, 255, 255, 255]).buffer;

let dataView = new DataView(buffer);

// get 8-bit number at offset 0
alert( dataView.getUint8(0) ); // 255

// now get 16-bit number at offset 0, that's 2 bytes, both with max value
alert( dataView.getUint16(0) ); // 65535 (biggest 16-bit unsigned int)

// get 32-bit number at offset 0
alert( dataView.getUint32(0) ); // 4294967295 (biggest 32-bit unsigned int)

dataView.setUint32(0, 0); // set 4-byte number to zero

// create Blob from a typed array and strings
let hello = new Uint8Array([72, 101, 108, 108, 111]); // "hello" in binary form

let blob = new Blob([hello, ' ', 'world'], {type: 'text/plain'});

let link = document.createElement('a');
link.download = 'hello.txt';

let blob = new Blob(['Hello, world!'], {type: 'text/plain'});

let reader = new FileReader();
reader.readAsDataURL(blob); // converts the blob to base64 and calls onload

reader.onload = function() {
  link.href = reader.result; // data url
  link.click();
};

window.scrollTo(pageX,pageY) — 绝对定位
window.scrollBy(x,y) — 相对当前位置的滚动
elem.scrollIntoView(top) — 滚动到正好elem可视的位置（elem 与窗口的顶部/底部对齐） // top = true 顶部对齐

var element = document.getElementById("box");

element.scrollIntoView(); // 默认值 true 和顶部对齐
element.scrollIntoView(false); // 和视口的底部对齐
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: 
"nearest"});

document.createElement()
document.appendChild()
document.createTextNode()
document.getElementById()

removeChild(child);
getPropertyValue()

document.head || document.getElementByTagName('head')[0]
document.body
document.readyState == 'complete'

function loadScript(url){
  var script = document.createElement('script')
  script.type = 'text/javascript'
  script.src = url
  document.body.appendChild(script)
}

function getElementLeft(el){
  var actualLeft = el.offsetLeft,
      current = el.offetParent;
  while(current !== null) {
    actualLeft += current.offsetParent;
    current = current.offsetParent;
  }
  return actualLeft;
}

var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("testPassive", null, opts);
  window.removeEventListener("testPassive", null, opts);
} catch (e) {}

var devicePixelRatio = window.devicePixelRatio || 1,
    backingStoreRatio = context.webkitBackingStorePixelRatio ||
                        context.mozBackingStorePixelRatio ||
                        context.msBackingStorePixelRatio ||
                        context.oBackingStorePixelRatio ||
                        context.backingStorePixelRatio || 1,

    ratio = devicePixelRatio / backingStoreRatio;

// upscale the canvas if the two ratios don't match
if(devicePixelRatio !== backingStoreRatio){

   // adjust the original width and height of the canvas
   // 调整画布的原始宽度和高度
   canvas.width = originalWidth * ratio;
   canvas.height = originalHeight * ratio;

   // scale the context to reflect the changes above
   // 缩放上下文以反映上述变化
   context.scale(ratio, ratio);
}

// ...do the drawing here...

// use CSS to bring the entire thing back to the original size
// 使用CSS将整个内容恢复到原始大小
canvas.style.width = originalWidth + 'px';
canvas.style.height = originalHeight + 'px';

var u = navigator.userAgent;
var flag;
var timer;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isIOS) {
    document.body.addEventListener('focusin', () => { //软键盘弹起事件
        flag = true;
        clearTimeout(timer);
    })
    document.body.addEventListener('focusout', () => { //软键盘关闭事件
        flag = false;
        if (!flag) {
            timer = setTimeout(() => {
                window.scrollTo({
                    top: 0,
                    left: 0,
                    behavior: "smooth"
                }) //重点  =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变，并不一定要回到页面顶部)
            }, 200);
        } else {
            return false;
        }
    })
} else {
    return false;
}

var intersectionObserver = new IntersectionObserver(function(entries) {

  // If intersectionRatio is 0, the target is out of view
  // and we do not need to do anything.

  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log('Loaded new items');
});

// start observing
// 开始监听一个目标元素
intersectionObserver.observe(document.querySelector('.scrollerFooter'));