前端基础面试

浅拷贝与深拷贝有何区别？如何实现？

浅拷贝：拷贝的是原对象的内存地址

深拷贝：在内存中把原对象复制一份

浅拷贝的实现方式有：

（1）直接变量赋值

（2）Object.assign()；但目标对象只有一层的时候，是深拷贝；

（3）扩展运算符(...)；目标对象只有一层的时候，是深拷贝；

深拷贝就是在拷贝数据的时候，将数据的所有引用结构都拷贝一份。

深拷贝的实现方式有：

（1）结合使用JSON.parse()和JSON.stringify()方法。

（2）手写遍历递归赋值；

什么是AJAX？如何实现？

ajax是一种能够实现网页局部刷新的技术，可以使网页异步刷新。

ajax的实现主要包括四个步骤：

（1）创建核心对象XMLhttpRequest；

（2）利用open方法打开与服务器的连接；

（3）利用send方法发送请求；（"POST"请求时，还需额外设置请求头）

（4）监听服务器响应，接收返回值。

Javascript 如何实现继承？

实例继承：将子构造函数的 prototype 指向父构造函数的一个实例

原型继承：将子构造函数的 prototype 指向父构造函数的 prototype

构造函数绑定：使用 call 或 apply 方法，将父对象的构造函数绑定在子对象上

拷贝继承：如果把父对象的所有属性和方法，拷贝进子对象

ES6 语法 extends：class ColorPoint extends Point {}

Javascript 作用域链?

• 如果当前作用域没有找到属性或方法，会向上层作用域查找，
  直至全局函数，这种形式就是作用域链

eval是做什么的？

eval 的功能是把对应的字符串解析成 JS 代码并运行

• 应该避免使用 eval，不安全，非常耗性能（先解析成 js 语句，再执行）

• 由 JSON 字符串转换为 JSON 对象的时候可以用 eval('('+ str +')');

请说出以下结果输出什么？为什么？

for(var i = 0; i < 5; i++) {

setTimeout(function(){

console.log(i)

}, 0)

}

答案：5个5

解释：异步代码需要等同步代码先执行，所以当异步定时器执行时，

同步的for循环已经循环完毕

JS中的Array.prototype.splice()和Array.prototype.slice()方法作用与区别

两都的作用都是截取数组中元素，返回一个新数组

splice(): 第一个参数为下标，第二个参数为截取个数，并且会影响原数组

slice()：第一个参数为起始下标，第二个参数为结束下标，不会影响原数组

vue.js 的两个核心是什么？

答案：数据驱动和组件化思想

请问 v-if 和 v-show 有什么区别

v-show 指令是通过修改元素的 display 的 CSS 属性让其显示或者隐藏

v-if 指令是直接销毁和重建 DOM 达到让元素显示和隐藏的效果(删除)

vue 中 key 值的作用

需要使用 key 来给每个节点做一个唯一标识，Diff 算法就可以正确的识别此节点，找到正确的位置区插入新的节点
所以一句话，key 的作用主要是为了高效的更新虚拟 DOM

vue 与 jquery的区别？

jQuery直接操作DOM元素

Vue使用了MVVM原则，是通过Vue对象将数据 和 View 完全分离；通过数据来响应渲染页面;

而不需要直接操作DOM元素

watch 和 computed 区别

watch:

监听动作（只监听原本的属性）

没缓存，只要数据变化就执行

可以执行异步操作

常用于一个数据影响多个数据

computed:

计算属性（会生成新的属性）

有缓存，只在属性变化的时候才去计算。

不能执行异步操作

常用于多个数据影响一个数据

讲一下 Vue 的生命周期？

整个什么周期包含8个函数

1.页面初始化渲染阶段（只执行一次），在页面初始化渲染时，就会自动执行

beforeCreate() { }, 创建vue之前执行（数据和虚拟DOM树 还没有加载完成）

created() { }, 创建vue之前执行（数据已经加载好，虚拟DOM树没有加载完成）

beforeMount() { }, 页面渲染之前执行（数据和虚拟DOM树都已经加载好，但数据这时并没有填充）

