js css 基础知识点和面试题复习

摘要：两种元素必须拥有相同的父元素，但是不必直接紧随。临时移动重定向未修改访问缓存数据客户端错误，请求包含语法错误或无法完成请求身份为认证服务器错误，服务器在处理请求的过程中发生了错误服务器内部错误持续更新

对平常的小知识点，会持续更新

特殊原则

undefined == null / null == undefined

number 和 string/boolean 对比将 string/boolean 转换为数字类型

boolean 和 string 对比 将字符串转换为数字

String/Number/Symbol 和object 相比 ， toPrimitive(obj) 之后对比

其他都为 false

eg:

console.log([10] == 10);   //true               
console.log("10" == 10);   //true            
console.log([] == 0);     //true             
console.log(true == 1);     //true           
console.log([] == false);       //true 
console.log(![] == false);      // true       
console.log("" == 0);         //将字符串转换为number  对比  true         
console.log("" == false);    // 字符串和boolean对比 字符串转换为数字      true
console.log(null == false);   // false         
console.log(!null == true);        //true    
console.log(null == undefined);

是js将对象转换为原始类型的一个算法，是js内部的算法

hint 该函数的参数值为 string/numer/default

var obj2 = {
  [Symbol.toPrimitive](hint) {
    if (hint == "number") {
      return 10;
    }
    if (hint == "string") {
      return "hello";
    }
    return true;
  }
};
console.log(+obj2);     // 10      -- hint is "number"
console.log(`${obj2}`); // "hello" -- hint is "string"
console.log(obj2 + ""); // "true"  -- hint is "default"

toPrimitive参考

var lang = 1;

function fn1() {
  console.info(this.lang);
}

var obj = {
  lang: 2,
  method1: function(fn) {
    fn();
    fn.call(this);
    arguments[0]();
  },
  mtehod2:function(fn){
      document.addEventListener("click",function(){
          fn()
      },true)
  }
};

obj.method1(fn1)
obj.mtehod2(fn1)

输出结果是 1 2 undefined 
点击的时候输出的是 1

var a = 10;
function test() {
  if (!a) {
    var a = 100;
  }
  console.info(a);
}

test()

输出结果 100

console.info(b)
var b = 10
function b () {
}
console.info(b)


输出结果  function b(){}  , 10
原因 函数提升要比变量提升的优先级要高一些，且不会被变量声明覆盖，但是会被变量赋值之后覆盖。

p~ul选择器 p之后出现的所有ul。
两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。｝；

正常的script标签html 会按照顺序加载并执行脚本会阻塞后续的dom渲染
使用async 和defer 可以解决 阻塞dom渲染的问题

defer 会异步的加载js代码不影响后续dom 的渲染， 并且会在 DOMContentLoaded事件调用前执行。如果多个设置了defer的script 标签则会按照顺序来执行

async 则不会按照顺序执行，而是谁先加载完谁执行，并且跟 DOMContentLoaded事件无关

1rem == 设计图100px
根元素的 font-size = 100*屏幕宽度/设计图宽度

DIP 逻辑像素 px 也是逻辑像素的一种 反映的是css 或者js 程序中的像素点
DPR 设备像素比： 是设备的物理像素和逻辑像素之间的比

本来是不想了解的 但是面了两次都被人问了还是了解一下吧

原理：依靠的是script 标签可以跨域请求并且会自动执行的原理

jsonp 处理分为客户端和服务端两部分

客户端

在dom中添加一个script标签，标签的地址是服务端get的地址，地址中传递一个callback 的名字，和其他的参数

定义对应的callback方法方法中接受一个参数 参数就是后端返回的数据

服务端

返回一个字符串，字符串内容是调用callback 方法的js代码，并且吧返回的数据放到callback方法的第一个函数中

信息，服务器收到请求，需要请求者继续执行操作

成功，操作被成功接收并处理

重定向，需要进一步的操作以完成请求
301 永久移动。
302 临时移动 重定向
304 未修改 访问缓存数据

客户端错误，请求包含语法错误或无法完成请求
401 身份为认证

服务器错误，服务器在处理请求的过程中发生了错误
500 服务器内部错误

（持续更新）