js面试题

1.eventLoop

2.setTimeout 误差原因

3.深浅拷贝

4.跨域原因及解决方案

5.css放在头部，js放在尾部

6.css触发bfc

7.webpack plugin和loader区别

8.前端优化

9.协商缓存

10.长列表优化

11.webview交互

12.vue响应式原理

13.原型

14.算法题：数组中有n个元素，排列

1、什么是 Event Loop？

EventLoop是计算机系统的运行机制，js就是运行这个机制，因为js是单线程语言，所以一旦遇到一个耗时很长的任务就会卡住，js为了解决这个问题就有了EventLoop
Event Loop是一个程序结构，用于等待和发送消息和事件。
就是在程序中有了两个线程，一个负责应用本身，主线程，另一个负责主线程和其它进程，称为EventLoop

2、setTimeout误差问题

1、js是单线程语言
基本数据类型存放在栈中的简单数据段
引用数据类型存放在堆中的对象
因为定时器是宏任务，如果执行栈的时间大于定时器花费的时间，那么定时器的回调在 宏任务(macrotask) 里，来不及去调用，所有这个时间会有误差。所以就会有误差
宏任务是宿主发起的比如script,setTimeout

image.png

3、css放在头部，js放在尾部

css放在头部是因为页面加载html生成dom树的时候就可以同时对dom树进行渲染，防止闪跳，白屏
js放在尾部是因为js会修改dom树，需要一个稳定的dom树

4、CSS中关于触发BFC

BFC是css的一个布局概念，块级格式化上下文

什么时候产生

浮动float不为none的时候
定位为position:absolute和fixed的
display的时候
overflow不为visible

可以解决什么问题

解决浮动父元素坍塌问题
解决自适应布局的问题
解决外边距垂直方向重合问题

5、webpack的plugin和loader区别

loader是文件加载器，运行在nodejs中，并对文件进行打包，压缩转换
plugin是插件，用于拓展webpack的功能

6、深浅拷贝

浅拷贝有两种定于，第一种是赋值，第二种是拷贝对象的第一层属性，深层还是一样的
深拷贝是指将对象拷贝一份，无论如何修改都不会改变原有的

7、前端优化

1630054263(1).jpg

1630054281(1).png

image.png

8、vue响应式原理

响应式原理就是当数据发生改变的时候视图也会跟着更新
VUE是利用了Object.defineProperty的方法里面的setter 与getter方法的观察者模式来实现。