mounted() { }, 页面渲染之后（数据已经填充完成）

2.数据更新渲染阶段（多次）数据更新时执行

beforeUpdate() { }, 数据更新之前执行（这个时候数据更新了，但页面还没有更新）

updated() { }, 数据更新之后执行（这个时候数据更新了，页面也更新了）

3.vue销毁阶段（一次），销毁时执行

beforeDestroy() { }, 销毁之前会触发，

destroyed() { }, 销毁之后会触发，

使用情况：mounted、created方法比较常用；

因为经常需要在这两个方法中发送ajax请求，请求页面初始化数据

Vue 的父组件和子组件生命周期钩子执行顺序是什么

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程

父beforeUpdate->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

总结：从外到内，再从内到外

Vue 中父组件如何监听子组件的生命周期？

可以通过自定义事件等，在子组件的生命周期钩子中，调用$emit触发父组件中的方法
通过@ hook在父组件中监听子组件的生命钩子，如果子组件是一个第三方组件，这很有用、

组件间通讯方式

1、props / $emit

（1）父组件向子组件传值（props将数据自上而下传递）

（2）子组件向父组件传递数据（$emit和v-on来向上传递信息）

2、eventBus事件总线（$emit / $on）

通过EventBus进行信息的发布与订阅

3、vuex:

是全局数据管理库，可以通过vuex管理全局的数据流

4、ref / $refs

ref：这个属性用在子组件上，它的用用就指向了子组件的实例，可以通过实例来访问组件的数据和方法

5、依赖注入（provide / inject）

provide 和 inject 是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。

provide 钩子用来发送数据或方法。

inject钩子用来接收数据或方法

6、$parent / $children

使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）。

使用 $children 可以让组件访问子组件的实例，但是， $children 并不能保证顺序，并且访问的数据也不是响应式的。

7、$attrs / $listeners

实现组件之间的跨代通信。

v-cloak指令的作用

用于 防止闪屏，防止页面出现{{ }}

在列表组件中添加 key 属性的作用？

key的主要作用就是在更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的。这样可以更高效的更新虚拟 DOM。

另外如果给列表组件设置了过渡效果，不添加key属性会导致过渡效果无法触发。因为不添加key会导致vue无法区分它们，导致只会替换节点内部属性而不会触发过渡效果

数据响应式（双向绑定）怎么做到的？

原理：Vue 采用 数据劫持 结合 发布者-订阅者 模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter 以及 getter，在数据变动时发布消息给订阅者，触发相应的监听回调，更新视图。

追问1：那如果我要监听一个对象属性的删除或添加呢？splice受 defineProperty 限制，Vue 无法检测对象属性的删除和添加。

所以我们可以利用 Vue 提供的 Vue.set 来解决此问题。

Vuex 用过吗？简单介绍一下？

状态管理模式 + 库

相当于共享仓库，方便任何组件直接获取和修改。

state - 数据【存项目共享状态，是响应式的，store的数据改变，所有依赖此状态的组件会更新】

$store.state.count

mutations - 方法【同步函数，只建议在这个地方修改数据】

inc(state, 参数唯一) {}

$store.commit('inc', 2)

actions -【异步操作】【提交的是mutations，不直接修改状态】

increment(context, num) {context.commit()}

this.$store.dispatch('',arg)

getters - 包装数据 【store的计算属性，可缓存】

show: function(state) {}

this.$store.getters.show

传参，返回函数：show(state) {return function(参数) {return ...}}【不会缓存数据】

使用 Vuex 管理数据，与直接在 全局 window 下定义变量相比，有什么区别或者说优势？

vuex、

vuex由统一的方法修改数据（ store 数据需要到mutation 层）

Vuex数据更新 具有响应式

层次划分明确，便于管理

window、

window全局作用域下定义的数据是静态的，数据不具有响应式

全局变量多了会造成命名污染

Vuex 是通过什么方式提供响应式数据的？

在 Store 构造函数中通过 new Vue({}) 实现的。
利用 Vue 来监听 state 下的数据变化，
给状态(数据)添加 getter、setter可以监听数据改变。

Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的？

