第二次模拟面试

自我介绍

在自我介绍的时候，如果认为自己的技术栈有哪些比较突出的地方，可以想办法往那边去引导，比如我的话可以说自己的开源方面，写博客方面，单元测试方面等等

说一下浏览器的进程和线程

所以打开一个网页，至少需要四个进程：网络进程、浏览器进程、GPU进程、渲染进程，如果打开的网页有运行插件的话，还需要加上一个插件进程

浏览器一个标签页属于什么？进程，属于渲染进程

浏览器是多进程的

在浏览器打开一个网页相当于新起一个进程(每个进程内有自己的多线程)

核心：浏览器的渲染进程是多线程的

关键渲染路径在GUI线程中,关键渲染路径的进程：

1. HTML解析生成DOM树
2. CSS解析生成CSSOM树
3. DOM树和CSSOM树合成 渲染render树
4. 根据render树和视口进行Layout布局，计算每个节点的位置和大小(布局render树)
5. Paint绘制或栅格化，将每个节点绘制到页面上(绘制render树，像素px信息)
6. 转交给合成进程，光栅化线程池，GPU进程合成，显示在屏幕上

这里提到了回流和重绘，简单介绍一下这两个：

回流是需要你计算它的位置再进行绘制，而重绘就无需二次计算位置，直接会进行绘制，所以重绘的消耗更小

回流就是因为js或者css发生改变，并且改变了原先盒子的布局，就会触发回流，并且回流一定会触发重绘，比如我改变盒子的大小，或者添加or删除某个元素

重绘虽然js和css改变了，浏览器重新渲染，但不会改变原先盒子的布局，比如我只是改变他的颜色，或者是visibility设置为hidden，虽然会隐藏元素，但布局并不会发生改变

script脚本会影响浏览器进程吗

会的，会影响浏览器的渲染

js是单线程，渲染是在GUI线程里进行，而GUI线程在解析DOM的时候会堵塞DOM解析，与js引擎线程互斥

箭头函数和普通函数的区别(超级常考！两次模拟面试都考了)

箭头函数和普通函数的区别：

箭头函数无 this，无 prototype(显示原型)

箭头函数无原型函数

箭头函数有几个使用注意点。

• 箭头函数没有自己的this对象。
• 不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。
• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest参数代替。
• 不可以使用yield命令，因此箭头函数不能用作 Generator函数

箭头函数里面的this指向哪？

箭头函数本身是没有this的，箭头函数的this指向它所在上下文的对象，如果在箭头函数里使用了this，它会指向最近一层作用域内的this

箭头函数this不可改变的原因是什么

因为箭头函数底层就用bind进行了绑定，在被定义之前就已经被定义好了

讲一下promise

https://isolcat.netlify.app/posts/promise相关面试题

CSS垂直水平居中(非常非常常考！)

分两种情况，一种定宽高，一种不定宽高

比如已知宽高：

margin-left:-100px;

margin-top:-100px;

son{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left:-100px;
  margin-top:-100px;
  width: 200px;
  height: 200px;
  background-color: black;
}

未知宽高：transform:translate:(-50%,-50%);

son{
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate:(-50%,-50%);
  width: 200px;
  height: 200px;
  background-color: black;
}

flex布局

父级元素必须有宽高

核心：

display: flex;

justify-content: center;

align-items: center;

.father{
  display: flex;
  justify-content: center;//定义了浏览器之间，如何分配顺着弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间
  align-items: center;
  width: 100vw;
  height: 100vh;

}
.son{
  width: 100px;
  height: 100px;
  background-color: black;
}

子绝四方向为0+margin:auto

核心：

top: 0;

right: 0;

left: 0;

bottom: 0;

margin: auto;

.son{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: black;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

盒模型

分为标准盒模型和怪异盒模型

标准：width=content

width=content+padding+border

原型和原型链

参考第一次的模拟面试内容

https://isolcat.netlify.app/posts/第一次模拟面试

如果问你原型链里有什么东西的话，就回答有prototype和__proto__

实现原型链：（寄生组合继承）

// 定义父对象
var Parent = function () {
  this.name = 'Parent';
  this.age = 30;
};

Parent.prototype.sayName = function () {
  console.log(this.name);
};

// 定义子对象
var Child = function () {
  this.name = 'Child';
};

// 子对象继承父对象
Child.prototype = new Parent();

// 添加子对象自己的方法
Child.prototype.sayAge = function () {
  console.log(this.age);
};

// 创建子对象的实例
var child = new Child();

// 调用子对象继承的方法
child.sayName(); // 输出：Child
child.sayAge(); // 输出：30

代码原地址：https://stackblitz.com/edit/js-ijurer?file=index.js

闭包

https://isolcat.netlify.app/posts/闭包

查看这篇文章即可

闭包在前端工程化的应用有哪些？

比如umd、柯里化函数

BFC

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗理解：

• BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
• 如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。
• 浮动元素会创建 BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的。

这里简单列举几个触发BFC使用的CSS属性：

• 根元素（html）,或包含body的元素
• 设置浮动（float），且值不为none（为 left、right），
• 设置定位（position）, 不为static或relative（为 absolute 、 fixed）
• 设置 display 为这些值 inline-block、flex、grid、table、table-cell、table-caption
• 设置 overflow，且值不为visible (为 auto、scroll、hidden)

跨域

参考这篇文章即可：https://isolcat.netlify.app/posts/跨域问题

http和https的区别

参考这篇文章就可以了：https://isolcat.netlify.app/posts/https是什么加密原理和证书ssltls握手过程