-
哪种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
}
}
结果:
这样我们就能把所有值都拷贝过来。