2020笔试题整理1
目录
1.画出css两种盒子模型
2.选择器
3.window.onload和jQuery中的$(document).ready的区别
4.解释一下下面的场景：一个post请求浏览器中请求post的请求前自动发送了一个请求方法为OPTION的请求，为什么？解释一下关于OPTION请求是请求头及响应头相关的参数？
5.一般浏览器返回304是什么情况，请介绍2种返回304的情况和优先级？cache-control有哪些参数，请详细说明？
6.了解http2相对于http1的改进
7.浏览器兼容性问题以及解决方法
8.代码的输出结果。
9.实现一个deepClone方法，返回输入值的深拷贝对象（对象可能包含Function、Date等特殊对象）
10.返回最接近输入值的数字，如果有多个，返回最大的那个（尽量不使用js特有的语法）
11.写出表达式执行结果
12.代码输出结果 promise
13.原型
14.代码输出结果
15.代码输出结果
16.怎么让Chrome支持小于12px的文字。
17.针对移动端1px问题怎么解决
18.跳转路由如何传递一个对象过去
19.v-if 和 v-show 的区别
20.vue中route和router的区别
21.vue中router跳转和location.href有什么区别
22.vue常用的修饰符
23.简述vue父子通信的方式
24.简述vue声明周期
25.vuex是什么，简述action和mutation的区别
26.webpack有个插件可以解决css兼容性问题你知道吗？
1.画出css两种盒子模型
- 标准盒子模型：width指content部分的宽度；box-sizing: content-box;
-
IE盒子模型：width = content+padding+border
box-sizing: border-box;
2.选择器
Title
test
test
test
test
test
test
.children div:nth-child(3){
background-color: red;
}
.children>:nth-child(2){
color: blue;
}
.children [lang*=bcd]{
color: red;
}3.window.onload和jQuery中的$(document).ready的区别
- 执行时间
window.onload必须等到页面内包括图片的所有元素和其他外部资源加载完毕后才能执行；
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。这个时候可能图片还未加载完成，要解决可以使用jquery中的load( )方法
- 编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法 只会执行一个；
$(document).ready()可以同时编写多个，并且都可以得到执行。
- 简化方法
window.onload没有简化方法
$(document).ready(function(){ })可以简写成 $(function( ){ })、$( ).ready(function(){ })
4.解释一下下面的场景：一个post请求浏览器中请求post的请求前自动发送了一个请求方法为OPTION的请求，为什么？解释一下关于OPTION请求是请求头及响应头相关的参数？
5.一般浏览器返回304是什么情况，请介绍2种返回304的情况和优先级？cache-control有哪些参数，请详细说明？
6.了解http2相对于http1的改进
7.浏览器兼容性问题以及解决方法
8.代码的输出结果。
var v1 = [];
var v2 = {};
var v3 = {};
function foo(v1, v2, v3){
v1 = [1];
v2 = [2];
v3 = {a:3}
}
foo(v1, v2, v3)
console.log(v1)
console.log(v2)
console.log(v3.a)9.实现一个deepClone方法，返回输入值的深拷贝对象（对象可能包含Function、Date等特殊对象）
function deepClone(origin){
}
const res = deepClone({
a: {
b: {
c: [1, 5, 11, 23, 422]
}
},
d: function() {
console.log("hello world");
},
e: new Date()
})
console.log(res)10.返回最接近输入值的数字，如果有多个，返回最大的那个（尽量不使用js特有的语法）
function findNext(n, arr){ }
arr = [1, 5, 9, 15, 28, 33, 55, 78, 99]
11.写出表达式执行结果
let foo = ["1", "8", "16"].map(parseInt)
console.log(foo)
[1, NaN, 1]
let foo = ['20'+10, '20'-10, +'2s'+10, ~'-4'+10]
console.log(foo)
["2010", 10, NaN, 13]
‘2s’+10. 2s10
let a = {name: 1},
foo = '20' + a;
console.log(foo
20[object Object]
var foo =1;
function bar() {
if(!foo){
var foo = 10;
}
console.log(foo);
}
bar();
console.log(foo);
//10
//1
12.代码输出结果 promise
console.log('1');
setTimeout(function() {
console.log('2');
new Promise(function(resolve){
console.log('3');
resolve();
}).then(function() {
console.log('4')
})
}, 300)
new Promise(function(resolve) {
console.log('5')
resolve();
}).then(function() {
console.log('6')
})
setTimeout(function() {
console.log('7');
new Promise(function(resolve) {
console.log('8');
resolve();
}).then(function() {
console.log('9')
})
}, 200)
console.log('10')
输出结果：
13.原型
function Person(name){
this.name = name
}
let p = new Person('Tom')
p._proto_等于什么
Person._proto_等于什么
14.代码输出结果
function Person(name){
this.name = name
return name;
}
let p = new Person('Tom')
console.log(p)
Person {name: "Tom"}
15.代码输出结果
function Person(name){
this.name = name
return {};
}
let p = new Person('Tom')
console.log(p)
{}
16.怎么让Chrome支持小于12px的文字。
谷歌浏览器Webkit的内核，有一个-webkit-text-size-adjust的私有css属性，可以实现字体大小不随终端设备或浏览器影响：-webkit-text-size-adjust: none;
最新版本的谷歌里不支持这个属性了，需要通过css3的transform来解决：
span{
-webkit-transform: scale(0.8);
-o-transform: scale(1);
display: inline-block;
}
只能缩放可以定义宽高的元素，而span是行内元素。
设置后宽高也会比例缩放，对布局会产生影响。可以使用translate方法改变位置
opera最新版也是webkit内核，新版本的opera本来就是10px的字体。
17.针对移动端1px问题怎么解决
出现原因：不同的手机有不同的像素密度导致的。
devicePixelRatio属性：返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率
（1）在IOS8+中
p{
border: 1px solid #000;
}
@media (-webkit-min-device-pixel-ratio:2) {
p{
border: 0.5px solid #000;
}
}
(2)使用box-shadow模拟边框：利用css对阴影处理的方式实现0.5px的效果
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
优点：代码量少，可以满足所有场景
缺点：边框有阴影，颜色变浅
（3）伪元素 + transform：把原先元素的border去掉，然后利用:before或者:after重做border，并transform的scale缩小一半，原先的元素相对定位，新做的border绝对定位
.scale-1px{
position: relative;
border:none;
}
.scale-1px:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
优点：所有场景都能满足，支持圆角(伪元素和本体都需要加border-radius)
缺点：对于已经使用伪元素的元素(例如clearfix)，可能需要多层嵌套
18.跳转路由如何传递一个对象过去
19.v-if 和 v-show 的区别
20.vue中route和router的区别
21.vue中router跳转和location.href有什么区别
22.vue常用的修饰符
23.简述vue父子通信的方式
24.简述vue声明周期
25.vuex是什么，简述action和mutation的区别
26.webpack有个插件可以解决css兼容性问题你知道吗？