关于前端:前端高频面试题一附答案

代码输入后果

(function(){var x = y = 1;})();
var z;

console.log(y); // 1
console.log(z); // undefined
console.log(x); // Uncaught ReferenceError: x is not defined
复制代码

这段代码的关键在于：var x = y = 1; 实际上这里是从右往左执行的，首先执行 y = 1, 因为 y 没有应用 var 申明，所以它是一个全局变量，而后第二步是将 y 赋值给 x，讲一个全局变量赋值给了一个局部变量，最终，x 是一个局部变量，y 是一个全局变量，所以打印 x 是报错。

DNS 协定是什么

概念：DNS 是域名零碎 (Domain Name System) 的缩写，提供的是一种主机名到 IP 地址的转换服务，就是咱们常说的域名零碎。它是一个由分层的 DNS 服务器组成的分布式数据库，是定义了主机如何查问这个分布式数据库的形式的应用层协定。可能使人更不便的拜访互联网，而不必去记住可能被机器间接读取的 IP 数串。

作用：将域名解析为 IP 地址，客户端向 DNS 服务器（DNS 服务器有本人的 IP 地址）发送域名查问申请，DNS 服务器告知客户机 Web 服务器的 IP 地址。

什么是作用域？

ES5 中只存在两种作用域：全局作用域和函数作用域。在 JavaScript 中，咱们将作用域定义为一套规定，这套规定用来治理引擎如何在以后作用域以及嵌套子作用域中依据标识符名称进行变量（变量名或者函数名）查找

为什么 0.1 + 0.2 != 0.3，请详述理由

因为 JS 采纳 IEEE 754 双精度版本（64 位），并且只有采纳 IEEE 754 的语言都有该问题。

咱们都晓得计算机示意十进制是采纳二进制示意的，所以 0.1 在二进制示意为

// (0011) 示意循环
0.1 = 2^-4 * 1.10011(0011)
复制代码

那么如何失去这个二进制的呢，咱们能够来演算下

小数算二进制和整数不同。乘法计算时，只计算小数位，整数位用作每一位的二进制，并且失去的第一位为最高位。所以咱们得出 0.1 = 2^-4 * 1.10011(0011)，那么 0.2 的演算也根本如上所示，只须要去掉第一步乘法，所以得出 0.2 = 2^-3 * 1.10011(0011)。

回来持续说 IEEE 754 双精度。六十四位中符号位占一位，整数位占十一位，其余五十二位都为小数位。因为 0.1 和 0.2 都是有限循环的二进制了，所以在小数位开端处须要判断是否进位（就和十进制的四舍五入一样）。

所以 2^-4 * 1.10011...001 进位后就变成了 2^-4 * 1.10011(0011 * 12 次)010。那么把这两个二进制加起来会得出 2^-2 * 1.0011(0011 * 11 次)0100 , 这个值算成十进制就是 0.30000000000000004

上面说一下原生解决办法，如下代码所示

parseFloat((0.1 + 0.2).toFixed(10))
复制代码

对 sticky 定位的了解

sticky 英文字面意思是粘贴，所以能够把它称之为粘性定位。语法：position: sticky; 基于用户的滚动地位来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出指标区域时，它的体现就像 position:fixed;，它会固定在指标地位。元素定位体现为在逾越特定阈值前为绝对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位失效。否则其行为与绝对定位雷同。

src 和 href 的区别

src 和 href 都是 用来援用内部的资源，它们的区别如下：

• src： 示意对资源的援用，它指向的内容会嵌入到以后标签所在的地位。src 会将其指向的资源下载并应⽤到⽂档内，如申请 js 脚本。当浏览器解析到该元素时，会暂停其余资源的下载和解决，直到将该资源加载、编译、执⾏结束，所以⼀般 js 脚本会放在页面底部。
• href： 示意超文本援用，它指向一些网络资源，建设和以后元素或本文档的链接关系。当浏览器辨认到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对以后⽂档的解决。罕用在 a、link 等标签上。

如何取得对象非原型链上的属性？

应用后 hasOwnProperty() 办法来判断属性是否属于原型链的属性：

function iterate(obj){var res=[];
   for(var key in obj){if(obj.hasOwnProperty(key))
           res.push(key+':'+obj[key]);
   }
   return res;
} 
复制代码

