前端基础知识学习第一节

 一、选择题

　　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); // 1. "false" == 1 2. NaN == 1，所以结果是false
　　　　　　　　console.log("false" == false); // 1. "false" == 0 2. NaN == 0, 所以结果是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，背景，图表等等
　　　　　　PNG8和PNG24的区别参考：https://www.jianshu.com/p/1eaa50981489

　　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解释是：规定基于父元素的宽度的百分比的内边距padding: 25% 0;

　　12. 什么是nginx反向代理

　　　　说到反向代理，是相对于正向代理作区分的

　　　　正向代理：

　　　　　　正向代理也是大家最常接触的到的代理模式。比如我要抢春运的火车票，但是我担心我频繁的刷新抢票接口，购票网站服务

　　　　　　器会把本地IP加入黑名单，这个时候就想到通过代理的方式来访问购票网站服务，请求的过程就是

　　　　　　Client -> Proxy Server->12xx6 Server，数据响应的过程是
　　　　　　12xx6 Server -> Proxy Server -> Client，正向代理最大的特点是客户端非常明确要访问的服务器地址，

　　　　　　服务器只清楚请求来自哪个代理服务器，而不清楚来自哪个具体的客户端；正向代理模式屏蔽或者隐藏了真实客户端信息。

　　　　反向代理：

　　　　　　春运期间大家都要通过12xx6购票，这个时候会出现大量的访问，一台服务远远扛不住访问的压力，此时就有：分布式部署，

　　　　　　也就是通过部署多台服务器来解决访问人数限制的问题。具体的过程是这样的，多个客户端给服务器发送的请求，nginx服务器接收到之后，

　　　　　　按照一定的规则分发给了后端的业务处理服务器进行处理了。此时请求的来源也就是客户端是明确的，但是请求具体由哪台服务器处理的并不明确了，

　　　　　　nginx扮演的就是一个反向代理角色，反向代理，主要用于服务器集群分布式部署的情况下，反向代理隐藏了服务器的信息！