小滴课堂22年新版互联网大厂前端高频面试题（6）~持续更新中

---

前言

小滴课堂，旨在让编程不在难学，让技术与生活更加有趣。 随着互联网+的时代，在线教育技术越来越便捷，小滴课堂依托在线教育时间以及空间上的便利，为广大IT从业者提供了更为方便、快捷的学习交流途径、提供大量高质量的IT在线课程。更多教程请访问xdclass.net（添加VX：xdclass99）

一、前端开发必懂的几种web存储

回答

说到web储存，⼤家应该最熟悉cookie这种储存方式。在前端开发中cookie常常被用来储存登录信息token、缓存需要的信息等等，相信⼤家也是能熟练使用了。知道了cookie的使⽤，那cookie的存储大小、它所存在的限制以及它与sessionStorage和localstor的区别，⼤家⼜是否能熟知呢？这⾥我将会为大家讲解。

1.cookie

cookie是web缓存中的⼀种。当我们每次对服务器发起请求时都没被带上，所以这里我们需要控制使用的量，以避免访问网站时带上⼀些不必要的信息给服务器，增加了请求包的大小。

• cookie的访问域

cookie是可以设置访问域的。比如当我们设置cookie时，将cookie的访问域名设定成⼀个主域名，那么其下的子域名就可以共享到这个cookie。举个例子，如下图

腾讯网

腾讯游戏

在图中我们可以看到，子域名下game.qq.com共享到了主域名qq.com下的cookie。当然这只存在于这种主子域名的情况下，跨域是不能共享的。在存放⼀些重要信息时，建议给cookie加上HttpOnly标识，这样就⽆法通过js脚本读取到cookie信息，能有效的防止XSS攻击，窃取cookie内容，大大增加了cookie的安全性。

• 存储大小以及存储时间

cookie的存储大小为4k，可以看出存储的大小是有限的，所以尽量不要⼀个劲的使用cookie存储内容。cookie的存储时间在未设置过期的时间下，cookie会在浏览器会话结束后销毁，也就是浏览器关闭后，可通过设置时间戳控制到期时长。

2.sessionStorage

sessionStorage储存⽅式通过传key-value的形式传递，如下

- sessionStorage.setItem（'text'，'hello'）通过setItem设置，

- sessionStorage.getItem（'text'）通过getItem获取值

• sessionStorage的访问域

不同于cookie，sessionStorage只能在设定的当前域下使用。例如cookie中的例⼦，qq.com下设置的sessionStorage，game.qq.com是无法访问的。

• 存储大小以及储存时间

相对于cookie，sessionStorage的存储容量大⼀些，⼀般为5M大小。存储的时间为关闭当前窗口或者浏览器时销毁。

3.localStorage

localStorage的存储⽅式与sessionStorage⼀样，同样是通过setItem以及getItem设置与获取。

• localStorage的访问域

localStorage与sessionStorage用法相似，但访问域限制上有⼀定区别。sessionStorage只能在当前窗口使用，例如,我们在当前窗口设置了sessionStorage，然后重新再打开⼀个窗口，输⼊相同的域名，在这个窗口下是访问不到其他窗口设置的sessionStorage的，如下图：

图1.1

图1.2

图1.3

⽽localStorage则可以在不同窗口下公用，这是两中web存储在访问限制的区别。

• 存储时间和存储大小

sessionStorage和localStorage的存储大小⼀样，⼀般是5M大小。在存储时间上，localStorage具有永久的时效，只要在手动删除后才销毁。

最后总结⼀下这三种存方式的区别，面试中问到的：

生命周期（过期时间）：

• cookie：可设置失效时间，未设置的话，则默认关闭浏览器后失效
• sessionStorage：关闭窗口或者关闭浏览器后失效
• localStorage：永久保存，除非手动清除

存储大小：

• cookie：⼀般是4kb大小
• localStorage和sessionStorage：⼀般是5M大小

http请求：