对媒体查问的了解？

媒体查问由⼀个可选的媒体类型和零个或多个使⽤媒体性能的限度了样式表范畴的表达式组成，例如宽度、⾼度和颜⾊。媒体查问，增加⾃ CSS3，容许内容的出现针对⼀个特定范畴的输出设备⽽进⾏裁剪，⽽不用扭转内容自身，适宜 web ⽹⻚应答不同型号的设施⽽做出对应的响应适配。

媒体查问蕴含⼀个可选的媒体类型和满⾜ CSS3 标准的条件下，蕴含零个或多个表达式，这些表达式形容了媒体特色，最终会被解析为 true 或 false。如果媒体查问中指定的媒体类型匹配展现⽂档所使⽤的设施类型，并且所有的表达式的值都是 true，那么该媒体查问的后果为 true。那么媒体查问内的款式将会⽣效。

<!-- link 元素中的 CSS 媒体查问 --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 
<!-- 样式表中的 CSS 媒体查问 --> 
<style> 
@media (max-width: 600px) {.facet_sidebar {     display: none;} }
</style>
复制代码

简略来说，应用 @media 查问，能够针对不同的媒体类型定义不同的款式。@media 能够针对不同的屏幕尺寸设置不同的款式，特地是须要设置设计响应式的页面，@media 是十分有用的。当重置浏览器大小的过程中，页面也会依据浏览器的宽度和高度从新渲染页面。

说一说什么是跨域，怎么解决

因为浏览器出于平安思考，有同源策略。也就是说，如果协定、域名或者端口有一个不同就是跨域，Ajax 申请会失败。为来避免 CSRF 攻打
1.JSONP
    JSONP 的原理很简略，就是利用 <script> 标签没有跨域限度的破绽。通过 <script> 标签指向一个须要拜访的地址并提供一个回调函数来接收数据当须要通信时。<script src="http://domain/api?param1=a&param2=b&callback=jsonp"></script>
    <script>
        function jsonp(data) {console.log(data)        }    </script>
    JSONP 应用简略且兼容性不错，然而只限于 get 申请。2.CORS
    CORS 须要浏览器和后端同时反对。IE 8 和 9 须要通过 XDomainRequest 来实现。3.document.domain
    该形式只能用于二级域名雷同的状况下，比方 a.test.com 和 b.test.com 实用于该形式。只须要给页面增加 document.domain = 'test.com' 示意二级域名都雷同就能够实现跨域
4.webpack 配置 proxyTable 设置开发环境跨域
5.nginx 代理跨域
6.iframe 跨域
7.postMessage
    这种形式通常用于获取嵌入页面中的第三方页面数据。一个页面发送音讯，另一个页面判断起源并接管音讯
复制代码

对 WebSocket 的了解

WebSocket 是 HTML5 提供的一种浏览器与服务器进行 全双工通信 的网络技术，属于应用层协定。它基于 TCP 传输协定，并复用 HTTP 的握手通道。浏览器和服务器只须要实现一次握手，两者之间就间接能够创立持久性的连贯，并进行双向数据传输。

WebSocket 的呈现就解决了半双工通信的弊病。它最大的特点是：服务器能够向客户端被动推动音讯，客户端也能够被动向服务器推送音讯。

WebSocket 原理：客户端向 WebSocket 服务器告诉（notify）一个带有所有接收者 ID（recipients IDs）的事件（event），服务器接管后立刻告诉所有沉闷的（active）客户端，只有 ID 在接收者 ID 序列中的客户端才会解决这个事件。
​

WebSocket 特点的如下：

• 反对双向通信，实时性更强
• 能够发送文本，也能够发送二进制数据‘’
• 建设在 TCP 协定之上，服务端的实现比拟容易
• 数据格式比拟轻量，性能开销小，通信高效
• 没有同源限度，客户端能够与任意服务器通信
• 协定标识符是 ws（如果加密，则为 wss），服务器网址就是 URL
• 与 HTTP 协定有着良好的兼容性。默认端口也是 80 和 443，并且握手阶段采纳 HTTP 协定，因而握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

Websocket 的应用办法如下： ​

在客户端中：

