web前端常见面试题总结

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

人生的路上少不了尝试，人人都是打工人，但愿这份面试题可以帮助到你

H5有哪些新特性？

绘画canvas（随时随地绘制2D图形）、svg（描述XML中的2D图形）元素
语义化标签header、ment、content、footer…
新增的input类型和属性
音频,视频
H5地理定位
H5拖放
H5 Web Storage存储
H5应用程序缓存
H5中的Web workers
H5服务器发送事件（server-sent event）允许网页获得来自服务器的更新
WebSocket在单个TCP连接上进行全双工通讯的协议

如何实现浏览器内多个标签之间的通信？

localStorge、cookies

如何提升网站性能？

前端：减少http请求、减少Cookie传输、使用浏览器缓存、启用文件压缩、CDN加速、反向代理。

4.Js中关于数组的操作有哪些？

1、创建数组：var、new
2、字符串关于数组的方法：
2.1、把字符串分割成数组（split）
3、数组本身的方法
3.1、判断是否为数组（isArray）
3.2、查找元素（indexOf）
3.3、将数组转换成字符串（join、toString）
3.4、合并数组（concat）
3.5、分割数组（slice）
3.6、删除添加元素（splice）
3.7、删除添加一个元素（pop、push、shift、unshift）
3.8、数组排序（reverse、sort）
3.9、数组迭代器方法（forEach、every、some、reduce、reduceRight、map、filter）
（1）、不生成新数组的迭代器方法（forEach、every、some、reduce、reduceRight）：
（2）、生成新数组的迭代器方法（map、filter）：
4、数组中的其他方法
4.1、arr.find() 查找某个符合条件的元素

Js的typeof返回哪些数据类型？

Undefined、string、boolean、number、symbol(ES6)、Object、Function

数据类型的转换？

强制转换：Number§、parseFloat()、parseInt§、string§、Boolean()
隐式转换：+、= 1+’’=’1’ null+1=1 undefined+1=NaN

Get和Post请求的方式和区别?

GET把参数包含在URL中，POST通过request body传递参数
GET产生一个TCP数据包；POST产生两个TCP数据包。
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

闭包是什么？有什么特性？对页面有什么影响？

什么是闭包:
　　指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。>通俗的讲就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。

闭包的特性：
　　①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接>口；
　　②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保>存在；
对页面的影响：使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等。

onload和ready的区别？

Null和undefined的区别？

null表示没有对象，即该处不应该有值
undefined表示缺少值，即此处应该有值，但没有定义

Js中如何检测一个变量是String类型？

小写：typeof(x) === “string’ 大写：x.constructor === String

网页布局有哪几种，分别有什么区别？

左右框架型：这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。

上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。

综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

Flash型：其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

有哪几种web安全问题，试着说明一下。

XSS漏洞：恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去，使别的用户访问都会执行相应的嵌入代码。

CSRF攻击：跨站点请求伪造

SQL注入：SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，实现无帐号登录，甚至篡改数据库

Web端有哪些缓存？其区别是什么？

http缓存：强缓存主要是采用响应头中的Cache-Control和Expires两个字段进行控制的
浏览器缓存：Cookie、LocalStorage、SessionStorage、Service Worker

Vue的生命周期是什么？其作用是什么？

一、创建
1、beforeCreate：这个阶段实例已经初始化，只是数据观察与事件机制尚未形成，不能获取DOM节点（没有data，没有el），
使用场景：因为此时data和methods都拿不到，所以通常在实例以外使用
2、created：实例已经创建，仍然不能获取DOM节点（有data，没有el）
使用场景：模板渲染成html前调用，此时可以获取data和methods，可以初始化某些属性值，然后再渲染成视图，异步操作可以放在这里

二、载入
1、beforeMount：是个过渡阶段，此时依然获取不到具体的DOM节点，但是vue挂载的根节点已经创建（有data，有el）
2、mounted：数据和DOM都已经被渲染出来了
使用场景：模板渲染成html后调用，通常是初始化页面完成后再对数据和DOM做一些操作，需要操作DOM的方法可以放在这里

三、更新
1、beforeUpdate：检测到数据更新时，但在DOM更新前执行
2、updated：更新结束后执行
使用场景：需要对数据更新做统一处理的；如果需要区分不同的数据更新操作可以使用$nextTick

四、销毁
1、beforeDestroy：当要销毁vue实例时，在销毁前执行
2、destroyed：销毁vue实例时执行

Vue组件间如何传递参数？

父传子：子组件通过props接受子传父：this.emint() 平级之间：vuex

Vuex是什么？怎么使用？那种场景使用？

场景：单页应用中，组件之间的共享状态和方法

state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接>修改里面的数据。

mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。

getters
类似vue的计算属性，主要用来过滤一些数据。

action
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通>过 store.dispath 来分发 action。

modules
项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

$route和$router的区别是？

$route为当前router跳转对象里面可以获取name、path、query、params等
$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

列举常用的vue指令?

V-bind v-on v-model v-if和v-eles v-for v-show

Vue中页面之间跳转传参方式？

Router-link :to直接跳转，参数放在？后面用this.$route.query.index获取，
参数放在/后面，用this.$route.params.index获取
This.$router.push({name: ‘name’, params: { key: value }, query: { key: value } })方式跳转。

简述微信小程序的几种文件类型？

Js、wxss、wxml、json

小程序中有哪些参数传值的方法？

1.navigator跳转时：
onLoad: function (options) { 
    
  //页面初始化 options为页面跳转所带来的参数
    var id = options.id    //获取值
},
2.全局变量：globalData: {id:null}
赋值：var app = getApp() app.globalData.id = 2
取值： var id = app.globalData.id
3.列表index下标取值：点击
取值：clickMe:function(e){

var id = e.currentTarget.dataset.id
console.log(id);}