总结：

在vuex底层会有一个committing变量，初始值false；当通过mutation方法修改数据时

把committing变量变成true；如果是直接改变的变量则不改变committing变量

vue2中的响应式核心是es5的Object.defineProperty，缺点有：

深度监听需要递归到底，性能层面考虑不太好

无法监听对象新增属性和删除属性，需要vue特殊处理

无法监听原生数组，需要在数组原型上做拦截

所以vue3采用了es6之后的proxy去重构了响应式原理，proxy能够很好的解决Object.defineProperty的缺点

vue3.0监测机制有了很大的改善，弥补了vue2.0

的一些局限：

• 对属性的添加、删除动作的监测；

• 对数组基于下标的修改、对于 .length 修改的监测；

• 对 Map、Set、WeakMap 和 WeakSet 的支持；

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写

vuex常见面试题

1.什么是Vuex？

答:Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件

2.Vuex解决了什么问题？

答:多个组件依赖于同一状态时

来自不同组件的行为需要变更同一状态。

3.vuex使用与什么场景？

答:单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

4.vuex有哪几种属性？

答:state、getters、mutations、actions、modules 。

5.Vuex中状态储存在哪里，怎么改变它？

答:存储在state中，改变Vuex中的状态的唯一途径就是显式地提交 (commit) mutation。

6.Vuex中状态是对象时，使用时要注意什么？

答:对象是引用类型，复制后改变属性还是会影响原始数据，这样会改变state里面的状态，是不允许，所以先用深度克隆复制对象，再修改。

7.怎么在组件中批量使用Vuex的state状态？

答:使用mapState辅助函数, 利用对象展开运算符将state混入computed对象中

import {mapState} from 'vuex' export default{ computed:{ ...mapState(['price','number']) } }

8.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

答：如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。

谈谈你对Vue中响应式数据的理解?

数组和对象类型的值变化的时候，通过defineReactive方法，借助了defineProperty，将所有的属性添加了getter和setter。用户在取值和设置的时候，可以进行一些操作。

缺陷：只能监控最外层的属性，如果是多层的，就要进行全量递归。

get里面会做依赖搜集(dep[watcher, watcher]) set里面会做数据更新(notify，通知watcher更新)

Vue中如何检测数组的变化?

vue中对数组没有进行defineProperty，而是重写了数组的7个方法。 分别是：

• push

• shift

• pop

• splice

• unshift

• sort

• reverse

• 因为这些方法都会改变数组本身。

数组里的索引和长度是无法被监控的。

Vue中如何进行依赖收集的?

Vue初始化的时候，挂载之后会进行编译。生成renderFunction。

当取值的时候，就会搜集watcher，放到dep里面。

当用户更改值的时候，就会通知watcher，去更新视图。

五、如何理解Vue中的模板编译原理?

这个问题的核心是如何将template转换成render函数。

将template模块转换成ast语法书 - parserHTML

对静态语法做标记(某些节点不改变)

重新生成代码 - codeGen,使用with语法包裹字符串

六、Vue生命周期钩子是如何实现的?

Vue的生命周期钩子是回调函数，当创建组件实例的过程中会调用相应的钩子方法。 内部会对钩子进行处理，将钩子函数维护成数组的形式。

vue.mixin的使用场景和原理?

Vue的mixin的作用就是抽离公共的业务逻辑，原理类似对象的继承，当组件初始化的时候，会调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并。 如果混入的数据和本身组件的数据有冲突，采用本身的数据为准。

缺点：命名冲突、数据来源不清晰

vue组件中data必须是一个函数的原因

vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

简单说下data为函数的原因。data为函数（有自己独立的作用域），通过return 返回对象的拷贝，致使每个实例都有自己独立的对象，实例之间可以互不影响的改变data属性值。

这并非是 Vue 自身如此设计，而是跟 JavaScript 特性相关，我们来回顾下 JavaScript 的原型链：

