金山前端笔试

1 语义化标签的优点

1、代码结构清晰，易于阅读
2、有利于搜索引擎优化
3、方便其他设备解析

2 度量单位

1、rem：相对于根字体大小的单位
2、vw、vh：视口单位
3、em：以父元素为基准

3 new操作符做了什么

1. 创建一个新的空对象obj
2. 设置新对象的obj.proto=构造函数.prototype
3. 让构造函数的this指向对象obj
4. 判断返回类型，如果是值类型则直接返回obj；如果是引用类型，则返回引用这个类型的对象

function _new(constructor,...args){
	let obj={}
	obj.__proto__=constructor.prototype
	let res=constructor.apply(obj,args)
	return res instanceof Object? res:obj
}

4 简述cookie/session记住登录状态机制原理

用户登录验证成功后，如果是使用cookie记住登录状态，则服务器会将用户名等信息放在响应头的Set-cookie属性中返回给服务器，之后的http请求都会携带这个cookie实现记住登录。如果是session的话，则服务器会将用户名等信息存放在本地，在随机生成一个登录标识通过cookie返回给浏览器，之后浏览器每次发送请求也会携带这个cookie，服务器收到后便通过这个标识得到已登录的用户信息。

5 网页中接收事件的顺序有哪些？它们之间的区别是什么？

事件流有三个阶段：

1. 捕获阶段：当我们在DOM树某个节点发送了一些操作，就会有一个事件发出去，这个事件从window发出，不断经过下级节点直到触发目标节点，在到达目标节点之前的过程就是捕获过程
2. 目标阶段：当事件不断传递直到目标节点，最终在目标节点上触发这个事件，这就是目标阶段
3. 冒泡阶段：事件在目标节点上触发，不会终止，一层一层向上冒，回溯到根节点

6 defer和async属性

浏览器在解析HTML时，如果遇到一个没有任何属性的script标签，就会暂停解析HTML，开始解析script脚本并执行，执行完毕后恢复解析HTML

（1）async
在解析HTML的同时解析script脚本，script脚本的执行会阻塞html的解析

（2）defer
在解析HTML的同时解析script脚本，script脚本的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成

7 设置那个请求头信息，跨域时不会触发options请求

• Accept：表示客户端希望接收哪种数据类型
• Content-type：表示发送端发送的实体数据类型

8 input标签的input属性和change属性

change属性在失去焦点时触发，输入内容改变时会触发input事件

9 减少页面加载时间的方法

1、减少http请求
2、压缩js、css代码
3、使用浏览器缓存

10 箭头函数与普通函数区别

1、箭头函数是匿名函数
2、箭头函数不能作为构造函数，不能使用new
3、箭头函数没有arguments，但可以使用扩展运算符解决
4、箭头函数不绑定this，会捕获其所在上下文的this作为自己的this值，不能通过call、apply、bind改变this指向
5、箭头函数不能使用yield关键字，不能作为generator函数

11 promise转为setTimeout，有什么区别

promise转化成的setTimeout是微任务，setTimeout为宏任务

function sleep(time){
	return new Promise((resolve,reject)=>{
		setTimeout(()=>resolve,time)
	})
}

12 浏览器渲染机制

1. 当用户输入一个URL时，浏览器会向服务器发出一个请求，请求URL对应的资源
2. 接受到服务器的响应内容后，浏览器解析HTML文件，构建DOM树
3. 将CSS解析成CSSOM树
4. 根据DOM树和CSSOM树构建渲染树，渲染树并不等于DOM树，DOM树与HTML标签一一对应，渲染树不包括head和隐藏元素
5. 计算每个节点在屏幕中的位置
6. 遍历渲染树，绘制每个节点

13 vue双向数据绑定原理

vue双向数据绑定是通过数据劫持和发布订阅模式来实现的

1. 实现一个观察者Observer，能够对data数据对象的所有属性都分别创建一个发布者Dep，并通过object.defineProperty（）对所有属性进行监听
2. 实现一个发布者Dep，建立一个数组subs保存该data属性的所有订阅者（watcher），并定义增加订阅者和更新subs数组中所有订阅者的方法
3. 实现一个订阅者Watcher，记录每个使用data数据对象的属性，并定义了更新视图的update方法
4. 实现一个编译器Compiler，对vue中所有子元素节点的指令进行扫描和解析，根据指令模板替换数据，添加订阅者并更新视图

14 css实现一个三角形

div{
	width:0;
	height:0;
	border:30px solid;
	border-color: pink transparent transparent transparen;
}

15 如何判断浏览器是否支持某个属性或方法

typeof addEventListener ==='undefined'

16 如何判断前端性能？时间指标，如何获取时间指标（白屏时间，dom树构建时间，整页时间）

首屏绘制时间：浏览器从响应用户输入网址地址到浏览器开始显示内容的时间

performance.timing.loadEventEnd - performance.timing.navigationStart

