『面试题』WEB前端经典面试整理（持续更新）【分类】
缓存、安全
浏览器最大并发量限制是多少个？及如何去突破这个限制？
浏览器最大并发量限制
浏览器的并发连接数是有限的，一般是4到6个，在10个以内。
如果你的网站打开加载的资源过多，一般可以用按需加载，分步延时加载等机制，但如果需要同时加载，我们可以把资源分布到不同的域名下。缺点是需要DNS解析更多的域名。
因为浏览器并发连接数限制是针对于同一个域名的。这样就实现了并发量的限制，例如一个域名的并发量是10，那么两个域名的并发量就是20。
在火狐浏览器中输入about:config，然后 输入network.http.max可以看到个服务器的最大持久连接
network.http.max-persistent-connections-per-server // 6
其它说明：针对浏览器最大并发量有限制，还有一个原因是HTTP/1.1的Keep alive，keep alive技术的存在使得浏览器复用现有连接和服务器通信比创建新连接的性能要更好一些。
什么是Keep-Alive模式？
我们知道HTTP协议采用“请求-应答”模式，当使用普通模式，即非KeepAlive模式时，每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）；当使用Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive功能避免了建立或者重新建立连接。
http 1.0中默认是关闭的，需要在http头加入"Connection: Keep-Alive"，才能启用Keep-Alive；http 1.1中默认启用Keep-Alive，如果加入"Connection: close "，才关闭。目前大部分浏览器都是用http1.1协议，也就是说默认都会发起Keep-Alive的连接请求了，所以是否能完成一个完整的Keep-Alive连接就看服务器设置情况。
其它参考：
说一下浏览器缓存
浏览器缓存分为强缓存和协商缓存，强缓存会直接从浏览器里面拿数据，协商缓存会先访问服务器看缓存是否过期，再决定是否从浏览器里面拿数据。 控制强缓存的字段有：Expires和Cache-Control
控制协商缓存的字段是：Last-Modified / If-Modified-Since 和 Etag / If-None-Match，其中 Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。
cookie 与 session 的区别
Session 是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中； Cookie 是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现 Session 的一种方式
浏览器如何做到 session 的功能的。
每次HTTP请求的时候，客户端都会发送相应的Cookie信息到服务端。实际上大多数的应用都是用 Cookie 来实现Session跟踪的，第一次创建Session的时候，服务端会在HTTP协议中告诉客户端，需要在 Cookie 里面记录一个Session ID，以后每次请求把这个会话ID发送到服务器，我就知道你是谁了。
解释一下：csrf 和 xss
XSS：恶意攻击者往 Web 页面里插入恶意 Script 代码，当用户浏览该页之时，嵌入其中 Web 里面的 Script 代码会被执行，从而达到恶意攻击用户的目的。
CSRF：CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。
JavaScript
数组去重的方法有哪些？
方法一：for...of + Object
利用对象的属性不能相同的特点进行去重，代码如下：
function distinct(a, b) { let arr = a.concat(b) let result = [] let obj = {} for (let i of arr) { if (!obj[i]) { result.push(i) obj[i] = 1 } } return result }
方法二：ES6的new Set()
Set数据结构，它类似于数组，其成员的值都是唯一的。
利用Array.from将Set结构转换成数组。
function distinct(a, b) { return Array.from(new Set([...a, ...b])) }
更多方法可参考：《JS实现数组去重方法整理》
怎样判断一个对象是否为数组？
let temporaryArray3 = [1,2,1,2,3]; console.log(temporaryArray3 instanceof Array); console.log(temporaryArray3.constructor == Array); console.log(Array.isArray(temporaryArray3)); console.log(Object.prototype.toString.call(temporaryArray3) === "[object Array]");
怎样判断一个对象是否为空？
方法一：将json对象转化成json字符串，然后进行判断是否等于字符串'{}'
let isObject = {}; console.log(JSON.stringify(isObject) === '{}'); // true
方法二：使用for...in，若不为空，则返回false
let isObject = {}; function isEmptyObject(obj) { for(let key in obj) { return false; } return true; } console.log(isEmptyObject(isObject)); // true
方法三：使用Object.keys()来判断，返回的是一个数组，根据数组长度来判断
function isEmptyObject2(obj) { return Object.keys(obj).length == 0; } console.log(isEmptyObject2(isObject));
方法四：对这个对象中一定存在的属性进行判断
console.log(isObject.id == null);
循环中使用闭包解决 `var` 定义函数的问题
如下代码：
for (var i = 1; i <= 5; i++) { setTimeout(function timer() { console.log(i) }, i * 1000) }
每次输出结果都是6，如下三种解决方式。
方法一：使用闭包
for (var i = 1; i <= 5; i++) { ;(function(j) { setTimeout(function timer() { console.log(j) }, j * 1000) })(i) }
方法二：使用 setTimeout的第三个参数，这个参数会被当成 timer 函数的参数传入
for (var i = 1; i <= 5; i++) { setTimeout( function timer(j) { console.log(j) }, i * 1000, i ) }
方式三：使用let定义变量i
for (let i = 1; i <= 5; i++) { setTimeout(function timer() { console.log(i) }, i * 1000) }
HTML相关
HTML实体的应用场景有哪些？
如果要在HTML文档中显示特殊字符（例如“<”、“>”等），那么就可以使用HTML实体。HTML实体还能预防XSS（跨站脚本攻击）攻击。XSS通常会将脚本代码注入到HTML文档中，再解析执行。但使用了HTML实体后，就可以让相关代码只打印，而不执行。
什么是Shadow DOM(影子中的DOM)？
Shadow DOM是浏览器的一种功能，能够自动添加子元素，例如audio元素（如下代码所示）在网页中能使用进度条、音量控制等功能，这些相关元素都是由浏览器自动生成。
<audio controls src="a.mp4"></audio>
元素属性src和href有何区别？
两者的功能不同。href能够建立一条通道，将当前文档和定义的资源连接起来。src是将定义的资源嵌入到当前文档中。
img元素中的title和alt属性有何区别？
title是全局属性，提供额外的提示信息，当鼠标滑动到该元素时，显示定义的提示。link和style元素中的title比较特殊，表示样式表的名称；alt是局部属性，仅可用在img、input等元素中，提供在图片未载入或加载失败时的替代文本。注意，只用当input元素的type属性为image时，才能使用alt属性。
其它
开发中遇到最大的难题是什么及如何去解决的？
答案：略
简单的项目选择使用 jQuery还是 vue？
答案：略
