本文共 12380 字，大约阅读时间需要 41 分钟。

拓展

什么是原生开发？什么是混合开发？两者有什么区别？

原生开发(NativeApp开发)：像盖房子一样，先打地基然后浇地梁、房屋结构、一砖一瓦、钢筋水泥、电路走向等，原生APP同理：通过代码从每个页面、每个功能、每个效果、每个逻辑、每个步骤全部用代码写出来，一层层，一段段全用代码写出来

此种APP的数据都保存在本地，APP能及时调取，所以相应速度及流畅性有保障

混合开发(HTML5开发)：这个就相当于一种框架开发，说白了就是网页;该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。

混合APP还有一种是套壳APP，套壳APP就是用H5的网页打包成APP，虽然是APP能安装到手机上，但是每个界面，全部是网页

此种APP数据都保存在云端，用户每次访问都需要从云端调取全部内容，这样就容易导致反应慢，每打开一个网页或点一个按钮都需要等半天。

什么是小程序？

小程序是一个不需要下载安装就可使用的应用，它实现了应用触手可及的梦想，用户扫一扫或者搜一下即可打开应用。也体现了用完即走的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

简单来说，小程序不用安装就能使用；它的体积也非常小，每一个都不超过 1 M。

小程序的来到，将给我们带来许多便利和好处：

• 少了安装 App 的麻烦
• 释放手机内存
• 让手机桌面更简洁
• 对于开发者来说，相比 HTML 5，小程序可以节省大量的服务器资源。
• 小程序和 HTML 5 本质上是两种不同的东西：小程序是计算机程序，而HTML 5 则是互联网网页。

假设存在一个长度为1000（非常大）的数据列表，在v-for中渲染必然造成卡顿，如何优化

在后端优化，分页请求

路由

vue-router实现原理;hash跟histroy具体指什么

Vue中会使用官方提供的vue-router插件来使用单页面，原理就是通过检测地址栏变化后将对应的路由组件进行切换（卸载和安装）。

路由模式

hash和history这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。

hash：即地址栏URL中的#符号（此hsah 不是密码学里的散列运算）

路由有两种模式：hash、history，默认会使用hash模式

比如这个URL：www.baidu.com/#/hello, hash 的值为#/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

history：利用了HTML5 History Interface 中新增的 pushState() 和replaceState() 方法。（需要特定浏览器支持）

history模式，会出现404 的情况，需要后台配置。

history模式下，前端的url必须和实际向后端发起请求的url 一致，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 www.baidu.com/home/detail… 404错误，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

hash哈希路由的原理

window.onload = function(){
       //当hash发生变化的时候， 会产生一个事件 onhashchange    window.onhashchange = function(){
           console.log( '你的hash改变了' );        //location对象是 javascript内置的(自带的)        console.log( location );    }}

上例，我们已经通过hash( 就是锚文本 ) 变化， 触发了onhashchange事件， 就可以把hash变化与内容切换对应起来，就实现了单页路由的应用！

监控hash值变化，hash一旦变化，页面内容变化，实现无刷新切换。

路由的懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，会出现长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。简单的说就是：进入首页时不用一次加载过多资源，造成页面加载用时过长。

懒加载写法：

// 路由的懒加载方式    {
    path :"/home",component:()=>import("../views/Home")},// 当我访问/home首页时，页面才去加载Home组件，减少首页加载的时长    {
    path :"/list",component:()=>import("../views/List")},    {
    path :"/mine",component:()=>import("../views/Mine")}

非按需加载则会把所有的路由组件块的js包打在一起。当业务包很大的时候建议用路由的按需加载（懒加载）。 按需加载会在页面第一次请求的时候，把相关路由组件块的js添加上。

Vuex

介绍一下vuex以及使用场景；更改state的方法

什么是Vuex？

vuex是一个专门为vue构建的状态集管理工具，vue和react都是基于组件化开发的，项目中包含很多的组件，组件都会有组件嵌套，想让组件中的数据被其他组件也可以访问到就需要使用到Vuex。

