文章目录
前言
小滴课堂,旨在让编程不在难学,让技术与生活更加有趣。 随着互联网+的时代,在线教育技术越来越便捷,小滴课堂依托在线教育时间以及空间上的便利,为广大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: 服务器宕机