Matrix 面试 - 前端篇

持续懵逼

Promise

所有为你而行的空幻梦想，都不及最后与你许的愿望。——《梦回还》

异步编程

JS有个很重要的部分叫异步编程，那么所以谓异步，大概可以通过这样一个例子说明：

一个网页，有文字，有图片，假定按照同步的方式来加载，那么就要等图片下载完了再加载内容，而如此一来，用户看到的就是一个空白了很久的网页突然弹出一堆东西，关键不在突然弹出，而在出现内容前的空白时间，用户一不耐烦给你关了，再花的网页都无用了（）。
那么就有一个解决方法，先把文字渲染上去，然后等图片传输完成再渲染图片，这样就有一种 99% 的感觉，用户就没那么容易跑了。这就是异步的思想。

回调

回调是一种早期的异步编程方式，但是由于其嵌套造成的“回调地狱”，现在基本已经不再使用，就不再赘述了。

期约

一个简单的 Promise 实例：

let p=new Promise((resolve, reject) =>{
    setTimeout(()=>{
        resolve('2');
    },2000);
})
console.log('1');
p.then((data)=>{
    console.log(data);
})

这段代码中定义了一个 Promise 对象 p，这个对象中的 setTimeout 会在 2 秒后调用 resolve 方法，resolve 方法一调用， p.then 就会执行，data 接的是 resolve() 传入的参数，这里是 ‘2’ 。

async/await

待更新…

xss注入

XSS ,也就是 Cross-Site Scripting 的缩写，意为跨站脚本。具体来说就是把恶意代码注入到网页中，用户一打开网页，恶意代码就执行了。常见的 XSS 漏洞类型有如下几种：

1. 反射/存储型 XSS
2. DOM 操作型 XSS

反射/存储型 XSS

反射型XSS通常是指恶意代码未被服务器存储，每次触发漏洞的时候都将恶意代码通过 GET/POST 方式提交，然后触发漏洞。

csrf 攻击

最近打 CTF 见着一个叫 ssrf 攻击的，这俩长挺像，就想着是不是一个 Client 一个 Server ，再一搜，发现还真。。。不是。
csrf 全称 Cross-site request forgery ，意为跨站请求伪造，而 ssrf 全称 Server-side request forgery ，意为服务器端请求伪造。

原生 JS 数据绑定和反射

待更新…

CSS 盒模型

看吧，就是像个盒子（逃

（图源菜鸟教程）
Margin 指外边距，Border 指边框，Padding 指内边距，Content 指内容。
然后没啥好解释了，实际上就是反复调整这几个部分的宽高，而且功夫不到家（像我这样）很容易被坑到，因为两个盒子之间可能会存在重叠。

行内元素和块级元素

表面上说比较突出的特点就是块级元素单独占一行或者几行，而行内元素不占独立区域。

块级元素

块级元素一般有下面几种：

<h1>~<h6>
<p>
<div>
<ul>
<ol>
<li>

块级元素的宽度默认是容器的 100% ，也就是说它的宽度和父元素的宽度一样。
里面也可以塞进行内元素和其他块级元素。

行内元素

行内元素又名内联元素，一般有下面几种：

<a>
<span>
<b>
<i>
<em>
<strong>
<small>
<del>

行内元素和相邻行内元素是在同一行上的，而且有个关键的特点——它是不能调宽高的，默认宽高就是内容的宽高。
但也不是完全定死，水平方向的 padding 和 margin 就是可调的。
行内元素里面只能放纯文本或者其他行内元素，而不能放块级元素。

行内块级元素

有这个玩意也是我始料未及的
所谓行内块级元素，本质也是行内元素，但不同的是它具有块级元素可调高度的特性，而且和相邻的行内元素在同一行的时候，中间会有空白间隙。
行内块级元素一般有下面几种：

<img/>
<input/>
<td/>

---

持续更新中…

参考

• 《JavaScript高级程序设计》（第4版）——Matt Frisbie[著]李松峰[译]
• 《从0到1：CTFer成长之路》——Nu1L战队[著]
• https://blog.csdn.net/qingyafan/article/details/52203663
• https://www.runoob.com/css/css-boxmodel.html
  https://blog.csdn.net/qq_34821198/article/details/91359274