• cookie：会与服务器进行交互，请求时会在http头中携带cookie给服务器，使用过多会影响性能
• localStorage和sessionStorage：仅保存在客户端（浏览器）中，不参与服务器通信

二、前端项目文件很大，而且页面访问速度慢，如何在前端侧提高性能？

回答

（一）思路

1、使用webpack抽离公共文件功能（splitChunks）

（1）作用

• 将多个页面重复引入的模块抽离成公共的模块，避免重复打包，减少包体积

(2)配置

optimization: {
 splitChunks: {
 chunks: 'all',
 },
},

2、使用可视化工具将项目⽂件通过视图的方式展示出来，可详细的观看到每个文件的大小以及占用情况，为文件抽离提供更优方案

（1）安装

cnpm install webpack-bundle-analyzer -D

// -D：在开发环境中使用依赖包

（2）webpack.config.js配置

const BundleAnalyzerPlugin = require('webpack-bundleanalyzer').BundleAnalyzerPlugin;

module.exports = {
 plugins: [new BundleAnalyzerPlugin()]
}

三、请谈谈小程序的生命周期函数？

回答

小程序的生命周期实际上可分成两个，⼀个是注册小程序的生命周期，⼀个是页面的生命周期。

⼩程序的生命周期：

官网参数图：

可以看到注册小程序时⼀共有三个生命周期回调，分别是：

• onLaunch：页面初始化完成后触发，这里全局只会触发⼀次
• onShow：小程序启动或者从后台切回小程序界面时触发
• onHide：⼩程序切回后台时触发

执行顺序：onLauch》onShow

页面的生周期：

官网参数图：

页面生命周期有五个，分别是：

• onLoad：页面加载触发，⼀个页面触发一次
• onShow：页面显示/切⼊前台触发
• onReady：页面初次渲染完成时触发，⼀个页面触发⼀次
• onHide：页面隐藏/切⼊后台时触发
• onUnload：页面卸载时触发

执⾏顺序：onLoad》onShow》onReady

四、HTTP里面常见的请求方法有哪些

回答

（一）http1.0定义了三种：

• GET: 向服务器获取资源，比如常见的查询请求
• POST: 向服务器提交数据而发送的请求
• Head: 和get类似，返回的响应中没有具体的内容，用于获取报头

（二）http1.1定义了六种

• PUT：一般是用于更新请求，比如更新个人信息、商品信息全量更新

• PATCH：PUT 方法的补充,更新指定资源的部分数据

• DELETE：用于删除指定的资源

• OPTIONS: 获取服务器支持的HTTP请求方法,服务器性能、跨域检查等

• CONNECT: 方法的作用就是把服务器作为跳板，让服务器代替用户去访问其它网页，之后把数据原原本本的返回给用户，网页开发基本不用这个方法，如果是http代理就会使用这个，让服务器代理用户去访问其他网页，类似中介

• TRACE：回显服务器收到的请求，主要用于测试或诊断

五、Http状态码里面的1xx/2xx/3xx/4xx/5xx主要应用场景是？

回答

（一）浏览器向服务器请求时，服务端响应的消息头里面有状态码，表示请求结果的状态

（二）分类

1、1XX: 收到请求，需要请求者继续执行操作，比较少用

2、2XX: 请求成功，常用的 200

3、3XX: 重定向，浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址，这个地址可以从响应的Location首部中获取；

4、好处：网站改版、域名迁移等，多个域名指向同个主站导流必须记住

• 301：永久性跳转，比如域名过期，换个域名
• 302：临时性跳转

（三）4XX: 客服端出错，请求包含语法错误或者无法完成请求

必须记住：

• 400: 请求出错，比如语法协议
• 403: 没权限访问
• 404: 找不到这个路径对应的接口或者文件
• 405: 不允许此方法进行提交，Method not allowed，比如接口一定要POST方式，而你是用了GET

（四）5XX: 服务端出错，服务器在处理请求的过程中发生了错误

必须记住：

• 500: 服务器内部报错了，完成不了这次请求
• 503: 服务器宕机