前端开发工程师面试题

最近在找工作的过程中，总结了很多关于前端开发的面试题，现在将我前一段时间所遇到的一些面试题分享出来，希望对大家有所帮助。

1、http请求方式get和post区别：

GET和POST是HTTP请求的两种基本方法，最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。

2、HTTP和HTTPS的区别

HTTP协议以明文方式发送内容，不提供任何方式的数据加密。https则是具有安全性的ssl加密传输协议。

3、css如何清除浮动

1.额外标签法:通过在浮动元素末尾添加一个空的标签例如

2.父级添加overflow属性方法
可以给父级添加： overflow属性为 hidden| auto| scroll 都可以实现
3.使用after伪元素清除浮动:after方式为空元素额外标签法的升级版。

4、 VUE的生命周期及理解？

答：总共分为8个阶段，具体为：创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段：ue实例的挂载元素$el和数据对象data都为undefined，还未初始化；在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换；在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数

5、jsp和js的区别？

JS是运行在浏览器的弱类型语言，即时编译运行。
JSP是Java强类型语言，JSP被转为Java代码，解释出Class中间码运行.

6、vue中computed和watch区别

computed 只有当依赖的数据变化时才会计算, 会缓存数据。
watch 每次都需要执行函数。 watch 更适用于数据变化时的异步操作。

7、vue第一次加载页面时会触发哪几个钩子？

beforeCreate, created, beforeMount, mounted

8、CSS的盒子模型由哪几部分组成

内容(content)、内边距(padding)、边框(border)、外边距(margin)

9、v-if 和v-show的区别

v-if直接从dom树上添加或删除节点
v-show是设置节点的display为none，不会从dom里删除掉

10、js数据类型有哪些

原始类型：string,number,boolean,null,undefined,bigint,symbol
引用类型:object,array,function

11、CSS中水平垂直居中的方法

① text-align:center实现图片水平居中
②line-height和text-align:center实现图片的水平垂直居中，设置line-height的值等于height，可以实现垂直居中，text-align:center可以实现水平居中。
③display:table和display:table-cell实现图片水平垂直居中
④position实现图片水平垂直居中

12、CSS的定位方式

position：static；默认值
position：absolute；绝对定位
position：relative；相对对定位
position：fixed；固定定位
position：sticky；粘性定位

13、前端的存储方式有哪些？

1.本地存储localstorage
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
存储方式：
以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。
2.本地存储sessionstorage
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。
3.离线缓存（application cache）

14、VUE中的通信方式

① props / $emit父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。
② $children / $parent

图片是vue官方的解释，通过$parent和$children就可以访问组件的实例，拿到实例代表可以访问此组件的所有方法和data。
③ provide/ inject
provide/ inject 是vue2.2.0新增的api, 简单来说就是父组件中通过provide来提供变量, 然后再子组件中通过inject来注入变量。
④ ref / refs
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据。

15、行内元素、块级元素有哪些？有什么不同？

1、 行内元素有哪些？
a - 锚点
em - 强调
img - 图片
font - 字体设定 ( 不推荐 )
i - 斜体
input - 输入框
2、块级元素有哪些？
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是 css layout 的主要标签
fieldset - form控制组
p - 段落
3、区别
①：块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
　　行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
②：块级：块级元素可以设置宽高
　　行内：行内元素不可以设置宽高
③：块级：块级元素可以设置margin，padding
　　行内：行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
④：块级：display:block;
　　行内：display:inline;可以通过修改display属性来切换块级元素和行内元素

16、HTML页面加载完成后，会触发哪个事件？

onload事件

17、newDate()获取的是哪里的时间？

newDate获取的是客户本地时间，当前时间

18、两个盒子分别放到父盒子的最左和最右，怎么做？

position定位：将父子元素同时使用这个属性
absolute，子元素添加距左右边框距离