前端面试速成重点

px和rem区别

px是像素，呈现画面的元素，每个像素大小一样，是绝对单位

rem是相对单位，默认1rem=16px，若根节点（即html节点）设置为font-size:62.5%，则1rem=10px

什么是闭包

函数嵌套函数，内部函数被外部函数返回并保存下来时，会产生闭包

特点：重复利用变量且这变量不会污染全局，这变量一直保存在内存中，不会被垃圾回收机制回收

缺点：闭包太多会消耗内存，导致页面性能下降，IE中会内存泄漏

原型是个普通对象，它是为构造函数的实例共享属性和方法，所有实例中引用的原型都是同个对象，用prototype可以把方法挂在原型上，内存值保存一份。_protot_理解为指针，即实例对象的属性指向了构造函数的原型(prototype)。一个实例对象在调用属性和方法的时候，会以次从实例本身，构造函数原型，原型上查找

 

 JS组成：ECMAScript,BOM,DOM

简述ES6新增的箭头函数 

 不能作为构造函数使用,不能用new，没有原型，箭头函数没有arguments,this指向外层第一个this

什么是异步？

异步请求不会在一开始就立即执行。浏览器会创建一个异步任务，并将其放入任务队列中。然后，JavaScript引擎可以继续执行后续的代码，而不需要等待请求完成。执行顺序：同步>异步，异步中微任务大于宏任务settimeout

Promise简述

ES6提出的，解决回调地狱，自身有all,reject,resolve,race,原型上有then,catch,异步操作队列化。三种状态：pending->fulfilled。pending->reject一旦发生，状态凝固，不再改变

async await是ES7，用promise做底层

同步代码做异步操作，搭配使用。async表明函数内有异步操作，调用函数会返回promise

await是组成async的表达式,结果取决于它等待内容，若是promise则是promise的结果,普通函数就进行链式调用。await后的promise如果是reject那整个async函数都会中断，后面代码不执行

promise和async await区别

都是处理异步请求的方式，promise是ES6,async await是ES7。async await是基于promise实现的，他和promise都是非阻塞性的

优缺点：promise是返回对象，外面要用then,catch去处理和捕获异常，书写是链式，容易代码重叠，不好维护，async await是try catch捕获异常。async await能让代码看起来像同步一样，遇到await就会立刻返回结果再执行后面操作，promise.then()可能出现请求没返回就执行后面操作

token存在sessionstorage还是localstorage

1存localstorage里后期每次请求接口都要把它当一个字段传给后台

2存cookie中会自动发送，缺点不能跨域

若存localstorage中容易被XSS攻击，但若做好对应措施，利大于弊

存cookie中会有CSRF攻击

精灵图和base64区别

精灵图是把多张小图整合到一张大图是，利用定位把小图显示在页面上，这样访问页面时就能减少1网络请求，提高加载速度

base64会和html css一起下载到浏览器中，减少请求，减少跨域，base64体积可能比原图大，比原图大的话不利于css加载

svg格式了解

基于xml语法格式的图像地址，可缩放矢量图，本质是文本文件，体积小，放大不失真

svg可直接插入页面，成为DOM一部分，然后用js或css操作<svg></svg>

svg可做为文件引入<img src="pic.svg"/>

svg可转为base64引入页面

JWT理解

json web token通过json形式作为web的令牌,在各方之间安全的把信息作为json对象传输信息,授权

jwt认证流程：前端把账号密码发给后端接口，后端核对账号密码成功后，把用户id等其它信息作为jwt负载，把它和头部分别base64编码拼接后签名,JWT(token)

前端每日请求时会都把JWT放在http请求头的Authorization字段内

后端检查是否存在，若存在就验证JWT有效性(token是否过期，签名是否正确)

验证通过后后端使用JWT包含的用户信息进行其它操作并返回对应结果

防抖和节流是什么 

都是应对页面中频繁触发事件的优化方案。防抖：避免事件重复触发，使用场景：频繁和服务端交互；输入框的自动保存事件

节流：把频繁触发的事件减少，每隔一段时间执行，使用场景：scroll事件

什么是json

json是纯字符串，适合在网络传输,JS提供了JSON.parse()和JSON.stringify

项目怎么优化，架构方面

有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据在。将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。能有效提高加载性能和用户体验。路由懒加载：只有当路由被访问的时候才加载对应的组件，减少资源占用，例如这种方式

Vue异步组件技术，可以实现按需加载

异步组件是通过将组件定义为返回 Promise 的函数来创建的
{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: resolve => require(['../components/PromiseDemo'], resolve)
    //或
    //component: asyncModal = () => import('./Modal.vue')
}

按需加载插件
只引入需要的组件，以达到减小项目体积的目的。

借助babel-plugin-component

安装

npm install babel-plugin-component -D
修改.babelrc文件

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "components",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
在main.js文件中引入部分组件

import { Button } from 'components'
var button = require('components/lib/button')
require('components/lib/button/style.css')
CDN 可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加，且CDN 具有更好的可用性，更低的网络延迟和丢包率