web前端面试题— 简答题

如有不同意见或建议，记得留下评论~

简答题

1.http和https的特征和区别：

特征：
HTTP：超文本传输协议（HTTP，HyperText Transfer Protocol）是互联网上应用最为广泛的一种网络协议。

① 客户端的浏览器通过网络与服务器建立连接，连接通过 TCP 完成，一般端口号是80。连接后，客户机发送一个请求给服务器，请求格式为：统一资源标识符（URL）、协议版本号，后边是 MIME 信息包括请求修饰符、客户机信息和许可内容。

② 服务器接到请求，响应信息，格式为一个状态行，包括信息的协议版本号、一个成功或错误的代码，后边是 MIME 信息包括服务器信息、实体信息和可能的内容。

HTTPS：是以安全为目标的 HTTP 通道，是 HTTP 的安全版。HTTPS 的安全基础是 SSL。SSL 协议位于tcp/ip协议与各种应用层协议之间，用于在实际的数据传输开始前，通讯双方进行身份认证、协商加密算法、交换加密密钥等，提供安全支持。其特点：①数据保密性。②数据完整性。③身份校验安全性。

区别：

HTTP：

① 超文本协议，明文传输。② 不同的连接方式，无状态连接（数据包发送，传输，接收都是相互独立的）。 ③ 端口号80

HTTPS：

① HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，需要一定费用。② HTTPS 具有安全性的 SSL 加密传输协议。 ③ 端口号443 。 ④ HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，防止数据传输过程不被窃取，修改，确保数据完整性。⑤ 协议握手阶段费时，会使页面的加载时间延长近。⑥ 连接缓存缓慢，增加数据开销。⑦安全是有范围的，加密有限

2.vue生命周期：

3.vue指令有哪些：

v-text v-html v-show v-if v-else v-else-if v-for v-on v-bind v-model v-slot v-pre v-cloak v-once

4.cookie、session、sessionStorage、localStorage区别：

共同点：都是保存在浏览器端，且同源的。
1、cookie：前端缓存，保存本地浏览器上，http请求服务端会自动带上cookie，不能跨域使用，但是二级域名可配置同域使用。
2、 session：后端缓存，保存在服务端上，每创建一个链接，服务端就会生成一个session ID 存储在本地cookies浏览器里。浏览器链接第二次打开时，发送请求时，会将前面第一次存在本地的session ID发送到服务端进行对比。
3、sessionStorage：临时存储，随浏览器关闭就自动清除，
4、localStorage：长期存储，用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除

5.vue中组件之间的通讯有哪些？使用场景是什么？

通过 props 传递组件属性上传递
通过 $emit 触发自定义事件
使用 ref
EventBus
$parent 或 $root
attrs 与 listeners
Provide 与 Inject
Vuex 全局组件

6.如果再项目中使用了spa技术，出现白屏时间过长，如何优化以及优化方式有哪些？

1、使用骨架屏技术
2、增加加载友好动画

7.如何在项目开发过场中，如果出现多次请求嵌套的情况，如何合理的解决回调地狱的问题，请简单列举？

1、使用异步 Promise 对象
2、Generator 函数
3、async 函数

8.如何防止网站被别人使用iframe嵌套，如果项目中a网站iframe嵌套b网站，a和b的域名是不一样的，那么a和b网站如何进行通讯？

➽ 防止别人iframe嵌套加标签<meta http-equiv="X-FRAME-OPTIONS" content="DENY">
➽ 使用window.postMessge

9.如何防止网站被别人在开发模式下调试，请简单列举几种方式？

防止网站被别人调试。写一个匿名自执行函数，函数大概内容：写2个debuger前后分别获取了两个时间，并对比这两个时间差，如果debugger之前前后的时间差超过了10（可设置）毫秒，我们就判定当前用户打开了开发者工具，这个时候我们就可以执行一些反制措施

10.如vue2和vue3有什么区别，vue3比vue2有什么优势？reactive和ref它们的使用场景有什么区别，watch和watchEffer有什么区别？

➽ vue2与3的区别。
1、双向数据绑定原理发生了改变
2、默认进行懒观察
3、vue3新加入了 TypeScript 以及 PWA 的支持
4、vue2和vue3组件发送改变
➽ reactive和ref区别
reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型
➽ watchEffect 它与 watch 的区别主要有以下几点：
1、不需要手动传入依赖
2、每次初始化时会执行一次回调函数来自动获取依赖
3、无法获取到原值，只能得到变化后的值

11.在vue项目开发过场中，如果有多个子项目想共用一套js库或者是多个子项目想集成到一个vue项目里面，应该如何实现比较合理？