// 在 index.html 中间接写 WebSocket，设置服务端的端口号为 9999
let ws = new WebSocket('ws://localhost:9999');
// 在客户端与服务端建设连贯后触发
ws.onopen = function() {console.log("Connection open."); 
    ws.send('hello');
};
// 在服务端给客户端发来音讯的时候触发
ws.onmessage = function(res) {console.log(res);       // 打印的是 MessageEvent 对象
    console.log(res.data);  // 打印的是收到的音讯
};
// 在客户端与服务端建设敞开后触发
ws.onclose = function(evt) {console.log("Connection closed.");
}; 
复制代码

如何阻止事件冒泡

• 一般浏览器应用：event.stopPropagation()
• IE 浏览器应用：event.cancelBubble = true;

代码输入后果

 var a=3;
 function c(){alert(a);
 }
 (function(){
  var a=4;
  c();})();
复制代码

js 中变量的作用域链与定义时的环境无关，与执行时无关。执行环境只会扭转 this、传递的参数、全局变量等

实现一个扇形

用 CSS 实现扇形的思路和三角形基本一致，就是多了一个圆角的款式，实现一个 90°的扇形：

div{
    border: 100px solid transparent;
    width: 0;
    heigt: 0;
    border-radius: 100px;
    border-top-color: red;
}
复制代码

点击刷新按钮或者按 F5、按 Ctrl+F5（强制刷新）、地址栏回车有什么区别？

• 点击刷新按钮或者按 F5： 浏览器间接对本地的缓存文件过期，然而会带上 If-Modifed-Since，If-None-Match，这就意味着服务器会对文件查看新鲜度，返回后果可能是 304，也有可能是 200。
• 用户按 Ctrl+F5（强制刷新）： 浏览器不仅会对本地文件过期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前素来没有申请过，返回后果是 200。
• 地址栏回车：浏览器发动申请，依照失常流程，本地查看是否过期，而后服务器查看新鲜度，最初返回内容。

死锁产生的起因？如果解决死锁的问题？

所谓死锁，是指多个过程在运行过程中因抢夺资源而造成的一种僵局，当过程处于这种僵持状态时，若无外力作用，它们都将无奈再向前推动。

零碎中的资源能够分为两类：

• 可剥夺资源，是指某过程在取得这类资源后，该资源能够再被其余过程或零碎剥夺，CPU 和主存均属于可剥夺性资源；
• 不可剥夺资源，当零碎把这类资源分配给某过程后，再不能强行发出，只能在过程用完后自行开释，如磁带机、打印机等。

产生死锁的起因：

（1）竞争资源

• 产生死锁中的竞争资源之一指的是 竞争不可剥夺资源（例如：零碎中只有一台打印机，可供过程 P1 应用，假设 P1 已占用了打印机，若 P2 持续要求打印机打印将阻塞）
• 产生死锁中的竞争资源另外一种资源指的是 竞争长期资源（长期资源包含硬件中断、信号、音讯、缓冲区内的音讯等），通常音讯通信程序进行不当，则会产生死锁

（2）过程间推动程序非法

若 P1 放弃了资源 R1，P2 放弃了资源 R2，零碎处于不平安状态，因为这两个过程再向前推动，便可能产生死锁。例如，当 P1 运行到 P1：Request（R2）时，将因 R2 已被 P2 占用而阻塞；当 P2 运行到 P2：Request（R1）时，也将因 R1 已被 P1 占用而阻塞，于是产生过程死锁

产生死锁的必要条件：

• 互斥条件：过程要求对所调配的资源进行排它性管制，即在一段时间内某资源仅为一过程所占用。
• 申请和放弃条件：当过程因申请资源而阻塞时，对已取得的资源放弃不放。
• 不剥夺条件：过程已取得的资源在未应用完之前，不能剥夺，只能在应用完时由本人开释。
• 环路期待条件：在产生死锁时，必然存在一个过程——资源的环形链。

预防死锁的办法：

• 资源一次性调配：一次性调配所有资源，这样就不会再有申请了（毁坏申请条件）
• 只有有一个资源得不到调配，也不给这个过程调配其余的资源（毁坏请放弃条件）
• 可剥夺资源：即当某过程取得了局部资源，但得不到其它资源，则开释已占有的资源（毁坏不可剥夺条件）
• 资源有序调配法：零碎给每类资源赋予一个编号，每一个过程按编号递增的程序申请资源，开释则相同（毁坏环路期待条件）

个别如何产生闭包

