欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端面试题目1

程序员文章站 2022-06-10 08:30:06
...

前端面试题总结

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 box=box=(box)
jquery–js var 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区别