高频面试题

1. 在浏览器中输入URL并回车，发生了什么？
   ① 浏览器解析URL，在DNS域名系统中匹配真实的IP地址
   ② 拿到IP地址，进行TCP三次握手，建立连接
   ③ 客户端向服务器发送HTTP请求，服务器接收请求并返回相应数据，客户端拿到数据进行页面渲染
   ④ 进行TCP四次挥手，断开连接
2. css加载会造成以下哪些阻塞？a.DOM解析 b.DOM渲染 c.js执行
   正确答案为：b、c
   解析：
   ① DOM解析和CSS加载是并行的，并不会互相影响
   ② DOM渲染依赖CSS，所以会等待CSS加载完之后，才能进行页面渲染
   ③ 一定是CSS解析完之后，再执行js脚本。在js中操作了DOM样式的情况下，若js比css加载快，最终css的样式会生效，若css比js加载快，最终js的样式会生效，这样会导致结果的不确定，这是不允许的
3. 如何优化前端项目？
   性能优化包括：页面加载速度、动画流畅性、用户体验、内存占用问题
   ① 减少HTTP请求
   ② 使用懒加载
   ③ 尽量使用重绘（成本低），减少回流（重新计算DOM树，必定会再次触发重绘）次数
   减少回流方式：脱离文档流
4. let、var、const有什么区别？
   ① var存在声明提升，let、const不存在声明提升
   ② var在函数作用域或全局作用域中有效，let、const在块级作用域中有效
   ③ var可以重复定义，let、const不能重复定义
   ④ const声明常量，一旦声明必须赋值
5. 用const声明常量的值能不能改？
   基本数据类型不能改，引用数据类型可以改，因为地址不变就可以改
6. let obj = {} 和 let obj1 = new Object(null)有什么区别？
   ① 前者有原型链，后者没有原型链
   ② 如果只是把后者当做一个容器来使用，不需要使用身上的属性或方法，效率会比前者高
7. 如何先输出123，并让456在2秒后输出？
   ① 定时器
   ② 利用async和await实现线程休眠
   案例：

   function sleep(time) {
   	return new Promise(resolve => {
   		setTimeout(() => {
   			resolve(time);
   		}, time);
   	});
   }
   async function test() {
   	console.log(123);
   	await sleep(2000);
   	console.log(456);
   }
   test();
   

8. vue中key值的作用，能不能用数组的下标当做key？
   ① key值具有唯一性，在diff算法中，是通过key值进行比对的，能够高效更新节点
   ② 不建议使用数组的下标当做key，因为对表格数据增删的时候，index会发生变化，导致key值变化，如果表格没有增删的操作，可以使用数组的下标
9. vue中的data为什么是个函数，不是个对象？
   函数是闭包的形式，利用了闭包的数据私有性，防止全局变量污染，让每个组件的数据都是独立的个体
10. vue中的虚拟DOM是什么？
    ① 是一个JS对象
    ② 虚拟DOM三要素：标签target、属性attr、子元素children
11. vue中的虚拟DOM做了什么？
    先将vue模板映射成一份虚拟DOM，在页面更新的时候，也会映射成一份虚拟DOM。之后通过diff算法对比两个虚拟DOM（对比两个js对象），不一样的地方就局部更新
12. vue是如何提升渲染效率的？
    将直接操作DOM行为（会直接影响浏览器的性能）转变为JS对象比较（执行效率的问题）