标签：压缩 质量 storage 实现 存储 适合 resolve 元素 under
一、选择题
1. 浏览器端的存储技术有哪些（）
A.cookie B.localStorage C.session D.userData
答案：A B D
分析：cookie通常用于存储用户等登录信息，能够存储的数据是有限的，而且在指定域名下所有的请求都会带上。
localStoage是H5新增用于本地存储，能够存储更多的数据，通常是5M
session服务器端与客户端建立的会话，不属于浏览器端存储技术
userData是IE专有的存储方案，可以用来存储一些数据
2. (function() { return typeof arguments; })(); 代码将会返回（）
A.object B.array C.arguments D.undefined
答案：A
分析：arguments 是类数组，正常情况下typeof []会返回"object"，所以typeof arguments也会返回"object"
3. function fn() { return fn; } new fn() instanceof fn; 上面的代码会输出（）
A.true B.false
答案：false
分析：fn作为构造函数，如果内部没有显示的声明return语句，默认会返回一个fn的实例对象，也就是new fn() instanceof fn会返回true，
但是这里有return fn;这条语句，那么new fn()就会返回fn，所以结果为false
4. 下列哪个属性不会让div脱离文档流（normal flow）（）
A.position: absolute B.position: fixed C.position: relative D.float: float
答案：C
分析：position: relative相对于自己定位，不会脱离文档流
5. 正则表达式/^\d*\*[^\d]*[\w]{6}$/，下面的字符串哪个能正确匹配？（）
A.***abcABCD_89 B.abc*abcABCDEF
C.123*abcABCD_89 D.123*ABCabcd-89
答案：A，C
分析：
^ 表示匹配字符必须以后面规则开始
\d* 表示零个或者多个数字
\* 表示只匹配字符*
[^\d]* 表示匹配零个或者多个非数字字符
[\w] 表示匹配字母数字下划线字符相当于[0-9a-zA-Z_]
{6} 表示要要进行匹配的字符数要大于等于6
答案A，* 属于初次匹配内容，其他的是剩下规则匹配
6. (function() { var a = b = 5; })(); console.log(b); console.log(a); 代码输出结果：（）
A.5, 5 B.undeinfed, undefined C.5, undefined D.程序抛错
答案：D
分析：程序执行完之后会先打印5，然后抛错，因为var a = b = 5;相当于b = 5; var a = 5；在非严格模式下，全局环境不声明直接
赋值相当于给window对象赋值，所以相当于window.b = 5; 然而a的作用域是匿名自执行函数内，所以在全局作用域下面是访问不到的
二、简单题
7. 下面的代码输出顺序？
console.log(‘one‘);
setTimeout(function() {
console.log(‘two‘);
}, 0);
new Promise(function(resolve, reject) {
console.log(‘three‘);
resolve();
}).then(function() {
console.log(‘four‘);
});
console.log(‘five‘);
答案：one three five four two
分析：程序从上往下执行首先打印出来one，new Promise会执行他的构造函数这时候打印three，
然后因为Promise属于异步microtask，这个时候会继续执行主线程代码打印出来five，这个时候会执行microtask队列，
打印出来four，接下来执行macrotask任务队列打印出来two
8. 下面的代码输出结果？
falseStr = "false";
if (true) {
var falseStr;
if (falseStr) {
console.log("false" == true);
console.log("false" == false);
}
}
答案：false false
分析：下面的规则用于判定==运算符比较的两个值是否相等：
1.如果两个值具有相同的类型，那么就检测它们的等同性。如果这两个值完全相同，它们就相等。如果它们不完全相同，则它们不相等。
2.如果两个值的类型不同，它们仍然可能相等。用下面的规则和类型转换来检测它们的相等性：
2.1 如果一个值是null,另一个值是undefined,它们相等。
2.2 如果一个值是数字，另一个值是字符串，把字符串转换为数字，再用转换后的值进行比较。
2.3 如果一个值是true，将它转换成1，再进行比较。如果一个值为false，把它转换成0，再进行比较。
2.4 如果一个值是对象，另一个值是数字或者字符串，将对象转换成原始类型的值，再进行比较。
2.5 其他的数值组合是不相等的。
9. 下面的代码输出结果？
var length = 10;
var obj = {
length: 5,
func: function() {
console.log(this.length);
}
};
var func = obj.func;
func();
obj.func();
答案：10，5
分析：函数的作用域是在被定义时候决定，跟执行环境没有关系，所以var func = obj.func;可以理解为在全局作用域定义了func
所以func函数内的this应该是全局，浏览器环境下是window，所以length为10。obj.func函数的执行上下文对象是obj，所以
length是5
10. PNG,GIF,JPG的区别及如何选？
GIF：
256色
无损，编辑 保存时候，不会损失。
支持简单动画
支持boolean透明，也就是要么完全透明，要么不透明
JPG：
millions of colors
有损压缩， 意味着每次编辑都会失去质量
不支持透明
适合照片，实际上很多相机使用的都是这个格式
PNG：
无损，其实PNG有好几种格式的，一般分为两类：PNG8和truecolor PNGs
与GIF相比：
它通常会产生较小的文件大小
它支持阿尔法（变量）透明度
无动画支持（可通过CSS3实现动画效果）
与JPEG相比：
文件更大
无损
因此可以作为JPEG图片中间编辑的中转格式
结论：
JPEG适合照片
GIF适合动画
PNG8适合其他任何种类——图表，buttons，背景，图表等等
11. 请用CSS实现屏幕正中间有个元素A，随着屏幕宽度的增加，始终满足以下条件：
1）A元素垂直居中于屏幕中央
2）A元素离屏幕左右边距各10px
3）A元素的高度始终是A元素宽度的50%
答案：这道题目有多种实现方案，方案如下，
1.1 CSS3 flex来实现，对父元素设置样式display: flex; align-items: center;
1.2 父元素设置postion: relative; A元素设置样式position: absolute; top: 50%; transform: translateY(-50%);
1.3 父元素设置postion: relative; A元素设置：postition: absolute; top: 0; bottom: 0; margin: auto 0;
2.1 A元素margin-left: 10px; margin-right: 10px;
3.1 这里借助于padding百分比来实现，padding百分比w3c解释是：规定基于父元素的宽度的百分比的内边距
标签：压缩 质量 storage 实现 存储 适合 resolve 元素 under
原文地址：https://www.cnblogs.com/typeof/p/12164256.html
