前端面试题个人汇总 / 前端小知识 保持学习 （希望能找到有海外业务的中大型公司）

基础知识(学校里学过的那种)

• 浏览器IP寻址到到页面渲染完成的过程

  • 1。浏览器构建请求
    • 1.1 DNS域名解析寻找ip 浏览器缓存→系统缓存→运营商缓存→根DNS服务器
    • 1.2 在应用层封装http 请求报文;1.3 在传输层建立tcp 连接;1.4 数据链路层， 物理层;
    • 1.3 在传输层建立tcp 连接;1.4 数据链路层， 物理层;
    • 1.4 数据链路层， 物理层;
  • 2。网络传输浏览器请求数据;
  • 3。服务器构建响应;
  • 4。网络传输服务器响应数据;
  • 5。浏览器渲染页面;
    • 5.1、创建DOM树 分析器分析HTML元素，构建一颗DOM树
    • 5.2、创建StyleRules(CSS) CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。
    • 5.3、创建Render树 将DOM树和样式表，关联起来，构建一颗Render树
    • 5.4、布局Layout 开始布局为每个Render树上的节点确定一个在显示屏上出现的精确坐标。
    • 5.5、绘制Painting Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。

• OSI七层网络模型
  浏览器构建请求时，一层层向下封装报文(请求行头体 → 数据段 → 组 → 帧 → 比特)
  
  

函数相关 ES6++

• foreach()函数的循环次数是一开始就固定的

VUE相关

• 为什么VUE3要使用proxy代替deineProperty?

  • JS中做属性拦截常见的方式有三: :defineProperty，getter/setters 和Proxies.
  • Vue2在2013年只能使用defineProperty。
    • 该API对数组的拦截有问题 vue专门为数组响应式做一套实现。
    • 另外不能拦截那些新增、删除属性
    • defineProperty方案在初始化时需要深度递归遍历待处理的对象才能对它进行完全拦截，明显增加了初始化的时间。
  • Proxy不仅可以对数组实现拦截，还能对Map、Set实现拦截;
  • Proxy的拦截也是懒处理行为，如果用户没有访问嵌套对象，那么也不会实施拦截，这就让初始化的速度和内存占用都改善

• 为什么Vite这么快？
  Webpack的bundle模式构建 module graph 的过程中，涉及到大量的文件 IO、文件 transfrom、文件 parse 操作；以及分解 module graph 的过程中，需要遍历 module graph、文件 transform、文件 IO 等。这些操作，往往需要消耗大量的时间，导致构建速度变得缓慢。
  Vite的unbundle 机制，不需要做 bundle 操作，源文件之间的依赖关系完全通过浏览器对 ESM 规范的支持来解析。这就使得 dev server 在启动过程中只需做一些初始化的工作，剩下的完全由浏览器支持。
  unbundle 机制的核心:
  1.模块之间的依赖关系的解析由浏览器实现
  2.文件的转换由 dev server 的 middlewares 实现并做缓存
  3.不对源文件做合并捆绑操作
  优点：快速的冷启动，快速的热更新
  缺点：首屏和懒加载性能的下降。
  相关链接

• 与react的区别
  1.vue是渐进式框架 更注重小型化和轻量化。vue特性之一便是双向绑定，数据与视图相互影响相互改变。
  2.react更偏向大型应用，与传统JS一样，通过操作DOM来改变视图
  3.但二者都是用了虚拟DOM来提升渲染性能

• ref 用于vue中获取dom 类似jquery的$()选择器 与 原生的document.getElementById()

• 优先级问题：props第一 methods第二 data第三 computed第四 watch最后
  VUE源码：

• VUE3中 setup写法
  跳转到更详细的总结

原生JS相关

• 回调函数：函数的函数，也就是当作参数传给其他函数的函数，一般用来处理异步操作
• 匿名函数：顾名思义，没有名字无法直接调用的函数。但可以赋值或作为参数传递

setTimeout(function(){console.log('执行了')},1000)

• 箭头函数：就是简化的匿名函数.可以省略function return {} 等

setTimeout(()=>console.log('执行了'),1000)

• netxtick() 获取更新后的dom内容

• 

• call()的用法与理解 手写foreach()
  JS中 方法可以这样用 用法类似JAVA中的类

function f(){
	this.a="1";
}
let a = new f();
a.a//1

call()的用法与理解

function f(){
	this.a="1";
}
  function e(){
	f.call(this);//(对象f被添加到了this对象，也就是e对象中)
}
new e().a//1

var s1={color:'red'};//谁调用this就指向谁，也可以将调用call()方法的对象的this指向改变为()里的对象。
function changeColor(){
	console.log(this.color);
}
changeColor.call();//undefined
changeColor.call(s1);//red

利用原型链，手写foreach

Array.prototype.toforEach = function(data) {
      console.log('toforEach的参数——', data) 
		// data 就是调用这个函数传入的参数，此时是一个回调函数; 回调函数不会立马被指向，调用的时候才会执行
      console.log('this====', this) //[1,2,3] 谁调用toforEach this便指向谁
      let array = this 
      for (let index = 0; index < array.length; index++) {
          data(array[index],index,array)
      }
    }
new Array(1,2,3).toforEach((element, index) => {
      console.log(element) // 1  2  3
    })

• JS执行机制