FE Basics

Published at 2018-04-12

该会的要会呀

learnlayout

CSS selector priority

vertical center

SSL/TLS

RSA

Node Timer

Semantic HTML

Life of a pixel

DNS TCP HTTP/HTTPS NGINX CGI CACHE CDN DOM style layout paint raster gpu

GET & POST

GET的语义是请求获取指定的资源。GET方法是安全(Safe)、幂等(Idempotent)、可缓存的(Cacheable)(除非有 Cache-Control Header的约束), GET方法的报文主体没有任何语义。

POST的语义是根据请求负荷(报文主体)对指定的资源做出处理,具体的处理方式视资源类型而不同。 POST不安全,不幂等,(大部分实现)不可缓存。

优化

减少域名解析数量 控制并发请求数量 CDN HTTP缓存 资源压缩合并 gzip, webp, gltf等高效传输格式 懒加载/按需加载 SSR service worker 流式传输

CORS HEADER

Access-Control-Allow-Origin

Observer pattern

const queuedObservers = new Set();

const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});

function set(target, key, value, receiver) {
  const result = Reflect.set(target, key, value, receiver);
  queuedObservers.forEach(observer => observer());
  return result;
}

null/undifined

    Number(null)=0  Number(undefined)=NaN
    null表示"没有对象",即该处不应该有值。
        (1) 作为函数的参数,表示该函数的参数不是对象。
        (2) 作为对象原型链的终点。
    undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。
        (1)变量被声明了,但没有赋值时,就等于undefined。
        (2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。
        (3)对象没有赋值的属性,该属性的值为undefined。
        (4)函数没有返回值时,默认返回undefined。

Promise Ajax

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(console.log, console.error);
Proxy {
    var proxy = new Proxy(target, handler);
    handler {
        get(target, propKey, receiver)
        set(target, propKey, value, receiver)
    }
}

Reflact {
    //Object对象语言内部的方法
    Reflect.defineProperty(target, property, attributes)) //返回bool

}