var Component = function() {};
Component.prototype.data = {message: 'Love'
}
var component1 = new Component(),component2 = new Component();
component1.data.message = 'Peace';
console.log(component2.data.message);  // Peace

以上两个实例都引用同一个对象，当其中一个实例属性改变时，另一个实例属性也随之改变，只有当两个实例拥有自己的作用域时，才不会互相干扰

var Component = function() {this.data = this.data()
}
Component.prototype.data = function(){return {message: 'Love'}
}
var component1 = new Component(),component2 = new Component();
component1.data.message = 'Peace';
console.log(component2.data.message); //Love

Vue开发的应用一般为单页面应用，一般情况下只有一个Vue实例，所以实例中的数据可以在当前项目中共享，所以Vue实例中的data是一个对象

Vue 组件中 data 为什么必须是函数

答 : 防止组件重用的时候导致数据相互影响;

因为data会挂在组件的原型上；所有实例共有

如果不是函数，则两个实例都引用同一个对象，当其中一个实例属性改变时，另一个实例属性也随之改变

只有当两个实例拥有自己的作用域时(比如函数)，才不会互相干扰 ！重点！

VueRouter 是什么？你平常是怎么用的？

是什么：Vue-Router 是 Vue 官方的路由管理器

作用：为了页面跳转

原理：可以给每一个组件分配路由路径，

则就可以使用rotuer-link或者编程式导航来根据分配的路由路径，

实现组件之间的跳转；

监听锚点值改变，渲染指定页面

vue.js 的两个核心是什么？

答案：数据驱动 和 组件化思想

什么是 Vue.nextTick()？

定义：在下次 DOM 更新循环结束之后执行延迟回调。（在一个异步任务完成之后执行）

白话：等你dom加载完毕以后再去调用nextTick()里面的数据内容它是Vue的核心方法之一；

理解：nextTick()，是将回调函数延迟在下一次 dom 更新数据后调用，简单的理解是：

当数据更新了，在 dom 中渲染后，自动执行该函数中回调函数，

Vue.nextTick(function(){ 这里在DOM更新后执行 })

vue 中子组件调用父组件的方法

• 第一种方法是直接在子组件中通过 this.$parent.event 来调用父组件的方法

• 第二种方法是在子组件里用$emit 向父组件触发一个事件，父组件监听这个事件就行了

• 第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

jQuery能做什么

获取页面的元素；

修改页面的外观；

改变页面大的内容；

响应用户的页面操作；

为页面添加动态效果；无需刷新页面，即可以从服务器获取信息；

简化常见的javascript任务。

9、jquery中的选择器和CSS中的选择器有区别吗？

jQuery选择器支持CSS里的选择器，

jQuery选择器可用来添加样式和添加相应的行为，

CSS中的选择器是只能添加相应的样式。

10、jQuery的特点都有什么？

jQuery的核心特性可以总结为：

具有独特的链式语法和短小清晰的多功能接口；

具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；

拥有便捷的插件扩展机制和丰富的插件。

jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery中的方法链是什么？使用方法链有什么好处？

方法链 : 是对一个方法返回的结果调用另一个方法 ,一个方法接一个方法;

• 好处:

1. 使得代码简洁明了，

2. 同时由于只对DOM进行了一轮查找，性能方面更加出色。

websocket协议

websocket是一种浏览器与服务器进行全双工通信的网络技术，属于 应用层协议。它 基于TCP传输协议，并 复用HTTP 的握手通道，用来弥补HTTP协议在持久通信能力上的不足

http是一种无状态，无连接，单向的应用层协议，它采用了请求/响应模型，通信请求只能由客户端发起，服务端对请求做出应答处理。这样的弊端显然是很大的，只要服务端状态连续变化，客户端就必须实时响应，都是通过javascript与ajax进行轮询，这样显然是非常麻烦的，同时轮询的效率低，非常的浪费资源(http一直打开，一直重复的连接)。

于是就有了websocket，它是一种全面双工通讯的网络技术，任意一方都可以建立连接将数据推向另一方，websocket只需要建立一次连接，就可以一直保持

WebSocket优点

