一、懒加载核心逻辑是什么，如何实现？
核心逻辑：按需加载
1、条件加载
满足特定条件时加载，如列表分页、页面滚动特定位置加载图片、vue动态路由（使用某个路由之前，再将其添加进路由表）
2、动态导入
使用import()函数，返回一个Promise对象，根据Promise的状态判断导入是否成功
二、script标签的defer、async作用？
相同点：
1、defer、async都是用来异步加载外链script脚本的
不同点：
1、defer的script加载完会中断html解析，执行完毕后再继续html解析，如果html解析先完成，也会等待defer的script执行完毕，最后再执行DOMContentLoaded，所以defer的script内可以监听到DOMContentLoaded事件
2、async的script加载不会中断html解析，执行完毕可能在DOMContentLoaded之前或之后，所以有可能获取不到DOM
三、首屏加载性能优化？会出现哪些问题？
首屏加载的更快，核心思想就是：减少资源体积
性能优化方法：
1、压缩html、css、js代码
2、减少本地代码体积，将静态资源放到云上
3、减少本地图片体积，使用精灵图，但现在都是使用云服务获取图片
4、懒加载的方式：按需加载、动态导入
5、静态资源缓存，资源响应头的Cache-Control和Expires或Etag和Last-Modified一般都是服务器管理人员在nginx配置
会出现的问题：
1、动态导入在导入完成之前可能会存在页面空白现象，我们可以设置默认样式、过渡动画等
四、图片优化方式有哪些？webp格式兼容问题怎么解决？
1、图片压缩
2、多图合并成一个图
3、非首屏图片懒加载
4、选择webp格式，有更好的压缩率，更好的图片质量，并且支持透明和动画，但是不支持ie。可以通过canvas.toDataURL()判断兼容性，或者picture、source 标签
canvas.toDataURL()如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。
<picture>
<!-- 浏览器会检查是否支持WebP格式，如果不支持，会忽略source元素，并加载img标签中src属性为image.jpg的备用图片 -->
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Alternate Image">
</picture>
五、浏览器输入一个url到页面呈现出内容，这之间发生了什么？
1、URL解析：解析协议、域名、端口、路径、参数
2、DNS解析：向DNS服务器发送请求获取真实服务器ip
3、建立TCP连接
4、发送HTTP请求
5、服务器响应
6、接收响应数据
7、解析和渲染
8、关闭连接
六、http和https的区别，https是如何进行加密的，原理是什么？
区别：
1、http是明文传输
2、https是加密传输，使用SSL协议或者TLS协议
https原理：
1、配置了https的服务器会发送证书给客户端
2、客户端校验证书合法性
3、客户端解析出公钥
4、客户端通过公钥生成加密信息传给服务器
5、服务器解密获取对称秘钥
6、后续通信使用秘钥加密解密
七、闭包是什么？举几个闭包的例子
1、闭包就是在一个函数的内部，创建一个内部函数，并通过内部函数访问外部函数的变量，并将内部函数作为外部函数的范围值
2、闭包常用在封装防抖、节流函数
3、可以通过将闭包函数的值设为null释放内存
八、时间复杂度和空间复杂度的概念
1、时间复杂度：算法运行时间，随着输入规模增长的增长率
2、空间复杂度：算法运行过程中所需的额外空间，随着输入规模增长的增长率
九、this指向有几种情况？
1、在全局作用域中指向window
2、在函数中，谁调用的函数就指向谁
3、使用call()和apply()方法：通过call()或apply()方法，可以显式地设置函数执行时的this值
4、使用bind()方法：bind()方法绑定了函数的this指向，并返回一个新的函数
十、Promise有哪些方法？
1、原型方法：then、catch、finally
2、构造函数方法：resolve、reject、all、allSettled、any、race
all 全部成功则反会结果数组，一个失败就停止，并返回失败原因。一般用来有依赖关系的多个请求。
allSettled 全部执行完就返回结果数组，无论是成功还是失败。一般用来处理没有依赖关系的多个请求
any 一个成功则成功，全部失败才失败
race 一个完成就返回，不论成功或失败
十一、宏任务和微任务
宏任务有：
1、setTimeout和setInterval的回调函数
2、ajax和fetch等请求的回调函数
3、DOM事件的回调函数
微任务有：
1、Promise的then、catch、finally回调
2、async/await的await下方的代码
1、async函数返回一个Promise，注意这里是同步的，Promise中只有then、catch、finally是异步的，async函数返回值是return中的内容，如果在后面调用then，返回值就会当作then的参数传入
2、async函数内部可以使用try/catch捕获Promise的reject
3、await关键字会等待右边的表达式执行结束，如果是Promise则会等待Promise的resolve或reject
4、await关键字下方的代码，相当于放到了Promise.then中，所以await下方的代码才是微任务
十二、vue-router的核心是什么？
1、实现主要依赖于浏览器的History API或Hash模式
2、在History API中，vue-router通过拦截浏览器的导航事件，并根据配置的路由规则来动态地加载相应的组件
3、另一种模式是Hash模式，在URL中使用“#”来表示路由路径。vue-router会监听URL中hash的变化，当hash改变时，会触发对应的路由并加载对应的组件
4、beforeEach、beforeResolve和afterEach几个钩子
5、可以通过addRoutes动态插入路由信息
6、<router-view>，首先有一个路由映射表，在router-view组件中通过this.$parent递归判断当前router-view应该渲染当前路由映射表上的第几个组件
十三、vuex的核心是什么？
1、State（状态）：用于存储应用程序的状态数据，使用方法mapState或者this.$store.state
2、Mutations（变化）：改变状态数据，必须是同步，使用方法mapMutations或者this.$store.commit
3、Actions（动作）：可以包含异步操作，可以触发 Mutations，使用方法mapActions或者this.$store.dispatch
4、Getters（获取器）：类似计算属性，使用方法mapGetters或者this.$store.getter
十四、src和herf的区别？
1、使用herf的标签link、a，不会阻塞html、js的解析
2、使用src的标签script、img，会阻塞html、css的解析
这就是link标签要放在script标签之前的原因
十五、assets和static的区别？
1、assets和static都是存放静态文件的
2、assets中静态文件打包时会被压缩，所以我们自己写的css可以放在这里。
3、static中的静态文件打包时不会被压缩，比如iconfont文件，本来就压缩过了，就可以放在这里。
