前端面试题总结
1 200x200分辨率的div居中用css实现:
div{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
2 清楚浮动的几种方式
1 给父元素div增加高度height
2 给父元素加overfolw:hidden
3 在父元素结尾处加div clear:both
4 给父元素加伪类别 clearflex
3 利用原生js给一个按钮绑定两个onclick点击事件
var bar = document.getElementById(“btn”);
bar.addEventLister(“click”,hello1)
bar.addEventLister(“click”,hello2)
function hello1(){alert("hello1")}
function hello2(){alert("hello2")}
4 jquery中选择器
id class 标签选择器 属性选择器 伪类 伪元素
权重计算 !import>id>class>```
内联样式style>
5 定时器setInterval 一直执行 setTimeout 只执行一次
6 cookies sesionStorage localstorage
1
cookies 系统缓存。大小不能超过4m
sesionStorage localstorage 储存可达到5m左右
2 localstorage本地储存 不会主动删除本地数据
sesionStorage 数据在当前浏览器窗口,关闭口自动删除
cookies 设置的cookies过期之前一直有效
3 · cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
7 js数据类型:undefined null boolean number string
null代表空值
undefined 表示定义的变量未初始化
8 http 访问是tcp协议 https访问是ssl/tls上的,更加安全
9 常见的http状态码
2开头 (200请求成功)表示成功处理了请求的状态代码。
3开头 (请求被重定向)表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。
4开头 (请求错误)这些状态代码表示请求可能出错,妨碍了服务器的处理。
5开头(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。
这些错误可能是服务器本身的错误,而不是请求出错。
10 网站优化:1压缩打包优化 2按需加载 3 精灵图 4图片编码优化
11 MVVM模式 :m数据 v视图 vm双向数据绑定
12 px绝对单位 em相对单位
13 js哪些操作引起内存泄漏 : 1意外的全局变量 2闭包的内存泄漏 3没有清理的dom元素 4被遗忘的定时器或回调
14 AJAX是不跨域的,而JSONP是一个是跨域的,还有就是二者接收参数形式不一样!
15 闭包特性:1函数嵌套函数 2函数内部可以引用函数外部的参数和变量 3参数和变量不会被回收
闭包作用:设计私有方法和变量。----优点:避免全局变量污染 —缺点:变量会常驻内存,易造成内存泄漏
16 隐藏css方法------display:none 彻底消失 visibility:hidden 隐藏元素 opacity:0 透明度为0
17 position定位
relative 绝对定位
absolute 相对定位,与relative共用
fixed 固定定位 相对于浏览器窗口定位
18 同源 协议 端口 域名相同
19 get请求通过浏览器地址栏明文传值 post请求通过提交表单传值(传数据量大 更安全)
20 css3新特性 圆角border-radius 阴影border-shadow 旋转transform
----------vue------面试大全
1 mint-ui基于vue的前端组件,import引入样式和js,vue.ues(mint-ui)全局引入
import {Toast} from “mint-ui” 组件: Toast{“登录成功”} mint-header mint-swiper
2 axios是什么?怎么使用?描述使用它实现登录功能的流程?
答:请求后台资源的模块。npm install axios -S装好,然后发送的是跨域,
需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。
js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中
3 如何让CSS只在当前组件中起作用
将当前组件的
12 delete 和Vue.delete区别
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete直接删除了数组 改变了数组的键值
13 jquery 获取dom对象 与js原生获取对象区别
jquery获取的是对象数组 js元素获取的是对象
转换
js–jquery var box=getElementById(“box”) var
b
o
x
=
box=
box=(box)
jquery–js var
b
o
x
=
box=
box=(“box”) var box=$box[0]
14 什么是跨域 跨域解决办法
同源策略 协议 端口 域名 是浏览器的安全机制
解决跨域
1 jsonp 只支持get不支持post 利用
--------前端面试题---------
1 写出两种居中方式(垂直和水平都居中) 父元素设置 position:relative
1设置成块元素 text-align: center; margin: position:absolute left:0 right:0 top:0 bottom:0
绝对定位 position
.div{
text-align:center;
width:200px;
height:200px;
margin:auto;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
}
2 (不知道宽高)
.div{
text-align:center;
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
}
3 (已经知道宽高)
.div{
text-align:center;
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
4 flex布局
.div{
width:200px;
height:200px;
display:flex;
justify-content:center; //水平居中
align-items:center //垂直居中
}
2-------弹性盒子模型----
外边距 边框 内边距 内容
3------transform变形 transition动画:属性 时间 效果
--------------es6-------------
1 变量声明新方式 let const
提供的块级作用域,不再具备变量提升
2 箭头函数 没有this 如果有this一定是指向外部this
3 模版字符串
++++++++前端vue+++++++
1 v-show 与v-if区别