1.减少请求费时费资源：是真正的全双工方式，建立连接后，服务器与客户端时完全对等的，可以相互请求，减少了不必要的网络请求时间损耗和网络流量；

2.更持久：websocket协议通过第一个request建立TCP连接后，只要不主动关闭，就能一直保持连接状态交换数据；

3.服务端可以主动向客户端发送消息；

4.WebSocket的使用场景

websocket的使用场景: 社交聊天、弹幕、多玩家游戏、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、基于位置的应用、在线教育、智能家居等 需要高实时的场景。

ts的优势和缺点

首先，为什么要学ts? ts现在已经成为很多开发者都在学习和使用的潮流了，而且前端的三大框架Angular, Vue, React都支持ts。当然我更关心的是，ts有什么优势——

1. ts具有静态类型语言的优点，那就是在声明变量的时候就指定了变量的类型。显然在使用的时候，程序知道你变量的类型，就减少了因为不确定类型，到执行的时候才发现使用到了不是该类型的方法的错误。确定了变量的类型，能减少不确定性，也增强了代码的可读性。

2. ts比js的代码提示更智能，毕竟ts的变量类型是固定的，所以IDE更懂你的代码，可以给你更确定的代码提示，什么属性可以用，什么属性不能用是一目了然的，你写错了还有标红提示。（我曾经超讨厌标红的错误提示，觉得自己还没写完就被骂了，但是现在才发现，当然是早发现错误早好）

3. ts具有很好的包容性。作为js的超集，ts能完全兼容js的语法——把js文件后缀改成ts是完全没有问题的； 就算你写的ts代码报错了也一样能编译成js（而且编译的js在任何浏览器上都可以运行，也就是说，我们用ts可以使用最新版本的ES特性，但是编译成js的时候，ts也会考虑到语法版本的问题，为我们转换成ES5的代码）

ts当然也有一些缺点，如增加了学习成本（确实与js有些不一样），短期内增加了开发成本（ts更适合用在大项目上）

vue-router路由懒加载以及三种实现方式

1. 什么是路由懒加载？

    也叫延迟加载，即在需要的时候进行加载，随用随载。

复制

2. 官方解释：

	1：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
	2：如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

3. 官方在说什么呢？为什么需要懒加载？

	1：首先，我们知道路由中通常会定义很多不同的页面。
	2：这个页面这项目build打包后，一般情况下，会放在一个单独的js文件中
	3：但是，如果很多的页面都放在同一个js文件中，必然会造成这个页面非常大
	4：如果我们一次性的从服务器中请求下来这个页面，可能会花费一定时间，用户体验不好
	5：如何避免这种情况发生呢？使用路由懒加载就可以了

4. 继续解释原由？

1：像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大。
    2：造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验。
    3：而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力

也就是说：进入页面不用也不需要一次性加载过多资源造成加载时间过程！

1. 路由懒加载做了什么事情？

	1：主要作用是将路由对应的组件打包成一个个的js代码块
	2：只有在这个路由被访问到的时候，才加载对应的组件，否则不加载！

复制

即：只有在这个路由被访问到的时候，才加载对应的组件，否则不加载！

1:.如何实现路由懒加载？？

 vue项目实现路由按需加载（路由懒加载）的三种方式：
 	1：Vue异步组件
 	2：ES6标准语法import（）---------推荐使用！！！！！
 	3：webpack的require，ensure()

2.Vue异步加载技术

 	1：vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，此时一个组件会生成一个js文件。
 	2：component:resolve=>require(['放入需要加载的路由地址'], resolve)

{path:'/problem',name:'problem',component:resolve=>require(['../pages/home/problemList'], resolve)}

3.ES6推荐方式imprort ()—-推荐使用

 	1：直接将组件引入的方式，import是ES6的一个语法标准，如果需要浏览器兼容，需要转化成es5的语法。
 	2：推荐使用这种方式，但是注意wepack的版本>2.4
 	3：vue官方文档中使用的也是import实现路由懒加载
 	4：上面声明导入，下面直接使用

