前端面试题01
-
哪种http状态下，浏览器会产生两次http请求？C
A.400 请求报文中存在语法错误
B.404 服务器上无法找到请求资源
C.302 临时性重定向（请求的资源被分配了新的URL，希望本次访问使用新的URL）
D.304 客户端发送附带条件请求时，请求满足条件的情况下，服务器端允许访问资源并返回状态码 -
根据HTML规范，以下代码中，外层容器outer的宽高分别是：D
</head>
<body>
<div class="outer">outer
<span class="inner">content</span>
</div>
</body>
A. 高100px，宽130px
B. 高180px，宽130px
C. 高180px，宽100%
D. 高100px，宽100%
解析：span是display：line设置宽高是不起作用的，宽高是由自身撑起的，div是display:block,若宽高有设置就是设置的，没有设置取默认值。高为自身撑起的，宽为100%。
- 有一段html代码:
- 当表单中包含文件上传控件时，需要将enctype设置为：B
A. Application/x-www-form-urlencoded
在发送前编码所有字符（默认）
B. Multipart/form-data
不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。
C. Text/explain
空格转换为 “+” 加号，但不对特殊字符编码。
D. File-data
- 下面有关javascript常见事件的触发情况，描述错误的是？C
A. Onmousedown:某个鼠标键被按下
B. Onkeypress:某个键盘的键被按下或按住
C. Onblur：元素获得焦点
修改：当失去输入焦点后产生该事件
D. Onchange：用户改变域的内容
常见事件：
1. 点击事件：
1. onclick：单击事件
2. ondblclick：双击事件
2. 焦点事件
1. onblur：失去焦点
2. onfocus:元素获得焦点。
3. 加载事件：
1. onload：一张页面或一幅图像完成加载。
4. 鼠标事件：
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件：
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
7. 表单事件：
1. onsubmit 确认按钮被点击。
2. onreset 重置按钮被点击。
- w3c制定的javascript标准事件模型，以下正确的顺序及描述是：B
A． 事件捕获>事件冒泡
B． 事件捕获>事件处理>事件冒泡
C． 事件冒泡>事件处理>事件捕获
D． 事件处理>事件捕获>事件冒泡
dom2规定的事件流包括3个阶段：
① 事件捕获，②处于目标阶段（事件处理 ），③事件冒泡阶段。
7. 在javascript中，用于阻止默认事件的默认操作的方法是：D
A． stopDefault（）
B． stopPropagation（）
C． preventPropagation（）
D． preventDefaultt（）
E． preventDefaultEvent（）
如下：
function stopDefault( e ) {
if ( e && e.preventDefault ){
e.preventDefault(); //阻止默认浏览器动作(W3C)
}else {
window.event.returnValue = false; //IE中阻止函数器默认动作的方式
}
return false;
}
- 以下javascript代码，在浏览器中运行的结果是:B
function foo(){
console.log(“first”);setTimeout(function(){
console.log(“second”)
},5);
}
for(var i=0;i<123456789;i++){
foo();
}
A. first second first second 依次顺序输出
B. 事先全部输出first,然后全部输出second
C. first second 无顺序输出
D. 首先输出first，超出5ms输出所有second,最后输出余下的first
页面中所有由setTimeout定义的操作，都将放在同一个队列中依次执行。
而这个队列的执行时间需要等到函数调用栈执行完毕后才会执行，也就是等待所有的可执行代码执行完毕，才会轮到setTimeout执行其内部操作，并且按照其时延时间长短顺序执行代码！
- 以下javascript代码执行后。浏览器alert出来的结果分别是：B
var color = “green”;
var test123 = {
color:“blue”,
getColor:function(){
var color = “red”;
alert(this.colcor);
},
};
var getColor = test123.getColor;
getColor(); //由windows调用
test123.getColor(); //test对象调用
A. Undefined,red
B. Green,blue
C. Undefined,blue
D. Greenmundefined
E. Blued,undefined
js中this的用法,this总是指向调用它的对象,倒数第二行的getColor为windows调用的,倒数第一行的getColor是test对象调用的
-
有如下代码
var name = “World”;
(function(){
var name;if(typeof name === "undefined") {name = "Jack"; console.log("Goodbye "+name) }else{ console.log("hello"+name) } })();
执行后弹出的值是：B
A． Hello World!
B． Goodbye Jack
C． Hello Jack
D． Goodbye World
在 JavaScript中， Fun 和 var 会被提升相当于
var str = ‘World!’;
(function (name) {
if (typeof name === ‘undefined’) {
var name = ‘Jack’;
console.log('Goodbye ’ + name);
} else {
console.log('Hello ’ + name);
}
})(str);
-
有以下代码片段，结果是：6
var a=[];
a[0]=1,a[1]=2,a[2]=3,a[5]=4;
alert(a.length); -
在位运算中，操作数每右移一位，其结果相当于：B
A． 操作数乘以2
B． 操作数除以2
C． 操作数乘以4
D． 操作数除以4 -
超链接访问过后hover样式就不会出现了，被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序：A
A. a:link{} a:visited{} a:hover{} a:active{}
B. a:visited{} a:link{} a:hover{} a:active{}
C. a:link{} a: active{} a:hover{} a: visited{}
D. a: active{} a:link{} a:hover{} a: visited{}
不定项选择
- cookie的domain属性指定域名example.com后，哪些域名会发送cookie：BC
A． img example.com
B． www.example.com
C． example.com
D． api example.com
cookie的domain不支持ip也不支持端口 .
- 默认情况下，以下哪些元素是行内元素：AD
A.
B.
C.
D.
块级元素：
、
…
、
-
、
-
、
、、
、
、 内联元素：
、、
、、、、
-
、
-
、、
、
、 内联元素： 、、
、、、、
- 以下关于WebSocket描述正确的是BD
A. 仅支持文本数据
B. 双向：客户端和服务端都能交换消息
C. 单向：仅服务端能发送消息
D. 支持二进制和文本数据
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
- 关于LocalStorage描述正确的是：AC
A． 在同源的所有标签页和窗口之间共享数据
B． 数据有过期时间
C． 数据不会过期
D． 服务消息通过HTTP header操纵数据库
方便在客户端存储数据，并且不会随着HTTP传输。
-
如何在浏览器中存储数据：ACD
A. IndexDB
B. FormData
C. Cookie
D. LocalAtorage SessionStorage -
当我们尝试发送一个非常简单请求时，浏览器会发送一个特殊的预检（preflight）请求到服务器。
预检的方法是：A
A． OPTIONS
B． GET
C． POST
D． PUT
问答题
- 假设有个电商项目，匿名加入购物车的东西，登录之后如何出现在已登录账号？
如果你之前登陆了淘宝帐号，并使用了保存登陆信息的话，那么第二次打开淘宝网就会自动加载登陆信息。因此你所述的操作系统视为有效.
购物车
1、未登录：使用cookie保存购物车数据
2、登录后：把购物车数据保存到redis。
2、购物车合并，应该以服务端的购物车为准。
- 一个Web应用，用户登录之后，在后续的多个请求中，后端是如何识别出哪个是用户在使用后台功能。
登录之后会获取到一个类似于token的一个字符串，或者是其他的一个字符串，然后每次操作的时候都会发发送字串字符串到服务器上，那服务器就会知道是哪一个用户在操作。
这串字符串呢，就一般放在头里面，HTTP请求头。
- 远程车辆管理，车主在手机app上点击【关窗】按钮，汽车在几千公里之外就能关窗。在这种情况下，手机app是如何与几千公里外的汽车通信并且关窗的？描述应用层及其构架。
点击关窗按钮之后会调用一个接口，一般是HTTPS或者HTTP的，然后告诉服务器要关窗，然后服务器跟车辆会有一个长连接，服务器就通过这个长连接，告诉这个车需要关窗。实现这个长链接，通过web shocking来链接。
- QQ农场是一个网页游戏，有几种方法实现游戏外挂实现自动偷菜。
（1）抓包，看偷菜，刷新好友列表，就是调用哪些接口记录下来，然后呢，我们就可以定时的去调用这些接口，就可以实现自动偷菜。
（2）也可以通过模拟点击，但是这个方法不太靠谱，模拟点击某个位置某个按钮。
- 一个项目的首页有很多图片，有哪些方法优化图片加载性能。
第一种方法就是先获取小图片，然后点击这张图片在加载大图片，这样子就可以加快这个网页加载图片性能。
第二种就是用Webp来代替部分图片，因为web批这种图片格式一般会小一点，而且它的压缩率会比较高。
- 简述JS实现对象拷贝的几种方法。
深拷贝：
（1）遍历+递归
function deepClone(obj){
let newObj = {}
for(let key in obj){
if(obj.hasOwnProperty(key)){
if(typeof(obj[key]) === ‘object’ && obj[key] !== null){
newObj[key] = (Array.isArray(obj[key]) ? [] : {})
newObj[key] = (Array.isArray(newObj[key]) ? […obj[key]] : deepClone(obj[key]));
}else{
newObj[key] = obj[key];
}
}
}
return newObj;
}
（2）Object.assign + 递归
function deepClone(obj){
let newObj = {}
for(let key in obj){
if(obj.hasOwnProperty(key)){
newObj[key] = (typeof obj[key] === ‘object’ ? Object.assign(obj[key]) : obj[key])
}
}
return newObj
}
（3）对象扩展 + 递归
function deepClone(obj){
var newObj ={}
for(let key in obj){
if(obj.hasOwnProperty(key)){
if(typeof obj[key] === ‘object’){
newObj[key] = (Array.isArray(obj[key]) ? [] : {})
newObj[key] = (Array.isArray(newObj[key]) ? […obj[key]] : {…obj[key]})
}
else{
newObj[key] = obj[key]
}
}
}
return newObj
}
（4）JSON复制
对NAN和undefined无法正确复制
function deepClone(obj){
var newObj = JSON.parse(JSON.stringify(obj))
return newObj
}
（5）测试对象
var obj = {
name:‘lily’,
age:23,
homework:{
math:‘not complite’,
chinese:‘complite’
},
extra:{
num:NaN,
under:undefined,
empty:null
},
arr:[1,2,3,4]
}
console.log(deepClone(obj))
（6）第三方库：lodash或者jQuery的extend方法
$.extend(true,object1,object2) //深拷贝
$.extend(object1,object2) //浅拷贝
一、浅拷贝
(1) Object.assign()
Object.assign我们经常会用到合并对象，当然利用Object.assign性质我们也可以实现对象的拷贝。
var obj1 = {a: 1, b: 2}
var obj2 = Object.assign({}, obj1)
obj2.a = 4
console.log(obj1, obj2)
结果如图：
这里要注意的是Object.assign第一个参数必须是个空对象
(2) 解构赋值
var obj1 = {a: 1, b: 2}
var obj2 = {…obj1}
obj2.a = 4
console.log(obj1, obj2)
结果如图：
这里一样可以实现之前上面的结果。
但这两种拷贝有一个问题就是只能赋值一层，假设我们有如下数据结构
var obj1 = [{
name: ‘臧三’,
childs: [‘小明’, ‘小芳’]
}]
var obj2 = […obj1]
obj2[0].childs = []
console.log(obj1, obj2)
我们会发现打印出的结果如下：
上图可看出obj1,obj2 的结果均变了，这并不是我们想要的结果，所以我们要用到深拷贝。
二、深拷贝
(1) 利用json.stringify
var obj1 = [{
name: ‘臧三’,
childs: [‘小明’, ‘小芳’]
}]
var obj2 = JSON.parse(JSON.stringify(obj1))
obj2[0].childs = []
console.log(obj1, obj2)
结果如下:
这样的话就能达到我们想要的结果。
这种方法简单，但也有弊端，看看下面的数据结构：
var obj1 = [{
name: ‘臧三’,
childs: [‘小明’, ‘小芳’],
fn: function() {},
age: undefined
}]
var obj2 = JSON.parse(JSON.stringify(obj1))
obj2[0].childs = []
console.log(obj1, obj2)
结果：
我们从结果中发现，值为undefined,或者function的时候并不会拷贝过来。
(2) 利用递归来实现一个方法进行拷贝
var obj1 = [{
name: ‘臧三’,
childs: [‘小明’, ‘小芳’],
fn: function() {},
age: undefined
}]
var obj2 = extend(obj1)
obj2[0].childs = []
console.log(obj1, obj2)
function extend(data) {
if (typeof data === ‘object’ && data) {
let val = typeof data.length === ‘number’ ? [] : {}
for(let i in data) {
val[i] = extend(data[i])
}
return val
} else {
return data
}
}
结果：
这样我们就能把所有值都拷贝过来。
上一篇： VMWARE 虚拟机串口管道配置