• 返回函数
• 函数当做参数传递

深 / 浅拷贝

首先判断数据类型是否为对象，如果是对象（数组 | 对象），则递归（深 / 浅拷贝），否则间接拷贝。

function isObject(obj) {return typeof obj === "object" && obj !== null;}
复制代码

这个函数只能判断 obj 是否是对象，无奈判断其具体是数组还是对象。

script 标签中 defer 和 async 的区别

如果没有 defer 或 async 属性，浏览器会立刻加载并执行相应的脚本。它不会期待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

defer 和 async 属性都是去异步加载内部的 JS 脚本文件，它们都不会阻塞页面的解析，其区别如下：

• 执行程序： 多个带 async 属性的标签，不能保障加载的程序；多个带 defer 属性的标签，依照加载程序执行；
• 脚本是否并行执行：async 属性，示意 后续文档的加载和执行与 js 脚本的加载和执行是并行进行的 ，即异步执行；defer 属性，加载后续文档的过程和 js 脚本的加载(此时仅加载不执行) 是并行进行的(异步)，js 脚本须要等到文档所有元素解析实现之后才执行，DOMContentLoaded 事件触发执行之前。

Cookie 有哪些字段，作用别离是什么

Cookie 由以下字段组成：

• Name：cookie 的名称
• Value：cookie 的值，对于认证 cookie，value 值包含 web 服务器所提供的拜访令牌；
• Size：cookie 的大小
• Path：能够拜访此 cookie 的页面门路。比方 domain 是 abc.com，path 是 /test，那么只有/test 门路下的页面能够读取此 cookie。
• Secure：指定是否应用 HTTPS 平安协定发送 Cookie。应用 HTTPS 平安协定，能够爱护 Cookie 在浏览器和 Web 服务器间的传输过程中不被窃取和篡改。该办法也可用于 Web 站点的身份甄别，即在 HTTPS 的连贯建设阶段，浏览器会查看 Web 网站的 SSL 证书的有效性。然而基于兼容性的起因（比方有些网站应用自签订的证书）在检测到 SSL 证书有效时，浏览器并不会立刻终止用户的连贯申请，而是显示平安危险信息，用户仍能够抉择持续拜访该站点。
• Domain：能够拜访该 cookie 的域名，Cookie 机制并未遵循严格的同源策略，容许一个子域能够设置或获取其父域的 Cookie。当须要实现单点登录计划时，Cookie 的上述个性十分有用，然而也减少了 Cookie 受攻打的危险，比方攻击者能够借此动员会话定置攻打。因此，浏览器禁止在 Domain 属性中设置.org、.com 等通用顶级域名、以及在国家及地区顶级域下注册的二级域名，以减小攻打产生的范畴。
• HTTP：该字段蕴含 HTTPOnly 属性，该属性用来设置 cookie 是否通过脚本来拜访，默认为空，即能够通过脚本拜访。在客户端是不能通过 js 代码去设置一个 httpOnly 类型的 cookie 的，这种类型的 cookie 只能通过服务端来设置。该属性用于避免客户端脚本通过document.cookie 属性拜访 Cookie，有助于爱护 Cookie 不被跨站脚本攻打窃取或篡改。然而，HTTPOnly 的利用仍存在局限性，一些浏览器能够阻止客户端脚本对 Cookie 的读操作，但容许写操作；此外大多数浏览器仍容许通过 XMLHTTP 对象读取 HTTP 响应中的 Set-Cookie 头。
• Expires/Max-size：此 cookie 的超时工夫。若设置其值为一个工夫，那么当达到此工夫后，此 cookie 生效。不设置的话默认值是 Session，意思是 cookie 会和 session 一起生效。当浏览器敞开(不是浏览器标签页，而是整个浏览器) 后，此 cookie 生效。

总结： 服务器端能够应用 Set-Cookie 的响应头部来配置 cookie 信息。一条 cookie 包含了 5 个属性值 expires、domain、path、secure、HttpOnly。其中 expires 指定了 cookie 生效的工夫，domain 是域名、path 是门路，domain 和 path 一起限度了 cookie 可能被哪些 url 拜访。secure 规定了 cookie 只能在确保安全的状况下传输，HttpOnly 规定了这个 cookie 只能被服务器拜访，不能应用 js 脚本拜访。