Vuex主要解决了什么问题？

Vuex主要是为了解决多组件之间状态共享问题，它强调的是集中式管理（组件与组件之间的关系变成了组件与仓库之间的关系）把数据都放在一个仓库中管理，使用数据的时候直接从仓库中获取，如果仓库中一个数据改变了， 那么所有使用这个数据的组件都会更新。Vuex把组件与组件之间的关系解耦成组件与仓库之间的关系，方便数据维护。

Vuex的流程？Vuex的核心？

（1）将需要共享的状态挂载到state上：this.$store.state来调用

创建store，将状态挂载到state上，在根实例里面配置store，之后我们在组件中就可以通过 this.$store.state 来使用 state 中管理的数据，但是这样使用时，当state的数据更改的时候，vue组件并不会重新渲染，所以我们要通过计算属性computed来使用，但是当我们使用多个数据的时候这种写法比较麻烦，vuex提供了mapState辅助函数，帮助我们在组件中获取并使用vuex的store中保存的状态。

（2）我们通过 getters 来创建状态：通过this.$store.getters来调用

可以根据某一个状态派生出一个新状态，vuex也提供了 mapGetters辅助函数 来帮助我们在组件中使用getters里的状态。

（3）使用 mutations 来更改state：通过 this.$store.commit 来调用

我们不能直接在组件中更改state，而是需要使用 mutations 来更改，mutations也是一个纯对象，里面包含很多更改state的方法，这些方法的形参接收到state，在函数体里更改，这时，组件用到的数据也会更改，实现响应式。vuex提供了mapMutations方法来帮助我们在组件中调用mutations 的方法。

（4）使用 actions 来处理异步操作：this.$store.dispatch来调用

Actions类似于mutations，不同在于：Actions提交的是mutations，而不是直接变更状态。Actions可以包含任意异步操作。也就是说，如果有这样的需求：在一个异步操作处理之后，更改状态，我们在组件中应该先调用actions，来进行异步动作，然后由actions调用mutations来更改数据。在组件中通过this.$store.dispatch方法调用actions的方法，当然也可以使用mapMutations来辅助使用。

简便版流程：

组件使用数据且通过异步动作更改数据的一系列事情：1.生成store,设置state2.在根实例中注入store3.组件通过计算属性或者mapState来使用状态4.用户产生操作，调用actions的方法，然后进行异步动作5.异步动作之后，通过commit调用mutations的方法6.mutations方法被调用后，更改state7.state中的数据更新之后，计算属性重新执行来更改在页面中使用的状态8.组件状态被更改，创建新的虚拟dom9.组件的模板更新之后重新渲染在dom中

项目中使用到vuex的一些场景？

（1）购物车数据共享

（2）用户登录 （3）打开窗口，出现一个表单数据，然后关闭窗口，再次打开还想出现，就使用vuex

Vuex的项目结构

├── index.html├── main.js├── api│   └── ... # 抽取出API请求├── components│   ├── App.vue│   └── ...└── store    ├── index.js          # 我们组装模块并导出 store 的地方    ├── actions.js        # 根级别的 action    ├── mutations.js      # 根级别的 mutation    └── modules        ├── cart.js       # 购物车模块        └── products.js   # 产品模块

vuex与local storage有什么区别

• 区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地，永久保存；sessionstorage( 会话存储 ) ，临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。
• 应用场景：vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。
• 永久性：当刷新页面（这里的刷新页面指的是 --> F5刷新,属于清除内存了）时vuex存储的值会丢失，sessionstorage页面关闭后就清除掉了，localstorage不会。

注：觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage无法做到，原因就是区别1。

vue组件之间的通信

在vue中。组件间进行数据传递、通信很频繁，而父子组件和非父子组件的通信功能也比较完善，但是，唯一困难的就是多组件间的数据共享，这个问题由vuex来处理

存储

storge介绍一下，有什么区别？和cookie的区别是什么？cookie的字段介绍一下；

