1.什么是闭包？闭包的优缺点？闭包的原理？
含义：闭包就是函数嵌套函数,生成一个不会被销毁的执行空间,延长局部作用域变量的生命周 期,在函数外部可以操作函数内部的局部作用域变量
优点：
- 防止全局变量污染
- 延长变量的生命周期
- 创建不会被销毁的执行空间
缺点：
- 变量的调用不方便
- 容易造成内存泄漏
- 占用内存,降低执行效率
原理：函数的封装过程
- 在堆中开辟一个独立存储空间 准备存储 应用数据类型 操作系统给这个存储空间 分配一个 内存地址
- 在存储空间 中 以字符串的形式 存储 函数程序代码
- 在 栈 中存储函数名称 函数名称中存储 函数存储空间的内存地址 函数的调用过程
- 解析 栈 中 变量名称中存储的内存地址,找到 堆 中 对应的存储空间 读取空间中存储的函数程序
- 形参赋值实参
- 预解析/预解释/预编译
- 执行函数程序
2.HTTP状态码有哪些？
HTTP状态码的职责是当客户端向服务器端发送请求时，描述返回的请求结果。借助状态码，用户可以知道服务器端是正常处理了请求，还是出现了错误。
状态码如 200 OK，以 3 位数字和原因短语组成，数字中的第一位指定了响应类别，后两位无分类：
- 1XX: 信息性状态码（Information），接收的请求正在处理
- 2XX：成功状态码（Success），请求正常处理完毕
- 3XX：重定向状态码（Redirection），需要进行附加操作已完成操作
- 4XX：客户端错误状态码（Client Error）， 服务器无法处理请求
- 5XX：服务器错误状态码（Server Error），服务器处理请求错误
状态码种类繁多，实际上经常使用的大概只有十多种，我们选取具有代表性的状态码介绍一下。
2XX成功
2XX 的响应结果表明请求被正常处理了。
200 OK
表示从客户端发来的请求在服务器端被正常处理了。
在响应报文内，随状态码一起返回的信息会因方法的不同而发生改 变。比如，使用 GET 方法时，对应请求资源的实体会作为响应返 回；而使用 HEAD 方法时，对应请求资源的实体首部不随报文主体 作为响应返回（即在响应中只返回首部，不会返回实体的主体部分）。
204 No Content
该状态码代表服务器接收的请求已成功处理，但在返回的响应报文中 不含实体的主体部分。另外，也不允许返回任何实体的主体。比如， 当从浏览器发出请求处理后，返回 204 响应，那么浏览器显示的页面 不发生更新。
一般在只需要从客户端往服务器发送信息，而对客户端不需要发送新信息内容的情况下使用。
206 Partial Content
该状态码表示客户端进行了范围请求，而服务器成功执行了这部分的 GET 请求。响应报文中包含由 Content-Range 指定范围的实体内容。
3XX 重定向
3XX 响应结果表明浏览器需要执行某些特殊的处理以正确处理请求。
301 Moved Permanently
永久性重定向
该状态码表示请求的资源已被分配了新的 URI，以后应使用资源现在所指的 URI。也就是说，如果已经把资源对应的 URI 保存为书签了，这时应该按 Location 首部字段提示的 URI 重新保存。
302 Found
临时性重定向。该状态码表示请求的资源已被分配了新的 URI，希望 用户（本次）能使用新的 URI 访问。
和 301 Moved Permanently 状态码相似，但 302 状态码代表的资源不是被永久移动，只是临时性质的。换句话说，已移动的资源对应的 URI 将来还有可能发生改变。比如，用户把 URI 保存成书签，但不会 像 301 状态码出现时那样去更新书签，而是仍旧保留返回 302 状态码 的页面对应的 URI。
303 See Other
该状态码表示由于请求对应的资源存在着另一个 URI，应使用 GET 方法定向获取请求的资源。
303 状态码和 302 Found 状态码有着相同的功能，但 303 状态码明确 表示客户端应当采用 GET 方法获取资源，这点与 302 状态码有区 别。
304 Not Modified
该状态码表示客户端发送附带条件的请求时，服务器端允许请求访 问资源，但未满足条件的情况。304 状态码返回时，不包含任何响应 的主体部分。304 虽然被划分在 3XX 类别中，但是和重定向没有关系。
307 Temporary Redirect
临时重定向。该状态码与 302 Found 有着相同的含义。
4XX 客户端错误
4XX 的响应结果表明客户端是发生错误的原因所在。
400 Bad Request
该状态码表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。另外，浏览器会像 200 OK 一样对待该状态码。
401 Unauthorized
该状态码表示发送的请求需要有通过 HTTP 认证（BASIC 认证、 DIGEST 认证）的认证信息。另外若之前已进行过 1 次请求，则表示 用 户认证失败。
返回含有 401 的响应必须包含一个适用于被请求资源的 WWW- Authenticate 首部用以质询（challenge）用户信息。当浏览器初次接收 到 401 响应，会弹出认证用的对话窗口。
403 Forbidden
该状态码表明对请求资源的访问被服务器拒绝了。服务器端没有必要 给出拒绝的详细理由，但如果想作说明的话，可以在实体的主体部分对原因进行描述，这样就能让用户看到了。
404 Not Found
该状态码表明服务器上无法找到请求的资源。除此之外，也可以在服务器端拒绝请求且不想说明理由时使用。
5XX 服务器错误
5XX 的响应结果表明服务器本身发生错误。
500 Internal Server Error
该状态码表明服务器端在执行请求时发生了错误。也有可能是 Web 应用存在的 bug 或某些临时的故障。
503 Service Unavailable
该状态码表明服务器暂时处于超负载或正在进行停机维护，现在无法 处理请求。如果事先得知解除以上状况需要的时间，最好写入 RetryAfter 首部字段再返回给客户端。
3.强缓存和协商缓存的区别？
强缓存两个相关字段：Expires 和 Cache-Control
协商缓存两个相关字段：Last-Modified 和 ETag
4.页面渲染速度慢，如何优化？
1.路由懒加载
{
path: '/chinaWine',
name: 'chinaWine',
component: resolve => require(['./views/chinaWine'], resolve)
},
复制代码
此方法会把原本打包到一个app.js文件分开成多个js文件打包，这样会减小单个文件的大小，但是不会减小整个js文件夹的大小。
通过这种方式可以做到按需加载，只加载单个页面的js文件。
2、打包文件中去掉map文件
打包的app.js过大，另外还有一些生成的map文件。先将多余的map文件去掉，
找到config文件夹下index.js文件,把这个build里面的productionSourceMap改成false即可
3、CDN引入第三方库
在项目开发中，我们会用到很多第三方库，如果可以按需引入，我们可以只引入自己需要的组件，来减少所占空间，
但也会有一些不能按需引入，我们可以采用CDN外部加载，在index.html中从CDN引入组件，去掉其他页面的组件import，修改webpack.base.config.js，在externals中加入该组件，这是为了避免编译时找不到组件报错。
4、gzip打包
gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。
html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。
1、npm i -D compression-webpack-plugin
2、在vue.config.js中配置
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 10240,
deleteOriginalAssets: false
})]
}
}
}
复制代码
3、在NGINX中配置
http {
gzip on;
gzip_min_length 1k;
gzip_buffers 4 8k;
gzip_http_version 1.0;
gzip_comp_level 8;
gzip_proxied any;
gzip_types application/javascript text/css image/gif;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
#以下的配置省略...
}
复制代码
nginx -s reload ：修改配置后重新加载生效
5、终极大招，预渲染
其实把上面的优化做完，优化到5秒以内没问题了，但是如果像我司前端页面100多个，比较大的项目，可能还是会有点慢。
上面我们做了那么多，都是基于js执行完以后进行的渲染，如果想要更快一点，还有两种方案，一种是ssr也就是服务端渲染，一种就是预渲染。
预渲染是在js加载前，就生成了一个首页的静态页面，用于加载，不会让你等着了，静态页面的性能不用说了吧，嗖嗖的。
预渲染依赖的是prerender-spa-plugin插件，使用起来也非常的简单,但是坑非常多，一个地方尊重不到就会报错：
1、cnpm install prerender-spa-plugin --save-dev
建议使用淘宝镜像的cnpm，因为npm安装经常失败，血泪教训，倒腾了一上午
2、vue.config.js
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
在plugins下面，找到plugins对象，直接加到上面就行
// 预渲染配置
new PrerenderSPAPlugin({
//要求-给的WebPack-输出应用程序的路径预渲染。
staticDir: path.join(__dirname, 'dist'),
//必需，要渲染的路线。
routes: ['/login'],
//必须，要使用的实际渲染器，没有则不能预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false, //渲染时显示浏览器窗口。对调试很有用。
//等待渲染，直到检测到指定元素。
//例如，在项目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))`
renderAfterDocumentEvent: 'render-event'
})
})
复制代码
3、router.js
需要把vue的router模式设置成history模式
复制代码
4、main.js
在创建vue实例的mounted里面加一个事件，跟PrerenderSPAPlugin实例里面的renderAfterDocumentEvent对应上。
mounted () {
document.dispatchEvent(new Event('render-event'))
},
复制代码
这是预渲染的基本配置，npm run build 一下，如果dist文件夹多了你想预渲染的文件夹，那么恭喜你，成功了！如果项目是用nginx做的代理，nginx还需要做一些配置，具体是：
location = / {
try_files /home/index.html /index.html;
}
location / {
try_files $uri $uri/ /index.html;
}
复制代码