白屏时间：是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间

performance.timing.responseStart - performance.timing.navigationStart

DOM树构建时间：指浏览器开始对基础页文件内容进行解析到文本中构建出一个DOM树的事件

整页时间：页面完成整个加载过程的时刻
loadEventEnd-navigationSart

17 跨域 iframe实现

跨域表现在以下：

• 无法读取cookie、localStorage、indexDB
• DOM无法获得
• ajax请求无法发送

解决办法：

1. 设置相同domain：
   例如在a页面上挂载iframe方法，在b页面上可以直接获取到a页面的window对象并直接调用

// a页面
window.toggleFullScreen = () => {
    // do something
}
// b页面
window.parent.toggleFullScreen()

但是这个值的设置有一定限制，只能设置为当前文档的上一级域或跟该文档的URL的domin一致的值，如url为a.demo.com，那么domain就只能设置为demo.com或者a.demo.com

因此，domain方法只能用于解决主域相同而子域不同的情况

2. 使用postmessage

// a页面
window.addEventListener("message", function( event ) {
    if (event.origin !== 'http://b.demo.com') return;
    toggleFullScreen()
 });
parent.postMessage(
    value,
    "http://a.demo.com"
);

18 httponly禁止客户端获取 cookie在哪设置的

httponly用于放置客户端脚本通过document.cookie属性访问cookie

response.addHeader("Set-Cookie", "uid=112; Path=/; HttpOnly")

19 闭包作用优缺点

作用：变量不会被销毁，不会造成变量污染
缺点：会造成内存泄漏

20 css3新特性

1. 选择器
   新增属性选择器、伪元素选择器、结构伪类选择器
2. 动画：animation
3. 过渡：transition
4. 弹性布局、栅格布局
5. 盒模型：content-box、border-box
6. 媒体查询
7. 阴影

21 html行内元素

span、a、img、input、textarea、select、label、i

22 html块级元素

div、h{1-6}、p、ul、ol、table、form、dl、li

23 js基本类型

string、boolean、number、object、array、symbol、null、undefined

24 基本类型和引用类型的区别

基本类型的变量存放在栈内存中，引用类型的值是同时保存在栈内存和堆内存中的对象，栈区保存变量标示符和指向堆内存中该对象的指针

基本类型在赋值操作后，两个变量是相互不受影响的
引用类型的赋值是对象保存在栈区地址指针的赋值

25 浏览器输入url到页面展示出来的全过程

1. 用户输入url地址
2. 浏览器解析域名得到服务器的ip地址
3. TCP三次握手建立连接
4. 客户端发送http请求获取资源
5. 服务器发送http响应给客户端
6. TCP四次挥手关闭连接
7. 浏览器解析文档资源并渲染页面

26 ES6新特性

1. 变量声明
   新增let、const变量声明，具有块级作用域，没有变量提升，不可以在相同作用域内重复声明同一个变量，const变量声明必须赋值，
2. 新增数据类型
   symbol表示独一无二的值，要使用同一个symbol值需要使用symbol.for
3. 解构赋值
4. 扩展运算符
5. 函数默认值
6. 箭头函数
7. 模板字符串
8. for…of
9. class类
10. promise、async、await
11. set

27 js原型链

每个对象都有自己的原型对象，这样就形成了一个关联一个、层层相互依赖的从属关系，这就叫原型链，原型链后面的对象可以使用前面对象的属性和方法

28 vue跨页面通信

1、使用localstorage

window.addEventListener('storage', window.localStorage.setItem('params', JSON.stringify(object)));

2、使用BroadcastChannel

/ 创建一个广播频道
const bc = new BroadcastChannel('kaixin');

// 其他页面可以通过onmessage来监听被广播的消息
bc.onmessage = function (res) {
    const data = res.data;
};

// 发送消息时直接调用实例上的postMessage方法
bc.postMessage(data);

29 监听事件的方法

1、html内联属性

<button type="button" onclick="alert('hello'')"></button>

2、DOM属性绑定

var obj = document.getElementByClassName('title');
obj.onclick=function(){}

只能绑定一个回调函数

3、使用事件监听函数

var obj = document.getElementByClassName('title');
obj.addEventListener('click',function(){})

30 数组的方法分为两类

（1）改变数组
shift、unshift、pop、push、splice、reverse、sort
（2）不改变数组
concat、slice、some、every、forEach、filter、map

31 用户会话保持

1. session机制保持会话
   （1）首先用户在客户端向服务器首次发起登录请求
   （2）登录成功后，服务器把用户信息保存在服务端，并返回一个唯一的session标识给客户端浏览器
   （3）客户端将session标识保存起来
   （4）以后，每次请求都会把唯一的session标识带上，这样服务端就能根据这个唯一的session标识找到用户信息