cookie  4kb 随http请求发送到服务端 后端可以帮助前端设置cookie session 放在服务端  一般存放用户比较重要的信息        （token 令牌  token ==> cookie /localstorage）  vuexlocalStorage 本地存储（h5的新特性 draggable canvas svg）             5M     纯粹在本地客户端  多个标签页共享数据             sessionStorage  会话级别的存储             往本地页面中存值的方法（localStorage.setItem(key,value))

讲一下cookie、sessionstorage、localstorage

相同点：都存储在客户端

不同点：

1.存储大小

• cookie数据大小不能超过4k。
• sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

• localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
• sessionStorage 数据在当前浏览器窗口关闭后自动删除。
• cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3.数据与服务器之间的交互方式

• cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

定义一个对象，里面包含用户名、电话，然后将其存入localStorage的代码

var json = {
   username:"张三",phone:17650246248}for(var key in json){
       localStorage.setItem(key,json[key]);}

介绍一下同源策略

所谓同源是指：域名、协议、端口相同。

下表是相对于 http://www.laixiangran.cn/home/index.html的同源检测结果：

另外，同源策略又分为以下两种：

• DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。
• XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。

网络

TCP和UDP区别，UDP怎么保证传输可靠

TCP与UDP区别总结：

1、TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接

2、TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付

3、TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的 UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如IP电话，实时视频会议等） 4、每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信 5、TCP首部开销20字节;UDP的首部开销小，只有8个字节 6、TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道

UDP如何实现可靠传输

由于在传输层UDP已经是不可靠的连接，那就要在应用层自己实现一些保障可靠传输的机制

简单来讲，要使用UDP来构建可靠的面向连接的数据传输，就要实现类似于TCP协议的

• 超时重传（定时器）
• 有序接受 （添加包序号）
• 应答确认 （Seq/Ack应答机制）
• 滑动窗口流量控制等机制 （滑动窗口协议）

等于说要在传输层的上一层（或者直接在应用层）实现TCP协议的可靠数据传输机制，比如使用UDP数据包+序列号，UDP数据包+时间戳等方法。

目前已经有一些实现UDP可靠传输的机制，比如

UDT（UDP-based Data Transfer Protocol）

基于UDP的数据传输协议（UDP-based Data Transfer Protocol，简称UDT）是一种互联网数据传输协议。UDT的主要目的是支持高速广域网上的海量数据传输，而互联网上的标准数据传输协议TCP在高带宽长距离网络上性能很差。 顾名思义，UDT建于UDP之上，并引入新的拥塞控制和数据可靠性控制机制。UDT是面向连接的双向的应用层协议。它同时支持可靠的数据流传输和部分可靠的数据报传输。 由于UDT完全在UDP上实现，它也可以应用在除了高速数据传输之外的其它应用领域，例如点到点技术（P2P），防火墙穿透，多媒体数据传输等等。

用户登陆后如何记住用户的登录状态

cookie字段说明

• name字段为一个cookie的名称。

• value字段为一个cookie的值。

• domain字段为可以访问此cookie的域名。

  非顶级域名，如二级域名或者三级域名，设置的cookie的domain只能为顶级域名或者二级域名或者三级域名本身，不能设置其他二级域名的cookie，否则cookie无法生成。
  顶级域名只能设置domain为顶级域名，不能设置为二级域名或者三级域名，否则cookie无法生成。
  二级域名能读取设置了domain为顶级域名或者自身的cookie，不能读取其他二级域名domain的cookie。所以要想cookie在多个二级域名中共享，需要设置domain为顶级域名，这样就可以在所有二级域名里面或者到这个cookie的值了。
  顶级域名只能获取到domain设置为顶级域名的cookie，其他domain设置为二级域名的无法获取。

• path字段为可以访问此cookie的页面路径。 比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie。

• expires/Max-Age 字段为此cookie超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。

• Size字段 此cookie大小。

• http字段 cookie的httponly属性。若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie。

• secure 字段 设置是否只能通过https来传递此条cookie

浏览器怎么识别cookie是否过期？不同网站如何获取不同的cookie

CSRF攻击知道吗？原理是什么？在后端如何防范？