import Vue from'vue';import Router from'vue-router';// 官网可知：下面没有指定webpackChunkName，每个组件打包成一个js文件。constFoo=()=>import('../components/Foo')constAoo=()=>import('../components/Aoo')// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。// const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')// const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')exportdefaultnewRouter({routes:[{path:'/Foo',name:'Foo',component: Foo
},{path:'/Aoo',name:'Aoo',component: Aoo
}]})

4.webpack提供的require.ensure()实现懒加载：

 	1：vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
2：这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
3：require.ensure可实现按需加载资源，包括js,css等。他会给里面require的文件单独打包，不会和主文件打包在一起。
4：第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。
5：第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件。
6：第三个参数是错误回调。
7：第四个参数是单独打包的chunk的文件名

import Vue from'vue';import Router from'vue-router';constHelloWorld=resolve=>{ 

require.ensure(['@/components/HelloWorld'],()=>{resolve(require('@/components/HelloWorld'))})}
Vue.use('Router')exportdefaultnewRouter({routes:[{{path:'./',name:'HelloWorld',component:HelloWorld
}}]})

4.import和require的比较（了解）

1：import 是解构过程并且是编译时执行
2：require 是赋值过程并且是运行时才执行，也就是异步加载
3：require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量

说一说前端性能优化手段？

解题思路

得分点 图片压缩和文件压缩、雪碧图/精灵图、节流防抖、HTTP缓存、本地缓存、Vue的keep-alive缓存、ssr服务器端渲染、懒加载、对dom查询进行缓存、将dom操作合并 标准回答 前端性能优化分为两类，一类是文件加载更快，另一类是文件渲染更快。 加载更快的方法： 让传输的数据包更小（压缩文件/图片）：图片压缩和文件压缩 减少网络请求的次数：雪碧图/精灵图、节流防抖 减少渲染的次数：缓存（HTTP缓存、本地缓存、Vue的keep-alive缓存等） 渲染更快的方法： 提前渲染：ssr服务器端渲染 避免渲染阻塞：CSS放在HTML的head中 JS放在HTML的body底部 避免无用渲染：懒加载 减少渲染次数：对dom查询进行缓存、将dom操作合并、使用减少重排的标签 加分回答 雪碧图的应用场景一般是项目中不常更换的一些固定图标组合在一起，比如logo、搜索图标、切换图标等。 电商项目中最常用到的懒加载，一般在查看商品展示的时候通常下拉加载更多，因为商品数据太多，一次性请求过来数据太大且渲染的时间太长。

说一说服务端渲染？

解题思路

得分点 服务器端生成HTML直接返回给浏览器、减少网络传输、首屏渲染快、对搜索引擎友好 标准回答 SSR是Server Side Render简称；页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了。和它对应的是，CSR是Client Side Render简称；客户端在请求时，服务端不做任何处理，直接将前端资源打包后生成的html返回给客户端，此时的html中无任何网页内容，需要客户端去加载执行js代码才能渲染生成页面内容，同时完成事件绑定，然后客户端再去通过ajax请求后端api获取数据更新视图。 服务端渲染的优势：减少网络传输，响应快，用户体验好，首屏渲染快，对搜索引擎友好，搜索引擎爬虫可以看到完整的程序源码，有利于SEO。 在Vue项目中实现服务端渲染方法：Vue在客户端渲染中也是采用一定方法将虚拟DOM渲染为真实DOM的，那么服务端的渲染流程也是通过虚拟DOM的编译来完成的，编译虚拟DOM的方法是renderToString。在Vue中，vue-server-renderer 提供一个名为 createBundleRenderer 的 API，这个API用于创建一个 render，并且自带renderToString方法。 加分回答 使用服务器端渲染 (SSR) 时还需要有一些权衡之处： - 开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；一些外部扩展库 (external library) 可能需要特殊处理，才能在服务器渲染应用程序中运行。 - 涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序 (SPA) 不同，服务器渲染应用程序，需要处于 Node.js server 运行环境。 - 更多的服务器端负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境 (high traffic) 下使用，请准备相应的服务器负载，并明智地采用缓存策略。