2. cookie机制保持会话
   （1）首先用户在客户端向服务器首次发起登录请求
   （2）登录成功后，服务端会把登录的用户信息设置在cookie中，并将cookie返回给客户端浏览器
   （3）客户端将接收的cookie保存到本地
   （4）以后，每次请求都会发送cookie，服务器可以根据cookie获取信息

3. token机制保持会话
   （1）客户端发起登录请求
   （2）服务器验证成功后，会签发一个Token，再把这个Token发送给客户端
   （3）客户端收到Token后，将其存放在cookie或LocalStorage中
   （4）以后，客户端每次请求资源都会带着服务器签发的Token，服务端收到请求后需要验证Token

优点：
1、支持跨域访问，将token置于请求头中，而cookie不支持跨域访问
2、无状态化，服务端无需存储token，只需验证token信息是否正确
3、避免CSRF跨站伪造请求

32 固定宽高元素的水平垂直居中

div{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

div{
	displat:flex;
	justify-content:center;
	align-items:center
}

33 跨域常用方案

（1）JSONP
jsonp的原理是利用

（2）CORS
简单请求：

• 使用下列请求方法之一：GET、POST、HEAD
• 只能设置以下首部字段：Accept、Accept-Language、Content-Language、Content-type
• Content-type的值只能为text/plain、multipart/form-data、application/×一www-forrn-urlencoded

在头信息中增加一个Origin字段用于说明本次请求来自哪一个源，服务器根据这个值决定是否赞成此次请求：

1. Access-Control-Allow-Origin：*
2. Access-Control-Allow-Credentials：表示是否允许发送cookie
3. Access-Control-Expose-Headers

非简单请求：
非简单请求会在正式通信前进行一次预检请求

预检请求发方法是OPTIONS，除了Origin字段，它还包括两个特殊字段：

• Access-Control-Request-Methods：用到的HTTP请求方法
• Access-Control-Request-Headers：允许请求携带首部字段
• Access-Control-Max-Age：响应有效时间

34 HTTP缓存

（1）强缓存：在第一次访问服务器获取到数据后，在过期时间之前都不会发送请求

http1.0中使用expires关键字，http1.1中使用Cache-content：max-age关键字

（2）协商缓存：浏览器每次请求数据都需要和服务器进行通信，服务器返回响应数据和缓存标识

第一次请求获取到数据后，返回状态码200，http1.0中使用Last-Modified记录上次文件修改时间，当再次发送请求时，会带上If-Modified-Since请求头去访问服务器，如果缓存资源未被修改，服务器返回304状态码，从本次缓存中加载数据

第一次请求获取到数据后，返回状态码200，http1.1中使用
Etag设置缓存标识，当再次发送请求时，将Etag信息放在If-None-Match请求头中访问服务器，服务器判断Etag是否匹配，如果匹配，返回304状态码，从本地缓存中加载数据

35 set和map的对比

Map和对象类似，它们的区别在于：

• object的键只能是字符串过symbols，map的键是任意值
• map中的键值是有序的，object中的键不是
• map的键值对个数可以从size属性中获取，对象只能手动计算

Map对象的属性：size
Map对象的方法：

• has
• set
• get
• delete：删除对应的数据
• clear：清楚所有元素

遍历方法：

• map.keys()：返回键名
• map.values()：返回键值
• map.entires()：返回键值对

Set对象的方法：

• add
• delete
• has
• clear

36 阻止事件冒泡

target：触发事件的元素
currentTarget：事件绑定的元素

（1）使用event.stopPropagation
（2）判断target是否等于currentTarget

37 正则表达式

^：匹配首个字符
$：匹配结束字符
*：匹配一个表达式0次或多次
？：匹配前一个表达式0次或1次
{n}：刚好出现n次
\d：匹配一个数字
\D：匹配一个非数字
\w：匹配一个单字字符

38 比较一组版本号，将其从小到大排序

function sort(arr){
	let len=arr.length
	for(let i=0;i<len;i++){
		arr[i]=arr[i].split('.')
	}
	arr.sort((a,b)=>{
		return a[0]-b[0] || a[1]-b[1] || a[2]-b[2] 	
	})
	for(let i=0;i<len;i++){
		arr[i]=arr[i].join('.')	
	}
	return arr
}

39 给定正整数n，找到最少数量的完全平方数使得他们的和等于n

利用一个dp数组记录完全平方数和为i的最小数量

function sqrtNum(n){
	const dp=Array(n+1).fill(0)
	for(let i=1;i<=n;i++){
		dp[i]=i
		for(let j=1;i-j*j>=0;j++){
			dp[i]=Math.min(dp[i],dp[i-j*j]+1)
		}
	}
	return dp[n]
}

40 输入一个 long 类型的数值, 求该数值的8进制表示中的7的个数

function count(num){
	let str=num.toString(8)
	let count=0
	for (let s of str){
		if(s==='7'){
			count++	
		}
	}
	return count
}

41 不支持冒泡的事件

load、scroll、resize、blur、focus、mouseleave、mouseenter