后端如何防范：

同源检测

既然CSRF大多来自第三方网站，那么我们就直接禁止外域（或者不受信任的域名）对我们发起请求。

在HTTP协议中，每一个异步请求都会携带两个Header，用于标记来源域名：

• Origin Header
• Referer Header

这两个Header在浏览器发起请求时，大多数情况会自动带上，并且不能由前端自定义内容。 服务器可以通过解析这两个Header中的域名，确定请求的来源域。

网络分层模型，协议，TCP与UDP，TCP三次握手，四次挥手

https，对称加密，非对称加密，怎么检测公钥

浏览器

浏览器缓存

Promise

Promises/A+ 规范

JSON

JSON数据格式介绍一下，JS转JSON时要注意什么？对象转为JSON什么情况下JSON.stringfy会报错？

简单说一下JSON格式,JSON格式就是一种表示一系列的“值”的方法，这些值包含在数组或对象之中，是它们的成员。

对于这一系列的“值”，有如下几点格式规定：

• 数组或对象的每个成员的值，可以是简单值，也可以是复合值。
• 简单值分为四种：字符串、数值（必须以十进制表示）、布尔值和null（NaN, Infinity, -Infinity和undefined都会被转为null）。
• 复合值分为两种：符合JSON格式的对象和符合JSON格式的数组。
• 数组或对象最后一个成员的后面，不能加逗号。
• 数组或对象之中的字符串必须使用双引号，不能使用单引号。
• 对象的成员名称必须使用双引号。

以下是合格的JSON值:

["one", "two", "three"]{
    "one": 1, "two": 2, "three": 3 }{
   "names": ["张三", "李四"] }[ {
    "name": "张三"}, {
   "name": "李四"} ]

注意⚠️：

空数组和空对象都是合格的JSON值，null本身也是一个合格的JSON值。

如下定义(原文中的例子)是无法通过编译的：

let foo = {
    b: foo };

错误信息：

ReferenceError: foo is not defined    at repl:1:14

例子：

为什么有些属性无法被 stringify 呢？

因为 JSON 是一个通用的文本格式，和语言无关。设想如果将函数定义也 stringify 的话，如何判断是哪种语言，并且通过合适的方式将其呈现出来将会变得特别复杂。特别是和语言相关的一些特性，比如 JavaScript 中的 Symbol。

ECMASCript 官方也特意强调了这一点：

It does not attempt to impose ECMAScript’s internal data representations on other programming languages. Instead, it shares a small subset of ECMAScript’s textual representations with all other programming languages.

CSS

CSS的尺寸单位，分别介绍一下；移动端适配可以用哪些单位？

css中的单位很多，%、px、em、rem，以及比较新的vw、vh等。每个单位都有特定的用途，比如当需要设置一个矩形的宽高比为16:9，并且随屏幕宽度自适应时，除了用%，其他单位是很难做到的。所以不存在说某个单位是错误的，某个单位是最好的这种说法。

页面适配的方式有很多：

• 使用px，结合Media Query进行阶梯式的适配；
• 使用%，按百分比自适应布局；
• 使用rem，结合html元素的font-size来根据屏幕宽度适配；
• 使用vw、vh，直接根据视口宽高适配。

经验之道：

在视觉稿要求固定尺寸的元素上使用px。比如1px线，4px的圆角边框。

在字号、（大多数）间距上使用rem。 慎用em（em会叠加计算。在这个机制下太容易犯错了，因为你不知道这段css指定的字号具体是多少。）

DOM

dom事件流，事件监听在什么阶段触发？dom上直接设置onclick跟addeventlistener的区别

addEventListener 默认 false 冒泡

编程题

EventEmitter的实现

EventEmitter的实现。要求：两个方法on(eventname,callback),trigger(eventname,params)，on绑定可以给eventname绑定多个callback，trigger触发eventname的callback，params是参数。另外口述了如何实现once功能（callback只允许调用一次）