使用 vue-multi-module 可以统一管理依赖库，可以多项目使用

12.css水平垂直居中的方法？

1、父元素设置为：position: relative; 子元素设置为：position: absolute; 距上50%，据左50%，然后减去元素自身宽度的距离就可以实现
2、position transform 如果元素未知宽度，只需将margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%);
3、flex布局

13.谈下自己最常用移动端适配方案，并说说改方案的优劣势？

rem布局实现自适应移动端效果，因为这是个人认为最好的，使用方便，实现的效果也能接受

14.vue组件封装最常用的几个属性，简单阐述一下这几个属性的使用场景？

1、data
2、template
3、methods
4、render
5、props
6、el
7、computed
8、watch

15.实现一个sleep函数，比如sleep（1000）意味着等待1000毫秒，可从Promise或async/await等角度实现

function sleep (time){return new Promise((resolve,reject) =>{setTimeout(()=>{resolve(true);},time *1000);});   }

16.什么是防抖/节流，应用场景分别是什么？

1、防抖是滚动条抖动，一般是限制事件在时间内的执行次数。
2、节流控制滚动时加载的内容，可以加时间限制，在多少秒内不触发。

17. typeof会输出几种类型？

1、基本类型：number, string, boolean, undefined, null, symbol,
2、引用类型：array ，object ,
2、typeof对基本类型（除null）操作返回都是基类型，对函数会返回function，其他类型（null,数组，对象）都会返回object 。

18. let、 var 、const区别？

1、var 声明的变量会挂载在window上，而let,const声明的变量不会
2、var 声明变量存在变量提升，而let,const声明的变量不会
3、let，const 声明形成块作用域，
4、const 一旦声明必须赋值，不能使用null占位，并且声明后不可修改，复合类型数据可以修改其属性

19. 封装一个函数用于数组扁平化（将一个多维数组变为一维数组），输入[1,[2,3,[4,5,[6,7]]]]，输出[1,2,3,4,5,6,7]。写出越多越好

1、reduce遍历数组，遍历数组每一项，若值为数组则递归遍历，否则concat
2、tostring & split 调用数组的tostring方法，将数组变为字符串然后再用split 分割还原数组，用map方法遍历数组将其每一项转换为数值型
3、join & split 和上面的tostring 一样，join 也可以将数组转换为字符串
4、扩展运算符es6的扩展运算符将二维数组转为一维数组[]。如：concat(...[1,2,3,[4,5]]);
5、递归的遍历每一项，用map方法遍历数组将其每一项转换为数值型，若为数组则继续遍历，否则concat

20. 封装一个函数用于数组去重，输入[8,'a','r','a','r',5,5,'r',8]，输出[8,'a','r',5]。写出越多越好

1、遍历数组，判断有重复项，则不添加，reduce，filter
2、es6提供新的数据结构set，它类似数组，但是成员的值都是唯一的。没有重复值

21. 请写出1rem、1em、1vh、1px、代表的含义

1、rem ：继承根元素的字体大小
2、em ：继承父级元素的字体大小
2、vh ：视窗的（vw）宽度和 (vh)高度，相当于屏幕宽度和高度的 1%
2、 px ：相对长度单位。像素px是相对于显示器屏幕分辨率而言的

22.请描述各种盒模型的异同

1、 W3C盒子模型： width = content.width; heigth = content.heigth;
2、IE盒子模型：width = content.width + border * 2 + padding * 2 +margin *2 ；height= content.height + border * 2 + padding * 2 +margin *2

23. js中，0.1+0.2等于多少

1、0.30000000000000004

24. 深拷贝与浅拷贝有什么区别，如何实现深拷贝

1、区别：深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用
2、实现深拷贝方式有：
1、遍历
2、JSON.parse(JSON.stringify（））
3、object.assign 合并对象，并返回一个新对象

25. $nextick是什么，作用

2、延迟到下次 DOM 更新循环之后执行

26. vuex 核心概念

store(仓库代表vuex)，1.状态存储是响应式的，2.修改store 状态>> 提交（commit）。包含以下5大核心：
1、state ：单一状态树（单一数据源）存储数据，数据中心
2、getters ：类似计算属性。 (不需要括号调用的函数，可以对state进行二次封装)
3、mutations：类似于事件，修改state方法。 mutation 必须是同步函数
4、actions ：类似于mutations, 不同之处：一、Action 提交的是 mutation，而不是直接变更状态。二、Action 可以包含任意异步操作。
5、modules：分割成模块，类似于命名空间