前端知识杂项汇整

83 阅读4分钟

浏览器内核

也叫“渲染引擎”,原来是js引擎和渲染引擎组成,后js引擎分离出来

js引擎,解析js语言并执行

渲染引擎,解释网页语言并渲染

浏览器   内核        渲染引擎     js引擎
IE      Trident     Trident     Chakra
Chrome  Webkit      Blink       V8
Opera   presto      Blink       Carakan
Safari  Webkit      webcore     JScore
Firefox Gecko       Gecko       Monkey

for in与for of

for(    in  ){  }   //遍历对象的属性值**key**,适合遍历对象,遍历的是数组的索引( key:value键值对 ),可能会遍历原型链上的属性
for(    of  ){  }   //遍历对象的元素值**value**,不能遍历对象,适合遍历数组,遍历的是数组的元素值,不能遍历object,只能遍历有迭代器接口的对象,如Array,Set,String

for in是遍历(object)键名,for of是遍历(array)键值。

for...in 循环只遍历可枚举属性(包括它的原型链上的可枚举属性)。像 ArrayObject使用内置构造函数所创建的对象都会继承自Object.prototypeString.prototype的不可枚举属性,例如 StringindexOf()方法或 ObjecttoString()方法。循环将遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性(更接近原型链中对象的属性覆盖原型属性)。

for...of语句可迭代对象(包括ArrayMapSetStringTypedArrayarguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。

for of不可以遍历普通对象,想要遍历对象的属性,可以用for in循环, 或内建的Object.keys()方法。

无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

for...in语句以任意顺序迭代对象的可枚举属性

for...of 语句遍历可迭代对象定义要迭代的数据。

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};
​
let iterable = [3, 5, 7];
iterable.foo = 'hello';
​
for (let i in iterable) {
  console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}
​
for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // 0, 1, 2, "foo"
  }
}
​
for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

迭代器

用Symbol.iterator声明对象的迭代器就能修改for of 方法的行为,类似于c++中的重载运算符

盒模型

box-size: content-box or boder-box ;

标准 怪异

Array.__proto__

Array.__proto__===Function.prototype //true

Array其实是Function new出来的,而不是Object

Array instanceof Object //true

是因为Function.prototypeObject new出来的

Array.__proto__.__proto__===Object.prototype //true

为什么用vue中的data函数式

复用组件,数据不会有引用关系(共用一个data)而出错,达到相互隔离目的

visibility:hidden

visibility:hidden视觉上消失,但仍占有空间,具有继承性,子盒子要加上visibility:visible,才能重新显现,只会引起重绘

display:none不占空间,会引起重绘重排

浏览器进程

1.浏览器包含多个进程

  • 1.主进程 协调控制其他子进程(创建、销毁)

  • 2.第三方插件进程 每种类型的插件对应一个进程,仅当使用该插件时才创建

  • 3.GPU 进程 用于 3D 绘制等

  • 4.渲染进程,就是我们说的浏览器内核(最重要) 负责页面渲染,脚本执行,事件处理等 每个 tab 页一个渲染进程

    1.JS 引擎线程
     负责处理解析和执行 javascript 脚本程序
     只有一个 JS 引擎线程(单线程)
     与 GUI 渲染线程互斥,防止渲染结果不可预期
    ​
    2.GUI 渲染线程
     负责渲染页面,布局和绘制
     页面需要重绘和回流时,该线程就会执行
     与 js 引擎线程互斥,防止渲染结果不可预期
    ​
    3.http 请求线程
     浏览器有一个单独的线程用于处理 AJAX 请求
    ​
    4.事件处理线程(鼠标点击、ajax 等)
     用来控制事件循环(鼠标点击、setTimeout、ajax 等)
    ​
    5.定时器触发线程
     setIntervalsetTimeout 所在的线程
    
    总结:
    1.先把Call Stack清空
    2.然后执行当前的微任务
    3.接下来DOM渲染
    微任务在dom渲染之前执行,宏任务在dom渲染之后执行。
    

    在js的执行中,对于DOM的操作都是同步执行的,但是渲染是GUI渲染线程执行的,

    所以看起来像异步

undefined==null为什么

对于null==undefined返回true,在《JavaScript高级程序设计》(第三版)中是这么写的: 实际上undefined值是派生自null值的,因此ECMA-262规定对他们的相等性测试要返回true

MyforEach实现

Array.prototype.myforEach=function(callback){
    for(i of this){
        callback(i,this.indexOf(i),this);
    }
}
        function callback(i,b,c){
            console.log(i+1);
        }
        [1,2,3].myforEach(callback);
[1,2,3].myforEach((i)=>{
    console.log(i-3);
});
// [1,2,3].forEach(i=>console.log(i+1))