function EventEmitter(){
       this.eventList = {
   }}EventEmitter.prototype.on = function(eventname, callback){
       if(!this.eventList[eventname]) {
          this.eventList[eventname] = [callback]    }    this.eventList[eventname].push(callback)}EventEmitter.prototype.trigger = function(eventname, params){
       if(this.eventList[eventname]){
           for(let i = 0; i < this.eventList[eventname].length; i++) {
               this.eventList[eventname][i](params)        }    }}

Vue

Vue生命周期

Vue中的computed和watch的区别

WebPack

webpack实现代码拆分的方式有哪些

webpack通过下面三种方式来达到以上目的

• Entry Points: 多入口分开打包
• Prevent Duplication:去重，抽离公共模块和第三方库（通过CommonsChunkPlugin插件）
• Dynamic Imports:动态加载（ECMAScript中出于提案状态的import()）

移动端

移动端适配，rem原理

什么是rem？

REM是相对单位，是相对HTML根元素，rem就是根元素html的字体大小，其他元素调用rem，能统一根据这个适配比例进行调整。

设计模式

手撕发布订阅模式 EventEmitter

// 发布订阅模式class EventEmitter {
     constructor() {
       // 事件对象，存放订阅的名字和事件  如:  { click: [ handle1, handle2 ]  }    this.events = {
   }  }  // 订阅事件的方法  on(eventName, callback) {
       if (!this.events[eventName]) {
         // 一个名字可以订阅多个事件函数      this.events[eventName] = [callback]    } else {
         // 存在则push到指定数组的尾部保存      this.events[eventName].push(callback)    }  }  // 触发事件的方法  emit(eventName, ...rest) {
       // 遍历执行所有订阅的事件    this.events[eventName] &&      this.events[eventName].forEach(f => f.apply(this, rest))  }  // 移除订阅事件  remove(eventName, callback) {
       if (this.events[eventName]) {
         this.events[eventName] = this.events[eventName].filter(f => f != callback)    }  }  // 只执行一次订阅的事件，然后移除  once(eventName, callback) {
       // 绑定的时fn, 执行的时候会触发fn函数    const fn = () => {
         callback() // fn函数中调用原有的callback      this.remove(eventName, fn) // 删除fn, 再次执行的时候之后执行一次    }    this.on(eventName, fn)  }}~~删除线格式~~

介绍项目及难题

Nuxt.js

Nuxt.js 是一个基于 Vue.js 的通用应用框架，它预设了利用 Vue.js 开发 服务端渲染（SSR, Server Side Render） 的应用所需要的各种配置，同时也可以一键生成静态站点。

作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。区别于其他 vue SSR 框架，Nuxt.js 有以下比较明显的特性。

• 自动代码分层
• 强大的路由功能，支持异步数据（路由无需额外配置）
• HTML头部标签管理（依赖 vue-meta 实现）
• 内置 webpack 配置，无需额外配置

Express VS Koa

服务端渲染 SSR

JS

script中defer和async的区别

• 对于defer，我们可以认为是将外链的js放在了页面底部。js的加载不会阻塞页面的渲染和资源的加载。不过defer会按照原本的js的顺序执行，所以如果前后有依赖关系的js可以放心使用。

• 对于async，这个是html5中新增的属性，它的作用是能够异步的加载和执行脚本，不因为加载脚本而阻塞页面的加载。一旦加载到就会立刻执行在有async的情况下，js一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。如果js前后有依赖性，用async，就很有可能出错。

简单的来说，使用这两个属性会有三种可能的情况

• 如果async为true，那么脚本在下载完成后异步执行。
• 如果async为false，defer为true，那么脚本会在页面解析完毕之后执行。
• 如果async和defer都为false，那么脚本会在页面解析中，停止页面解析，立刻下载并且执行。

最后给一点个人的建议，无论使用defer还是async属性，都需要首先将页面中的js文件进行整理，哪些文件之间有依赖性，哪些文件可以延迟加载等等，做好js代码的合并和拆分，然后再根据页面需要使用这两个属性。

转载地址：https://chocolate.blog.csdn.net/article/details/106591546 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！